/* ========================================================================== VEGAS DEL VERDE — planes.css · sección #planes «Planes por ocasión» Depende de tokens.css y base.css. No toca ninguno de los dos. El encargo de esta sección era explícito: los cinco carriles NO pueden maquetarse igual. Si los cinco fueran «galería + lista + botón», la repetición que le quitamos a la página se volvería a colar dentro de una sola sección. Así que cada carril tiene su propia rejilla: 01 fiesta foto grande arriba, texto y columna de tres debajo 02 familia texto primero y una tira de cuatro retratos que se arrastra 03 empresa dossier partido: retrato a un lado, par apaisado al otro 04 bienestar banda ancha + trío cuadrado, en negativo sobre bosque 05 talleres banda tipográfica entre filetes, sin una sola foto Ni un valor literal de color, tamaño, radio, sombra o duración: todo sale de tokens.css. Las únicas medidas escritas a mano son los filetes de 1 px —igual que en base.css— y las fracciones de rejilla, que no son tokens. REVISIÓN DE AGOSTO DE 2026 — LOS CINCO ANCHOS El reparto interno de arriba ya estaba bien, pero medido en pantalla los cinco carriles daban 1200 px de ancho y x = 113 EXACTAMENTE IGUALES: cinco losas del mismo tamaño una encima de otra. Por dentro cambiaban; por fuera eran el mismo rectángulo cinco veces, y eso es lo que se lee como página generada. A partir de --planes-paso (§1 bis) cada carril declara su propia caja y se alternan los bordes: izquierda, derecha, izquierda, derecha, izquierda. Ninguno empieza donde acaba el anterior. REVISIÓN v4 «ORGÁNICA» — LA FORMA Y EL ANCLA Quedaba lo que ni el reparto interno ni los anchos podían arreglar: · LAS TRECE FOTOS COMPARTÍAN SILUETA. Iban todas a esquina viva. Da igual que una sea 16:9 y otra un retrato: trece rectángulos rectos son trece veces la misma forma, y la forma es lo primero que se lee de una fotografía. Ahora el contorno es una VARIABLE por carril (§8) y ninguno repite el del carril de encima: canto blando y sangrado en el 01, arcos en el 02, hojas encontradas en el 03, círculos en el 04. · NO HABÍA DÓNDE PARAR LA VISTA. Los cinco carriles abrían con un rótulo de 13 px. El índice —que ya era «el hilo que enhebra los cinco»— sube a cifra de display y se pone encima de su etiqueta (§2): es el ancla con la que empieza cada carril y lo que hace que se lean como capítulos. · Y CADA UNO ENTRA DE UNA MANERA (los modificadores de .reveal viajan en el HTML): el 01 desde la izquierda, que es por donde su foto se sale; el 02 desde la derecha, que es por donde se sale su tira; el 03 con zoom; el 04 con velo; el 05 recto. El motor sigue siendo el de base.css: aquí no se escribe ni una línea de animación de entrada. Ni un valor literal nuevo: los contornos salen de la escala de radios de tokens.css y las duraciones, de la de movimiento. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LA PILA DE CARRILES Aire generoso entre carriles: cada uno es una unidad de lectura completa, y si se tocan se leen como una lista de tarjetas, que es justo lo que no queremos que parezcan. -------------------------------------------------------------------------- */ .planes__carriles { display: flex; flex-direction: column; gap: var(--esp-3xl); } .planes-carril { display: grid; gap: var(--gap); } /* -------------------------------------------------------------------------- 1 bis. LAS DOS MEDIDAS DE LA SECCIÓN -------------------------------------------------------------------------- */ /* --planes-sangrado — cuánto hay que retroceder para SALIRSE del contenedor y llegar al borde de la ventana. Es el ancho del padding del contenedor más, si la ventana es más ancha que el contenedor, la mitad de lo que sobra. Se calcula sin un solo porcentaje a propósito: los porcentajes dentro de una variable se resuelven en el elemento que la USA, y esta variable la usan hijos de rejilla cuyo bloque contenedor es su celda y no la sección. En vw sale un valor único y estable para todos. Por encima de 1280 px el cálculo se pasa por el ancho de la barra de desplazamiento (7-8 px, porque 100vw la incluye y el área de maquetación no). Es sangrado: el sobrante cae fuera de la ventana y lo recorta el `overflow-x: hidden` del body, así que no abre scroll horizontal. --planes-paso — el paso de una retícula de doce columnas medida sobre el contenedor: una columna más un --gap. Con él, «entrar dos columnas» o «ocupar ocho de doce» son medidas reales y no porcentajes a ojo, y los cinco carriles caen sobre la misma retícula que #espacios. Su `100%` SÓLO vale en los
  • de .planes__carriles, que miden lo que el contenedor; no lo uses más adentro. */ .planes { /* El sobrante de los dos sangrados se recorta AQUÍ, en la sección, y no se deja caer al body. `clip` y no `hidden` a propósito: `hidden` convertiría la sección en un contenedor de scroll —y con ello rompería el `scroll-margin-top` de las anclas y el `position: sticky` de cualquier cosa que se meta dentro—, mientras que `clip` sólo recorta. Al ir sobre el eje X y dejar el Y en visible, la animación de entrada (que desplaza 28 px en vertical) sigue funcionando. Sin esta línea, la tira del carril 02 sacaba 8 px fuera del área de maquetación a 1440 px: los 100vw del cálculo del sangrado incluyen la barra de desplazamiento y el área de maquetación no. */ overflow-x: clip; --planes-margen-libre: max( 0px, (100vw - var(--ancho-contenedor) - var(--padding-contenedor) * 2) / 2 ); --planes-sangrado: calc( (var(--padding-contenedor) + var(--planes-margen-libre)) * -1 ); --planes-paso: calc((100% - var(--gap) * 11) / 12 + var(--gap)); } /* EL REVELADO BAJA DE 900 A 550 ms. No se toca ningún token global: se redefine --dur-reveal para esta sección con otro token que ya existe (--dur-lenta), y como --transicion-reveal se resuelve en el elemento que la usa, los cinco carriles heredan la duración corta sin tocar base.css. 900 ms es una entrada que se nota; a 550 el contenido ya está ahí cuando el ojo llega. Va dentro de `no-preference` para no pisar el 1 ms que tokens.css pone en `reduce`: si alguien pidió menos movimiento, manda su ajuste. */ @media (prefers-reduced-motion: no-preference) { .planes { --dur-reveal: var(--dur-lenta); } } /* -------------------------------------------------------------------------- 2. PIEZAS COMUNES A LOS CINCO Lo único que comparten los carriles es la voz: micro-etiqueta con índice, titular, párrafo, línea de «dónde» y botón. La disposición cambia siempre. -------------------------------------------------------------------------- */ .planes-carril__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-sm); } /* Micro-etiqueta: uno de los pocos sitios donde el caps sigue permitido (§3 del contrato). Nunca crece de tamaño: es una etiqueta, no un título. v4: deja de ir en línea con el índice y BAJA debajo de él. La etiqueta conserva exactamente su cuerpo, su peso y su tracking; lo que cambia es que ya no comparte renglón con una cifra que ahora la triplica en altura. El texto de la ocasión es un nodo suelto dentro del

    —«Bodas y conciertos» al lado del del índice—, así que en columna se coloca solo como segundo ítem flexible y no hizo falta envolverlo en nada. */ .planes-carril__ocasion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3xs); margin: 0; font-family: var(--fuente-titulo); font-size: var(--fs-micro); font-weight: var(--peso-medio); line-height: var(--alto-linea-titulo); text-transform: uppercase; /* v3: --tracking-rotulo, el único tracking de caps del sistema. */ letter-spacing: var(--tracking-rotulo); color: var(--color-texto-suave); } .seccion--oscura .planes-carril__ocasion { color: var(--color-texto-inverso-suave); } /* EL ÍNDICE, DE HILO A ANCLA. Era el hilo que enhebraba los cinco carriles cuando ya no se parecen en nada más, pero a --fs-pequeno (13 px) ese hilo no se veía: la vista entraba a cada carril por la foto y el orden de lectura se perdía. A --paso-4 es lo primero que se fija, y los cinco números convierten la pila en capítulos. POR QUÉ EN --peso-display Y NO EN --peso-fuerte El contrato manda --peso-fuerte en las CIFRAS «para que el dato no se desvanezca», y esto no es un dato: es un ordinal. A 46 px, el 320 de Fraunces da el trazo fino editorial que el contrato pide para el display grande, y el 600 lo convertiría en un número de precio. La legibilidad no sufre: 5.3:1 sobre crema con texto muy por encima del umbral de «grande», donde AA sólo exige 3:1. EL COLOR SE QUEDA EN CÁLIDO. Es la excepción del §4 del contrato —terracota para .cifra sobre claro— y aquí se gasta a conciencia: son cinco piezas en toda la sección, no un color repartido. Sobre el bloque de bienestar invierte a coral claro, que es la pareja ya medida (5.7:1 sobre bosque). */ .planes-carril__indice { font-family: var(--fuente-display); font-size: var(--paso-4); font-weight: var(--peso-display); font-optical-sizing: auto; font-variation-settings: var(--ejes-display); /* El índice es display, así que abre con --tracking-display. */ letter-spacing: var(--tracking-display); line-height: var(--alto-linea-apretado); color: var(--color-acento-texto); } .seccion--oscura .planes-carril__indice { color: var(--color-acento-inverso); } .planes-carril__copy { margin: 0; max-width: var(--medida); } .planes-carril__donde { margin: 0; } /* base.css invierte .entradilla sobre fondo oscuro, pero NO .nota: su gris verdoso (#4f5f53) sobre bosque se queda en 2:1 y no se lee. El carril de bienestar es el único en negativo, así que la corrección vive aquí. */ .seccion--oscura .planes-carril__donde { color: var(--color-texto-inverso-suave); } .planes-carril__cta { margin-top: var(--esp-2xs); } /* -------------------------------------------------------------------------- 3. CARRIL 01 · BODAS Y CONCIERTOS La imagen manda: la carpa iluminada al lado del texto, y debajo un mosaico de tres a dos columnas con el retrato de la ceremonia haciendo de columna alta. Es el carril más ruidoso porque es el plan más ruidoso. Primera versión medida: la foto grande iba a todo lo ancho (790 px de alto sobre 1185) y la columna de tres al lado del texto sumaba 1265 px contra 326 px de texto. El carril entero medía 2088 px y el texto flotaba en un hueco. Con la foto en columna la fila queda en 460 px y el mosaico en 846. -------------------------------------------------------------------------- */ .planes-fiesta__tira { display: grid; grid-template-columns: 1fr; gap: var(--gap-sm); align-content: start; } /* LA FOTO A SANGRE POR LA IZQUIERDA. El carril más ruidoso es el único que se sale del contenedor, y se sale por el lado por el que se entra a leer. Sólo la figura: el texto, el mosaico y el botón se quedan en la columna, así que la página no pierde su margen izquierdo —lo pierde una foto, que es distinto—. Va sobre la FIGURA y no sobre el

  • para que el mosaico de tres que baja debajo vuelva a alinear con el resto de la sección sin compensar nada. Desde 768: por debajo de ahí el margen del contenedor son 18 px y salirse no es un gesto, es un descuadre. */ @media (min-width: 48em) { .planes-fiesta__principal { margin-inline-start: var(--planes-sangrado); } } /* La foto y el texto sólo se ponen en paralelo a partir de 1024 px. A 768 la columna de texto se quedaba en 276 px —siete palabras por línea y el rótulo del botón partido en dos— así que hasta ahí van apilados. */ @media (min-width: 64em) { .planes-carril--fiesta { grid-template-columns: 3fr 2fr; align-items: start; } .planes-fiesta__principal { grid-column: 1; grid-row: 1; } .planes-fiesta__texto { grid-column: 2; grid-row: 1; padding-top: var(--esp-2xs); } /* El mosaico baja a fila propia y cruza las dos columnas. Sólo aquí: por debajo de 1024 el carril es de una columna y forzar la fila 2 lo montaría encima del texto. */ .planes-fiesta__tira { grid-column: 1 / -1; grid-row: 2; } } @media (min-width: 48em) { /* Dos columnas en el mosaico: el retrato de la ceremonia ocupa las dos filas y las dos apaisadas se apilan al lado. Así ninguna foto tiene que recortarse contra su orientación natural. */ .planes-fiesta__tira { grid-template-columns: 1fr 1fr; } .planes-fiesta__tira > :first-child { grid-row: span 2; aspect-ratio: auto; } /* La foto alta se saca del flujo. Si no, es ella la que fija el alto de las dos filas —1031 px medidos— en vez de acomodarse a las dos apaisadas de al lado, y el mosaico crece 190 px de la nada. */ .planes-fiesta__tira > :first-child > img { position: absolute; inset: 0; } } /* -------------------------------------------------------------------------- 4. CARRIL 02 · CUMPLEAÑOS Y FAMILIA Aquí el texto va delante y las fotos hacen de tira: en móvil se arrastra con el dedo y se engancha foto a foto; a partir de tableta se despliega en cuatro columnas. Se anula el arrastre si el usuario pidió menos movimiento. -------------------------------------------------------------------------- */ .planes-tira { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: var(--gap-sm); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; /* que la sombra del foco no se recorte contra el borde del carrusel */ padding-block: var(--esp-3xs); } .planes-tira__foto { scroll-snap-align: start; } @media (min-width: 48em) { /* v4 · LA TIRA DEJA DE SER UNA REJILLA DE CUATRO IGUALES. Era `repeat(4, 1fr)` con las cuatro fotos en 4:5 y arrancando en la misma línea: cuatro retratos clonados, el ejemplo de manual de lo que el dueño llama genérico. Ahora las columnas son desiguales, cada foto tiene su proporción y las pares bajan un escalón. Sigue siendo una tira —se lee de izquierda a derecha y en el mismo orden— pero con el pulso de una hilera de árboles y no el de una hoja de contactos. Las fracciones no son tokens (no las hay para eso) y están permitidas por el contrato, igual que los porcentajes y los `fr`. */ .planes-tira { grid-auto-flow: row; grid-template-columns: 1fr 1.22fr 0.92fr 1.12fr; align-items: start; overflow-x: visible; scroll-snap-type: none; } .planes-tira__foto:nth-child(1) { aspect-ratio: 4 / 5; } .planes-tira__foto:nth-child(2) { aspect-ratio: 3 / 4; } .planes-tira__foto:nth-child(3) { aspect-ratio: 5 / 6; } .planes-tira__foto:nth-child(4) { aspect-ratio: 2 / 3; } /* El escalonado: las dos pares bajan, y bajan distinto. Mismo recurso y misma escala de espaciado que los desfases de #espacios, para que las dos secciones se lean como la misma mano. */ .planes-tira__foto:nth-child(2) { margin-block-start: var(--esp-lg); } .planes-tira__foto:nth-child(4) { margin-block-start: var(--esp-md); } /* La caja del carril 02, al revés que la del 01: el texto ENTRA una columna por la izquierda y la tira SALE por la derecha. Dos gestos opuestos en dos carriles seguidos es lo que impide que la pila coja cadencia. El texto en doce columnas y no en un `max-width` suelto: así la sangría coincide con la retícula de #espacios y no es un número a ojo. */ .planes-carril--familia { grid-template-columns: repeat(12, 1fr); } .planes-carril--familia .planes-carril__texto { grid-column: 2 / span 7; } .planes-carril--familia .planes-tira { grid-column: 1 / -1; margin-inline-end: var(--planes-sangrado); } } /* -------------------------------------------------------------------------- 5. CARRIL 03 · EMPRESAS Dossier partido: el retrato del grupo a un lado y el par apaisado del montaje al otro. Ni tira ni galería: dos bloques de peso distinto. El orden se invierte respecto al carril 01 —fotos primero, texto después— para que la página no coja cadencia. -------------------------------------------------------------------------- */ .planes-dossier { display: grid; gap: var(--gap-sm); } .planes-dossier__retrato { aspect-ratio: 3 / 4; } .planes-dossier__par { display: grid; gap: var(--gap-sm); align-content: space-between; } @media (min-width: 40em) { .planes-dossier { grid-template-columns: 3fr 4fr; align-items: stretch; } .planes-dossier__retrato { aspect-ratio: auto; } } /* La caja del 03: pega a la izquierda y se queda a DOS COLUMNAS del borde derecho. Es el carril más callado de los tres claros, y la manera de decirlo sin tocar ni una palabra es que no llegue al final del renglón. Diez columnas de doce = diez pasos menos el gap sobrante del último. */ @media (min-width: 48em) { .planes-carril--empresa { max-width: calc(var(--planes-paso) * 10 - var(--gap)); } } @media (min-width: 64em) { .planes-carril--empresa { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--gap-lg); } } /* -------------------------------------------------------------------------- 6. CARRIL 04 · BIENESTAR El único en negativo. La clase .seccion--oscura viaja en el
  • del HTML, así que los colores inversos (titulares, entradilla, enlaces, viñetas de .lista-hojas, foco amarillo) los pone base.css con sus contrastes ya medidos. Aquí sólo se resuelven caja y rejilla. POR QUÉ SIGUE EN VERDE BOSQUE Y NO PASA A .seccion--carbon-suave (v3) El ritmo de la página es crema · crema · crema · crema · CARBÓN (#momentos) · salvia · crema · crema · salvia, y #momentos entra inmediatamente después de #planes. Este carril es el penúltimo de los cinco: entre su bloque oscuro y la banda de carbón sólo media el carril 05, que es una banda tipográfica de tres líneas. Pasarlo a carbón suave (#333) pondría dos rectángulos gris neutro casi idénticos a un scroll corto el uno del otro y la banda de #momentos dejaría de ser una pausa para ser la segunda de dos. El verde bosque, en cambio, es el negativo DE MARCA —el mismo del pie de sitio— y se lee como otra cosa: un bloque dentro de una sección clara, no una banda de sección. Un registro cada uno, y ninguno se repite pegado. El carril 05, que es el que cierra #planes y toca con #momentos, va en claro: la banda oscura no se duplica en el empalme. -------------------------------------------------------------------------- */ .planes-carril--bienestar { /* v3 lo dejó a esquina viva con este argumento: con --radio-xl en las cuatro esquinas era «una pastilla verde de 36 px dentro de una página que ya no redondea nada», la forma más blanda del sitio. El argumento era correcto entonces y deja de serlo en v4, cuando las trece fotos de la sección y las cinco de #espacios llevan contorno: ahora el rectángulo recto es lo que se sale del sistema. Vuelve el radio, pero ASIMÉTRICO —dos esquinas abiertas y dos cerradas—, que es la diferencia entre una pastilla y una hoja. La diagonal blanda va de arriba-izquierda a abajo-derecha, la misma por la que el bloque entra en la página desde el margen. */ border-radius: var(--radio-xl) var(--radio-md) var(--radio-xl) var(--radio-md); /* Textura: el verde deja de ser plano. base.css pinta el fondo con --color-fondo-oscuro y aquí se le monta encima un degradado a la versión honda del mismo verde, la del pie de sitio. Los dos extremos son tokens y los dos sostienen el texto en crema por encima de 10:1, así que el contraste no depende de por dónde caiga la letra. */ background-image: linear-gradient( 152deg, var(--verde-bosque) 0%, var(--verde-bosque-hondo) 100% ); padding: var(--gap); gap: var(--gap); } /* La caja del 04: espejo de la del 03. ENTRA dos columnas por la izquierda y pega a la derecha, así que entre el bloque claro de arriba y el verde de abajo hay un quiebro y no una arista compartida. Y de paso refuerza lo que dice la nota larga de aquí arriba: esto es un BLOQUE dentro de una sección clara, no una banda de sección —una banda iría de borde a borde, y ésta deja ver la crema por el lado por el que se empieza a leer—. */ @media (min-width: 48em) { .planes-carril--bienestar { margin-inline-start: calc(var(--planes-paso) * 2); padding: var(--gap-lg); } } .planes-bienestar__cuerpo { display: grid; gap: var(--gap); align-items: start; } @media (min-width: 64em) { .planes-bienestar__cuerpo { grid-template-columns: 3fr 2fr; gap: var(--gap-lg); } } .planes-bienestar__lista { margin: 0; } /* El trío va en cuadrados —a propósito, para que no se confunda con los retratos de la tira del carril 02— y en colcha: uno ancho arriba y dos pequeños debajo. En columna de tres medía 1245 px contra 550 de texto; así se queda en unos 600 y las dos mitades del carril se equilibran. */ .planes-bienestar__trio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); align-content: start; } .planes-bienestar__trio > :first-child { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- 7. CARRIL 05 · TALLERES Sin galería, a conciencia: no hay en el banco ninguna foto de un taller de pintura o de jardinería, y el contrato prohíbe tanto inventar un nombre de archivo como dejar un placeholder gris. Así que este carril se compone con tipografía, y su rareza —ser el único sin fotografía— es lo que corta la cadencia al final. -------------------------------------------------------------------------- */ /* v4 · DE DOS FILETES A UNA TABLILLA. El recurso de las guardas —una banda entre dos rayas de 1 px— era correcto de tipografía y flojo de forma: en una sección donde todo lo demás tiene contorno, dos rayas rectas leen como el hueco donde iba una foto. Pasa a ser una tablilla con lavado de oliva y contorno de hoja, con la punta ARRIBA A LA DERECHA: es la única de la sección que abre por ese lado, así que el colofón sigue siendo la pieza rara que corta la cadencia, pero ahora lo es por su forma y no por su ausencia. El lavado está al 7 %: sobre él, el gris de .planes-talleres__copy conserva 6.0:1 y el filete del enlace su contraste de contorno. No lo subas sin volver a medir los dos. */ .planes-carril--talleres { position: relative; overflow: hidden; justify-items: start; gap: var(--esp-sm); padding: var(--gap) var(--esp-md); border-radius: var(--radio-md) var(--radio-xl) var(--radio-md) var(--radio-xl); background-color: rgb(var(--verde-oliva-rgb) / 0.07); } @media (min-width: 48em) { .planes-carril--talleres { padding: var(--gap-lg) var(--esp-xl); } } /* El brote decorativo ocupa el sitio de la fotografía que este carril no tiene. Va detrás del texto —--z-fondo— y a una opacidad de textura, no de ilustración. `pointer-events: none` para que no se coma el clic del CTA si algún día crece. */ .planes-talleres__brote { position: absolute; z-index: var(--z-fondo); inset-block-start: calc(var(--esp-lg) * -1); inset-inline-end: calc(var(--esp-md) * -1); width: clamp(8rem, 22vw, 16rem); height: auto; color: rgb(var(--verde-oliva-rgb) / 0.16); pointer-events: none; } /* Todo lo que es contenido va por delante del brote. Se hace con el hermano general y no elemento a elemento para que un párrafo nuevo no se cuele detrás del adorno el día que alguien lo añada. */ .planes-carril--talleres > :not(.planes-talleres__brote) { position: relative; z-index: var(--z-base); } /* La caja del 05: vuelve a pegar a la izquierda —la página tiene que recuperar su margen antes de que entre #momentos— pero ocupa sólo OCHO de las doce columnas. La tablilla se acorta con ella, y una tablilla que no llega al borde es exactamente lo que distingue un colofón de una banda de sección. */ @media (min-width: 48em) { .planes-carril--talleres { max-width: calc(var(--planes-paso) * 8 - var(--gap)); } } /* Sin una sola foto, lo único que puede pesar es la letra. El titular sube un escalón de la escala —de --fs-h3 (--paso-2) a --paso-3— y se queda uno por debajo del --fs-h2 del titular de la sección, que sigue mandando. Es el contraste de escala que en los otros cuatro carriles hace la fotografía. */ .planes-talleres__titulo { font-size: var(--paso-3); max-width: var(--medida-corta); } /* Los tres talleres se leen como un verso, no como un inventario. En móvil bajan a una línea por taller y SIN separador: un punto medio al principio de renglón se lee como un error de maquetación. A partir de tableta se ponen en fila y el punto medio aparece entre uno y otro. */ .planes-talleres__lista { display: flex; flex-direction: column; gap: var(--esp-2xs); margin: 0; font-size: var(--fs-grande); font-weight: var(--peso-ligero); line-height: var(--alto-linea-titulo); color: var(--color-texto); } @media (min-width: 48em) { .planes-talleres__lista { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--esp-md); row-gap: var(--esp-2xs); } .planes-talleres__lista > li + li::before { content: "·"; margin-inline-end: var(--esp-md); color: var(--color-acento-texto); } } .planes-talleres__copy { color: var(--color-texto-suave); } /* -------------------------------------------------------------------------- 8. LAS SILUETAS DE LAS TRECE FOTOS -------------------------------------------------------------------------- HISTORIA DE ESTE BLOQUE, porque va por la tercera vuelta y conviene que la cuarta no repita ninguna de las dos primeras: v2 `border-radius: var(--radio-md)` en los trece .marco. Un redondeo suave, igual en todos: el redondeo de plantilla. v3 `border-radius: 0` en los trece, para alinearse con el .marco a esquina viva de base.css. Trece rectángulos idénticos de recorte. v4 UNA SILUETA POR CARRIL. Ni el mismo radio en todas ni ninguno: cada carril recorta con una forma que dice algo de lo que enseña, y ninguna repite la del carril de encima. Reglas que cumplen todas, y que son lo que las separa del redondeo de plantilla de v2: · ninguna lleva los cuatro radios iguales salvo los dos círculos, que son una forma y no un redondeo; · todos los valores salen de la escala de radios de tokens.css; · el `overflow: hidden` de .marco (base.css) recorta la foto contra el contorno, así que el zoom del hover no reaparece por las esquinas. El selector (0,2,0) de la base sigue siendo el punto único por el que se revierte todo esto de una vez, igual que en v3. -------------------------------------------------------------------------- */ .planes .marco { border-radius: var(--radio-lg); } /* ---- 01 fiesta · canto blando --------------------------------------------- La foto grande de la carpa se sale del contenedor por la izquierda a partir de 768 px: sus esquinas izquierdas se ponen a cero, porque una esquina redondeada en el borde de la ventana se lee como una foto mal pegada y no como una foto que sangra. Por debajo de 768 no sangra, y las cuatro van redondeadas. NOTA DE PESO para todo el §8: varios selectores llevan el modificador del carril delante y no es adorno. La base de arriba es `.planes .marco` (0,2,0), y una clase suelta como `.planes-fiesta__principal` (0,1,0) no la gana: la foto se quedaría con el --radio-lg de reserva. Con el carril delante todos empatan a (0,2,0) y decide el orden del archivo. Si añades una silueta nueva, cópiale la forma del selector a éstas. */ .planes-carril--fiesta .planes-fiesta__principal { border-radius: var(--radio-xl) var(--radio-lg) var(--radio-xl) var(--radio-lg); } @media (min-width: 48em) { .planes-carril--fiesta .planes-fiesta__principal { border-radius: 0 var(--radio-xl) var(--radio-xl) 0; } } /* El mosaico de tres: el retrato alto de la ceremonia va en hoja y las dos apaisadas llevan un vértice vivo cada una, en esquinas opuestas, para que no se lean como un par. */ .planes-fiesta__tira > :nth-child(1) { border-radius: var(--radio-xl) var(--radio-xs) var(--radio-xl) var(--radio-xs); } .planes-fiesta__tira > :nth-child(2) { border-radius: var(--radio-lg) var(--radio-lg) var(--radio-xs) var(--radio-lg); } .planes-fiesta__tira > :nth-child(3) { border-radius: var(--radio-xs) var(--radio-lg) var(--radio-lg) var(--radio-lg); } /* ---- 02 familia · la hilera de arcos -------------------------------------- Las dos esquinas de arriba al 50 % dan un medio punto: cuatro arcos en fila. Es un motivo, no una rejilla —una arcada de jardín—, y sostiene la repetición justamente porque las cuatro columnas ya son desiguales, cada foto tiene su proporción y las pares bajan un escalón (§4). Si alguien devuelve la tira a `repeat(4, 1fr)`, hay que quitar los arcos en el mismo movimiento: cuatro arcos idénticos y alineados sí serían una plantilla. El 50 % no es un capricho frente a --radio-full: cuando los radios de un lado suman más que ese lado, la norma reduce TODOS los radios de la caja por el mismo factor, y con --radio-full arriba el --radio-md de abajo se desploma a una fracción de píxel. Al 50 % el lado de arriba suma justo el ancho, el factor es 1 y el pie del arco conserva su radio. (Los círculos del carril 04 sí van con --radio-full: allí los cuatro radios son iguales y la reducción uniforme es exactamente lo que se busca.) */ .planes-carril--familia .planes-tira__foto { border-radius: 50% 50% var(--radio-md) var(--radio-md); } /* ---- 03 empresa · dos hojas encontradas ----------------------------------- El retrato del grupo abre por la diagonal contraria a la del par apaisado: puestas una al lado de la otra, las puntas se miran. */ .planes-carril--empresa .planes-dossier__retrato { border-radius: var(--radio-xs) var(--radio-xl) var(--radio-xs) var(--radio-xl); } .planes-dossier__par > :nth-child(1) { border-radius: var(--radio-xl) var(--radio-xs) var(--radio-xl) var(--radio-xs); } .planes-dossier__par > :nth-child(2) { border-radius: var(--radio-md) var(--radio-lg) var(--radio-md) var(--radio-lg); } /* ---- 04 bienestar · la banda y los dos círculos --------------------------- La banda de 16:9 abre por arriba y cierra suave por abajo, siguiendo el contorno del bloque verde que la contiene. Los dos cuadrados pequeños del trío pasan a CÍRCULOS. Es la única forma completamente regular de las dos secciones, y está puesta donde el contenido la pide: las tres fotos son gente sentada en corro sobre el césped, y el círculo es literalmente lo que enseñan. Son también lo único que distingue de un vistazo este carril de la tira de retratos del 02. La foto ancha de arriba NO se redondea del todo: tres círculos serían un trío de iconos, y esto es una colcha. */ .planes-carril--bienestar > .marco { border-radius: var(--radio-lg) var(--radio-lg) var(--radio-md) var(--radio-md); } .planes-bienestar__trio > :first-child { border-radius: var(--radio-xl); } .planes-bienestar__trio > :nth-child(2), .planes-bienestar__trio > :nth-child(3) { border-radius: var(--radio-full); } /* -------------------------------------------------------------------------- 9. RETOQUES FINOS -------------------------------------------------------------------------- */ /* El zoom al pasar el ratón sí se conserva, y sólo en las fotos que están dentro de una rejilla, para que la foto grande del carril 01 no baile sola. */ .planes-fiesta__tira .marco:hover > img, .planes-tira .marco:hover > img, .planes-dossier .marco:hover > img, .planes-bienestar__trio .marco:hover > img { transform: scale(var(--escala-hover)); } @media (prefers-reduced-motion: reduce) { .planes-tira { scroll-snap-type: none; } }