/* ========================================================= PLANTILLA "ESENCIA" — boda, terracota minimalista premium. Hoja de estilo AUTOCONTENIDA (NO depende de base.css/temas.css). Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/ data-rol/data-modulo que el resto; cambia el copy y el envoltorio visual. Dirección: editorial en reposo sobre papel hueso. Mucho aire, todo ALINEADO A LA IZQUIERDA, tipografía serif de alto carácter (Fraunces) para nombres/títulos y una grotesca fina (Hanken Grotesk) en versalitas muy espaciadas para etiquetas. La terracota es un acento MÍNIMO: una hairline vertical (el "rail" de firma), el ampersand itálico y algún filete fino. Los elementos SUBEN en secuencia al aparecer. Quiet luxury. Mobile-first · accesible (AA) · sin dependencias · sin overflow-x. ========================================================= */ :root { /* Papel hueso / tinta cálida */ --hueso: #f4efe8; /* fondo base */ --hueso-2: #ece4d9; /* superficie levemente más cálida (tarjetas) */ --crema: #faf7f1; /* highlight de papel / texto sobre oscuro */ --papel: #f0e8dc; /* mate de mapas / fondos internos */ --tinta: #2a201a; /* texto principal (casi negro cálido) */ --tinta-2: #5c4c3f; /* texto secundario */ --tinta-3: #6e5846; /* metadatos decorativos (AA sobre hueso: colofón pie__fecha ≥4.5:1) */ /* Terracota — acento MÍNIMO (nunca campo de color, solo hairlines y detalles) */ --terra: #b8532c; --terra-prof: #8f3d1d; /* versión legible AA para etiquetas pequeñas */ --terra-suave: #a2704f; /* Filetes (hairlines) */ --linea: rgba(42, 32, 26, .14); --linea-suave: rgba(42, 32, 26, .08); --terra-tenue: rgba(184, 83, 44, .18); /* Tipografías (las enlaza el render en ; aquí solo se declaran) */ --f-display: "Fraunces", Georgia, "Times New Roman", serif; --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala de espaciado */ --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:96px; --esp-8:128px; --radio: 2px; /* casi recto: papelería, no app */ --ls: .40em; /* tracking de versalitas (etiquetas) */ --ls-2: .22em; /* tracking medio (fechas / metadatos) */ --transicion: .45s cubic-bezier(.22, 1, .36, 1); --ancho: 620px; /* --sec-*: tokens de las secciones DINÁMICAS (fichas/alberca) + saludo del invitado (SPEC 0006). Solo los consume secciones.css (compartido). */ --sec-bg: var(--hueso-2); --sec-borde: var(--terra-tenue); --sec-radio: var(--radio); --sec-titulo-font: var(--f-display); --sec-titulo-color: var(--tinta); --sec-texto-color: var(--tinta-2); --sec-acento: var(--terra); --sec-acento-bg: var(--hueso-2); --sec-acento-tinta: var(--tinta); --sec-acento-boton-bg: var(--tinta); --sec-acento-boton-tinta: var(--crema); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--f-texto); font-size: 16px; line-height: 1.75; color: var(--tinta-2); background-color: var(--hueso); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Viñeta cálida muy tenue (sensación de papel, sin textura ruidosa) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.45), transparent 55%), radial-gradient(140% 120% at 50% 120%, rgba(143,61,29,.05), transparent 55%); } img { max-width: 100%; display: block; } iframe { border: 0; } .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1); } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= FIRMA — animaciones de CARGA (transform/opacity on-load). NUNCA se ligan a scroll-timeline (evita el bug del hero transparente). Todo se apaga en prefers-reduced-motion. ========================================================= */ @keyframes ti-es-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes ti-es-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes ti-es-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes ti-es-regla { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ti-es-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* Marca de versalitas reutilizable */ .kicker, .hero__intro, .campo__label, .contador__label, .pie__credito { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls); font-weight: 600; font-size: .72rem; } /* ========================================================= HERO — papel hueso, alineado a la izquierda, rail terracota ========================================================= */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--esp-7) clamp(var(--esp-4), 8vw, var(--esp-7)); background-color: var(--hueso); background-size: cover; background-position: center; } .hero__overlay { display: none; } /* Cuando el motor inyecta foto de hero inline → velo + texto claro */ .hero[style*="background-image"] { color: var(--crema); } .hero[style*="background-image"] .hero__overlay { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24,18,14,.44), rgba(24,18,14,.66)); } .hero[style*="background-image"] .hero__intro, .hero[style*="background-image"] .hero__fecha { color: var(--crema); } .hero[style*="background-image"] .hero__nombres { color: #fff; } .hero[style*="background-image"] .hero__regla { background: rgba(255,255,255,.45); } .hero[style*="background-image"] .hero__sello { color: var(--crema); border-color: rgba(255,255,255,.6); } .hero__contenido { position: relative; width: 100%; max-width: var(--ancho); padding-left: clamp(var(--esp-4), 6vw, var(--esp-5)); text-align: left; } /* Rail de firma: hairline terracota vertical que se dibuja al cargar */ .hero__rail { position: absolute; left: 0; top: 6%; bottom: 6%; width: 1.6px; background: var(--terra); transform-origin: top; animation: ti-es-rail 1.1s cubic-bezier(.6, 0, .2, 1) .15s both; } /* Monograma opcional (motor → data-rol="hero-sello": "A · L") */ .hero__sello { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: var(--esp-4); border: 1px solid var(--terra); border-radius: 50%; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .04em; color: var(--terra-prof); animation: ti-es-sube .9s cubic-bezier(.22, 1, .36, 1) .3s both; } .hero__sello:empty { display: none; } .hero__intro { color: var(--terra-prof); margin-bottom: var(--esp-4); animation: ti-es-sube .9s cubic-bezier(.22, 1, .36, 1) .45s both; } .hero__nombres { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--f-display); font-weight: 500; font-size: clamp(3.2rem, 16vw, 6.4rem); line-height: .96; letter-spacing: -.02em; color: var(--tinta); } .hero__nombres > span[data-rol="nombre-1"] { animation: ti-es-sube 1s cubic-bezier(.22,1,.36,1) .6s both; } .hero__nombres > span[data-rol="nombre-2"] { animation: ti-es-sube 1s cubic-bezier(.22,1,.36,1) .95s both; } .hero__amp { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: .42em; color: var(--terra); margin: .06em 0 .04em -.02em; animation: ti-es-aparece 1s ease .82s both; } /* Filete fino horizontal (acento mínimo) */ .hero__regla { display: block; width: 46px; height: 1px; margin: var(--esp-5) 0 var(--esp-4); background: var(--tinta); opacity: .28; transform-origin: left; animation: ti-es-regla 1s cubic-bezier(.6,0,.2,1) 1.1s both; } .hero__fecha { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .8rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; animation: ti-es-sube 1s cubic-bezier(.22,1,.36,1) 1.25s both; } .hero__scroll { display: inline-block; margin-top: var(--esp-6); color: var(--terra-prof); text-decoration: none; font-size: 1.4rem; line-height: 1; animation: ti-es-aparece 1.2s ease 1.6s both; } .hero__scroll:hover { color: var(--terra); } .hero__flecha { display: inline-block; animation: ti-es-flota 2.4s ease-in-out infinite; } /* ========================================================= ESTRUCTURA — columna editorial, alineada a la izquierda ========================================================= */ main { padding: var(--esp-7) clamp(var(--esp-4), 8vw, var(--esp-7)) var(--esp-8); } .bienvenida, .contador, .historia, .evento, .galeria, .itinerario, .dress-code, .mesa-regalos, .hospedaje, .rsvp { max-width: var(--ancho); margin: 0 auto var(--esp-8); text-align: left; } /* Divisor: hairline TERRACOTA vertical (la marca de firma de cada sección) */ .divisor { display: block; width: 1.6px; height: 48px; background: var(--terra); margin-bottom: var(--esp-4); transform-origin: top; font-size: 0; } .fade-up .divisor { transform: scaleY(0); } .fade-up.is-visible .divisor { transform: scaleY(1); transition: transform .9s cubic-bezier(.22, 1, .36, 1) .1s; } /* Títulos de sección */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.1; color: var(--tinta); letter-spacing: -.01em; margin-bottom: var(--esp-4); } .bienvenida__texto { max-width: 52ch; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.55; color: var(--tinta-2); } /* ========================================================= CUENTA REGRESIVA — rejilla 2x2 en móvil (nunca 3+1 huérfana) ========================================================= */ .contador__lista { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); max-width: 360px; } .contador__item { position: relative; padding: var(--esp-3) 0; border-top: 1px solid var(--linea-suave); } .contador__num { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 1; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; } .contador__label { display: block; margin-top: var(--esp-2); color: var(--terra-prof); letter-spacing: var(--ls-2); font-size: .6rem; } /* ========================================================= HISTORIA / TIMELINE (boda) — línea de tiempo con rail terracota ========================================================= */ .historia__linea { list-style: none; max-width: 520px; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-5); border-left: 1px solid var(--terra-tenue); } .historia__item:last-child { padding-bottom: 0; border-left-color: transparent; } .historia__item::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--terra); } .historia__fecha { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .66rem; font-weight: 600; color: var(--terra-prof); margin-bottom: var(--esp-1); } .historia__titulo { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--tinta); margin-bottom: var(--esp-2); } .historia__texto { color: var(--tinta-2); } .historia__img { width: 100%; margin-top: var(--esp-3); aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--linea); } /* ========================================================= EVENTOS (ceremonia / recepción) + MAPA ========================================================= */ .evento__hora { display: inline-block; color: var(--terra-prof); font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .72rem; font-weight: 600; margin-bottom: var(--esp-3); } .evento__lugar { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 5.5vw, 2.1rem); color: var(--tinta); line-height: 1.2; } .evento__direccion { color: var(--tinta-2); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--papel); } /* Mapa integrado a la paleta cálida (evita el multicolor que rompe el terracota) */ .evento__mapa iframe { width: 100%; height: 300px; display: block; filter: sepia(.18) saturate(.85) contrast(.95); } /* Si el motor no puso mapa (iframe sin src usable), el marco colapsa */ .evento__mapa:not(:has(iframe[src]:not([src=""]))) { display: none; } /* Botones de papelería: contorno fino terracota, versalitas */ .evento__boton, .mesa-regalos__link, .hospedaje__link { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-5); border: 1px solid var(--terra); border-radius: var(--radio); color: var(--terra-prof); text-decoration: none; font-family: var(--f-texto); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover { background: var(--terra); color: var(--crema); border-color: var(--terra); } /* ========================================================= ITINERARIO — programa en filas con filete fino ========================================================= */ .itinerario__lista { list-style: none; max-width: 480px; } .itinerario__item { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: var(--esp-3); padding: var(--esp-4) 0; border-bottom: 1px solid var(--linea-suave); } .itinerario__item:last-child { border-bottom: none; } .itinerario__hora { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; color: var(--terra-prof); font-variant-numeric: tabular-nums; } .itinerario__actividad { color: var(--tinta-2); } /* ========================================================= DRESS CODE — muestras cuadradas (editorial, no app) ========================================================= */ .dress-code__descripcion { max-width: 48ch; margin-bottom: var(--esp-4); color: var(--tinta-2); } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); } .dress-code__color { width: 42px; height: 42px; border-radius: var(--radio); border: 1px solid var(--linea); box-shadow: inset 0 0 0 3px var(--crema); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 48ch; margin-bottom: var(--esp-4); color: var(--tinta-2); } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); } .mesa-regalos__link { margin-top: 0; } /* ========================================================= HOSPEDAJE ========================================================= */ .hospedaje__lista { list-style: none; display: grid; gap: var(--esp-4); grid-template-columns: 1fr; } .hospedaje__item { padding: var(--esp-4); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso-2); } .hospedaje__nombre { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; color: var(--tinta); margin-bottom: var(--esp-1); } .hospedaje__direccion { color: var(--tinta-2); margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--terra-prof); text-decoration: none; letter-spacing: .04em; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: .66rem; } /* ========================================================= GALERÍA — carrusel a sangre, marco fino ========================================================= */ .galeria { padding: 0; max-width: none; margin: 0 auto var(--esp-8); } .carrusel { position: relative; max-width: 940px; margin: 0 auto; } .carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carrusel__track::-webkit-scrollbar { display: none; } .carrusel__slide { flex: 0 0 84%; scroll-snap-align: center; padding: 0 var(--esp-2); } .carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--linea); } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--terra-tenue); background: rgba(250,247,241,.9); color: var(--terra-prof); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .carrusel__nav:hover { background: var(--terra); color: var(--crema); border-color: var(--terra); } .carrusel__nav--prev { left: 12px; } .carrusel__nav--next { right: 12px; } .carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); } .carrusel__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--terra); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--terra); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(28,22,17,.92); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__img { max-width: 100%; max-height: 85vh; border-radius: var(--radio); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--crema); font-size: 2.3rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--crema); font-size: 2.4rem; cursor: pointer; padding: var(--esp-2); } .lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); } /* ========================================================= RSVP — formulario de papelería (líneas de subrayado) ========================================================= */ .rsvp__nota { color: var(--tinta-2); margin-bottom: var(--esp-5); font-family: var(--f-display); font-style: italic; font-size: 1.15rem; } .rsvp__form { max-width: 460px; } .rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); font-size: .9rem; font-style: italic; font-family: var(--f-display); color: var(--terra-prof); } .rsvp__bloqueado { margin-top: var(--esp-3); } .campo { margin-bottom: var(--esp-5); border: none; } .campo__label { display: block; margin-bottom: var(--esp-2); color: var(--terra-prof); } .campo__input { width: 100%; padding: var(--esp-2) 0; font-family: var(--f-display); font-size: 1.25rem; color: var(--tinta); background: transparent; border: none; border-bottom: 1px solid var(--terra-tenue); border-radius: 0; transition: border-color var(--transicion); } textarea.campo__input { border: 1px solid var(--terra-tenue); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.1rem; line-height: 1.6; } .campo__input::placeholder { color: var(--tinta-3); opacity: .8; } .campo__input:focus-visible { outline: none; border-color: var(--terra); } .rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-3); } .rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; font-family: var(--f-display); font-size: 1.15rem; color: var(--tinta-2); } .rsvp__radio input { accent-color: var(--terra); width: 1.05em; height: 1.05em; } .boton { display: block; width: 100%; margin-top: var(--esp-4); min-height: 48px; padding: var(--esp-3); border: 1px solid var(--terra); border-radius: var(--radio); background: var(--terra); color: var(--crema); font-family: var(--f-texto); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; transition: background var(--transicion), color var(--transicion); } .boton:hover { background: var(--terra-prof); border-color: var(--terra-prof); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); font-weight: 500; min-height: 1.4em; font-family: var(--f-display); font-size: 1.1rem; } .rsvp__estado--ok { color: var(--terra-prof); } .rsvp__estado--error { color: #a6362a; } /* ========================================================= SALUDO al invitado (lo inyecta el motor con ?i=codigo) — NATIVO ========================================================= */ .saludo { max-width: var(--ancho); margin: 0 auto var(--esp-8); text-align: left; padding: var(--esp-5) 0 var(--esp-5) var(--esp-5); border-left: 1.6px solid var(--terra); } .saludo__hola { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.12; color: var(--tinta); } .saludo__pases { margin-top: var(--esp-2); letter-spacing: var(--ls-2); text-transform: uppercase; font-size: .72rem; font-weight: 600; color: var(--terra-prof); } /* ========================================================= MÚSICA (botón flotante) — no redefinir .musica--invita (vive en secciones.css) ========================================================= */ .musica { position: fixed; bottom: var(--esp-4); right: var(--esp-4); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--terra); background: var(--crema); color: var(--terra-prof); cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 4px 18px rgba(42,32,26,.14); transition: background var(--transicion), color var(--transicion); } .musica:hover { background: var(--terra); color: var(--crema); } .musica[aria-pressed="true"] .musica__icono { animation: ti-es-gira 4s linear infinite; } @keyframes ti-es-gira { to { transform: rotate(360deg); } } /* ========================================================= PIE — colofón ========================================================= */ .pie { position: relative; text-align: left; max-width: var(--ancho); margin: 0 auto; padding: var(--esp-7) clamp(var(--esp-4), 8vw, var(--esp-7)) calc(var(--esp-7) + 70px); padding-left: clamp(var(--esp-4), 8vw, var(--esp-7)); border-top: 1px solid var(--linea-suave); } .pie .divisor { margin-bottom: var(--esp-5); } .pie__nombres { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--tinta); letter-spacing: -.02em; } .pie__fecha { margin: var(--esp-3) 0 var(--esp-2); color: var(--tinta-3); } .pie__credito { color: var(--terra-prof); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(28,22,17,.96); color: var(--crema); padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; } .preview__chip { background: rgba(255,255,255,.12); color: var(--crema); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--terra); color: var(--crema); } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 560px) { .contador__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } } @media (min-width: 768px) { .carrusel__slide { flex: 0 0 58%; } .carrusel__slide img { aspect-ratio: 16/10; } .hospedaje__lista { grid-template-columns: 1fr 1fr; } .evento__mapa iframe { height: 360px; } .historia__img { aspect-ratio: 16/9; } } /* Foco visible global (accesibilidad) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: var(--radio); } /* ========================================================= ACCESIBILIDAD — reduce motion (apaga TODA la firma) ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } /* Deja visible/asentado lo que la firma oculta en su estado inicial */ .hero__rail { transform: scaleY(1); } .hero__regla { transform: scaleX(1); } .hero__sello, .hero__intro, .hero__nombres > span, .hero__amp, .hero__fecha, .hero__scroll { opacity: 1; } .fade-up .divisor { transform: scaleY(1); } } /* ========================================================= AJUSTES QA v0.22.1 — áreas táctiles ≥44px y hospedaje aireado. Reglas ADITIVAS (mismo look; solo ergonomía y separación). ========================================================= */ /* Hospedaje: teléfono y botón con aire; en móvil se apilan full-width. */ .hospedaje__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); } .hospedaje__tel { display: inline-flex; align-items: center; min-height: 44px; margin: 0; } .hospedaje__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; } @media (max-width: 560px) { .hospedaje__tel, .hospedaje__link { width: 100%; } .hospedaje__tel { justify-content: flex-start; } } /* Botones de acción con altura táctil cómoda (Cómo llegar / Ver / abrir). */ .evento__boton, .mesa-regalos__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* La flecha de scroll gana hit-area de 44px sin cambiar su aspecto. */ .hero__scroll { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* ========================================================= PORTADA DE APERTURA (SPEC 0008) — variante ESENCIA Minimalista: emblema/hairline terracota + título de estado + CTA sobrio. secciones.css carga ANTES → esta hoja (después) gana la cascada. ========================================================= */ :root { --portada-bg: var(--hueso); --portada-tinta: var(--tinta); --portada-acento: var(--terra); --portada-titulo-font: var(--f-display); --portada-radio: var(--radio); --portada-cta-bg: var(--terra); --portada-cta-tinta: var(--crema); } .ti-portada__emblema { display: block; width: 56px; height: 0; margin: 0 auto var(--esp-3); border-top: 1.6px solid var(--terra); position: relative; } .ti-portada__emblema::after { content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg); background: var(--terra); } .ti-portada__titulo { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.06; color: var(--tinta); letter-spacing: -.01em; } .ti-portada__invitado { display: none; } .ti-portada__cta { text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; font-weight: 600; padding: 14px 30px; border: 1px solid var(--terra); }