/* ========================================================================== Primitivas bajo el primer viewport (catálogo: _plans/03-PRIMITIVAS.md). Las de layout (wrapper, section, flow, stack, cluster, grid, split, antetitulo, marca) viven en critical-css/base.css. ========================================================================== */ @layer primitivas { /* ---------- Cabecera de sección ---------- */ .section-header { display: grid; justify-items: center; gap: var(--space-sm); max-width: 42rem; margin-inline: auto; text-align: center; } .section-header__intro { color: var(--color-corteza); } .section-header--izquierda { justify-items: start; max-width: none; margin-inline: 0; text-align: start; } @media (min-width: 48rem) { .section-header--izquierda { grid-template-columns: 1fr minmax(0, 26rem); column-gap: var(--space-xl); align-items: end; } .section-header--izquierda > * { grid-column: 1; } .section-header--izquierda > .section-header__intro { grid-column: 2; grid-row: 1 / span 2; } } /* ---------- Tarjeta ---------- */ .card { padding: var(--card-pad, var(--space-lg)); border: var(--borde); border-radius: var(--radio); background: var(--card-bg, var(--color-superficie)); font-size: var(--text-sm); line-height: 1.65; } .card--blanca { --card-bg: var(--color-blanco); } .card--crema { --card-bg: var(--color-crema); } .card--lino { --card-bg: var(--color-lino); border-color: transparent; } .card--amplia { --card-pad: clamp(var(--space-lg), 4vw, var(--space-xl)); } .card--compacta { --card-pad: var(--space-sm) var(--space-md); display: grid; gap: var(--space-2xs); align-content: start; } .card__title { font-family: var(--fuenteTitulos); font-size: var(--text-h4); font-weight: 500; line-height: 1.3; color: var(--color-tinta); } .card__pie { padding-block-start: var(--space-sm); border-block-start: var(--borde); color: var(--color-corteza); } /* Numerada: el número sale del contador `paso` del <ol role="list"> padre */ .card--numerada { counter-increment: paso; display: flex; flex-direction: column; gap: var(--space-sm); } .card--numerada::before { content: counter(paso, decimal-leading-zero); font-family: var(--fuenteTitulos); font-size: 2.25rem; line-height: 1; color: rgb(86 98 80 / .6); } .card--numerada > .card__pie { margin-block-start: auto; } .card--horizontal { flex-direction: row; align-items: flex-start; gap: var(--space-md); } .card--horizontal::before { flex: none; width: 3rem; font-size: 2.5rem; } /* Con acento: borde, icono y nota teñidos por --acento */ .card--acento { --acento: var(--color-principal); display: flex; flex-direction: column; border: 2px solid color-mix(in srgb, var(--acento) 22%, transparent); transition: border-color var(--transicion); } .card--acento:is(:hover, :focus-within) { border-color: var(--acento); } .card__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .card__cabecera .antetitulo { text-align: end; color: var(--color-corteza); } .card__icono { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); transition: background-color var(--transicion), color var(--transicion); } .card--acento:is(:hover, :focus-within) .card__icono { background: var(--acento); color: var(--color-blanco); } .card__nota { padding: var(--space-sm); border-radius: var(--radio); background: color-mix(in srgb, var(--acento) 8%, var(--color-crema)); } .card--acento > .enlace { margin-block-start: auto; padding-block-start: var(--space-md); } /* Cita */ .card--cita figure { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); height: 100%; } .card--cita blockquote { font-family: var(--fuenteTitulos); font-size: 1.1875rem; font-style: italic; line-height: 1.55; color: var(--color-tinta); } .card--cita figcaption { display: grid; gap: .125rem; } .card--cita strong { font-weight: 500; } /* ---------- Listas con icono ---------- */ .lista-check { --lista-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); --lista-color: var(--color-salvia-suave); display: grid; gap: var(--space-xs); font-size: var(--text-sm); } .lista-check li { display: grid; grid-template-columns: 1.125rem 1fr; gap: var(--space-xs); align-items: start; } .lista-check li::before { content: ""; width: 1.125rem; height: 1.125rem; margin-block-start: .18em; background: var(--lista-color); -webkit-mask: var(--lista-icono) center / contain no-repeat; mask: var(--lista-icono) center / contain no-repeat; } .lista-check--negativa { --lista-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); --lista-color: var(--color-corteza); } .lista-check--negativa li { text-decoration: line-through; text-decoration-color: rgb(107 91 82 / .55); } .lista-icono { --stack-gap: var(--space-md); } .lista-icono li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-sm); align-items: start; } .lista-icono .icono { width: 1.375rem; height: 1.375rem; margin-block-start: .1rem; color: var(--color-salvia); } .lista-icono li > span { display: grid; gap: .125rem; font-weight: 500; color: var(--color-tinta); } .lista-icono a { text-decoration-color: var(--color-bronce); } .lista-icono a:hover { color: var(--color-salvia); } /* ---------- Chip ---------- */ .chip { display: inline-flex; align-items: center; padding: .375rem .75rem; border-radius: var(--radio); background: var(--color-lino); font-size: .6875rem; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--color-principal); } /* Cierre: tarjeta que ocupa una casilla de rejilla junto a medios altos y estrechos. El contenido se apoya abajo para que el botón quede a la altura de los pies de vídeo. */ .card--cierre { display: flex; flex-direction: column; justify-content: flex-end; } .card--cierre > :first-child { margin-block-start: auto; } /* ---------- Separador (regla superior entre bloques de una misma banda) ---------- */ .separador { padding-block-start: clamp(var(--space-lg), 4vw, var(--space-xl)); border-block-start: var(--borde); } /* ---------- Frase de marca: una línea serif centrada que remata una sección ---------- */ .frase { max-width: 32rem; margin-inline: auto; font-family: var(--fuenteTitulos); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-style: italic; line-height: 1.4; text-align: center; color: var(--color-tinta); } /* Con aire: cuando la frase cierra una sección larga y necesita silencio alrededor. */ .frase--aire { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) 0; font-size: var(--text-h3); } } /* ========================================================================== Enlace de texto (botón terciario). El .boton vive en critical-css/base.css porque aparece en el header y en el hero. ========================================================================== */ @layer componentes { .enlace { display: inline-flex; align-items: center; gap: .375rem; align-self: start; padding-block: .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--color-tinta); background: linear-gradient(var(--color-bronce), var(--color-bronce)) 0 100% / 1.5rem 1px no-repeat; transition: background-size var(--transicion); } .enlace:is(:hover, :focus-visible) { background-size: 100% 1px; } .enlace .icono { width: .95rem; height: .95rem; transition: transform var(--transicion); } .enlace:hover .icono { transform: translateX(.2rem); } } /* ========================================================================== Ficha de protocolo: sello, título, subtítulo, precio, texto, acordeón, acciones. Sirve suelta (junto a un .marco en un .split) o dentro de una .card. ========================================================================== */ @layer componentes { .ficha { font-size: var(--text-sm); line-height: 1.7; } .ficha__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); } .ficha__meta .antetitulo { color: var(--color-corteza); } .ficha__titulo { font-size: var(--text-h3); } .card.ficha .ficha__titulo { font-size: clamp(1.5rem, 1.35rem + .5vw, 1.75rem); font-weight: 500; } .ficha__subtitulo { --flow-space: var(--space-2xs); font-family: var(--fuenteTitulos); font-size: 1.25rem; font-style: italic; line-height: 1.35; color: var(--color-salvia); } .ficha__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); max-width: none; padding-block-end: var(--space-sm); border-block-end: var(--borde); font-family: var(--fuenteTitulos); font-size: 1.875rem; font-weight: 500; line-height: 1.2; color: var(--color-tinta); } .ficha__precio small { font-family: var(--fuenteTexto); font-size: var(--text-sm); font-weight: 400; color: var(--color-corteza); } .ficha__acciones { --flow-space: var(--space-lg); } /* Dentro de tarjeta: acciones al fondo para que tarjetas vecinas alineen sus botones */ .card.ficha { display: flex; flex-direction: column; } .card.ficha > .ficha__acciones { margin-block-start: auto; padding-block-start: var(--space-lg); } } /* ========================================================================== Vídeo: pieza reproducible (póster + controles) y bucle ambiental mudo. `.marco` recorta imágenes e iframes; el vídeo necesita además gestionar reproducción, por eso es componente propio. Catálogo: _plans/03-PRIMITIVAS.md ========================================================================== */ @layer componentes { .video { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--color-lino); box-shadow: var(--sombra); } .video > video { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 9 / 16); object-fit: cover; object-position: var(--foco, 50% 50%); background: var(--color-lino); } /* Rótulo sobre el vídeo, mismo lenguaje que .marco__sello */ .video__sello { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: .3rem var(--space-sm); border-radius: var(--radio); background: rgb(255 248 246 / .92); font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-corteza); } /* Pie: vive fuera del recorte, debajo del vídeo */ .video-pieza { display: grid; gap: var(--space-sm); } .video-pieza__pie { font-size: var(--text-sm); color: var(--color-corteza); } .video-pieza__pie strong { display: block; color: var(--color-tinta); font-weight: 500; } /* ---------- Bucle ambiental ---------- */ .video--ambiente > video { pointer-events: none; } /* El póster se muestra sólo cuando el bucle no debe reproducirse */ .video--ambiente > .video__respaldo { display: none; } @media (prefers-reduced-motion: reduce) { .video--ambiente > video { display: none; } .video--ambiente > .video__respaldo { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 9 / 16); object-fit: cover; object-position: var(--foco, 50% 50%); } } } /* ========================================================================== Testimonio: una voz por sección. No hay variante en rejilla a propósito — dos vídeos de dos minutos uno al lado del otro se leen como un muro y no se ve ninguno. Catálogo: _plans/03-PRIMITIVAS.md ========================================================================== */ @layer componentes { /* El vídeo es vertical (9:16): a media columna se comería la pantalla de alto. Se acota y se centra en su lado del .split. */ .testimonio__video { inline-size: 100%; max-inline-size: 18rem; margin-inline: auto; } .testimonio__cita { font-family: var(--fuenteTitulos); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-style: italic; line-height: 1.4; color: var(--color-tinta); border-inline-start: 2px solid var(--color-bronce); padding-inline-start: var(--space-lg); } .testimonio__firma { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); } .testimonio__firma strong { font-weight: 500; } } /* ========================================================================== Secciones de la landing con composición propia: método, ciencia, pausa, origen, protocolos, santuario y preguntas. Lo compartible sigue en primitivas.css; aquí solo lo que es de una sección. ========================================================================== */ @layer componentes { /* ---------- Pasos numerados (método y fichas de protocolo), sin tarjetas ---------- */ .metodo { align-items: start; } .pasos { display: grid; gap: var(--space-lg); } .paso { counter-increment: paso; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: var(--space-md); padding-block-start: var(--space-lg); border-block-start: var(--borde); font-size: var(--text-sm); line-height: 1.7; } .paso::before { content: counter(paso, decimal-leading-zero); grid-row: span 2; font-family: var(--fuenteTitulos); font-size: 1.75rem; line-height: 1.1; color: var(--color-salvia); } .paso__titulo { font-size: var(--text-h4); font-weight: 500; line-height: 1.3; } /* ---------- Ciencia ---------- */ .ciencia { align-items: start; } .ciencia__credenciales { font-family: var(--fuenteTitulos); font-size: 1.1875rem; font-style: italic; color: var(--color-tinta); } /* Vídeo vertical estrecho junto a su cita; en móvil, el vídeo encima. */ .ciencia__voz { display: grid; gap: var(--space-lg); align-items: center; } .ciencia__video { max-inline-size: 14rem; } @media (min-width: 40rem) { .ciencia__voz { grid-template-columns: 11rem 1fr; } } /* ---------- Pausa: foto a sangre ---------- */ .pausa { position: relative; margin: 0; background: var(--color-lino); } .pausa img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 40.0625rem) { .pausa img { aspect-ratio: 21 / 9; } } .pausa__pie { position: absolute; right: var(--gutter); bottom: var(--space-md); padding: .3rem var(--space-sm); border-radius: var(--radio); background: rgb(255 248 246 / .92); color: var(--color-corteza); } /* ---------- Origen ---------- */ .origen__intro { font-size: var(--text-lg); font-weight: 300; line-height: 1.7; } .origen__puntos { display: grid; gap: var(--space-lg) var(--space-xl); } @media (min-width: 40rem) { .origen__puntos { grid-template-columns: 1fr 1fr; } } .origen__puntos > div { display: grid; gap: var(--space-xs); padding-block-start: var(--space-md); border-block-start: var(--borde); } .origen__puntos dd { font-size: var(--text-sm); line-height: 1.7; } .origen__linea-texto { font-family: var(--fuenteTitulos); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.4; color: var(--color-tinta); } @media (min-width: 64rem) { .origen__linea { --split-cols: 5fr 7fr; } } /* ---------- Protocolos: filas por necesidad ---------- */ .protocolos__lista { display: grid; } .protocolo { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-block-end: var(--borde); font-size: var(--text-sm); line-height: 1.7; } .protocolo__necesidad { font-family: var(--fuenteTitulos); font-size: 1.125rem; font-style: italic; color: var(--color-salvia); } .protocolo__enlace { justify-self: start; } @media (min-width: 56rem) { .protocolo { grid-template-columns: 16rem 1fr auto; column-gap: var(--space-xl); align-items: baseline; } } /* ---------- Santuario ---------- */ .santuario__personas { display: grid; gap: var(--space-lg); align-items: start; } @media (min-width: 48rem) { .santuario__personas { grid-template-columns: 2fr 1fr; } } .santuario__personas p { font-size: var(--text-sm); line-height: 1.7; } /* ---------- Preguntas: el acordeón lleva frases, no rótulos ---------- */ #preguntas .acordeon summary { font-family: var(--fuenteTitulos); font-size: 1.1875rem; font-weight: 500; letter-spacing: 0; text-transform: none; } .acordeon__respuesta { margin-block-start: var(--space-sm); font-size: var(--text-sm); line-height: 1.7; } } /* ========================================================================== Embed diferido: contenido de terceros que sólo se carga al pedirlo. Compone sobre `.marco` (recorte, radio, sombra); aquí sólo va lo que el <details> añade. El iframe lo inyecta el script de _layouts/default.html. Catálogo: _plans/03-PRIMITIVAS.md ========================================================================== */ @layer componentes { /* `.marco` saca su proporción del <img>/<iframe> hijo, y aquí el hijo es el <summary>: la caja necesita el aspect-ratio puesto en ella misma para no colapsar antes de que exista el iframe. */ .embed { aspect-ratio: var(--ratio, 16 / 9); } .embed__aviso { display: grid; place-content: center; height: 100%; padding: var(--space-lg); cursor: pointer; list-style: none; } .embed__aviso::-webkit-details-marker { display: none; } .embed__aviso:focus-visible { outline: 2px solid var(--color-bronce-profundo); outline-offset: -4px; } .embed__miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Mismo velo que `.marco__nota`: se lee igual sobre lino liso que sobre una miniatura, sin depender del contraste de la imagen. */ .embed__panel { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); text-align: center; padding: var(--space-sm) var(--space-md); border: 1px solid rgb(234 227 210 / .7); border-radius: var(--radio); background: rgb(255 248 246 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .embed__panel .icono { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-salvia); } .embed__texto { display: grid; justify-items: center; gap: .125rem; } .embed__texto strong { font-weight: 500; color: var(--color-tinta); } .embed__nota { font-size: var(--text-sm); color: var(--color-corteza); } .embed__lienzo { position: absolute; inset: 0; } .embed__lienzo iframe { display: block; width: 100%; height: 100%; border: 0; } /* Abierto, el iframe tapa el aviso. `visibility` y no `display` para no rehacer la caja al abrir. */ .embed[open] > .embed__aviso { visibility: hidden; pointer-events: none; } /* Con sitio de sobra, el aviso se lee en una sola línea: icono, texto, botón. */ @media (min-width: 30rem) { .embed__panel { flex-wrap: nowrap; text-align: start; } .embed__texto { justify-items: start; } } } /* ========================================================================== Acordeón nativo (<details>/<summary>). Sin JavaScript. ========================================================================== */ @layer componentes { .acordeon { padding: var(--space-md); border: var(--borde); border-radius: var(--radio); background: rgb(244 239 230 / .8); } .card--crema .acordeon { background: var(--color-superficie); } .acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); list-style: none; cursor: pointer; font-size: var(--text-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-tinta); } .acordeon summary::-webkit-details-marker { display: none; } .acordeon summary .icono { width: 1.125rem; height: 1.125rem; flex: none; transition: transform var(--transicion); } .acordeon[open] summary .icono { transform: rotate(180deg); } .acordeon .lista-check { margin-block-start: var(--space-sm); padding-block-start: var(--space-sm); border-block-start: var(--borde); } } /* ========================================================================== Footer (fondo noche: el logotipo rosa-taupe gana contraste 7:1) ========================================================================== */ @layer componentes { .footer { padding-block: var(--space-2xl) var(--space-lg); background: var(--color-noche); color: var(--color-texto-claro); font-size: var(--text-sm); } .footer .antetitulo { color: var(--color-bronce-claro); } .footer__grid { padding-block-end: var(--space-xl); border-block-end: 1px solid rgb(234 227 210 / .12); } .footer__marca { --marca-alto: 3.75rem; } .footer__marca p { max-width: 22rem; } .footer__lista { display: grid; gap: var(--space-xs); } .footer a { color: var(--color-lienzo); text-decoration: none; } .footer a:hover { text-decoration: underline; text-decoration-color: var(--color-bronce); } .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); padding-block-start: var(--space-md); font-size: var(--text-xs); } } /* ========================================================================== Utilidades: una sola responsabilidad cada una. Última capa: ganan siempre. ========================================================================== */ @layer utilidades { .t-display { font-family: var(--fuenteTitulos); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-weight: 400; line-height: 1.1; color: var(--color-tinta); } .t-display--espaciado { letter-spacing: .22em; text-transform: uppercase; } .texto-centro { text-align: center; } .texto-centro > * { margin-inline: auto; } }