/* ========================================================================== LAMUSICAL — Propuesta D · UNIFICADA Construida sobre el feedback de Lorena (reunión 31/07): · "profesionalidad + componente artístico creativo fuerte + confianza" · "limpieza visual y orden, no todo colorines" · "que todo esté conectado de manera más orgánica" · "las formas onduladas tienen que tener predominancia: mi logo es ondulado" · las imágenes no deben chocar con ángulos rectos dentro del conjunto Estructura y sobriedad de A · la onda de C convertida en sistema. Sin recortes ovalados: la foto sigue siendo rectangular, lo que ondula es el BORDE por donde se encuentra con la siguiente sección. Todos los colores verificados contra WCAG AA. ========================================================================== */ @import url("ondas.css"); /* --onda-linea, --onda-relleno, --onda-borde */ @font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-v12-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Sarabun";src:url("../fonts/sarabun-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Sarabun";src:url("../fonts/sarabun-v16-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Sarabun";src:url("../fonts/sarabun-v16-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* Tipografías del dossier que Lorena envía a colegios. Chau Philomene One es la suya y está en Google Fonts: se usa tal cual. Lilita One ocupa el papel de DONGTAO, que es de pago y necesitaría licencia de webfont aparte. Sustituible en una línea. */ @font-face{font-family:"Chau Philomene One";src:url("../fonts/chau-philomene-one-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Lilita One";src:url("../fonts/lilita-one-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Grandstander";src:url("../fonts/grandstander-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{ color-scheme:light; --ground:#F9F9F9; --surface:#FFFFFF; --wash:#F6F2EC; /* blanco cálido: neutro general de sección */ --rule:#E4E0D8; --ink:#1F1E1D; /* 15.81:1 */ --ink-2:#4A443B; /* 9.14:1 */ --ink-3:#6B6459; /* 5.55:1 */ --brand:#E84C3D; --action:#DB2B1A; /* 4.56:1 — el rojo accesible para texto */ --edu:#FA9848; --edu-ink:#904304; --edu-0:#FEF4EB; /* 4,54:1 sobre #FCC598 */ /* Familias tiene color propio: el rosa, que NO está en la paleta ampliada (cinco columnas: rojo, naranja, verde, azul, tinta). Se toma de sus propios carteles, donde el tono dominante es #F68AAE, y la tinta es ese mismo tono oscurecido hasta cumplir contraste, no un magenta aparte. El coral #E84C3D NO es el color de Familias sino el de LAMUSICAL. */ --fam:#F68AAE; --fam-ink:#B70E46; --fam-0:#F9E5EC; --fam-1:#F9C8DA; /* 4,52:1 sobre #F9C8DA */ --may:#2BAB87; --may-ink:#19654F; --may-0:#F0FAF7; /* 4,50:1 sobre #9FDCCC */ --emp:#3577A1; --emp-ink:#275877; --emp-0:#F1F6F9; /* 4,51:1 sobre #AFCBDC */ /* TINTA CLARA de cada línea — la que se usa SOBRE EL NEGRO. Las tintas normales (--*-ink) están oscurecidas para cumplir sobre fondos claros; sobre el negro del pie y de la franja de llamada a la acción desaparecen. Estas son su reflejo: mismo tono, aclarado hasta cumplir. Sin ellas, el antetítulo de la CTA iba con un naranja fijo y todas las líneas se veían de color Educación. */ --edu-luz:#FBB174; /* 9,08:1 sobre --ink */ --fam-luz:#F68AAE; /* 7,19:1 */ --may-luz:#6FD3B6; /* 9,16:1 */ --emp-luz:#8FC0DC; /* 8,43:1 */ /* MANCHA de cada línea: el círculo de color que cruza el borde de la sección. Va un escalón por debajo del fondo --sec-* que la acompaña, lo justo para que se lea el círculo sin convertirlo en un segundo bloque. */ --edu-mancha:#FBC79B; --fam-mancha:#F5A8C6; --may-mancha:#7FCEBA; --emp-mancha:#93B8CE; /* FONDOS DE SECCIÓN — tonos intermedios de la paleta, con presencia real. El wash anterior daba 1.09:1 sobre el fondo: no se percibía el cambio. Estos rondan 1.5:1 y mantienen el texto en negro por encima de 9:1. */ --sec-coral:#F4B9AB; /* 1.61:1 · familia del rojo de marca */ --sec-coral-0:#F8D4CA; /* 1.31:1 · coral lavado, para secciones largas de texto */ --sec-menta:#9FDCCC; /* 1.47:1 · familia del verde */ --sec-arena:#FCC598; /* 1.47:1 · familia del naranja */ --sec-arena-0:#FDDEC4; /* 1.21:1 · versión suave: el naranja pasa a acento */ --sec-cielo:#AFCBDC; /* 1.61:1 · familia del azul */ --sec-rosa:#F9C8DA; /* 1.39:1 · familia del rosa */ /* Neutro de sección, blanco cálido. Casi no contrasta con el fondo de página (1,06:1) y no hace falta: quien marca el corte son las manchas que cruzan el borde, no el propio fondo. */ --arena-suave:var(--wash); /* alias histórico */ /* Opacidad de la cuña de color. La foto va en multiply encima, así que al bajarla el tinte se aclara y se ve más fotografía debajo. */ --cuna-op:.68; --rule-tarjeta:#DDD6C9; /* borde algo más presente: sobre blanco cálido la tarjeta blanca se funde sin él */ /* Sistema tipográfico de Lorena: --alegre titulares grandes (papel de DONGTAO) --display títulos de actividad, antetítulos, botones (suya, Chau Philomene) --body texto (suya, Sarabun) */ --alegre:"Lilita One","Chau Philomene One",Impact,sans-serif; --display:"Chau Philomene One","Barlow Condensed",Impact,sans-serif; --body:"Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif; --s--1:clamp(.85rem,.82rem + .14vw,.92rem); --s-0:clamp(1.0625rem,1.02rem + .22vw,1.1875rem); --s-1:clamp(1.2rem,1.12rem + .38vw,1.45rem); --s-2:clamp(1.55rem,1.36rem + .92vw,2.25rem); --s-3:clamp(2rem,1.66rem + 1.7vw,3.4rem); --s-4:clamp(2.6rem,1.95rem + 3.2vw,5rem); /* Marca de verificación de las listas .checks. Va aquí y no en ondas.css porque el final de aquel fichero lo reescribe scripts/cunas.py. */ --tick:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M2%209.5%207%2014%2016%204%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); /* Alto de la banda del corte ondulado. Estaba repetido literal en .corte, en .hero-onda y en .hero-marca; ahora hay además quien tiene que colocarse RESPECTO a la onda —el icono de línea— y con el número suelto en cuatro sitios el primer retoque los descuadra. */ --onda-h:clamp(34px,5vw,80px); /* Alto de la cabecera pegajosa, MEDIDO sobre la página y no calculado: lo fija el logo, que es una imagen de tamaño dado. Lo necesita cualquier cosa que se ancle con position:sticky, que si no se mete por debajo. */ --head-h:70px; --gutter:clamp(1.25rem,4vw,2.5rem); --wide:1260px; --measure:63ch; --r:10px; /* radio contenido: suave, NO orgánico */ } *,*::before,*::after{box-sizing:border-box} /* Anclas. La cabecera es pegajosa, así que un salto a #algo deja el titular escondido debajo. scroll-margin-top se lo descuenta al destino, y así no hace falta JavaScript midiendo la altura del
en cada clic. Con reducción de movimiento, el salto es seco: nadie ha pedido un viaje. */ html{scroll-behavior:smooth} :target{scroll-margin-top:6.5rem} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body); font-size:var(--s-0);line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{max-width:100%;height:auto;display:block} a{color:var(--action);text-underline-offset:.18em} a:hover{color:var(--ink)} :focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400;line-height:1.06} h1,h2{font-family:var(--alegre);letter-spacing:.005em} /* la voz simpática */ h3,h4{font-family:var(--display);font-weight:400} /* títulos de actividad */ h1{font-size:var(--s-4)} h2{font-size:var(--s-3)} h3{font-size:var(--s-2)} p{margin:0} .prose{max-width:var(--measure);display:flex;flex-direction:column;gap:1.05em} .lead{font-size:var(--s-1);color:var(--ink-2);line-height:1.55} .shell{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)} .shell--narrow{max-width:750px} section{padding-block:clamp(3rem,6.5vw,5.5rem)} .stack{display:flex;flex-direction:column;gap:clamp(1.3rem,2.6vw,2.1rem)} .stack--tight{gap:.9rem} /* Antetítulo con la onda como firma — la marca es ondulada. Usa la variante MINI: la onda grande tiene demasiados ciclos y a este tamaño se aplasta hasta desaparecer. */ .eyebrow{font-family:var(--display);font-weight:700;font-size:var(--s--1); letter-spacing:.14em;text-transform:uppercase;color:var(--ci,var(--ink-3));margin:0; display:flex;align-items:center;gap:.8rem} .eyebrow::after{content:"";flex:0 0 2.6rem;height:1.05em;background-color:currentColor; -webkit-mask:var(--onda-mini) no-repeat center/100% 100%; mask:var(--onda-mini) no-repeat center/100% 100%} /* Antetítulo que además sea enlace: se queda del color de los demás y avisa de que se puede pulsar con el subrayado, en vez de irse al rojo de los enlaces. El antetítulo es un rótulo y su trabajo es marcar el ritmo de las secciones; uno solo de otro color rompe la serie. Hoy no lo usa nadie —la cuenta de Instagram acabó en el botón de seguir—, pero la regla se queda porque la decisión vale para el siguiente que aparezca. */ .eyebrow a{color:inherit;text-decoration:underline;text-decoration-thickness:1px} .eyebrow a:hover{color:var(--action);text-decoration-thickness:2px} /* ---------- SOBRE FONDO DE COLOR ---------------------------------------- Tres tokens dejan de cumplir contraste cuando la sección va coloreada. Se reajustan aquí en vez de tocarlos globalmente: · antetítulo #6B6459 daba 3,44:1 sobre el coral · enlaces #DB2B1A daba 2,83:1 sobre el coral · reglas #E4E0D8 era invisible (1,2:1) */ .sobre-color{ --ink-3:#4A443B; /* 5,67:1 sobre coral */ --action:#A12013; /* 4,53:1 sobre coral · 7,30:1 sobre el fondo claro */ --rule:rgba(31,30,29,.28); } /* ---------- EL CORTE ONDULADO ------------------------------------------- REGLA DEL SISTEMA: la onda se reserva para los cortes DONDE HAY IMAGEN. Donde solo cambia el color de fondo, el corte es recto. Así la onda no se banaliza y cada aparición significa algo. Una sola onda hace los dos trabajos a la vez: separa las dos secciones y corta la imagen. Se rellena con el color de la sección de ABAJO y sube sobre la imagen de arriba. */ .corte{position:absolute;left:0;right:0;bottom:-1px;z-index:3; height:var(--onda-h);background-color:var(--hacia,var(--ground)); -webkit-mask:var(--onda-relleno) no-repeat center/100% 101%; mask:var(--onda-relleno) no-repeat center/100% 101%} .corte--flip{transform:scaleX(-1)} /* Sección con imagen a sangre y altura completa: la imagen llega hasta el borde inferior y es el propio corte quien la recorta. */ .sec-media{position:relative;isolation:isolate;overflow:hidden;padding-block:0; display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:stretch} /* La caja de la foto tiene proporción PROPIA, no la que le salga. Sin aspect-ratio el alto de la sección lo marcaba solo la columna de texto, y ahí había una trampa: al estrechar la columna de la foto, el texto se ensancha, ocupa menos líneas, la sección se acorta y la caja se vuelve MÁS apaisada — o sea que el object-fit:cover recorta más alto justo cuando lo que se buscaba era recortar menos. Fijándole 4/5 la caja no puede achatarse, y de una foto vertical se ve casi entera. El min-height:100% se queda por si el texto crece más que eso: entonces manda el texto y la foto acompaña. */ .sec-media>.media{position:relative;margin:0;background:var(--wash); aspect-ratio:4/5;min-height:100%} .sec-media>.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* El alto de la sección lo marca esta columna, porque la foto es absoluta dentro de su celda: el padding de aquí es lo único que dice cuánta fotografía se ve. El de abajo es casi el doble que el de arriba, y no por capricho: por debajo viene el corte ondulado hacia el bloque negro, y la onda muerde. Lorena, 16/08: "bajar el bloque negro para que haya más aire y se vea mejor la foto". Lo que se sube es este padding inferior, no un margen del bloque siguiente: el negro no se mueve de donde tiene que estar, es la foto la que crece. */ .sec-media>.texto{padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(5rem,9vw,8rem) clamp(1.75rem,4vw,3.5rem); display:flex;flex-direction:column;justify-content:center;max-width:56rem} /* En una rejilla, un hijo absoluto se posiciona respecto a SU CELDA, no a la sección. Sin esto el corte ondulado solo recorre media anchura. */ .sec-media>.corte,.sec-media>.mancha,.sec-media>.m-esquina,.sec-media>.friso{ grid-area:1 / 1 / -1 / -1} /* FRONTERA ONDULADA entre la foto y el fondo, en el borde derecho de la imagen. Es la regla del sistema aplicada donde faltaba: la onda solo aparece donde hay imagen, y aquí la junta foto/blanco era una recta. No lleva marcado propio: son los dos pseudoelementos de la figura. ::before pinta el fondo de la página de la curva hacia la derecha, o sea que quien recorta la foto es la onda ::after el borde fino, la MISMA curva trazada, así que cae exactamente encima del corte Van separados y no anidados a propósito: si la línea fuera hija del relleno, la máscara del padre le comería la mitad de fuera del trazo y se vería a medio grosor. El color es el azul de la mancha de esa sección, pero su tono profundo: el propio --sec-cielo a 1,6:1 sobre blanco no se ve en un trazo de dos píxeles. Es el mismo color, no otro — --sec-cielo es el lavado de --emp. */ .media--onda::before,.media--onda::after{content:"";position:absolute; top:0;bottom:0;right:0;width:var(--ola,clamp(2rem,4vw,3.5rem)); pointer-events:none} .media--onda::before{z-index:2;background:var(--onda-fondo,var(--ground)); -webkit-mask:var(--onda-v-relleno) no-repeat center/100% 100%; mask:var(--onda-v-relleno) no-repeat center/100% 100%} .media--onda::after{z-index:3;background:var(--onda-color,var(--emp)); -webkit-mask:var(--onda-v-linea) no-repeat center/100% 100%; mask:var(--onda-v-linea) no-repeat center/100% 100%} /* En una columna la foto pasa a estar ARRIBA del texto: la frontera deja de ser vertical y esta onda no pinta nada. */ @media (max-width:860px){ .media--onda::before,.media--onda::after{display:none} } /* La columna de la foto se quedó un rato en el 40 %: la imagen de entonces —la 15, 605x882 px— se AMPLIABA un 9 % en una columna del 46 % de 1440, y ahí nacía el "se ve con poca definición" que dijo Ignacio el 17/08. Vuelve al 46 % porque esa razón ya no existe: la de ahora es la 29 recortada a 1029x1024, y a 662 px de caja la foto sigue reduciéndose, no ampliándose. La caja deja además de ser 4/5 vertical y pasa a CUADRADA, que es la proporción exacta del recorte, para que el object-fit:cover no tenga nada que recortar. Si se cambia el encuadre en preparar_imagenes.py hay que cambiar esto, y al revés. Las dos cifras salen de una cuenta de altos, que es lo que pidió Ignacio —que el texto y la foto midan lo mismo—. La columna de texto mide unos 650 px con sus tres párrafos y es casi la misma a cualquier ancho, porque lo que crece al ensanchar la ventana no es el alto sino la longitud de línea; la de la foto, en cambio, es puro ancho por proporción. A 46 % y 1/1 las dos coinciden a 1440 de ventana, que es el ancho de referencia de este diseño. Por debajo manda el texto y el cover le come algo de ancho a la foto; por encima manda la foto y lo que sobra es aire alrededor del texto, que es el lado bueno por el que fallar. El width:100% no es decorativo. Sin él, cuando manda el texto —o sea, por debajo de esos 1440— el min-height:100% le da a la figura un alto DEFINIDO y entonces la proporción resuelve el ANCHO a partir de él: la foto se salía de su columna un par de decenas de píxeles y el overflow:hidden de la sección se los comía por la derecha. Con el ancho fijado, la proporción solo puede decidir el alto y de lo que sobre ya se ocupa el object-fit:cover. */ .sec-media--der{grid-template-columns:minmax(0,1fr) minmax(0,46%)} .sec-media--der>.media{order:2;aspect-ratio:1;width:100%} .sec-media--der>.texto{padding-left:var(--gutter);padding-right:clamp(1.75rem,4vw,3.5rem)} @media (max-width:880px){ /* Las FILAS van declaradas, y no es cosmética. Las decoraciones —el corte ondulado, la mancha, el friso— se colocan con `grid-area:1/1/-1/-1` para cubrir la sección entera. Ese -1 es la ÚLTIMA LÍNEA DE LA REJILLA EXPLÍCITA; en escritorio hay una sola fila y da igual, pero al pasar a una columna las dos filas (foto y texto) son IMPLÍCITAS, y entonces la línea -1 de fila vuelve a ser la 1: el área degenera a la PRIMERA fila y el corte se queda pegado al fondo de la FOTO, con toda la columna de texto por debajo y la onda a media sección — que es justo lo que se veía en el móvil. Declarando `auto auto`, la línea -1 vuelve a ser el final de la sección. */ .sec-media,.sec-media--der{grid-template-columns:1fr;grid-template-rows:auto auto} /* EN EL MÓVIL LA FOTO SE VE ENTERA, con su propia proporción. Aquí había una caja fija de 16/10, y ninguna de las dos fotos que usan esta sección es apaisada: la de la portada es un retrato 3/4 y la de Familias es cuadrada. Recortarlas a 16/10 se queda con la banda central —el 47 % en la de la portada— y ahí no está la cara de Lorena, está el tambor. Una caja fija tiene sentido en dos columnas, donde la foto tiene que casar de alto con el texto de al lado. En una sola columna no casa con nada, así que no hay nada que forzar: manda la fotografía. Y de paso, el día que alguien cambie una foto no hay que volver a calcular ningún encuadre. */ .sec-media>.media{aspect-ratio:auto;min-height:0;order:0} .sec-media>.media img{position:static;width:100%;height:auto;object-fit:fill} .sec-media>.texto{padding:clamp(1.75rem,5vw,2.5rem) var(--gutter) clamp(3rem,8vw,4.5rem)} } /* ---------- IMÁGENES ---------------------------------------------------- Rectangulares con radio suave. Nada de recortes ovalados. */ .foto{border-radius:var(--r);overflow:hidden;background:var(--wash);margin:0} .foto img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- Botón -------------------------------------------------------- Dos marcados para un mismo botón. En el prototipo —y en lo que pinta el propio tema— la clase va en el enlace: . Pero el bloque de botón de WordPress cuelga las clases del ENVOLTORIO y deja el con las suyas, así que .btn acababa vistiendo una caja vacía mientras el enlace se quedaba con el aspecto de serie de WordPress. Era lo que hacía que los botones de las páginas no se parecieran a los de la portada, donde el marcado lo escribe el tema. De ahí el :not(.wp-block-button): el envoltorio queda fuera y no hay que ir después desvistiéndolo. */ /* El min-height es la diana táctil, no una medida de diseño: con el relleno en `em`, los botones que bajan de cuerpo —el del aviso de campaña usa --s--1— se quedaban en 43px de alto en el móvil, justo por debajo de los 44 a los que un dedo acierta. En los botones de cuerpo normal no cambia nada, porque ya pasan de 44 por su propio relleno. */ .btn:not(.wp-block-button), .wp-block-button.btn>.wp-block-button__link{ display:inline-flex;align-items:center;gap:.5em;font-family:var(--display); font-weight:700;font-size:var(--s-0);letter-spacing:.03em;padding:.78em 1.5em; min-height:44px; border:2px solid var(--ink);background:var(--ink);color:var(--ground); text-decoration:none;border-radius:999px;transition:background .2s,border-color .2s,color .2s} .btn:not(.wp-block-button):hover, .wp-block-button.btn>.wp-block-button__link:hover{ background:var(--action);border-color:var(--action);color:#fff} .btn--ghost:not(.wp-block-button), .wp-block-button.btn--ghost>.wp-block-button__link{background:transparent;color:var(--ink)} .btn--ghost:not(.wp-block-button):hover, .wp-block-button.btn--ghost>.wp-block-button__link:hover{ background:var(--ink);border-color:var(--ink);color:var(--ground)} .btn--light:not(.wp-block-button), .wp-block-button.btn--light>.wp-block-button__link{ background:var(--ground);border-color:var(--ground);color:var(--ink)} .btn--light:not(.wp-block-button):hover, .wp-block-button.btn--light>.wp-block-button__link:hover{ background:var(--action);border-color:var(--action);color:#fff} /* Fantasma sobre fondo oscuro: el segundo botón de una CTA, el que no manda. El --ghost normal se dibuja en tinta y sobre el negro no se ve. */ .btn--ghost-light:not(.wp-block-button), .wp-block-button.btn--ghost-light>.wp-block-button__link{ background:transparent;border-color:var(--ground);color:var(--ground)} .btn--ghost-light:not(.wp-block-button):hover, .wp-block-button.btn--ghost-light>.wp-block-button__link:hover{ background:var(--ground);border-color:var(--ground);color:var(--ink)} /* El tema apaga la maquetación de WordPress (disable-layout-styles), así que la fila de botones se queda sin su flex y sin su separación: va aquí. */ .wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem} .wp-block-button{display:inline-flex} .protobar{background:var(--ink);color:var(--ground);font-family:var(--display); font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase; padding:.45rem var(--gutter);text-align:center} .protobar b{color:#FBB174;font-weight:700} /* ---------- Sección con corte ondulado propio ---------------------------- */ .con-corte{position:relative;isolation:isolate;overflow:hidden} /* ========================================================================== MOTIVOS GRÁFICOS DEL DOSSIER DE LORENA Manchas de color cortadas por el borde + la M como friso y marca. ========================================================================== */ /* Sección que puede alojar manchas y marcas sin que se desborden */ .escena{position:relative;isolation:isolate;overflow:hidden} /* El contenido va por encima de los adornos. Hay que EXCLUIR los decorativos: si se les pone position:relative se anula su posicionamiento absoluto. */ .escena > :not(.mancha):not(.m-parcial):not(.friso):not(.corte){position:relative;z-index:1} /* Mancha: círculo grande de color plano recortado por el borde de la sección. Se coloca con --x/--y y se dimensiona con --d. */ .mancha{position:absolute;z-index:0;border-radius:50%;pointer-events:none; width:var(--d,34rem);aspect-ratio:1;background:var(--c,var(--sec-coral)); left:var(--x,auto);right:var(--r2,auto);top:var(--y,auto);bottom:var(--b,auto)} .mancha--ovalo{border-radius:50%;aspect-ratio:1.45} /* Friso: la M repetida en horizontal, cortada por el borde superior. La M va incrustada en el CSS (--m-marca): como fichero externo, el navegador bloquea la máscara al abrir la página desde disco. */ .friso{position:absolute;left:0;right:0;z-index:0;pointer-events:none; height:var(--h,5.5rem);background-color:var(--c,#fff); -webkit-mask:var(--m-marca) repeat-x center/auto 100%; mask:var(--m-marca) repeat-x center/auto 100%} /* Las emes del friso van invertidas, colgando del borde, como en el dossier */ .friso--arriba{top:calc(var(--h,5.5rem) * -.45);transform:scaleY(-1)} .friso--abajo{bottom:calc(var(--h,5.5rem) * -.45)} /* Marca parcial: la M asoma por un borde y se corta. NUNCA entera: una M completa flotando gasta la marca y la abarata. Se ve sobre todo su parte superior, igual que en el friso. */ .m-parcial{position:absolute;z-index:0;pointer-events:none; width:var(--d,20rem);aspect-ratio:1;background-color:var(--c,var(--brand)); opacity:var(--o,1); left:var(--x,auto);right:var(--r2,auto);top:var(--y,auto);bottom:var(--b,auto); -webkit-mask:var(--m-marca) no-repeat center/contain; mask:var(--m-marca) no-repeat center/contain} /* Asoma desde el borde inferior dejando a la vista solo los arcos de arriba. -0.68 del alto: se ve alrededor de un tercio de la M, nunca entera. */ .m-parcial--abajo{bottom:calc(var(--d,20rem) * -.68)} /* Foto recortada sin fondo: no lleva marco ni esquinas, flota sobre el color. Es como lo resuelve Lorena en el dossier. */ .recorte{display:block;margin:0} .recorte img{width:100%;height:auto;display:block; filter:drop-shadow(0 18px 26px rgba(31,30,29,.18))} /* Resalte de palabras clave dentro del texto, como en el dossier */ .clave{color:var(--action);font-weight:600} /* Eslogan de la marca, tal como está en su logotipo: condensada en mayúsculas con los puntos en coral. No estaba en la web. */ .eslogan{display:inline-flex;align-items:center;gap:.75rem;margin:0; font-family:var(--display);font-weight:400;font-size:.85rem; letter-spacing:.22em;text-transform:uppercase;color:inherit} .eslogan i{width:.42rem;height:.42rem;border-radius:50%; background:var(--brand);flex:0 0 auto} /* ---------- Rejilla de Instagram ---------------------------------------- Contenido real y actual que Lorena ya produce. En la web se alimentará del plugin que ya está instalado; aquí van imágenes de muestra. LA CABECERA TIENE QUE DECIR "INSTAGRAM" SIN QUE HAYA QUE DEDUCIRLO. Con solo un antetítulo y un titular, la sección se leía como una galería más de la página y nadie entendía por qué estaba ahí. Ahora lo dicen tres cosas a la vez: el símbolo en el rótulo, la cuenta en el botón y la frase de entrada, que además aclara que ahí no solo hay sesiones. */ .ig-cab{display:flex;align-items:flex-end;justify-content:space-between; gap:1.25rem;flex-wrap:wrap;margin-bottom:clamp(1.3rem,2.6vw,2.1rem)} /* El símbolo, en el rótulo y dentro del botón. Alineado a la altura de la equis de la tipografía y no a la línea base, que lo dejaba flotando. */ .ico-ig{flex:0 0 auto;vertical-align:-.28em} .ig-sub{margin:0;max-width:46ch;color:var(--ink-2)} /* El botón de seguir se queda con el ancho de su texto y no crece con la columna: es la acción secundaria de la sección —la principal es mirar las fotos— y un botón a lo ancho pesaría más que la propia rejilla. */ .ig-seguir{flex:0 0 auto} /* Por debajo de tableta la cabecera se apila y el botón pasa a ocupar la línea entera: en una columna estrecha, un botón corto pegado al margen izquierdo debajo de un párrafo largo parece que se ha caído. */ @media (max-width:720px){ .ig-cab{display:block} .ig-sub{margin-bottom:1.1rem} .ig-seguir{display:flex;justify-content:center;width:100%} } .ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.45rem,1vw,.8rem)} @media (max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){.ig-grid{grid-template-columns:repeat(2,1fr)}} .ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden; border-radius:var(--r);background:var(--wash)} .ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .ig-tile:hover img{transform:scale(1.06)} .ig-tile::after{content:"";position:absolute;inset:0;background:var(--ink); opacity:0;transition:opacity .25s ease} .ig-tile:hover::after{opacity:.16} @media (prefers-reduced-motion:reduce){.ig-tile:hover img{transform:none}} /* Son ocho publicaciones: dos filas llenas de cuatro. En cuanto la rejilla baja a tres columnas esas ocho dan 3+3+2 y la última fila queda coja, así que a partir de ahí se pintan seis. Se recortan por CSS y no pidiendo menos a la API porque el número de columnas es cosa del ancho de la pantalla, y eso el servidor no lo sabe cuando arma la página. Abajo, con dos columnas, las seis vuelven a cuadrar en tres filas. */ @media (max-width:820px){.ig-grid>.ig-tile:nth-child(n+7){display:none}} /* Sitio para la onda de la cinta. La onda cuelga de la cinta hacia ARRIBA y se pinta encima de lo que haya: sobre una sección de color plano no se nota, pero sobre las fotos entraría a cortarlas por la fila de abajo. Se le reserva su propia altura, que es la que ella misma usa, y no una separación a ojo que quede desfasada el día que la onda cambie de tamaño. Solo cuando la cinta va justo detrás. */ section:has(+ .cinta) .ig-grid{margin-bottom:var(--onda-h)} /* ---------- Cinta de mensajes en movimiento ------------------------------ */ /* Sobre --brand el texto blanco se queda en 3,80:1; sobre --action llega a 4,80 */ .cinta{position:relative;background:var(--action);color:#fff;padding:.5rem 0; font-family:var(--display);font-weight:700;letter-spacing:.08em; text-transform:uppercase;font-size:.92rem; /* Recorta a los lados la pista, que es más ancha que la pantalla, pero deja salir la onda por arriba. Aquí hubo `clip-path:inset(-100vh 0 0 0)`, y hacía media faena: clip-path recorta lo que se PINTA, no lo que se MAQUETA. La pista seguía contando para el ancho del documento, así que en la portada el documento medía 3288 px sobre una pantalla de 412, y 4151 en Educación. En un escritorio eso no se nota, porque el `overflow-x:hidden` del body se come la barra. En un MÓVIL de verdad es otra cosa: el viewport de maquetación se expande hasta el contenido, la página se dibuja al ancho de un escritorio y se enseña reducida, y todo lo que va `position:fixed` —el aviso de cookies y el cajón del menú— se ancla a esos 3288 px. El cajón abría en left:1285 con la pantalla en 412: fuera de la pantalla. `overflow-x:clip` recorta las DOS cosas. Y se usa `clip` y no `hidden` porque `hidden` en un eje obliga al otro a `auto` —o sea, un contenedor con desplazamiento— y entonces la onda que cuelga hacia arriba se recorta; `clip` es justo la palabra que existe para esto y deja el eje Y visible. */ overflow-x:clip;overflow-y:visible} /* La onda roja que anuncia la cinta. En el prototipo era el corte de la última sección hacia --brand. Aquí cuelga de la propia cinta y no de la sección de encima: así sale en todas las páginas sin depender de cómo acabe el contenido de cada una, y la parte que la máscara deja transparente enseña la sección que haya arriba, sea del color que sea. */ /* El rojo es --action y no --brand, aunque --brand sea EL rojo de la marca. Manda la cinta, y la cinta no puede elegir: lleva texto blanco encima, y sobre --brand se queda en 3,80:1 mientras que sobre --action llega a 4,80. La onda no lleva texto, así que la que cede es ella. Antes iban cada una de un rojo —así estaba en el prototipo— y la junta cantaba. */ .cinta::before{content:"";position:absolute;left:0;right:0;bottom:100%; height:var(--onda-h);background-color:var(--action); -webkit-mask:var(--onda-relleno) no-repeat center/100% 101%; mask:var(--onda-relleno) no-repeat center/100% 101%} .cinta-pista{display:flex;width:max-content;animation:desliza 38s linear infinite} .cinta-pista span{padding-inline:1.5rem;white-space:nowrap} .cinta-pista span::after{content:"·";margin-left:1.5rem;opacity:.6} @keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}} .cinta:hover .cinta-pista{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .cinta-pista{animation:none;width:100%;justify-content:center} .cinta-pista>span:nth-child(n+5){display:none} } /* ---------- Distintivo de público en el menú ----------------------------- La etiqueta dice QUÉ es; el distintivo, PARA QUIÉN. Color de texto elegido por contraste, no por estética: el blanco solo cumple sobre el azul; sobre naranja, coral y verde hay que usar negro. */ .nav .con-badge{position:relative} /* Texto en BLANCO en los cuatro, como pide el diseño. Para que cumpla, cada color se lleva a su versión profunda: mismo tono y misma saturación, solo más oscuro. Los colores de línea originales siguen intactos en el resto de la web; esto es una variante exclusiva del distintivo. */ .badge{position:absolute;top:-.35rem;left:.55rem;font-family:var(--display); font-weight:700;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase; padding:.05rem .38rem;border-radius:999px;pointer-events:none;white-space:nowrap; color:#fff;background:#BE5805} /* Educación · 4,58:1 */ .badge--fam{background:#E70C5C} /* Familias · rosa profundo · 4,56:1 */ .badge--may{background:#218468} /* Mayores · 4,60:1 */ .badge--emp{background:#3577A1} /* Empresas · 4,88:1 · el azul ya cumplía */ @media (max-width:1024px){.badge{position:static;margin-left:.6rem;display:inline-block}} /* ---------- Acceso directo a Instagram ---------------------------------- Va en la cabecera, no en una barra aparte: siempre visible, sin ocupar una franja propia. */ .ig{display:inline-flex;align-items:center;justify-content:center; width:2.4rem;height:2.4rem;flex:0 0 auto;margin-left:.4rem; border:1px solid var(--rule);border-radius:999px;color:var(--ink-2); text-decoration:none;transition:background .2s,border-color .2s,color .2s} .ig:hover{background:var(--brand);border-color:var(--brand);color:#fff} /* Las reglas de móvil van en el bloque responsive del final del fichero: aquí quedarían antes de la definición base de .burger y no ganarían. */ /* ---------- Contacto directo flotante ------------------------------------ */ .flota{position:fixed;right:clamp(.9rem,3vw,1.5rem);bottom:clamp(.9rem,3vw,1.5rem); z-index:70;display:inline-flex;align-items:center;gap:.55rem; background:var(--ink);color:var(--ground);text-decoration:none; font-family:var(--display);font-weight:700;letter-spacing:.03em; padding:.7rem 1.1rem;border-radius:999px; box-shadow:0 14px 30px -12px rgba(31,30,29,.55);transition:background .2s} .flota:hover{background:var(--action);color:#fff} @media (max-width:620px){.flota span{display:none}.flota{padding:.85rem}} /* ---------- Cabecera ---------------------------------------------------- EL DESENFOQUE VA EN UN PSEUDOELEMENTO, NO EN LA CABECERA. No es cosmética: un `backdrop-filter` distinto de `none` convierte al elemento en BLOQUE CONTENEDOR de sus descendientes con `position:fixed`. Estando en .site-head, el cajón del menú de móvil —.nav, que es `fixed` con `inset:0 0 0 auto`— se anclaba a la cabecera en vez de a la pantalla: salía una cajita de 120px de alto en la esquina, con los siete enlaces recortados dentro y la máscara por encima. En móvil y en tableta la web no se podía navegar. Poniendo el fondo translúcido y el desenfoque en ::before, la cabecera deja de ser bloque contenedor y el cajón vuelve a medirse contra el viewport. Y el z-index sube de 50 a 60, por encima de la máscara (55): la máscara tiene que oscurecer la PÁGINA, no el menú que vive dentro de la cabecera. Con 50 quedaba por debajo y se tragaba los toques — de ahí que ni la hamburguesa ni los desplegables respondieran. */ .site-head{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--rule)} .site-head::before{content:"";position:absolute;inset:0;z-index:-1; background:color-mix(in srgb,var(--ground) 93%,transparent);backdrop-filter:blur(10px)} .head-in{max-width:var(--wide);margin-inline:auto;padding:.7rem var(--gutter); display:flex;align-items:center;gap:1.25rem} .brand img{width:clamp(112px,13vw,148px)} .nav{margin-left:auto;display:flex;align-items:center;gap:.1rem} .nav a{font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:.03em; color:var(--ink);text-decoration:none;padding:.5rem .75rem;border-radius:999px} .nav a:hover{color:var(--action)} .nav a[aria-current="page"]{background:var(--wash)} .has-sub{position:relative;display:flex;align-items:center} .has-sub>.subtoggle{border:0;background:none;padding:.5rem .25rem .5rem 0;cursor:pointer; color:var(--ink);display:inline-flex} .sub{position:absolute;top:100%;left:0;min-width:20rem;background:var(--surface); border:1px solid var(--rule);border-radius:var(--r);padding:.4rem;display:none; flex-direction:column;box-shadow:0 18px 44px -22px rgba(31,30,29,.4);z-index:5} /* EL HOVER SOLO EXISTE DONDE HAY RATÓN. Abrir el submenú al pasar por encima está bien con un puntero fino, pero en una pantalla táctil el «hover» se queda PEGADO al último elemento tocado hasta que tocas otra cosa. Y como `.has-sub:hover .sub` (0-3-0) gana en especificidad a `.sub[data-open="true"]` (0-2-0), la regla de móvil que lo ocultaba se imponía sobre la que el JavaScript acababa de activar: al tocar la flecha, el submenú se marcaba abierto —data-open y aria-expanded a true— y seguía sin verse. Solo aparecía al tocar en otra parte del menú, que es cuando el hover se despegaba. Encerrando el hover donde de verdad hay ratón, en el móvil manda solo `data-open`, que es lo que controla el botón. */ .sub[data-open="true"]{display:flex} @media (hover:hover) and (pointer:fine){ .has-sub:hover .sub,.has-sub:focus-within .sub{display:flex} } .sub a{padding:.7rem .8rem;border-radius:6px;font-size:1rem} .sub a small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem; letter-spacing:0;color:var(--ink-3);margin-top:.1rem;line-height:1.35} .sub a:hover{background:var(--wash)} .acceso{margin-left:.5rem;font-family:var(--display);font-weight:600;font-size:.96rem; color:var(--ink-2)!important;text-decoration:none;border:1px solid var(--rule); padding:.42rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.4rem} .acceso:hover{border-color:var(--ink);color:var(--ink)!important} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule); padding:.55rem .7rem;border-radius:999px;cursor:pointer;color:var(--ink)} /* El cierre del cajón sólo existe en el menú de móvil; en escritorio el menú es una fila y no hay nada que cerrar. */ .nav-cerrar{display:none} /* ---------- Aviso de campaña ------------------------------------------- La franja que anuncia una campaña de temporada encima del hero de la portada. Existe una sola vez y solo cuando hay campaña: el texto vive en un campo de la página y, vacío, aquí no se pinta nada. VA EN EL COLOR DE SU LÍNEA, no en el rojo de marca, y esa es la decisión de fondo. El rojo ya tiene dos trabajos en la página --el acento de los titulares y la cinta del pie-- y un tercero arriba lo convierte en ruido. Con el naranja de Educación la franja dice A DÓNDE lleva antes de leerla, que es como funciona el resto del sitio: cada línea tiene su color y el visitante ya lo ha aprendido en las cuatro cuñas de la portada. NO es pegajosa. La cabecera sí lo es y lleva el menú, que es navegación; esto es un anuncio: se lee una vez, se pulsa o se pasa de largo, y no tiene por qué robar alto de pantalla durante todo el recorrido. */ /* EL COLOR: --sec-arena, el naranja de verdad, y no el --edu-0 de antes. --edu-0 es un crema a un paso del blanco; sobre el fondo --ground de la página la franja no se distinguía de la cabecera y se leía como un pie de página administrativo puesto arriba. Sigue siendo el color de Educación, que es lo que decía la nota de arriba: lo que cambia es el escalón. El par --edu-ink sobre --sec-arena está medido en la paleta: 4,54:1. */ /* Sin filete recto abajo: ahora la separa del vídeo una onda, que es lo que pide el sistema donde hay imagen que cortar. La franja pasa a ser el bloque contenedor de esa onda. */ /* z-index y NO isolation. La onda se sale de la franja por abajo y tiene que pintarse sobre el vídeo; con isolation:isolate la franja se encerraba en su propio contexto y el hero —que viene después y crea el suyo— le pasaba por encima. Con z-index sube la franja entera, y la onda con ella. */ .aviso{position:relative;z-index:4;background:var(--sec-arena)} /* Separación generosa entre el rótulo, la pista y el botón: el texto entra y sale difuminado, y si el fantasma empieza pegado al rótulo o al botón se lee como una palabra cortada en vez de como un texto que pasa. */ .aviso-in{max-width:var(--wide);margin-inline:auto;padding:.85rem var(--gutter); display:flex;align-items:center;gap:.75rem 1.25rem;flex-wrap:wrap} /* El icono toma el color por máscara, para ir en el mismo tono que las dos líneas que lleva al lado: el bloque de la izquierda se lee como una sola pieza —quién y cuándo— y el mensaje, en negro, como otra. */ .aviso-ico{flex:0 0 auto;width:1.75rem;height:1.75rem; background-color:var(--edu-ink); -webkit-mask:var(--ico) no-repeat center/contain; mask:var(--ico) no-repeat center/contain} /* La onda cuelga por debajo del borde y se pinta del color de la franja, así que el naranja entra en el vídeo con la misma curva que el resto del sitio. Mismo mecanismo que .cinta::before, solo que hacia el otro lado: allí sube sobre la sección de arriba y aquí baja sobre el vídeo de abajo. */ /* scaleY(-1) porque --onda-relleno viene dibujada para colgar HACIA ARRIBA: su curva está en el borde de arriba y el relleno macizo abajo, que es como la usan la cinta y los cortes entre secciones. Aquí hace falta al revés —macizo pegado a la franja y la curva mordiendo el vídeo—, y voltearla sale más barato y se desincroniza menos que mantener una segunda máscara. */ /* Baja. La onda de los cortes entre secciones va a --onda-h —hasta 80 px— porque allí separa dos bloques de página; aquí solo remata una franja de un renglón, y con aquella altura el naranja se derramaba sobre el vídeo y se comía la entrada del hero. Un tercio de aquello basta para que se lea la curva. */ .aviso-onda{position:absolute;left:0;right:0;top:100%; height:clamp(8px,1.1vw,18px);background-color:var(--sec-arena);transform:scaleY(-1); -webkit-mask:var(--onda-relleno) no-repeat center/100% 101%; mask:var(--onda-relleno) no-repeat center/100% 101%} /* EL RÓTULO, A LA IZQUIERDA DEL TODO: icono y dos líneas. Dice a quién va dirigido y cuándo —CENTROS EDUCATIVOS / CURSO 2026-2027— y funciona como la firma de la franja: se lee de un golpe y no compite con el mensaje. Se queda en la display en versalitas, que es el lenguaje de los rótulos de dato en todo el sitio; lo que sube de voz es el mensaje. El filete de la derecha separa el rótulo del mensaje sin meter un punto ni una barra, que a este tamaño ensucian. */ .aviso-marca{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem; padding-right:1.1rem;border-right:1px solid color-mix(in srgb,var(--edu-ink) 30%,transparent)} .aviso-ante{font-family:var(--display);font-weight:700;font-size:var(--s--1); letter-spacing:.1em;text-transform:uppercase;color:var(--edu-ink); display:flex;flex-direction:column;line-height:1.15;white-space:nowrap} /* El punto de viñeta que llevaba el rótulo se ha ido con el cambio de fondo: era --edu sobre --edu-0 y sobre el naranja nuevo desaparecía. Quien separa ahora el rótulo del mensaje es el icono, que además dice de qué va. */ /* La ventana por la que pasa la pista. Se difumina por los dos lados en vez de cortar a hachazo: en la cinta del pie el texto se sale de la pantalla y por eso puede cortarse en seco, pero aquí la ventana acaba en mitad de la franja y un corte limpio se lee como un fallo de maquetación. */ .aviso-texto{flex:1 1 18ch;min-width:0;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent); mask:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)} /* CON UN SOLO MENSAJE NO HAY PISTA QUE PASE, así que no hay ventana ni difuminado: la máscara y el `nowrap` son del carrusel y aquí cortarían la frase por la mitad en cuanto no cupiera. Quieto, el mensaje se lee entero y parte de línea como cualquier texto. */ .aviso-texto:not(.aviso-texto--desliza){overflow:visible;-webkit-mask:none;mask:none} .aviso-texto:not(.aviso-texto--desliza) .aviso-pista{width:auto;display:block} .aviso-texto:not(.aviso-texto--desliza) .aviso-pista span{white-space:normal} .aviso-texto:not(.aviso-texto--desliza) .aviso-pista span::after{content:none} /* LA VOZ DEL MENSAJE. De las tres tipografías del sitio, la display es la de los rótulos y Sarabun la del cuerpo; la que levanta la voz es Lilita One —la misma de los titulares, la «voz simpática» de la marca—, y esta franja es lo primero que se ve al entrar. En NEGRO, no en el tono de Educación: ese se queda para el bloque de la izquierda, y así la franja se lee en dos tiempos —de quién es y qué dice— en vez de como un párrafo del mismo color. --ink sobre --sec-arena es el contraste más alto de los dos. */ .aviso-pista{display:flex;width:max-content;line-height:1.4;color:var(--ink)} .aviso-pista span{white-space:nowrap} .aviso-texto:not(.aviso-texto--desliza) .aviso-pista{ font-family:var(--alegre);font-size:var(--s-0);line-height:1.2; color:var(--ink);text-wrap:balance} /* Mismo mecanismo que .cinta-pista: la pista lleva los mensajes dos veces y la animación la desplaza un -50%, o sea justo una vuelta, con lo que el salto del final cae sobre un fotograma idéntico y no se ve. Se reutiliza su fotograma clave, que ya existe. */ .aviso-texto--desliza .aviso-pista{animation:desliza 30s linear infinite} .aviso-pista span::after{content:"·";margin-inline:1.5rem;color:var(--edu-ink)} /* Parar al pasar por encima o al llegar con el tabulador: es contenido en movimiento y quien lo esté leyendo tiene que poder detenerlo. */ .aviso:hover .aviso-pista, .aviso:focus-within .aviso-pista{animation-play-state:paused} /* Sin movimiento no hay carrusel: se queda el primer mensaje, entero y quieto, y se esconden los demás para que no desborden la franja. */ @media (prefers-reduced-motion:reduce){ .aviso-texto--desliza .aviso-pista{animation:none} .aviso-pista span:nth-child(n+2){display:none} .aviso-pista span::after{content:none} } .aviso .btn{flex:0 0 auto;font-size:var(--s--1);padding:.55em 1.15em} /* Por debajo del ancho de tableta el mensaje ocupa su propio renglón y el botón se va a la izquierda con el rótulo: en una columna estrecha, un botón centrado o alineado a la derecha deja un hueco que parece un fallo. */ @media (max-width:720px){ /* EN EL MÓVIL LA FRANJA SE APRIETA. Con las tres piezas en su propio renglón —rótulo, mensaje y botón— y el aire de escritorio entre ellas, la franja se iba a 182px de alto en una pantalla de 360: mucho blanco para un anuncio de un renglón, y encima comiéndose la entrada del hero. Tres ajustes, y cada uno quita altura por un motivo distinto: · el rótulo pasa a UNA línea, con un punto separando las dos partes; · el mensaje baja de cuerpo lo justo para caber en dos líneas en vez de tres, que es de donde sale la mayor parte del ahorro; · menos relleno arriba y abajo y menos hueco entre renglones. */ .aviso-in{gap:.4rem .9rem;padding-block:.7rem} .aviso-texto{flex-basis:100%} /* En una fila, el filete de separación queda colgando al final del renglón; quien separa aquí es el salto de línea. */ .aviso-marca{border-right:0;padding-right:0} .aviso-ante{flex-direction:row;flex-wrap:wrap;gap:.15rem .5rem;line-height:1.25} .aviso-ante span+span::before{content:"·";margin-right:.5rem;opacity:.55} /* Un escalón por encima del rótulo, no al mismo cuerpo: si los dos miden lo mismo, la franja se lee como un bloque gris de texto en versalitas y el mensaje deja de destacar, que era justo lo que se buscaba. Es el cuerpo más grande que sigue cabiendo en dos líneas a 360px. */ .aviso-texto:not(.aviso-texto--desliza) .aviso-pista{font-size:.95rem} } /* ---------- Hero -------------------------------------------------------- */ .hero{position:relative;isolation:isolate;background:var(--wash)} .hero-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden} @media (max-width:860px){.hero-media{aspect-ratio:4/5}} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 30%} .hero-media video{position:absolute;inset:0} /* El fotograma medio es #BCB7AE: el titular va en OSCURO, no en blanco */ .hero-veil{position:absolute;inset:0;background:linear-gradient(100deg, rgba(249,249,249,.95) 0%,rgba(249,249,249,.86) 34%, rgba(249,249,249,.34) 62%,rgba(249,249,249,.04) 100%)} @media (max-width:860px){.hero-veil{background:linear-gradient(180deg, rgba(249,249,249,.94) 0%,rgba(249,249,249,.7) 44%, rgba(249,249,249,.28) 72%,rgba(249,249,249,.9) 100%)}} .hero-copy{position:absolute;inset:0;display:flex;align-items:center} .hero-copy .shell{width:100%} .hero-text{max-width:21ch;display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start} .hero-text h1 em{font-style:normal;color:var(--action)} @media (max-width:860px){ .hero-copy{align-items:flex-start;padding-top:clamp(1.25rem,5vw,2.5rem)} .hero-text{max-width:none} } /* Onda de marca sobre la divisoria del hero. Va POR DEBAJO de la divisoria: así el relleno claro de esta le recorta el borde inferior de forma limpia y las dos curvas casan sin costura. Comparte el trazado de la divisoria. */ .hero-marca{position:absolute;left:0;right:0;bottom:-1px;z-index:1; width:100%;height:var(--onda-h);display:block;pointer-events:none} /* El hero es imagen: aquí la onda sí corta (misma regla) */ .hero-onda{position:absolute;left:0;right:0;bottom:-1px;z-index:2; height:var(--onda-h);background-color:var(--hacia,var(--ground)); -webkit-mask:var(--onda-relleno) no-repeat center/100% 101%; mask:var(--onda-relleno) no-repeat center/100% 101%} .claim{font-family:var(--display);font-weight:600;font-size:var(--s-2); line-height:1.15;color:var(--ink);max-width:32ch;text-wrap:balance} /* ---------- Las cuatro líneas ------------------------------------------ Una sola aparición como contenido. El directorio vive en el menú superior, que es donde la gente busca (dixit Lorena). Sin triplicar. */ .lineas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.1rem,2.4vw,1.9rem)} @media (max-width:800px){.lineas{grid-template-columns:1fr}} .linea{position:relative;display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--rule-tarjeta,var(--rule));border-radius:var(--r);overflow:hidden; text-decoration:none;color:inherit; transition:border-color .2s,transform .2s,box-shadow .2s} .linea:hover{border-color:var(--c);transform:translateY(-3px); box-shadow:0 24px 46px -30px rgba(31,30,29,.5)} /* ---------- Tarjeta con cuña diagonal ------------------------------------ Recurso sacado de sus carteles: foto en blanco y negro teñida por el color de la línea, cortada en diagonal. Al pasar el ratón la cuña BAJA hasta que la diagonal cruza la esquina inferior izquierda y deja ver más foto. Los dos polígonos tienen los mismos vértices: si no, no interpola. */ .linea--cuna .linea-img{background:#fff} .linea--cuna .linea-img::before{content:"";position:absolute;inset:0;z-index:1; background:var(--c);opacity:var(--cuna-op,.68); /* El borde no es una recta: cada tarjeta trae su curva en --cuna-1 (reposo) y --cuna-2 (hover), con los MISMOS 43 vértices para que interpolen. La curva se traslada entera, sin girar. NORMA: las tarjetas contiguas no llevan ondas sueltas. Cada fila define UNA onda que se reparte entre sus tarjetas (.cuna--p1-1 y .cuna--p1-2 son las dos mitades de la misma), así que donde acaba una empieza la otra y la fila se lee como una sola línea. Se generan en scripts/cunas.py. Sin clase de cuña se cae en la diagonal recta de siempre. */ clip-path:var(--cuna-1, polygon(0 var(--i1,34%), 100% var(--d1,0%), 100% 100%, 0 100%)); transition:clip-path .6s cubic-bezier(.33,.1,.2,1)} .linea--cuna:hover .linea-img::before, .linea--cuna:focus-visible .linea-img::before{ clip-path:var(--cuna-2, polygon(0 var(--i2,100%), 100% var(--d2,66%), 100% 100%, 0 100%))} /* Fotografía: blanco y negro teñido por la cuña, su fórmula de cartel */ .linea--cuna .linea-img img{position:relative;z-index:2; filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply} .linea--cuna:hover .linea-img img{transform:none} /* sin zoom: ya se mueve la cuña */ /* Ilustración: va ENCIMA de la cuña, sin desaturar ni multiplicar */ .linea--cuna.linea--ilu .linea-img img{filter:none;mix-blend-mode:normal; object-fit:contain;padding:1.3rem} /* Titular a dos niveles, como en sus carteles. En las LÍNEAS: primero el qué («Clases y talleres de»), luego el nombre. */ .titulo-2{display:flex;flex-direction:column;gap:.05rem} .titulo-2 em{font-style:normal;font-family:var(--display);font-weight:400; font-size:.98rem;letter-spacing:.04em;color:var(--ci)} .titulo-2 strong{font-family:var(--alegre);font-weight:400;font-size:var(--s-1); line-height:1.05;text-transform:uppercase;letter-spacing:.01em} /* En las ACTIVIDADES el orden se invierte, como en sus carteles: el nombre arriba y el subtítulo debajo. La variedad del catálogo la dan sus propios subtítulos, no un recurso gráfico repetido nueve veces. */ .titulo-act{display:flex;flex-direction:column;gap:.12rem} .titulo-act strong{font-family:var(--alegre);font-weight:400;font-size:1.28rem; line-height:1.05;letter-spacing:.005em} .titulo-act em{font-style:normal;font-family:var(--display);font-weight:400; font-size:.94rem;letter-spacing:.03em;color:var(--ci,var(--ink-3))} /* Cabecera de etapa: aquí sí va acento, porque marca grupo (son tres) */ .etapa-head h3{display:flex;align-items:center;gap:.85rem} .etapa-head h3::after{content:"";flex:0 0 2.2rem;height:.55em; background-color:var(--ci,var(--ink-3)); -webkit-mask:var(--onda-mini) no-repeat center/100% 100%; mask:var(--onda-mini) no-repeat center/100% 100%} @media (prefers-reduced-motion:reduce){ .linea--cuna .linea-img::before{transition:none} } .linea-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--w)} .linea-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .linea-img.is-ilu img{object-fit:contain;padding:1.3rem} .linea:hover .linea-img img{transform:scale(1.03)} .linea-img.is-ilu:hover img{transform:none} .linea-body{padding:clamp(1.2rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.65rem;flex:1} .linea-kicker{display:flex;align-items:center;gap:.6rem} .linea-kicker img{width:30px;height:30px;object-fit:contain} .linea-kicker span{font-family:var(--display);font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-size:.8rem;color:var(--ci)} .linea h3{font-size:var(--s-1)} .linea p{color:var(--ink-2);font-size:.97rem;line-height:1.58} .linea-go{margin-top:auto;padding-top:.5rem;font-family:var(--display);font-weight:700; color:var(--ink);display:inline-flex;gap:.4rem;align-items:center} .linea:hover .linea-go{color:var(--ci)} /* ---------- Lorena ------------------------------------------------------ */ .dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(1.5rem,4vw,3.5rem);align-items:center} @media (max-width:880px){.dos{grid-template-columns:1fr}} .pie{font-size:.8rem;color:var(--ink-3);margin-top:.55rem;line-height:1.4} /* ---------- Página de sección ------------------------------------------ */ /* EL TITULAR MANDA CUANDO NO CABE. La cabecera era una foto de proporción fija con el texto encima en `position:absolute`, y un absoluto no empuja a nadie: en un móvil de 360 los titulares de cinco líneas medían 226px dentro de una banda de 240 y, al ir centrados, se salían por los dos lados. En Sobre mí el título arrancaba exactamente en el borde inferior de la cabecera pegajosa y se metía debajo. Con una rejilla de UNA celda donde caen la foto y el texto, el alto de la fila es el del más alto de los dos: manda la proporción de la foto mientras el título quepa, y manda el título en cuanto no cabe. La foto se estira con la fila —su `aspect-ratio` deja de decidir cuando el alto ya está fijado— y el `object-fit:cover` de la imagen se ocupa de lo que sobre. Se aplica a todos los anchos y no solo al móvil: en escritorio la banda 21/9 es mucho más alta que cualquier titular, así que allí no cambia nada, y así la página tampoco se rompe el día que alguien escriba un titular más largo. */ .page-hero{position:relative;isolation:isolate;display:grid} .page-hero>.page-hero-media,.page-hero>.page-hero-copy{grid-area:1/1} .page-hero-media{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--wash)} @media (max-width:860px){.page-hero-media{aspect-ratio:3/2}} /* Cabecera más alta, para las fotografías VERTICALES. A 21/9 y a todo el ancho, de un original 3/4 solo entra el 32 % del alto, y no hay recorte que lo arregle: recortar por los lados baja todavía más la banda. Ignacio, 17/08, sobre Sobre mí: "que se me vea un poquito más de cuerpo para que se vea la acción de coger la pelota". Lo único que da más cuerpo es cambiar la proporción, y a 16/9 entra el 42 %. Se activa por página con el campo _lm_hero_alto, no por defecto: en las cabeceras que nacen apaisadas, 16/9 es una franja innecesariamente alta. */ .page-hero--alto .page-hero-media{aspect-ratio:16/9} .page-hero-media img{width:100%;height:100%;object-fit:cover} .page-hero .veil{position:absolute;inset:0;background:linear-gradient(90deg, rgba(249,249,249,.96) 0%,rgba(249,249,249,.8) 46%,rgba(249,249,249,.12) 100%)} @media (max-width:860px){.page-hero .veil{background:linear-gradient(180deg, rgba(249,249,249,.94) 0%,rgba(249,249,249,.5) 62%,rgba(249,249,249,.9) 100%)}} /* `relative` y no `absolute`: en la rejilla de arriba el texto tiene que CONTAR para el alto de la fila, que es justo lo que un absoluto no hace. El z-index sigue haciendo falta para quedar sobre el velo y la onda. El aire vertical es lo que evita que un titular largo, cuando es él quien marca el alto, quede pegado al filo de la banda. */ .page-hero-copy{position:relative;display:flex;align-items:center;z-index:3; padding-block:clamp(1.4rem,4vw,2.2rem)} .page-hero-copy .shell{width:100%} .page-hero h1{max-width:18ch;color:var(--ink)} .page-hero .hero-onda{z-index:2} /* AQUÍ LA ONDA NO SE PINTA ENCIMA DE LA FOTO: LA RECORTA. --------------------------------------------------------------------------- En el resto del sitio .hero-onda es una banda del color de abajo que sube sobre la imagen, y funciona porque debajo de esa banda no hay nada que ver. En las páginas de línea sí lo hay: el icono de la línea, que va detrás de todo y tiene que asomar por debajo de la curva. Con la banda pintada eso era imposible por orden de pintado, no por altura. El icono es un z-index:-1 del contexto raíz, así que se pinta ANTES que el hero entero —.page-hero lleva isolation:isolate— y lo tapaba la caja del hero, que es opaca y tiene el borde recto. De ahí que al icono lo cortara una recta a media banda en vez de la curva, con la onda dibujada por encima y sin morderlo: la banda y el fondo de página son del mismo color y la costura solo se veía en el icono. No hay forma de meter el icono ENTRE la foto y el relleno de la onda: el relleno se pinta sobre la foto, así que cualquier capa por encima del relleno está también por encima de la foto. La solución es que el relleno no exista: se enmascara la caja de la imagen para que sea transparente por debajo de la curva, y por ese hueco se ve lo que hay detrás —el icono, y el fondo de página donde no lo hay, que es el mismo color que pintaba la banda antes—. El resultado visible del borde es idéntico; lo que cambia es quién lo produce. Dos capas de máscara y composite exclude: la primera es la caja entera y la segunda la onda pegada abajo, así que el resultado es «todo menos la onda». La onda va 2px más alta y bajada 1px por debajo del borde para que el filo antialiaseado del SVG caiga FUERA de la caja. Sin eso quedaba una raya de un píxel de foto a todo lo ancho —medida: (213,211,209) sobre (249,249,249)—, que es el mismo motivo del bottom:-1px y el 101% de .hero-onda. Va dentro de @supports y con la banda pintada como estaba fuera: si el navegador no sabe componer máscaras, el composite cae en «add», la máscara taparía la curva entera y la cabecera se quedaría con un corte recto. Así el que no lo soporte ve lo de siempre. */ @supports (mask-composite:exclude) or (-webkit-mask-composite:xor){ .page-hero-media{ -webkit-mask-image:linear-gradient(#000,#000),var(--onda-relleno); mask-image:linear-gradient(#000,#000),var(--onda-relleno); -webkit-mask-size:100% 100%,100% calc(var(--onda-h) + 2px); mask-size:100% 100%,100% calc(var(--onda-h) + 2px); -webkit-mask-position:center,center calc(100% + 1px); mask-position:center,center calc(100% + 1px); -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; -webkit-mask-composite:xor; mask-composite:exclude} .page-hero .hero-onda{display:none} /* Y el contenido se queda 2px por encima del borde de la caja. La máscara no llega a matar la última fila: la caja mide 21/9 de un ancho fluido, o sea un alto fraccionario, y el navegador compone esa fila a medias con antialias DESPUÉS de aplicar la máscara. Quedaba una raya de un píxel de foto a todo lo ancho —medida (213,211,209) sobre (249,249,249)— que antes no se veía porque la banda opaca de .hero-onda la tapaba con su bottom:-1px. No se pierde nada: esos 2px caen por debajo de la curva, donde la máscara ya deja transparente. */ .page-hero-media img{height:calc(100% - 2px)} .page-hero .veil{bottom:2px} /* Y el fondo de espera, lo mismo: un color de caja se pinta hasta el borde y en esa fila aclaraba el icono un 20%. No se quita —hace falta mientras carga la foto—, se pinta como capa y se le acorta el alto igual que a la imagen. */ .page-hero-media{background:linear-gradient(var(--wash),var(--wash)) no-repeat top left/100% calc(100% - 2px)} } .crumbs{font-size:.86rem;color:var(--ink-3);padding-block:.85rem} .crumbs a{color:var(--ink-3)} /* Las migas son la vía de vuelta —«Inicio · Familias · Talleres»— y en el móvil son de las pocas formas de subir un nivel sin abrir el menú. Medían 18px de alto. `inline-block` con aire arriba y abajo las deja en 30 sin desmontar el renglón, que es donde una fila de enlaces separados por puntos aguanta: ponerlos a 44 partiría la línea en tres. */ @media (max-width:1024px){ .crumbs a{display:inline-block;padding-block:.35rem} .crumbs{padding-block:.6rem} } /* El icono de la línea, a la derecha del rastro de migas: firma la página en el hueco bajo la portada sin robarle sitio al texto, que sigue a la izquierda. */ .crumbs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .crumbs-row .crumbs{margin:0} /* Cuando hay icono de línea, ocupa el hueco blanco que queda al lado del texto de entrada, igual que la M de la portada aquí abajo: masa grande —del orden de 30rem, no de 5— pegada al borde de la página y por detrás de todo. El icono se pinta como máscara y no como justamente por eso: el color lo pone --c y cada línea sale del suyo con el mismo marcado. Las dos claves están en el posicionamiento, y ninguna es cosmética: · position:absolute sin min-height en la banda. La banda sigue midiendo lo que mide el renglón de migas, así que el icono puede crecer todo lo que haga falta sin empujar el texto hacia abajo. · z-index:-1, y la banda NO crea contexto de apilamiento (position:relative con z-index:auto no lo crea). Así el icono queda por detrás del texto de entrada, que es lo que tiene que leerse por encima de él. EL ICONO REPOSA SOBRE LA LÍNEA DE ABAJO. Esto ha ido y vuelto tres veces y conviene dejar escrito dónde acabó y por qué: 1. Subía por encima del hero y la curva de la foto lo partía. 2. Se bajó a top:.75rem para que empezara limpio bajo el borde de la foto, y entonces sobresalía por ABAJO en Educación —la de entradilla más corta—, donde lo cortaba en recta el fondo de la sección de color. 3. Lorena, 16/08: más grande y "que reposen sobre la línea superior, no pasa nada si se montan por encima de la imagen". Volvió a cruzar el hero, esta vez por encima. 4. Ignacio, 17/08: "los iconos reposando sobre la línea INFERIOR, y prioriza esto sobre que se monte sobre la imagen de portada". La línea inferior es la que separa la banda blanca de la primera sección de color, y ahí está la clave de la solución: esa línea NO es una medida que se pueda estimar —la banda va de 377 a 657 px según cuánto texto de entrada tenga cada página— pero SÍ es el borde inferior de un elemento concreto, la primera sección del contenido. Así que el icono deja de ser un absoluto colgado del renglón de migas y pasa a ser un ::after de esa sección con bottom:0. Se apoya en la línea en las cinco páginas sin medir nada. Y con height:min(--ico-d,100%) nunca sube más alto que su sección, así que tampoco vuelve a asomar por arriba ni a chocar con el hero. La contrapartida asumida —y es la que pidió Ignacio al priorizar— es que en las páginas de entradilla corta el icono sale más pequeño que en las largas. La máscara va anclada abajo a la derecha para que al encoger siga tocando las dos líneas. El z-index vuelve a -1: por debajo del texto de entrada, que es lo que tiene que leerse. Ya no hace falta pelearse con el hero porque ya no lo toca. El color es --ico-c, el tono de MANCHA de la línea, y no su color pleno: a 500px el color pleno deja de ser un recurso de fondo y compite con el texto, igual que la M del dossier va en un coral lavado y no en el rojo de marca. Lo de bajo 880px es otra cosa: ahí el texto ocupa el ancho entero, no hay hueco que llenar, y la masa se le echaría encima. Vuelve a ser el icono pequeño del renglón — y ahí sí va el color pleno de la línea, porque a 3rem el trazo del tono de mancha no se ve: #FBC79B sobre el fondo de página es 1,44:1, que a esa escala es no estar. */ /* .crumbs-row--ico ya no necesita ser contexto de posicionamiento: el icono grande se fue al ::after de la sección y el pequeño de móvil va en el flujo del renglón. La clase se conserva porque la pone page.php y distingue las páginas con icono, pero aquí no hace falta ninguna regla para ella. */ .cuerpo-linea{--ico-d:clamp(15rem,44vw,40rem)} /* El recorte va AQUÍ y no se delega en el body. La firma de la portada se sale un 22% por la derecha a propósito, y hasta ahora quien la cortaba era el `overflow-x:hidden` del body. Eso vale en un escritorio, donde solo se pierde la barra de desplazamiento, pero no en un móvil: allí el trozo que sobresale ENSANCHA el viewport de maquetación —99px sobre 1024 en una tableta apaisada— y con él se va la página entera, que se dibuja más ancha y se enseña reducida. Es el mismo fallo que tenía la cinta de mensajes, y por el mismo motivo. `clip` en lugar de `hidden` para no convertir la sección en un contenedor con desplazamiento y que el eje Y siga libre: la mancha y la onda de la sección siguen saliéndose por arriba y por abajo, que es su trabajo. */ .cuerpo-linea > section:first-child{position:relative;overflow-x:clip;overflow-y:visible} .cuerpo-linea > section:first-child::after{ content:"";position:absolute;z-index:-1;pointer-events:none; right:calc(50% - 50vw);bottom:0; width:var(--ico-d);height:min(var(--ico-d),100%); opacity:var(--ico-o,1); background-color:var(--ico-c,var(--c,var(--brand))); -webkit-mask:var(--ico) no-repeat right bottom/contain; mask:var(--ico) no-repeat right bottom/contain} /* Bajo 880px el texto ocupa el ancho entero, no hay hueco que llenar y la masa se le echaría encima: desaparece el grande y vuelve el pequeño del renglón de migas, que es el .linea-ico de aquí abajo. */ @media (max-width:880px){ .cuerpo-linea > section:first-child::after{display:none} } /* El icono pequeño, solo para móvil. Arriba de 880px no se pinta: ahí manda el ::after de la sección. Y a 3rem el trazo del tono de mancha no se ve —#FBC79B sobre el fondo de página es 1,44:1—, así que aquí va el color pleno de la línea. */ .linea-ico{display:none} @media (max-width:880px){ .linea-ico{display:block;width:clamp(3.5rem,12vw,5rem);flex:none;aspect-ratio:1; background-color:var(--c,var(--brand)); -webkit-mask:var(--ico) no-repeat center/contain; mask:var(--ico) no-repeat center/contain} } /* La misma firma en la portada, que es donde faltaba. La portada no tiene línea ni rastro de migas, así que la banda existe solo para colgar de ella la marca, y lo que firma no es un icono de línea sino la M. Todo lo demás es idéntico al icono de aquí arriba y por los mismos motivos: absoluta para no empujar el texto, z-index:-1 para que la recorten la onda del hero por arriba y el fondo de la sección siguiente por abajo. El tamaño es el mismo clamp que el icono de línea a propósito: las cinco páginas de entrada del sitio tienen que abrir con la misma masa en el mismo sitio o deja de leerse como una firma y pasa a ser un adorno suelto. El color cambia al mudarse. En preguntas frecuentes iba en #EDA492 sobre el coral lavado del fondo, o sea 1,15:1; aquí el fondo es el de página y ese mismo tono se va a 1,95:1, el doble que los iconos de línea, y deja de ser recurso de fondo para competir con el texto. --sec-coral la devuelve al registro de los cuatro iconos. Y la M se sale de la página. Es la otra diferencia con el icono de línea, y la que no es negociable: un icono se pinta entero, pero una M entera flotando es el logotipo suelto y gasta la marca —es la regla de .m-parcial de aquí arriba, y encima la cabecera ya lleva su M a dos dedos de esta—. Se va un 22% por el borde derecho, la misma proporción con la que se salía por el izquierdo en preguntas frecuentes. El corte no necesita máscara: lo da el overflow-x:hidden del body, que ya está puesto. Bajo 880px desaparece en vez de encogerse, que es la diferencia con el icono de línea: aquí no hay renglón de migas que acompañar, así que la M pequeña no tendría dónde ir, y a esa anchura el texto ya ocupa el ancho entero. */ /* La firma de la portada es la misma pieza que el icono de línea, con la misma geometría y el mismo porqué: reposa sobre la línea de abajo de la banda blanca, o sea el borde inferior de la primera sección del contenido. Por eso la portada también envuelve su contenido en .cuerpo-linea, y aquí solo se cambian las dos cosas que la diferencian. Lo que firma no es un icono de línea sino la M, en el coral lavado del dossier —el tono de mancha de una línea aquí no significa nada, y el rojo de marca compite con el texto—. Y la M SE SALE de la página un 22 % por la derecha. Es la diferencia que no es negociable: un icono se pinta entero, pero una M entera flotando es el logotipo suelto y gasta la marca —es la regla de .m-parcial— y encima la cabecera ya lleva su M a dos dedos de esta. El corte lo da el overflow-x:hidden del body, sin máscara. */ /* Y el ajuste que no se ve venir: el lienzo de la M no está lleno. Su viewBox es un cuadrado de 1024 y el trazo, con el transform que lleva dentro, acaba sobre el 893, o sea que el 12,8 % de abajo del cuadrado es aire. Con la máscara anclada al borde inferior de la caja, ese aire dejaba a la M flotando un dedo por encima de la línea. Se compensa bajando la caja ese mismo 12,8 %, y el tamaño de máscara pasa a ser fijo —el cuadrado entero— y no `contain`, que reescalaría el aire con él y descuadraría la cuenta. Los iconos de línea no lo necesitan: sus SVG vienen ajustados al trazo. */ .cuerpo-portada > section:first-child::after{ --ico-c:var(--sec-coral); right:calc(50% - 50vw - var(--ico-d) * .22); bottom:calc(var(--ico-d) * -.128); /* Aquí la caja NO se recorta al alto de la sección, al revés que en las páginas de línea. La M ya nace para verse a medias —se sale por la derecha y se la come el borde— y encogerla para que quepa la dejaría en dos palos. Lo que sobra por arriba se sube a la banda del claim, donde el z-index:-1 la deja por detrás del texto, que es donde tiene que estar. */ height:var(--ico-d); -webkit-mask:var(--m-marca) no-repeat right bottom/var(--ico-d) var(--ico-d); mask:var(--m-marca) no-repeat right bottom/var(--ico-d) var(--ico-d)} /* Metodología en conceptos, no en párrafos. Lorena, 03/08: "que sea algo más conceptual, no hace falta que sea un texto, porque el texto no se lo va a leer nadie, pero si ven participación activa, movimiento...". El rótulo va en negro y el color de línea lo lleva la regla: el rosa a 1,45rem no llega a 4,5:1. */ .conceptos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1.5rem 2rem;list-style:none;padding:0;margin:0} /* Los conceptos no ocupan el ancho entero: se quedan en la mitad izquierda, en dos columnas, y la mitad derecha es el hueco de la fotografía. Con seis conceptos salen tres filas de dos, que es una mancha de texto con la misma proporción que una foto vertical al lado. Las dos columnas van FIJAS aquí y no con el auto-fit de arriba: dentro de media rejilla, un minmax de 15rem colapsa a una sola columna en cuanto la pantalla baja de 1200px y se pierde justo la disposición que se pide. */ .conceptos-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem);align-items:stretch} .conceptos-split .conceptos{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem} /* La foto llega arriba y abajo hasta donde llegan los conceptos. Antes iba centrada y con tope de alto, y en Mayores —donde los conceptos son cinco y ocupan tres filas— quedaba una foto corta flotando en medio de la media columna, con aire por arriba y por abajo. Lorena: "integrar mejor la imagen". Estirándola, los dos lados empiezan y acaban en la misma línea y la sección se lee como un bloque y no como dos piezas sueltas. min-height:0 no es adorno: sin él, un hijo de rejilla no puede encoger por debajo de su contenido y el height:100% de la imagen no tiene contra qué resolverse. */ .conceptos-foto{margin:0;min-height:0} .conceptos-foto img{width:100%;height:100%;object-fit:cover; display:block;border-radius:var(--r)} /* En una columna, ni media rejilla ni dos columnas de conceptos: se deshace entero y los conceptos vuelven a su rejilla elástica. */ @media (max-width:880px){ .conceptos-split{grid-template-columns:1fr} .conceptos-split .conceptos{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))} } .conceptos li{border-top:3px solid var(--ci,var(--ink));padding-top:.8rem} .conceptos b{display:block;font-family:var(--display);font-weight:400; font-size:var(--s-1);line-height:1.15} .conceptos span{display:block;margin-top:.4rem;font-size:.94rem;color:var(--ink-2);line-height:1.5} .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 1.5rem;list-style:none;padding:0;margin:0} @media (max-width:640px){.checks{grid-template-columns:1fr}} .checks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2)} .checks svg{flex:0 0 auto;margin-top:.3em} /* La misma lista, escrita con el bloque de lista de WordPress: ahí no hay forma de meter el SVG de la marca en cada punto, así que la pone el CSS. El color lo pone la línea (--ci), no una constante: la lista de Educación sale naranja y la de Familias rosa con el mismo marcado. */ .wp-block-list.checks{list-style:none;padding-left:0} .wp-block-list.checks li::before{content:"";flex:0 0 1.1rem;height:1.1rem;margin-top:.3em; background-color:var(--ci,var(--ink)); -webkit-mask:var(--tick) no-repeat center/contain; mask:var(--tick) no-repeat center/contain} /* Variante BANDA. Lorena, 03/08: "se queda demasiado alto y es por la imagen; cambiaría el tamaño de la imagen y así se queda como una banda, no tanto como un bloque completo". La foto deja de mandar en la altura. La banda mide lo que medía: 18rem de foto. Lo que cambia es que la foto ya no se queda flotando dentro con aire arriba y abajo, sino que llega a los dos bordes de la sección. Para eso crece justo lo que mide el padding por arriba y por abajo, y ese mismo padding se lo come con margen negativo: la foto ocupa 18rem + los dos aires, y la sección sigue midiendo exactamente lo mismo que antes. Ojo con el atajo de estirarla con align-self:stretch. Parece lo mismo y no lo es: así la foto pasa a medir lo que mida la columna de TEXTO, que es variable, y la sección se dispara en cuanto la lista de garantías ocupa más de lo previsto. El alto de la banda tiene que ser una decisión, no una consecuencia. El recorte lo resuelve object-fit:cover. Como la foto es vertical y la caja apaisada, la escala manda por el ancho: se ve el ancho ENTERO del original y lo que se corta es el alto, que es como tiene que ser. El margen negativo TIENE que ser el mismo valor que el padding de .sec-banda. Van juntos en --banda-aire para que no se puedan separar: si alguien cambia uno y no el otro, la foto se sale o deja franja. */ /* 14rem, que es lo que miden cuatro sellos en columna más su rótulo. Ignacio, 17/08: "hazlo más estrecho, ajustado a lo que ocupa el texto". Sigue siendo un número y no una consecuencia, y eso es a propósito: probé a que la foto se estirara al alto del texto (align-self:stretch) y no ciñe nada, porque con los márgenes negativos que la sacan a los bordes de la sección el que acaba mandando es el propio hueco. Un valor medido contra el contenido real es más corto de escribir y más fácil de mover. Si algún día se añade una quinta garantía hay que subirlo un escalón: 3rem por sello, que es lo que mide la píldora más su separación. */ .split--banda{--banda-foto:13rem;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} /* Las garantías, en cuerpo grande. Lorena, 16/08: "poner el texto más grande para que no quede tanto espacio libre". Eran cuatro frases cortas de una línea cada una en dos columnas, y al lado de una banda de 18rem de alto la mitad de la caja quedaba en blanco. Subiéndolas a --s-1 —el cuerpo de los rótulos de concepto— la columna de texto pesa lo que pesa la foto, que es lo que la banda pide. No es un tamaño suelto: es el mismo escalón que usan .conceptos b y .titulo-2. Y se aplica SOLO dentro de la banda: la misma lista sale en fichas y en secciones normales, donde es una enumeración de apoyo y no el contenido. */ /* LAS GARANTÍAS, EN SELLOS. --------------------------------------------------------------------------- Ignacio, 17/08: "el texto es correcto pero el diseño general del bloque no me gusta; algo más orgánico y en coherencia con el estilo visual de la web". Lo que fallaba era el género de la pieza. Cuatro frases sueltas en una rejilla de 2x2 dentro de un rectángulo, al lado de otro rectángulo: todo recto en una web cuyo alfabeto son curvas —la onda, las cuñas de las tarjetas, las manchas circulares—. Y repartirlas por el alto, que fue el arreglo anterior, solo separó más los renglones: seguían siendo cuatro renglones. Ahora son sellos: píldoras de esquina redonda que fluyen y rompen de línea solas según lo que ocupe cada texto, así que la mancha de texto deja de ser una cuadrícula. Es además lo que son —cuatro garantías, cuatro sellos— y el recurso ya está en el sitio: los distintivos del menú y el rótulo de etapa de cada tarjeta son la misma píldora. Van en blanco sobre el arena y no del color de la línea: cuatro manchas naranjas sobre fondo naranja se apelotonan, y el naranja se reserva para el tic, que es donde dice algo. El texto va en la tipografía de LECTURA y en su peso normal, no en la de titular. Ignacio, 17/08: "los pequeños párrafos con la letra un poco más fina". La display del sitio es Chau Philomene One, que solo existe en un peso: pedirle 600 no carga otra tipografía, el navegador la engorda él —negrita sintética— y de ahí venía el trazo basto. Con la de lectura hay pesos de verdad, y estas cuatro frases son texto corrido dentro de un sello, no rótulos. */ /* El rótulo y los sellos se centran JUNTOS contra la fotografía, como un solo bloque. Antes los sellos llevaban un min-height del alto de la banda y se centraban ellos solos, así que el rótulo se quedaba arriba del todo y entre los dos se abría un hueco que no era de nadie. */ /* Y el rótulo, pegado a los sellos: el .stack--tight de serie abre .9rem entre ellos, que es el ritmo de una sección con titular y entradilla. Aquí el rótulo es la etiqueta de la lista, no un titular. */ .split--banda > .stack{align-self:center;gap:.55rem} /* Y en UNA columna. Fluyendo y rompiendo de línea solos, los cuatro sellos caían 1-2-1 según lo que midiera cada frase, y el que se quedaba solo en su fila parecía descolocado más que orgánico: la irregularidad tiene que estar en el ancho de cada sello, que ya la tiene, no en cuántos van por fila. align-items:flex-start es lo que hace que cada uno mida lo que dice y no se estiren todos al del texto más largo. */ /* Más aire ENTRE sellos y menos DENTRO de cada uno: los dos cambios van juntos porque tiran en sentidos contrarios. Ignacio pide a la vez la franja más estrecha y más separación entre casillas, y la única forma de tener las dos es que el sello engorde menos por dentro —ya lo redondea la píldora— y que lo que sobra se reparta en la separación. */ .split--banda .checks{display:flex;flex-direction:column;align-items:flex-start; gap:.85rem; font-family:var(--body);font-weight:400;font-size:.98rem;line-height:1.3} .split--banda .checks li{align-items:center;gap:.6rem;color:var(--ink); background:var(--surface);border-radius:999px; padding:.42rem 1.15rem .42rem .95rem; box-shadow:0 10px 22px -18px rgba(31,30,29,.55)} /* La lista viene con cada frase en desde el contenido; aquí el peso lo manda el sello, no el marcado. */ .split--banda .checks li strong{font-weight:inherit} .split--banda .checks li::before{margin-top:0} .split--banda .checks svg{width:20px;height:20px;margin-top:0} /* Sin redondeo, a diferencia del resto de .foto. Una foto que llega a los dos bordes de la sección no es una tarjeta apoyada encima sino un trozo de la propia sección, y las esquinas redondeadas de arriba y abajo delatan el corte justo donde no tiene que verse. Las fichas de actividad, clase y taller sí lo conservan: allí la foto sí es una pieza suelta. Y EL LADO QUE DA AL TEXTO LO CORTA LA ONDA. Antes era un degradado que disolvía el borde; se veía blando, pero blando no es lo mismo que orgánico, y además era el único borde del sitio que se resolvía difuminando en vez de con la curva. Ahora es la onda del sistema puesta en vertical —la misma que corta la foto de Lorena en la portada, transpuesta de --onda-borde— con su borde fino encima. Va en MÁSCARA y no en un degradado del color de la sección por encima. Los dos se ven igual hoy, pero el degradado sería una tercera copia del color —después de theme.json y del bloque— y se rompería el día que la sección cambie de fondo o cuando la mancha pase por debajo, que es justo lo que hace aquí. La máscara no sabe de colores: hace transparente la foto y deja ver lo que haya detrás, sea lo que sea. El relleno que se resta es el IZQUIERDO —macizo a la izquierda de la curva—, que es una pieza nueva de tools/onda-vertical.php. Con el derecho, que es el que usa la portada, se borraba la fotografía entera y quedaba la franja. Se corta SOLO por la izquierda, que es el único borde que queda al aire. Por la derecha la foto sangra hasta el borde de la página, y arriba y abajo cae sobre el corte de la propia sección: en esos tres el filo no se ve. La sangría de la derecha se calcula, no se estima. Hay que salir del .shell que envuelve la banda, y lo que separa su caja del borde de la ventana es la mitad de lo que sobra hasta --wide, más el gutter. Con max() en 0 para cuando la ventana es más estrecha que --wide y no sobra nada. El overflow-x:hidden del body absorbe el pelo que se pase por la barra de desplazamiento. */ .split--banda .foto{position:relative;align-self:center;border-radius:0;background:none; height:calc(var(--banda-foto) + var(--banda-aire,0px) * 2); --ola:clamp(2rem,4vw,3.5rem); --sangra-der:calc(max(0px,(100vw - var(--wide)) / 2) + var(--gutter))} /* El encuadre viene ya hecho del fichero —garantiza-centros-banda en scripts/preparar_imagenes.py—, así que aquí solo queda el pellizco que separa la proporción de la banda de la de la foto, y ese pellizco crece con el ancho de la ventana porque la columna sangra hasta el borde de la página. Anclada ABAJO se lo lleva siempre por arriba, donde hay torsos de sobra, y no por abajo, que es donde están los pies: el límite que se pidió. */ .split--banda .foto img{width:100%;height:100%;object-fit:cover;object-position:center bottom} /* El recorte va dentro de @supports y sin nada fuera: si el navegador no sabe componer máscaras, el composite cae en «add», la máscara taparía la foto entera y la banda se quedaría sin imagen. El que no lo soporte ve el rectángulo de siempre, que es feo pero está. */ @supports (mask-composite:exclude) or (-webkit-mask-composite:xor){ .split--banda .foto{ -webkit-mask-image:linear-gradient(#000,#000),var(--onda-v-relleno-izq); mask-image:linear-gradient(#000,#000),var(--onda-v-relleno-izq); -webkit-mask-size:100% 100%,var(--ola) 100%; mask-size:100% 100%,var(--ola) 100%; -webkit-mask-position:center,left center; mask-position:center,left center; -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; -webkit-mask-composite:xor; mask-composite:exclude} } /* El borde fino, la MISMA curva trazada, así que cae exactamente sobre el corte. El color lo pone la línea: naranja en Educación y el que toque el día que esta banda se use en otra sección. */ .split--banda .foto::after{content:"";position:absolute; top:0;bottom:0;left:0;width:var(--ola);z-index:2;pointer-events:none; background:var(--c,var(--brand)); -webkit-mask:var(--onda-v-linea) no-repeat center/100% 100%; mask:var(--onda-v-linea) no-repeat center/100% 100%} /* Abajo de 880px la rejilla es de una columna: ahí estirar no significa nada —no hay columna de texto al lado que marque el alto— y vuelve a ser una franja de alto fijo. */ @media (max-width:880px){ /* Ni sangría a la derecha ni difuminado: en una columna la foto ya ocupa todo el ancho y no tiene ningún lado al aire contra el color. */ .split--banda .foto{align-self:auto;height:14rem;margin-block:0;margin-right:0; -webkit-mask:none;mask:none} /* Y sin el borde fino: en una columna la foto ya no linda con el texto por la izquierda, así que ahí no hay junta que trazar. */ .split--banda .foto::after{display:none} } /* La sección que aloja una banda lleva menos aire vertical que una normal: su contenido ya es una franja baja y con el padding de siempre se queda flotando. Lorena, 03/08: "se queda demasiado alto y es por la imagen". */ /* El aire de la banda es la MITAD que el de una sección normal y no por gusto: medido, la franja daba 275 px para 209 de texto, o sea 66 de relleno —30 por arriba y 37 por abajo— que es lo que la hacía parecer un bloque en vez de una banda. Este token es a la vez el padding de la sección y el margen negativo con el que la foto sale a sus bordes, así que tocándolo aquí las dos cosas siguen casando. El primer ajuste se pasó de ceñido —36 px de holgura para 203 de texto— así que sube 3 mm por lado: 1,6rem son 25,6 px, once más que los 14,4 de entonces. Sigue siendo la mitad que una sección normal. */ .sec-banda{--banda-aire:clamp(1.3rem,1.9vw,1.6rem);padding-block:var(--banda-aire)} /* Cuando la foto la pinta el bloque de imagen de WordPress, sus reglas (height:auto) chocan con las de .foto. Manda .foto, y se dice con la especificidad suficiente porque el orden de carga de los estilos de bloque no está garantizado. */ figure.foto.wp-block-image{margin:0} figure.foto.wp-block-image img{width:100%;height:100%;object-fit:cover} /* Los márgenes negativos que sacan la foto de la banda —arriba y abajo hasta los bordes de la sección, y a la derecha hasta el borde de la página— tienen que ir AQUÍ y no arriba con el resto de .split--banda: el margin:0 de la regla de encima es más específico y se los comía. Los valores se calculan allí (--banda-aire, --sangra-der); aquí solo se aplican donde ganan. */ .split--banda figure.foto.wp-block-image{ margin-block:calc(var(--banda-aire,0px) * -1); margin-right:calc(var(--sangra-der,0px) * -1)} @media (max-width:880px){ .split--banda figure.foto.wp-block-image{margin-block:0;margin-right:0} } .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem);align-items:center} @media (max-width:880px){.split{grid-template-columns:1fr}} .etapa{display:flex;flex-direction:column;gap:1.15rem;margin-top:3rem} .etapa:first-of-type{margin-top:0} .etapa-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap; border-bottom:2px solid var(--ink);padding-bottom:.55rem} .etapa-head h3{font-size:var(--s-2)} .etapa-head span{font-size:.9rem;color:var(--ink-3)} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.2rem} /* Foto real intercalada en la rejilla del catálogo. Las etapas con pocas actividades dejan huecos, y ahí Lorena quiere una imagen de verdad "como de adorno, sin que sea un bloque más": entre tanto cartel hace falta ver gente. */ .adorno-etapa{grid-column:span 2;margin:0;border-radius:var(--r);overflow:hidden; background:var(--wash)} .adorno-etapa img{width:100%;height:100%;min-height:100%;object-fit:cover} @media (max-width:640px){.adorno-etapa{grid-column:auto;aspect-ratio:3/2}} .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule); border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit; transition:border-color .2s,transform .2s,box-shadow .2s} .card:hover{border-color:var(--c,var(--rule));transform:translateY(-3px); box-shadow:0 22px 42px -28px rgba(31,30,29,.45)} .card-img{aspect-ratio:3/2;overflow:hidden;background:var(--w,var(--wash))} .card-img img{width:100%;height:100%;object-fit:cover} .card-body{padding:1.05rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .card h4{font-size:1.24rem;line-height:1.1} .card p{font-size:.92rem;color:var(--ink-2);line-height:1.55} .tag{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:.74rem; letter-spacing:.1em;text-transform:uppercase;color:var(--ci,var(--ink-3)); border:1px solid currentColor;padding:.15rem .55rem;border-radius:999px} .card-go{margin-top:auto;padding-top:.45rem;font-family:var(--display);font-weight:700;color:var(--ink)} .card:hover .card-go{color:var(--ci)} /* ---------- Calendario de talleres --------------------------------------- Los carteles son de Lorena y ya llevan toda la información encima: la rejilla solo tiene que dejarlos respirar y ordenarlos por fecha. */ /* Cuatro columnas fijas: con 8 carteles salen dos filas exactas, que es lo que da sensación de actividad. Una sola fila se lee como "poca cosa". */ .carteles{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,1.6rem);list-style:none;padding:0;margin:0} /* Los próximos van a tres: son pocos y en cuatro columnas quedaban pequeños y perdidos. El histórico sí se beneficia de la rejilla de cuatro, porque son ocho y se leen como una tira de recuerdos. */ .carteles:not(.carteles--pasados){grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.carteles, .carteles:not(.carteles--pasados){grid-template-columns:repeat(2,1fr)}} .cartel{display:flex;flex-direction:column;gap:.6rem} .cartel a{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule); background:var(--surface);transition:transform .2s ease,box-shadow .2s ease} .cartel a:hover{transform:translateY(-3px);box-shadow:0 20px 38px -26px rgba(31,30,29,.45)} .cartel img{width:100%;height:auto;display:block} .cartel time{font-family:var(--display);font-weight:400;letter-spacing:.05em; text-transform:uppercase;font-size:.82rem;color:var(--ci,var(--ink-3))} .cartel span{font-size:.86rem;color:var(--ink-3);line-height:1.4} /* Los talleres que ya han pasado van en gris, también al pasar el ratón: el histórico se distingue del calendario de un vistazo, sin leer la fecha. */ .carteles--pasados img{filter:grayscale(1)} /* El renglón de mientras no hay fechas publicadas. SIN BORDE DISCONTINUO, y no es un detalle. El punteado es la convención universal del "hueco donde debería haber algo", y aquí lo que hay no es un fallo: es el estado normal de un calendario que se publica por tandas. La caja de trazos hacía leer "esto está sin terminar" antes de llegar al texto, que dice lo contrario. Va en el color de Familias, con la misma pinta que las secciones de color del resto de la página, y ocupa el ancho de contenido: una tarjeta pequeña dentro de una sección grande vuelve a parecer un resto. */ .sin-fechas{background:var(--fam-0);border:1px solid var(--fam-1);border-radius:var(--r); padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;gap:.8rem; align-items:flex-start;max-width:60ch} .sin-fechas .eyebrow{color:var(--fam-ink)} .sin-fechas>p{margin:0;max-width:52ch} /* ---------- Calendario de talleres con la tarjeta de avisos -------------- Dos columnas: el calendario manda y la tarjeta acompaña. El ancho de la derecha es fijo y no una fracción, porque la tarjeta es una pieza de texto corto: en fracciones, con la pantalla ancha se estiraba hasta que el titular cabía en un renglón y dejaba de leerse como tarjeta. */ /* CON align-items:start, igual que .ficha. Y es al revés de lo que parece: en una rejilla, el contenedor de una celda pegajosa es su ÁREA, que ocupa todo el alto de la fila. Con start la caja mide lo suyo dentro de un área alta y le sobra recorrido; sin start —o sea, con el stretch de serie— la caja se estira hasta llenar el área y se queda sin un solo píxel por el que deslizarse. Medido en el navegador: 1542 px de recorrido con start, 0 sin él. Es el mismo montaje que el panel de reserva de las fichas. */ .talleres-marco{display:grid;grid-template-columns:minmax(0,1fr) 20rem; gap:clamp(1.5rem,3vw,2.5rem);align-items:start} .talleres-lista{min-width:0} /* El mensaje de «todavía no hay fechas» se midió para ir a todo lo ancho de la sección, y dentro de la columna su tope de 60ch lo deja corto: quedaba un canal muerto entre él y la tarjeta. La columna ya le pone el ancho. */ .talleres-marco .sin-fechas{max-width:none} /* Con la columna de la derecha puesta, tres carteles por fila se quedan sin aire antes de que salte la regla general de 900 px. Se adelanta a dos. */ @media (max-width:1180px){ .talleres-marco .carteles:not(.carteles--pasados){grid-template-columns:repeat(2,1fr)} } /* La caja de avisos ES el panel de reserva de las fichas, no una prima suya: comparte regla unas líneas más abajo (.panel, #order_review, .avisa). Las dos hacen lo mismo —el recuadro blanco donde se actúa, quieto a la derecha mientras el contenido pasa—, así que tienen que reconocerse. Aquí solo va lo que no comparten. */ .avisa-ico{flex:0 0 auto;color:var(--fam-ink)} .avisa-titulo{margin:0;font-family:var(--display);font-weight:400; font-size:var(--s-1);line-height:1.25} .avisa-texto{margin:0;font-size:var(--s--1);line-height:1.5;color:var(--ink-3)} .avisa-btn{align-self:stretch;justify-content:center} /* Por debajo de tableta no hay sitio para dos columnas: la caja pasa debajo del calendario y deja de ser pegajosa. Una caja que persigue al dedo en una pantalla estrecha tapa contenido, que es justo lo contrario de lo que se busca. Es la misma regla que ya tienen .panel y #order_review. */ @media (max-width:900px){ .talleres-marco{grid-template-columns:1fr} .avisa{max-width:60ch} .talleres-marco .sin-fechas{max-width:60ch} } /* Datos prácticos dentro de una tarjeta de clase: horario, lugar y cuota */ .datos-min{margin:.5rem 0 0;display:grid;grid-template-columns:auto 1fr; gap:.35rem .9rem;font-size:.88rem;border-top:1px solid var(--rule);padding-top:.75rem} .datos-min dt{font-family:var(--display);font-weight:400;letter-spacing:.06em; text-transform:uppercase;font-size:.7rem;color:var(--ink-3);padding-top:.2em} .datos-min dd{margin:0;color:var(--ink-2)} .datos-min dd small{color:var(--ink-3)} /* La ficha de actividad/taller y el pago comparten reparto y panel: no son dos diseños parecidos, es el MISMO. Quien llega al pago viene de pulsar "Comprar plaza" en una ficha, y la página tiene que reconocerse. */ .ficha, form.checkout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem);align-items:start} @media (max-width:900px){.ficha,form.checkout{grid-template-columns:1fr}} /* .avisa —la caja de avisos de talleres— entra aquí y no se copia el aspecto aparte: es el mismo componente haciendo el mismo trabajo en otra página. El anclaje sale de --head-h, que es el alto MEDIDO de la cabecera pegajosa, en vez del 5,5rem a ojo que llevaba: si la cabecera cambia de alto, esto se entera. */ .panel, #order_review, .avisa{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); padding:clamp(1.2rem,2.4vw,1.75rem);position:sticky;top:calc(var(--head-h) + 1.25rem)} .panel, .avisa{display:flex;flex-direction:column;gap:1rem} @media (max-width:900px){.panel,#order_review,.avisa{position:static}} .precio{font-family:var(--display);font-weight:700;font-size:var(--s-2);line-height:1} .precio small{display:block;font-family:var(--body);font-weight:400;font-size:.85rem; color:var(--ink-3);margin-top:.3rem;line-height:1.4} .panel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem .9rem;font-size:.94rem} .panel dt{font-family:var(--display);font-weight:700;letter-spacing:.06em; text-transform:uppercase;font-size:.74rem;color:var(--ink-3);padding-top:.25em} .panel dd{margin:0} /* --- Venta de talleres ----------------------------------------------------- Un cartel puede anunciar dos sesiones (0-3 y a continuación 3-6) y cada una se compra por separado. Sin el filete entre ellas los dos precios y los dos botones se leen como un bloque y no se sabe cuál va con cuál. */ /* Cada sesión necesita respirar por dentro y separarse de la siguiente: son dos decisiones distintas (el tramo de 0-3 y el de 3-6) y sin aire se leen como un bloque con dos botones sueltos. */ .sesion{display:flex;flex-direction:column;gap:.8rem} .sesion+.sesion{border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.6rem} .sesion-quien{font-family:var(--display);font-weight:700;font-size:var(--s-0);margin:0} .sesion .precio{margin:0} .sesion-aviso{margin:0;font-size:.85rem;color:var(--ink-3);line-height:1.4} .sesion-agotado{margin:0;font-family:var(--display);font-weight:700;font-size:.9rem; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} /* --- Los tramos de cuota de una clase semanal ------------------------------- Aquí no se elige solo el horario: también la cuota (general, exalumnos, Club de Crianza). Van dentro del bloque del grupo, entre el horario y el botón, porque son la misma decisión: en qué grupo y a qué precio. Cada opción es una fila con el nombre a la izquierda y el precio a la derecha, alineados, para que las tres cifras se puedan comparar de un vistazo. Con los precios pegados al texto había que leer tres frases para ver la diferencia. */ .tramos{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem} .tramos-titulo{font-family:var(--display);font-weight:700;letter-spacing:.06em; text-transform:uppercase;font-size:.74rem;color:var(--ink-3);padding:0 0 .35rem} .tramo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem; padding:.55rem .7rem;border:1px solid transparent;border-radius:var(--r);cursor:pointer} .tramo:hover{background:var(--ground)} /* La opción marcada se ve marcada sin depender solo del punto del radio, que a cierta distancia no se distingue. :has() lo permite sin JavaScript; donde no esté, se pierde el realce y el radio sigue diciendo cuál es. */ .tramo:has(input:checked){border-color:var(--rule);background:var(--ground)} .tramo:has(input:focus-visible){outline:2px solid var(--action);outline-offset:2px} .tramo input{margin:0;accent-color:var(--action)} .tramo-nombre{font-size:.92rem;line-height:1.3} .tramo-precio{font-family:var(--display);font-weight:700;font-size:var(--s-0); white-space:nowrap;line-height:1} .tramo-precio small{font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--ink-3)} /* Los datos prácticos van bajo la descripción, en la columna ancha. La primera columna es de ancho fijo: con 'auto' la marcaba la etiqueta más larga y los valores bailaban de una fila a otra. */ .taller-datos{margin:0;display:grid;grid-template-columns:8rem minmax(0,1fr); gap:.7rem 1.2rem;padding-top:1.3rem;border-top:1px solid var(--rule)} .taller-datos dt{font-family:var(--display);font-weight:700;letter-spacing:.06em; text-transform:uppercase;font-size:.74rem;color:var(--ink-3);line-height:1.5;padding-top:.15em} .taller-datos dd{margin:0;line-height:1.5} /* La coletilla de una fila de datos: "(puedes incorporarte con el curso empezado...)". Va en el renglón de abajo y no entre paréntesis a continuación porque el dato es la fecha y la coletilla es una salvedad: pegada al mismo renglón compite con ella y la fecha deja de leerse de un vistazo, que es para lo que está esta rejilla. */ .taller-datos .nota{display:block;margin-top:.15rem;font-size:.86rem; line-height:1.4;color:var(--ink-3)} /* La fila de plazas cuando ya no quedan. Es el único dato de la rejilla que cambia solo —lo pone [lm_plazas], ver inc/lista-espera.php—, y cuando cambia tiene que verse: en negrita y en el rojo accesible, que aquí no es adorno sino la diferencia entre «quedan plazas» y «no quedan». */ .taller-datos .plazas-completas{font-weight:700;color:var(--action)} @media (max-width:520px){.taller-datos{grid-template-columns:1fr;gap:.2rem 0} .taller-datos dd{margin-bottom:.7rem}} /* La columna derecha de la ficha: el cartel y, debajo, la compra. El panel sigue siendo pegajoso, así que al bajar el cartel se va y la compra se queda. */ .taller-lado{display:flex;flex-direction:column;gap:clamp(1.2rem,2.4vw,1.75rem)} /* Con el cartel debajo, el panel NO puede quedarse fijo: al desplazar se queda clavado y el cartel le pasa por debajo, porque un elemento pegajoso no reserva su hueco. La compra ya está arriba del todo, que es lo que importa. */ .taller-lado .panel{position:static} .cartel-ficha{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule); background:var(--surface);line-height:0} .cartel-ficha img{width:100%;height:auto;display:block} /* El cartel cierra la columna, así que en móvil no hace falta reordenar nada: el orden del marcado —texto, compra, cartel— ya es el bueno. */ .faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 0;position:relative; font-family:var(--display);font-weight:700;font-size:var(--s-1);line-height:1.2} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:11px;height:11px; border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor; transform:translateY(-70%) rotate(45deg);transition:transform .22s ease} .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} /* Al abrirse toma el color de la SECCIÓN (--ci), no el rojo general */ .faq details[open] summary{color:var(--ci,var(--action))} .faq-body{padding:0 3rem 1.35rem 0;color:var(--ink-2);max-width:var(--measure)} .cta{background:var(--ink);color:var(--ground)} .cta h2{color:var(--ground)} .cta p{color:#C9C4BA} /* El antetítulo de la CTA lleva el color de SU línea, no un naranja fijo: sobre el negro hace falta la tinta clara (--cl), que pone lm_body_tokens(). Sin línea —la portada— cae en el coral de LAMUSICAL, que es el neutro. */ .cta .eyebrow{color:var(--cl,var(--sec-coral))} .site-foot{background:var(--ink);color:var(--ground);padding-block:clamp(2.5rem,5vw,4rem)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.25rem,4vw,3rem)} @media (max-width:760px){.foot-grid{grid-template-columns:1fr}} .site-foot img.flogo{width:148px;margin-bottom:.9rem} .site-foot h4{font-size:var(--s-1);margin-bottom:.6rem} .site-foot a{color:var(--ground);text-decoration:none;display:block;padding:.2rem 0} .site-foot a:hover{color:#FBB174;text-decoration:underline} .site-foot p{color:#C4BFB7;font-size:.94rem;max-width:36ch} .foot-legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid #3A3733;font-size:.84rem; color:#9A948C;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between} /* Los enlaces legales van en línea: .site-foot a los pone en bloque para las columnas de arriba, y aquí necesitamos una tira horizontal separada por puntos. */ .foot-legal-nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center} .site-foot .foot-legal-nav a{display:inline;padding:0;color:#9A948C} .site-foot .foot-legal-nav a:hover{color:#FBB174} /* El separador es un span aparte, no un ::before del enlace: dentro del entraba en su área activa y se subrayaba al pasar el cursor. */ .foot-legal-sep{color:#3A3733;user-select:none} /* En el móvil el pie es la segunda navegación de la web: cuando alguien llega al final de una página, ahí es donde salta a otra sección. Sus enlaces medían 37px de alto los de las columnas y 22 los legales; con el ratón da igual, con el dedo no. Va DESPUÉS del bloque de arriba a propósito: la regla de .foot-legal-nav pone `padding:0` con la misma especificidad que esta, así que puesta antes perdía y el pie seguía midiendo 22px con la hoja diciendo lo contrario. */ @media (max-width:1024px){ .site-foot .foot-grid a{padding:.5rem 0} .site-foot .foot-legal-nav a{padding-block:.55rem} } /* --------------------------------------------------------------------------- Páginas legales (aviso legal, privacidad, cookies, ventas) Son documentos largos de lectura seguida, no páginas compuestas: página.php saca the_content() sin contenedor, así que el ancho y el aire los pone aquí. --------------------------------------------------------------------------- */ /* El contenedor toma el ancho del .shell para que el texto arranque en la misma vertical que el h1 de la cabecera; la medida de lectura la limita cada hijo. Centrarlo dejaba el título pegado al margen y el cuerpo flotando en medio. */ .lm-legal{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)} /* En rem, no en ch: 'ch' se mide con la fuente del propio elemento y en los titulares display daba una medida desbocada, con el filete cruzando la página. */ .lm-legal>*{max-width:52rem} .lm-legal>*+*{margin-top:1.1rem} /* Los h2/h3 globales son de portada. En un documento de lectura seguida bajan un escalón, y el filete superior marca el corte entre cláusulas. */ .lm-legal h2{font-size:var(--s-2);margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--rule)} .lm-legal>h2:first-child{margin-top:0;padding-top:0;border-top:0} .lm-legal h3{font-size:var(--s-1);margin-top:1.9rem} .lm-legal h4{margin-top:1.5rem} .lm-legal p,.lm-legal li{line-height:1.65} .lm-legal ul,.lm-legal ol{padding-left:1.25rem} .lm-legal li+li{margin-top:.45rem} /* Los puntos de las listas que son SOLO un enlace —las direcciones de ayuda de cada navegador en la política de cookies— quedaban en 23px de alto, un pelo por debajo del mínimo de 24 que pide WCAG 2.2 para una diana. Con el enlace dentro de una frase no hace falta: ahí manda el interlineado del párrafo. */ .lm-legal li>a{display:inline-block;padding-block:.15rem} /* Las políticas están llenas de direcciones sin espacios (support.google.com/chrome/answer/95647) y de nombres de cookie con guiones bajos. En una columna de 320px no hay dónde partirlos y se salen por el margen: `anywhere` autoriza el corte donde haga falta, pero solo aquí, que es donde el texto es técnico y nadie espera guiones de tipógrafo. */ .lm-legal a,.lm-legal code{overflow-wrap:anywhere} .lm-legal a{color:var(--action);text-underline-offset:.18em} .lm-legal .wp-block-table{margin-block:1.4rem;overflow-x:auto} .lm-legal .wp-block-table table{width:100%;border-collapse:collapse;font-size:.94rem} .lm-legal .wp-block-table th,.lm-legal .wp-block-table td{ padding:.6rem .7rem;text-align:left;vertical-align:top;border:1px solid var(--rule)} .lm-legal .wp-block-table th{background:var(--wash);font-weight:700} /* TABLAS APILADAS EN EL MÓVIL. Las de las políticas son de cuatro columnas y su ancho mínimo ronda los 515px: en un teléfono de 360 no caben ni de lejos, y el `overflow-x:auto` de arriba las dejaba deslizándose de lado sin ninguna señal de que se pudiera. Por debajo de 640px cada fila pasa a ser una tarjeta y cada celda una línea con el nombre de su columna encima. El rótulo sale de `data-rotulo`, que lo pone inc/tablas.php copiándolo del . La condición `[data-rotulo]` no es adorno: una tabla sin fila de cabecera no recibe el atributo, y apilarla dejaría celdas sueltas sin contexto — esas se quedan como estaban, deslizándose. */ @media (max-width:640px){ .lm-legal .wp-block-table:has(td[data-rotulo]){overflow-x:visible} .lm-legal .wp-block-table:has(td[data-rotulo]) table, .lm-legal .wp-block-table:has(td[data-rotulo]) tbody, .lm-legal .wp-block-table:has(td[data-rotulo]) tr, .lm-legal .wp-block-table:has(td[data-rotulo]) td{display:block;width:100%} .lm-legal .wp-block-table:has(td[data-rotulo]) thead{display:none} .lm-legal .wp-block-table:has(td[data-rotulo]) tr{ border:1px solid var(--rule);border-radius:var(--r); padding:.35rem .1rem;margin-bottom:.8rem;background:var(--surface)} .lm-legal .wp-block-table:has(td[data-rotulo]) td{border:0;padding:.5rem .85rem} .lm-legal .wp-block-table:has(td[data-rotulo]) td+td{border-top:1px solid var(--rule)} /* Mismo lenguaje que los rótulos de campo de las fichas y los formularios: versalitas de la display. Es el mismo papel —nombrar un dato— y tiene que leerse igual. */ .lm-legal .wp-block-table td[data-rotulo]::before{ content:attr(data-rotulo);display:block; font-family:var(--display);font-weight:700;font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); margin-bottom:.15rem} } .lm-legal .wp-block-quote{margin-block:1.4rem;padding:1.1rem 1.3rem;border-left:3px solid var(--action); background:var(--wash);border-radius:.4rem} .lm-legal .wp-block-quote p{margin:0} .lm-legal .wp-block-quote p+p{margin-top:.5rem} .lm-legal .lm-legal-fecha{margin-top:2.5rem;font-size:.86rem;color:var(--ink-3)} .lm-legal code{font-size:.9em;background:var(--wash);padding:.1em .35em;border-radius:.25rem} .ph{position:relative} .ph::after{content:"IMAGEN PROVISIONAL · IA";position:absolute;left:.7rem;top:.7rem;z-index:4; background:var(--ink);color:#FBB174;font-family:var(--display);font-size:.62rem; font-weight:700;letter-spacing:.12em;padding:.24rem .6rem;border-radius:999px;white-space:nowrap} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important} .linea:hover,.card:hover{transform:none} .linea:hover .linea-img img{transform:none} } @media (max-width:1024px){ /* Instagram queda pegado a la derecha y el botón de menú a su lado. Un solo margin-left:auto en la fila; si lo llevan los dos, se reparten el hueco y el de menú se va de sitio. */ /* 44px de lado en los dos. No es un capricho de rejilla: es la medida por debajo de la cual un dedo empieza a fallar, y estos dos son los únicos mandos de la cabecera en el móvil —el de Instagram medía 38 y el de menú 33 de alto—. Se centra el icono con flex, así que el interior no cambia. */ /* El logo es el «volver a la portada» y en el móvil se usa mucho: medía 33px de alto, los de su imagen. El min-height le da los 44 de diana sin tocar el tamaño del logotipo, que lo fija su propio clamp. */ .brand{display:inline-flex;align-items:center;min-height:44px} .ig{order:1;margin-left:auto;width:44px;height:44px} .burger{display:inline-flex;order:2;margin-left:.45rem; align-items:center;justify-content:center;width:44px;height:44px;padding:0} /* El cajón. `100dvh` y no `100%`: en un móvil el 100% del viewport incluye la franja que ocupan las barras del navegador, así que el último enlace y el botón de Área de usuario quedaban debajo del borde de la pantalla hasta que el visitante deslizaba. `dvh` mide lo que de verdad se ve. */ .nav{position:fixed;top:0;right:0;left:auto;height:100dvh;width:min(88vw,25rem); background:var(--ground); border-left:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0; padding:1rem 1.2rem 2rem;overflow-y:auto;overscroll-behavior:contain; transform:translateX(101%); z-index:2;box-shadow:-24px 0 60px -30px rgba(31,30,29,.5); /* Aparcado fuera de pantalla el cajón NO se ve, pero sigue en el árbol: sin `visibility:hidden` el tabulador entra en él y el foco se pasea por siete enlaces invisibles. El retardo es para que se esconda DESPUÉS de deslizar y no de golpe a mitad de la animación. */ visibility:hidden; transition:transform .28s ease,visibility 0s linear .28s} .nav[data-open="true"]{transform:translateX(0);visibility:visible; transition:transform .28s ease,visibility 0s} /* La X encabeza el cajón, a la derecha, más o menos donde estaba la hamburguesa que el propio cajón acaba de tapar. Va en el FLUJO y no en `position:absolute` a propósito: el cajón desliza cuando el contenido no cabe —con los dos submenús abiertos pasa de los 800px— y una X absoluta se iría hacia arriba con el desplazamiento justo cuando más falta hace. 44px de lado, que es la medida a la que un dedo acierta. */ .nav-cerrar{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;align-self:flex-end;width:44px;height:44px;margin-bottom:.5rem; background:none;border:1px solid var(--rule);border-radius:999px; color:var(--ink);cursor:pointer} .nav-cerrar:hover{background:var(--wash)} /* Lo que flota por encima de todo estorba cuando el cajón está abierto. · El contacto flotante va a z-index:70 y se quedaba pegado sobre el menú. · El aviso de cookies va a 99999 y ocupa 332px de una pantalla de 740: con el menú abierto se comía «Contacto» y «Área de usuario», que quedaban visibles pero muertos al tacto. En la PRIMERA visita, que es justo cuando alguien va a mirar el menú. Los dos se retiran mientras el cajón está abierto y vuelven al cerrarlo. El aviso no se está esquivando: sigue ahí, y sin consentimiento no se carga nada — solo deja de disputarle el sitio a la navegación. */ html[data-menu="abierto"] .flota, html[data-menu="abierto"] .cmplz-cookiebanner{display:none} .nav>a,.has-sub>a{font-size:1.3rem;padding:.82rem .7rem;border-bottom:1px solid var(--rule)} .has-sub{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap; border-bottom:1px solid var(--rule)} .has-sub>a{flex:1;border-bottom:0} .has-sub>.subtoggle{padding:.82rem .6rem;border-left:1px solid var(--rule)} .sub{position:static;min-width:0;width:100%;border:0;box-shadow:none;background:var(--wash); margin:0 0 .5rem;padding:.25rem} /* Ya no hace falta anular el hover aquí: arriba solo se aplica donde hay ratón. Lo que sí hace falta es que en el cajón mande el botón, y punto. */ .sub{display:none} .sub[data-open="true"]{display:flex} .acceso{margin:1.1rem 0 0;justify-content:center;padding:.7rem 1rem} .navmask{position:fixed;inset:0;background:rgba(31,30,29,.42);opacity:0;pointer-events:none; transition:opacity .28s ease;z-index:55} .navmask[data-open="true"]{opacity:1;pointer-events:auto} } @media (min-width:1025px){.navmask{display:none}} /* ========================================================================== FORMULARIOS (FluentForm) ========================================================================== Los formularios son de Lorena y su CONTENIDO no se toca: las preguntas, el orden y los textos de ayuda son suyos y están pensados. Lo que se cambia es solo cómo se ven, porque venían con el aspecto de fábrica del plugin —caja fina gris, tipografía del sistema, botón naranja redondeado— y en medio de esta web se leían como una pieza pegada de otro sitio. Se viste por CSS y no tocando los ajustes del plugin a propósito: así una actualización de FluentForm no se lleva por delante el diseño, y Lorena puede seguir editando campos en su pantalla de siempre. El lenguaje es el que ya usa el resto del sitio: · rótulo de campo como los de las fichas de clase (display, versalitas) · caja blanca, borde --rule-tarjeta, radio --r · foco en el color de la línea, no en el azul del navegador · botón de envío el .btn del tema, píldora negra ---------------------------------------------------------------------- */ /* La caja del formulario. Sin ancho propio: lo pone el .shell que lo envuelve. */ .frm-fluent-form{font-family:var(--body);color:var(--ink)} /* Cada campo. El hueco entre campos es el mismo ritmo que .stack--tight. */ .frm-fluent-form .ff-el-group{margin-bottom:1.35rem} /* Rótulo. Va en versalitas de la display, como el "DURACIÓN / HORARIO" de las fichas de clase: son la misma cosa —el nombre de un dato— y deben leerse igual. El asterisco de obligatorio en el rojo accesible, no en el de marca. */ .frm-fluent-form .ff-el-input--label label{ font-family:var(--display);font-weight:700;font-size:var(--s--1); letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2); margin-bottom:.45rem;display:inline-block;line-height:1.3} .frm-fluent-form .ff-el-input--label.ff-el-is-required>label::after, .frm-fluent-form .ff-el-is-required.asterisk-right>label::after{color:var(--action)} /* Las cajas. Todas las variantes del plugin en una: si se listan solo input y textarea, los select y los datepicker se quedan con el aspecto de fábrica. */ .frm-fluent-form .ff-el-form-control{ width:100%;font-family:var(--body);font-size:var(--s-0);line-height:1.5; color:var(--ink);background:var(--surface); border:1px solid var(--rule-tarjeta);border-radius:var(--r); padding:.72rem .9rem;transition:border-color .18s,box-shadow .18s} .frm-fluent-form .ff-el-form-control::placeholder{color:var(--ink-3);opacity:1} .frm-fluent-form textarea.ff-el-form-control{min-height:7.5rem;resize:vertical} /* Foco. El anillo lleva el color de la LÍNEA (--ci), así que el formulario de Educación enfoca en naranja y el de Empresas en azul con el mismo CSS. El azul del navegador no pinta nada aquí. */ .frm-fluent-form .ff-el-form-control:focus{ outline:none;border-color:var(--ci,var(--ink)); box-shadow:0 0 0 3px color-mix(in srgb,var(--ci,var(--ink)) 22%,transparent)} /* El select trae su propia flecha del sistema y desentona. Se le pone la del tema y se le quita la nativa. */ .frm-fluent-form select.ff-el-form-control{ appearance:none;-webkit-appearance:none;padding-right:2.4rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234A443B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:.75rem} /* Separador de bloque ("Datos de la actividad"). Es el mismo papel que un .eyebrow con su regla: rotula un grupo y lo separa del anterior. */ .frm-fluent-form .ff-el-section-break{ margin:2.4rem 0 1.35rem;padding-top:1.1rem;border-top:2px solid var(--ci,var(--ink))} .frm-fluent-form .ff-el-section-break:first-child{margin-top:0;padding-top:0;border-top:0} .frm-fluent-form .ff-el-section-break h3, .frm-fluent-form .ff-el-section-break .ff-el-section-title{ font-family:var(--display);font-weight:400;font-size:var(--s-1); color:var(--ink);margin:0;line-height:1.15} .frm-fluent-form .ff-el-section-break p{margin:.35rem 0 0;color:var(--ink-2);font-size:.94rem} /* El plugin mete además un
dentro del separador. Con la regla de arriba serían dos rayas seguidas, así que se va la suya. */ .frm-fluent-form .ff-el-section-break hr{display:none} /* Casilla del RGPD. Quien manda en la fila es el