/* The Lab Room · El spa. 21 de septiembre de 2026. Bloque 1: héroe, presentación y los dos bloques de foto y texto. Las medidas son las de https://rowse.co/pages/the-greenhouse-madrid, tomadas con getComputedStyle el 21 de septiembre y escritas en `research/rowse-greenhouse/specs/01..04`. Cada número de abajo sale de ahí. Los colores y las familias son los de esta casa (`piezas.css`), no los suyos. Comportamiento: en Rowse NO hay revelados al hacer scroll, ni parallax, ni nada pegajoso dentro de la página (BEHAVIORS.md, comprobado recorriéndola entera). Solo los botones invierten color en .3s. Aquí igual: esta página no usa `.reveal` ni los botones magnéticos de portada, a propósito. Su margen lateral son 48 px fijos hasta 749 px, donde pasa a 16, más estrecho que el `--pad` de la casa (72 px a 1440). No es una fórmula elástica: a 768 ellos siguen en 48 y la tarjeta mide 328. Se respeta con `--spa-pad`. */ .tlr-spa{--spa-pad:48px} .tlr-spa .wrap{max-width:1440px;padding-inline:var(--spa-pad)} /* ---------- botones ---------- Geometría de Rowse (47 px de alto, 14/30 de relleno, 12,7 px, un espacio de letra, radio de 8 px, versal y giro de color en .3s) con los colores de la casa: el principal en salvia sobre tinta, que es el que aprobó la clienta en agosto, y el del héroe en hueso sobre foto. */ .spa-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center; min-height:47px;min-width:122px;padding:14px 30px; font-family:var(--sans);font-size:12.7px;line-height:15.24px;letter-spacing:1px; text-transform:uppercase;font-weight:500;border-radius:8px;cursor:pointer; background:var(--eucalyptus);color:var(--ink);border:1px solid var(--eucalyptus); transition:color .3s,background-color .3s,border-color .3s,transform .5s cubic-bezier(.22,1,.36,1)} .spa-btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)} .spa-btn--claro{background:var(--bone);color:var(--ink);border-color:var(--bone)} .spa-btn--claro:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)} /* ---------- héroe (ficha 01) ---------- Dos paneles a pantalla completa, sin canal entre ellos. En Rowse cada panel mide 100vh; aquí se descuentan los 38 px de la barra de aviso, igual que `.hero` de portada, para que el segundo panel no quede cortado por abajo. */ .spa-hero{display:flex;flex-wrap:wrap} .spa-hero__panel{position:relative;width:50%;height:calc(100svh - 38px);min-height:600px;overflow:hidden} .spa-hero__panel--foto{background:var(--ink)} .spa-hero__panel--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* El botón, abajo y centrado: 80 px de relleno más 15 de margen inferior dejan su base a 95 px del borde, que es lo medido en Rowse. */ .spa-hero__pie{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center; padding:80px 48px;pointer-events:none} .spa-hero__pie .spa-btn{margin-bottom:15px;pointer-events:auto} /* Eucalipto, el verde que esta casa usó hasta el 13 de agosto. Medido: el salvia claro está en luminancia 0,645 y dejaba el panel casi tan claro como la cabecera blanca, con lo que el héroe no empezaba en ningún sitio. El eucalipto está en 0,301, que es justo donde tiene el suyo la referencia (0,308). El logotipo va en hueso; el rótulo pequeño, en tinta, porque el hueso sobre este verde mide 2,99:1 y no llega al mínimo para letra chica (en tinta mide 5,82:1). */ .spa-hero__panel--rotulo{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1.1rem;background:#8A9A82} /* En Rowse el rótulo ocupa ~410 px de los 720 del panel (57 %). */ .spa-hero__logo{width:min(57%,420px);height:auto} .spa-hero__sub{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--ink)} /* ---------- rejilla de tratamientos (ficha 05) ---------- Tres columnas en flexible, no en rejilla: `max-width:calc(33.33% - 10.6667px)` con hueco de 8 px entre filas y 16 entre columnas, que es lo que mide Rowse. Así la última fila, si va sola, mantiene el ancho de tarjeta en vez de estirarse. */ .spa-rejilla__titulo{font-family:var(--serif);font-weight:400;font-size:24px;line-height:30px; color:var(--ink);margin:50px 0 30px} .spa-cartas{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:16px 0 0;padding:0} .spa-cartas > li{flex:1 0 auto;max-width:calc(33.33% - 10.6667px);width:calc(33.33% - 10.6667px)} .spa-carta{display:block;color:inherit;text-decoration:none} .spa-carta__foto{position:relative;padding-bottom:100%;overflow:hidden;background:rgba(27,26,23,.1)} .spa-carta__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .4s} .spa-carta:hover .spa-carta__foto img{transform:scale(1.03)} /* En Rowse el rótulo va COCIDO en el PNG, sobre una foto en blanco y negro con la parte de abajo oscurecida. Aquí las fotos son nuestras y van en color, así que el rótulo es texto de verdad y el oscurecido lo pone este degradado. Sin él, el blanco no se lee sobre las fotos claras (la crema, la espuma, la manzanilla): medido sobre la propia página, no a ojo. 5 oct: con las fotos otra vez en color, Wellbeing Total Experience (la manzanilla casi blanca y el nombre en tres líneas) medía 2,98:1 a 1440 y 3,11:1 a 390 en el peor píxel, por debajo de 4,5. La parada de .68 pasa del 26 % al 34 % de la altura y sube a .72 (maqueta `24-spa-color`, degradado-min.css); el resto sigue igual. */ .spa-carta__foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(27,26,23,.88) 0%,rgba(27,26,23,.72) 34%,rgba(27,26,23,.2) 48%,rgba(27,26,23,0) 66%)} /* Sitios del rótulo, en fracciones de la tarjeta, como los mide la ficha: sangrado izquierdo 6,7 %, última línea a 7,6 % del borde de abajo. */ .spa-carta__rotulo{position:absolute;left:6.7%;right:6.7%;bottom:7.6%;z-index:2; display:flex;flex-direction:column;color:var(--bone)} .spa-carta__eti{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase; font-weight:500;margin-bottom:.55rem} .spa-carta__marca,.spa-carta__nom{font-family:var(--serif);font-weight:400; font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;letter-spacing:-.01em} .spa-carta__info{padding:20px} .spa-carta__info h3{font-family:var(--serif);font-weight:400;font-size:18px;line-height:22.5px; color:var(--ink);margin:0} .spa-carta__claves{font-size:16px;line-height:24px;color:var(--ink);margin:10px 0 0} .spa-carta__claves em{font-style:italic} /* ---------- 989 px hacia abajo: dos columnas (ficha 05) ---------- */ @media (max-width:989px){ .spa-rejilla__titulo{margin:30px 0 20px} .spa-cartas > li{max-width:calc(50% - 8px);width:calc(50% - 8px)} } /* ---------- 749 px hacia abajo ---------- El héroe se apila (47vh cada panel) y la rejilla pasa a una columna. */ @media (max-width:749px){ .tlr-spa{--spa-pad:16px} .spa-hero__panel{width:100%;height:47vh;min-height:0} .spa-hero__pie{padding:48px 16px} .spa-hero__logo{width:min(70%,320px)} /* Una columna, huecos de 4 y 8, y el resto de tamaños del móvil. */ .spa-rejilla__titulo{font-size:20px;line-height:25px} .spa-cartas{gap:4px 8px;margin-top:15px} .spa-cartas > li{max-width:100%;width:100%} .spa-carta__info h3{font-size:17px;line-height:21.25px} .spa-carta__claves{font-size:15px;line-height:22.5px} } /* ---------- prensa (ficha 07) ---------- Una cita centrada cada vez, con puntos debajo. En Rowse el carrusel es Flickity y lleva cinco estrellas en todas las diapositivas; las estrellas no están aquí porque no hay ninguna puntuación real detrás. */ /* 50 px por encima (40 en móvil): en Rowse hay una sección vacía entre la rejilla y la prensa cuyos márgenes se suman a los de esta. La sección vacía no se copia; el hueco sí. */ .spa-prensa{padding:40px 0;margin-top:50px} .spa-prensa__visor{overflow:hidden;cursor:grab;touch-action:pan-y} .spa-prensa__visor:active{cursor:grabbing} .spa-prensa__cinta{display:flex;transition:transform .78s cubic-bezier(.16,1,.3,1)} /* La diapositiva ocupa el 100 % del visor: el desplazamiento va en porcentaje del contenedor, así que si la caja midiera 860 (el ancho de la tarjeta en Rowse) el salto no cuadraría y se vería la siguiente por la derecha. El tope de 860 va por dentro, en el contenido, como hacen ellos. */ .spa-prensa__cita{flex:0 0 100%;width:100%;padding:0 20px;text-align:center} .spa-prensa__cita > *{max-width:860px;margin-left:auto;margin-right:auto} .spa-prensa__medio{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; font-weight:500;color:var(--ink-soft);margin:0 0 20px} .spa-prensa__sello{width:120px;height:auto;margin:0 auto 20px} .spa-prensa__txt{font-family:var(--serif);font-size:18px;line-height:32.4px;color:var(--ink); max-width:700px;margin:0 auto} .spa-prensa__puntos{display:flex;justify-content:center;gap:8px;list-style:none;margin:32px 0 0;padding:0} .spa-punto{width:8px;height:8px;padding:0;border:1px solid var(--ink);border-radius:50%; background:transparent;cursor:pointer} .spa-punto.es-actual{background:var(--ink)} @media (max-width:749px){ .spa-prensa{margin-top:40px} .spa-prensa__txt{font-size:16px;line-height:28.8px} } /* ---------- animaciones ---------- La referencia no tiene ninguna, pero esta web sí: portada y Nuestra historia revelan al entrar en pantalla, sacan los titulares letra a letra y llevan botones magnéticos. Se usan las MISMAS clases de `piezas.css` (`.reveal`, `.char`, `.word`, `.line-mask`), no unas nuevas, para que el movimiento sea el mismo en todo el sitio. Todo cuelga de `.js`, así que sin JavaScript la página se ve entera y quieta. Regla de la casa: un solo efecto por elemento. El titular que sale letra a letra NO lleva además `.reveal`. */ /* Héroe: la foto entra con un acercamiento lento y el rótulo sube. */ @keyframes spa-foto-entra{from{transform:scale(1.08)}to{transform:none}} @keyframes spa-sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .js .spa-hero__panel--foto img{animation:spa-foto-entra 2.4s cubic-bezier(.22,1,.36,1) both} .js .spa-hero__logo{animation:spa-sube 1s cubic-bezier(.22,1,.36,1) .25s both} .js .spa-hero__sub{animation:spa-sube 1s cubic-bezier(.22,1,.36,1) .42s both} /* La entrada va en el CONTENEDOR del botón, no en el botón: una animación pisa el `transform` en línea, y el botón magnético escribe justo ahí. */ .js .spa-hero__pie{animation:spa-sube 1s cubic-bezier(.22,1,.36,1) .6s both} /* Bloques de foto y texto: la foto se acerca un punto mientras entra. */ .js .spa-a__foto.reveal{opacity:0} .js .spa-a__foto.reveal img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.22,1,.36,1)} .js .spa-a__foto.reveal.in{opacity:1} .js .spa-a__foto.reveal.in img{transform:none} /* Tarjetas: entran en cascada, pero por FILAS, no de una en una: con catorce tarjetas, un escalón por tarjeta dejaría la última casi un segundo y medio después de la primera. El escalón lo pone el guion según la columna. */ .js .spa-cartas > li.reveal{opacity:0;transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .js .spa-cartas > li.reveal.in{opacity:1;transform:none} /* 5 oct: la presentación ya no lleva los dos filetes negros que se trazaban de izquierda a derecha. Sus cuatro piezas entran con `.reveal`, como el texto de los bloques de más abajo (piezas.css), y el escalón lo pone el guion. */ @media (prefers-reduced-motion:reduce){ .js .spa-hero__panel--foto img,.js .spa-hero__logo,.js .spa-hero__sub, .js .spa-hero__pie{animation:none} .js .spa-a__foto.reveal,.js .spa-a__foto.reveal img,.js .spa-ap__img,.js .spa-ap__txt, .js .spa-cartas > li.reveal{opacity:1;transform:none;transition:none} } /* 17 oct (punto 23): tarjetas regalo DESPUÉS de la rejilla, y ya no como banda gris a toda anchura con la frase de titular ("ni así"). Una tarjeta con las esquinas redondeadas, el texto a la izquierda y la foto a sangre a la derecha, más baja que la banda de antes. Iba en tinta y Dani la pidió menos oscura: eucalipto de la casa con texto y botones en tinta. La foto, por altura de la tarjeta en escritorio y por padding-bottom en el móvil (nunca aspect-ratio, que con min-height ensancha la foto). */ .spa-regalo{margin-top:50px} .spa-regalo__tarjeta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--eucalyptus);color:var(--ink); border-radius:12px;overflow:hidden;min-height:clamp(380px,34vw,480px)} .spa-regalo__texto{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start; padding:clamp(40px,5vw,72px)} .spa-regalo__titulo{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.2vw,3.8rem);line-height:1; letter-spacing:-.015em;color:var(--ink);margin:0} .spa-regalo__frase{font-size:17px;line-height:26px;color:var(--ink);max-width:36ch;margin:20px 0 32px} .spa-regalo__btns{display:flex;flex-wrap:wrap;gap:12px} /* Sobre eucalipto, el .spa-btn de siempre (eucalipto) no se vería: el principal va en tinta y gira a hueso; el de línea, en tinta y se rellena. */ .spa-btn--tinta{background:var(--ink);color:var(--bone);border-color:var(--ink)} .spa-btn--tinta:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)} .spa-btn--linea-tinta{background:transparent;color:var(--ink);border-color:var(--ink)} .spa-btn--linea-tinta:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)} .spa-regalo__foto{position:relative;min-width:0;background:rgba(27,26,23,.06)} .spa-regalo__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%} .js .spa-regalo__tarjeta.reveal{opacity:0;transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .js .spa-regalo__tarjeta.reveal.in{opacity:1;transform:none} @media (max-width:749px){ .spa-regalo{margin-top:40px} .spa-regalo__tarjeta{grid-template-columns:minmax(0,1fr);min-height:0} .spa-regalo__foto{order:-1;padding-bottom:72%} .spa-regalo__texto{padding:28px 20px 32px} .spa-regalo__frase{font-size:15px;line-height:22.5px;margin:14px 0 24px} .spa-regalo__btns{flex-direction:column;width:100%} .spa-regalo__btns .spa-btn{width:100%} } @media (prefers-reduced-motion:reduce){ .js .spa-regalo__tarjeta.reveal{opacity:1;transform:none;transition:none} } /* ========================================================================== 18 oct: tipografía A (Oak), elegida por Dani para el spa y toda la web (maqueta d17t, opción A). Zodiak LIGERA solo en títulos; texto corrido en Archivo 300 a 14,5 con interlineado amplio en tinta suave; etiquetas con la misma voz que TIENDA / NOSOTROS del pie. Los tokens viven en design-system.css; el valor de reserva es el mismo por si no cargara. ========================================================================== */ .spa-eti{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em); text-transform:uppercase;color:var(--ink);margin:0} .spa-tit{font-family:var(--serif);font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(34px,3.3vw,46px); line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin:0;text-transform:none} .spa-txt{font:var(--tlr-t-cuerpo,300 14.5px/1.75 var(--sans));letter-spacing:.02em;color:var(--ink-soft);margin:0} .spa-txt a{color:inherit;text-decoration:none} /* Enlace de acción secundario: voz de etiqueta subrayada. */ .spa-enlace{display:inline-block;font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em); text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px; transition:color .3s,border-color .3s} .spa-enlace:hover{color:var(--verde-texto);border-color:var(--verde-texto)} /* Botón principal compacto en tinta; el claro va sobre la foto. */ .spa-btn-c{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:44px; font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase; background:var(--ink);color:var(--bone);border:1px solid var(--ink);border-radius:4px;padding:13px 28px;text-decoration:none; transition:background-color .3s,color .3s,border-color .3s} .spa-btn-c--claro{background:var(--bone);color:var(--ink);border-color:var(--bone)} /* Hover solo con ratón: en el móvil, tras pulsar el botón que baja, el estado se quedaba pegado y el botón de la carta salía hueco. */ @media (hover:hover){ .spa-btn-c:hover{background:transparent;color:var(--ink)} .spa-btn-c--claro:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)} } /* Filas con filete fino: etiqueta a la izquierda, dato pequeño a la derecha. */ .spa-filas{list-style:none;margin:0;padding:0;border-top:1px solid rgba(27,26,23,.2)} .spa-filas li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 24px;align-items:baseline;padding:20px 0; border-bottom:1px solid rgba(27,26,23,.2)} .spa-filas--ancha li{grid-template-columns:220px minmax(0,1fr)} /* ---------- apertura: la fachada con "El Spa" y el botón que baja ---------- */ .spa-ap.spa-hero{display:block} .spa-ap__foto{position:relative;height:calc(100svh - 118px);min-height:520px;overflow:hidden;background:var(--ink)} .spa-ap__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block} .spa-ap__velo{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(27,26,23,0) 38%,rgba(27,26,23,.62) 100%)} .spa-ap__txt{position:absolute;left:0;right:0;bottom:64px;display:flex;flex-direction:column;align-items:center;gap:18px; text-align:center;padding:0 16px} .spa-ap__txt .spa-eti{color:var(--bone)} .tlr-spa h1.spa-ap__titulo{font-family:var(--serif);font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(64px,8vw,120px); line-height:.95;letter-spacing:-.012em;color:var(--bone);margin:0;text-transform:none} .spa-ap__carta{padding:72px var(--spa-pad) 64px;scroll-margin-top:80px} .spa-ap__rej{max-width:1344px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(48px,6vw,96px);align-items:start} /* Carta C1 (18 oct): a la izquierda la presentación que antes iba aparte. */ .spa-ap__intro{display:flex;flex-direction:column;gap:24px;min-width:0} .spa-ap__intro .spa-tit{max-width:14ch} .spa-ap__intro .spa-tit em{font-style:italic;font-weight:301} .spa-ap__credo{max-width:44ch} .spa-ap__credo em{font-style:italic} .spa-ap__ideas{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0;padding:0} .spa-ap__ideas li{display:flex;align-items:center} /* El punto va DETRÁS de cada idea: delante, al partir la línea en el móvil, abría la segunda. */ .spa-ap__ideas li:not(:last-child)::after{content:"·";margin:0 .7em} .spa-ap__carta .spa-txt{color:var(--ink)} .spa-ap__carta .spa-btn-c{margin-top:40px} .js .spa-ap__img{animation:spa-foto-entra 2.4s cubic-bezier(.22,1,.36,1) both} .js .spa-ap__txt{animation:spa-sube 1s cubic-bezier(.22,1,.36,1) .5s both} /* ---------- Rituales y Brow Bar: mitades a sangre, foto y texto ---------- */ .spa-a__rej{display:grid;grid-template-columns:1fr 1fr;min-height:680px} .spa-a--rev .spa-a__foto{order:2} .spa-a__foto{position:relative;min-height:100%;overflow:hidden;background:rgba(27,26,23,.1)} .spa-a__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .spa-a__txt{display:flex;flex-direction:column;justify-content:center;padding:80px clamp(48px,7vw,120px);min-width:0} .spa-a__txt > *{max-width:520px} .spa-a__txt .spa-tit{margin:14px 0 24px} .spa-a__txt .spa-txt{max-width:46ch} .spa-a__txt .spa-filas{margin-top:4px;width:100%} .spa-a__cierre{font-family:var(--serif);font-style:italic;font-weight:301;font-size:20px;line-height:1.4;color:var(--ink);margin:28px 0 0} .spa-a__txt .spa-enlace{margin-top:36px;align-self:flex-start} /* ---------- Dónde y horario ---------- */ .spa-banda{background:var(--eucalyptus);color:var(--ink);margin-top:25px} .spa-banda__rej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start;padding-block:72px} .spa-banda__logo{width:210px;height:auto;margin-top:4px} .spa-banda__col{border-top:1px solid rgba(27,26,23,.3);padding-top:18px} .spa-banda__col .spa-txt{margin-top:10px;color:var(--ink)} @media (max-width:749px){ .spa-ap__foto{min-height:0} .spa-ap__img{object-position:50% 60%} .spa-ap__txt{bottom:40px} .tlr-spa h1.spa-ap__titulo{font-size:72px} .spa-ap__carta{padding:44px 16px 48px;scroll-margin-top:66px} .spa-ap__rej{grid-template-columns:minmax(0,1fr);gap:28px} /* Con las dos clases: la regla de .spa-filas li de más abajo pesa lo mismo y ganaría por orden. */ .spa-filas.spa-filas--ancha li{grid-template-columns:minmax(0,1fr)} .spa-ap__carta .spa-btn-c{width:100%} .spa-a__rej{grid-template-columns:minmax(0,1fr);min-height:0} .spa-a--rev .spa-a__foto{order:0} /* Cuadrada por padding-bottom: aspect-ratio con min-height ensancha. */ .spa-a__foto{min-height:0;padding-bottom:100%} .spa-a__txt{padding:44px 16px 56px} .spa-filas li{grid-template-columns:104px minmax(0,1fr);gap:4px 16px;padding:16px 0} .spa-banda__rej{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:56px} } /* ---------- clases que comparte la página de reserva ---------- 18 oct: reserva-template.php (no es de este bloque) usa el bloque de foto y texto (.spa-ft__*) y la banda de dirección antigua (.spa-banda__fila/__cols). El spa ya no las usa, pero aquí siguen para reserva: la maquetación es la de siempre, calcada del 17; solo cambia la tipografía, a la A. */ .spa-ft__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:30px} .spa-ft__foto{position:relative;padding-bottom:100%;min-height:100%;overflow:hidden;background:rgba(27,26,23,.1)} .spa-ft__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .spa-ft__texto{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px} .spa-ft__texto h2{font-family:var(--serif);font-weight:var(--tlr-t-titulo-peso,300);font-size:30px;line-height:1.15; letter-spacing:-.01em;color:var(--ink);margin:0} .spa-ft__cuerpo p{font:var(--tlr-t-cuerpo,300 14.5px/1.75 var(--sans));letter-spacing:.02em;color:var(--ink-soft);margin:12px 0 10px} .spa-ft__texto .spa-btn{margin:20px 0 15px} .spa-banda__fila{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:75px} .spa-banda__cols{display:flex;justify-content:space-between;gap:30px;max-width:600px;flex:1;text-align:center} .spa-banda__cols > div{flex:1} .spa-banda__cols p{font:var(--tlr-t-cuerpo,300 14.5px/1.75 var(--sans));letter-spacing:.02em;color:var(--ink);margin:0} .spa-banda__cols p.spa-banda__tit{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em); text-transform:uppercase;margin:0 0 10px} .spa-banda__cols a{color:inherit;text-decoration:none} @media (max-width:749px){ .spa-ft__rejilla{grid-template-columns:1fr} .spa-ft__texto h2{font-size:26px} .spa-banda__fila{flex-direction:column;padding-block:60px} .spa-banda__cols{flex-direction:column;width:100%;max-width:none;gap:30px} } /* ---------- 18 oct: el resto del spa, también en tipografía A ---------- Dani pidió la A en toda la web. Aquí SOLO letra (familia, peso, tamaño, espacio de letra y el gris del texto corrido): ni maquetación ni colores de fondo. Va al final para pisar las reglas de arriba, también las del móvil. Volver: quitar este bloque (respaldo .bak-d6-20261018). */ .spa-btn{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em)} .spa-prensa__medio{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans)); letter-spacing:var(--tlr-t-etiqueta-ls,.16em);color:var(--ink)} .spa-rejilla__titulo{font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(34px,3.3vw,46px); line-height:1.08;letter-spacing:-.012em} .spa-carta__marca,.spa-carta__nom,.spa-prensa__txt, .spa-regalo__titulo{font-weight:var(--tlr-t-titulo-peso,300)} .spa-carta__eti{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em)} .spa-carta__info h3{font:var(--tlr-t-etiqueta,600 11.5px/1.3 var(--sans));letter-spacing:var(--tlr-t-etiqueta-ls,.16em); text-transform:uppercase} .spa-carta__claves{font:var(--tlr-t-cuerpo,300 14.5px/1.75 var(--sans));letter-spacing:.02em;color:var(--ink-soft)} .spa-carta__claves em{font-style:italic} .spa-regalo__frase{font:var(--tlr-t-cuerpo,300 14.5px/1.75 var(--sans));letter-spacing:.02em}