/* ========================================================= PLANTILLA "CALIGRAFÍA" — boda, papelería fina en TERRACOTA. Variante de color del partial COMPARTIDO templates/boda-caligrafia.php (la otra variante es caligrafia-oro.css: dorada + verde oliva, réplica del original del cliente). Mismo markup, distinto :root. 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: réplica del estilo de la invitación de referencia (que era DORADA) trasladada a TERRACOTA cálido sobre papel crema. Títulos y nombres en caligrafía script (Great Vibes); cuerpo y datos en serif itálica legible (Cormorant Garamond) — el script NUNCA se usa en párrafos ni direcciones. Firma visual: el ITINERARIO SERPENTEANTE — una onda vertical que zigzaguea conectando cada hito con su ícono en círculo (calendario / anillos / cubiertos, ciclados). El hero anima SOLO al cargar (nunca opacidad por scroll-timeline); las secciones se revelan con .fade-up del motor. Paleta: crema / terracota / arcilla (neutro cálido de apoyo). Mobile-first · accesible (AA) · sin dependencias. ========================================================= */ :root { /* Papel — cremas cálidas */ --crema: #fbf4ea; /* fondo de papel */ --crema-2: #f4e7d5; /* superficie cálida (bandas/saludo) */ --marfil: #fffdf8; /* highlight de papel */ --arena: #f8efe1; /* tarjetas */ /* Terracota — PROTAGONISTA (script/títulos/acentos) */ --terracota: #c26a45; /* terracota media: el color firma */ --terracota-cl: #d98a63; /* teja clara */ --terracota-prof: #ab5330; /* terracota profunda (botones sólidos) */ --terracota-osc: #8a4023; /* barro oscuro (etiquetas / texto pequeño AA) */ --terracota-script: #a4502e; /* títulos/nombres en script Great Vibes: un tono más oscuro que --terracota para cruzar ~4.5:1 sobre crema */ /* Arcilla — neutro cálido de apoyo (hairlines, washi, detalles) */ --arcilla: #b98a6a; --arcilla-cl: #d8bfa4; /* Tinta — café cálido (cuerpo) */ --tinta: #4a3225; /* texto principal */ --tinta-2: #6a4c38; /* texto secundario */ --tinta-3: #7a5e46; /* metadatos / terciario (AA sobre crema: colofón pie__credito ≥4.5:1) */ /* Filetes y velos */ --filete: rgba(74, 50, 37, .16); --filete-suave: rgba(74, 50, 37, .09); --filete-terra: rgba(194, 106, 69, .42); --filete-terra-2:rgba(194, 106, 69, .22); /* Tipografías (las enlaza el render en ; aquí solo se declaran). --f-script: SOLO títulos/nombres (nunca cuerpo). --f-display: serif de cuerpo/datos con itálica bonita. */ --f-script: "Great Vibes", "Segoe Script", cursive; --f-display: "Cormorant Garamond", Georgia, "Times New Roman", 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: 8px; --ls: .3em; /* tracking de versalitas (etiquetas) */ --ls-2: .18em; /* tracking medio */ --transicion: .45s cubic-bezier(.22, 1, .36, 1); --ancho: 620px; /* Onda serpenteante del itinerario (línea vertical que zigzaguea, terracota). Tile de 40×160 que se repite en Y → onda continua. */ --serpiente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='160' viewBox='0 0 40 160' fill='none' stroke='%23c26a45' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 0 C 38 26, 38 54, 20 80 C 2 106, 2 134, 20 160'/%3E%3C/svg%3E"); /* Íconos de los hitos del itinerario (line-art terracota) */ --ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4023' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M4 9h16M8 3v4M16 3v4M9 14l2 2 4-4'/%3E%3C/svg%3E"); --ico-anillos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4023' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='15' r='5'/%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3Cpath d='M9 10l3-4 3 4'/%3E%3C/svg%3E"); /* Copa (martini) — como el ícono del bloque "Evento" del original */ --ico-copas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4023' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l-8 9z'/%3E%3Cpath d='M12 13v7M8 20h8'/%3E%3C/svg%3E"); /* Reloj: ícono NEUTRO y consistente para cada hito del itinerario (un horario, no una actividad concreta) → evita mapear íconos al azar por posición. */ --ico-hora: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4023' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); /* --sec-*: tokens de la sección dinámica (alberca) + saludo del invitado — SPEC 0006. ADITIVO: solo lo consume secciones.css (compartido). */ --sec-bg: var(--arena); --sec-borde: var(--filete-terra); --sec-radio: var(--radio); --sec-titulo-font: var(--f-script); --sec-titulo-color: var(--terracota-script); --sec-texto-color: var(--tinta-2); --sec-acento: var(--terracota-prof); --sec-acento-bg: var(--terracota-prof); --sec-acento-tinta: var(--arena); --sec-acento-boton-bg: var(--terracota-prof); --sec-acento-boton-tinta: var(--arena); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--f-display); font-size: 17px; line-height: 1.75; color: var(--tinta-2); background-color: var(--crema); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Papel cálido: velos muy tenues de terracota en las esquinas + grano fino */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 48% at 6% 3%, rgba(194,106,69,.10), transparent 60%), radial-gradient(55% 44% at 96% 14%, rgba(185,138,106,.10), transparent 60%), radial-gradient(62% 50% at 94% 97%, rgba(194,106,69,.10), transparent 62%), radial-gradient(55% 44% at 4% 90%, rgba(185,138,106,.08), transparent 60%), var(--crema); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } iframe { border: 0; } /* Reveal por scroll (lo activa el motor con .is-visible) */ .fade-up { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= HERO — nombres caligráficos en terracota sobre papel crema. Animaciones SOLO de carga (no scroll-timeline). REGLA DE ORO: nunca animar la opacidad del contenido del hero con scroll-timeline. ========================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--esp-7) var(--esp-4); background-color: var(--crema); background-size: cover; background-position: center; } /* Halo cálido tras los nombres (aparece al cargar, no con scroll) */ .hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: min(92vw, 560px); aspect-ratio: 1 / .8; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(194,106,69,.16), transparent 72%); animation: tc-aparece 1.8s ease .2s both; } /* Velo cálido cuando el motor inyecta foto de portada */ .hero__overlay { display: none; } .hero[style*="background-image"] { color: var(--arena); } .hero[style*="background-image"] .hero__overlay { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(48,26,16,.32) 0%, rgba(48,26,16,.46) 55%, rgba(122,52,28,.6) 100%); } .hero[style*="background-image"] .hero__intro, .hero[style*="background-image"] .hero__fecha { color: var(--arena); } /* Sobre foto: contorno con text-shadow (NUNCA -webkit-text-stroke → letra hueca) */ .hero[style*="background-image"] .hero__nombres { color: #fff; text-shadow: 0 1px 3px rgba(48,26,16,.6), 0 0 24px rgba(48,26,16,.4); } .hero[style*="background-image"] .hero__amp { color: var(--terracota-cl); } .hero[style*="background-image"] .hero__sello { border-color: rgba(255,255,255,.6); color: var(--arena); } .hero[style*="background-image"] .hero__fecha::before, .hero[style*="background-image"] .hero__fecha::after { background: rgba(255,255,255,.5); } .hero[style*="background-image"] .hero__filigrana { filter: brightness(0) invert(1); opacity: .8; } .hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; } /* Monograma de iniciales (motor → data-rol="hero-sello": "J · S") */ .hero__sello { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto var(--esp-4); border: 1px solid var(--filete-terra); border-radius: 50%; font-family: var(--f-script); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--terracota-script); background: var(--marfil); box-shadow: inset 0 0 0 4px var(--marfil), inset 0 0 0 5px var(--filete-terra-2); animation: tc-sube .9s cubic-bezier(.22,1,.36,1) .15s both; } .hero__sello:empty { display: none; } .hero__intro { font-family: var(--f-display); font-style: italic; text-transform: uppercase; letter-spacing: var(--ls); font-size: .82rem; font-weight: 600; color: var(--terracota-osc); margin-bottom: var(--esp-3); animation: tc-aparece 1s ease .45s both; } /* RÉPLICA FIEL: el original NO trae la eyebrow "¡Nos casamos!" sobre los nombres (el motor la fuerza en data-rol="hero-intro" con MAN.heroIntro || "¡Nos casamos!"). Se oculta para no duplicar el "¡Nos casamos!" de la sección de bienvenida — que es el ÚNICO que se conserva. Plantilla-only (no se toca el motor). */ .hero__intro { display: none; } .hero__nombres { font-family: var(--f-script); font-weight: 400; font-size: clamp(3.6rem, 20vw, 7.4rem); line-height: 1.02; color: var(--terracota-script); letter-spacing: .01em; animation: tc-nombre 1.3s cubic-bezier(.22,1,.36,1) .6s both; } .hero__amp { font-family: var(--f-script); font-weight: 400; color: var(--arcilla); font-size: .92em; padding: 0 .04em; } /* Filigrana bajo los nombres (florituras caligráficas simétricas) */ .hero__filigrana { display: block; width: 200px; height: 20px; margin: var(--esp-3) auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' fill='none' stroke='%23c26a45' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 10 C 40 2, 60 18, 92 10 M192 10 C 160 2, 140 18, 108 10'/%3E%3Ccircle cx='100' cy='10' r='2.6' fill='%23c26a45' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; animation: tc-aparece 1.1s ease 1s both; } .hero__fecha { display: inline-flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-5); font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 4.4vw, 1.35rem); color: var(--tinta-2); letter-spacing: .02em; animation: tc-aparece 1s ease 1.25s both; } .hero__fecha::before, .hero__fecha::after { content: ""; width: 30px; height: 1px; background: var(--filete-terra); } /* Botón de scroll: cuadrado redondeado RELLENO (como el original), no aro. En terracota se rellena con la teja clara; en la variante oro es verde oliva. */ .hero__scroll { margin-top: var(--esp-6); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--terracota); background: var(--terracota-cl); color: var(--marfil); text-decoration: none; font-size: 1.3rem; line-height: 1; box-shadow: 0 6px 16px rgba(122,52,28,.2); animation: tc-aparece 1s ease 1.55s both; transition: background var(--transicion), color var(--transicion); } .hero__scroll:hover { background: var(--terracota-prof); color: var(--marfil); } .hero__flecha { display: inline-block; animation: tc-flota 2.3s ease-in-out infinite; } @keyframes tc-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes tc-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes tc-nombre { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes tc-flota { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} } /* ========================================================= ESTRUCTURA — secciones con mucho aire ========================================================= */ main { padding: var(--esp-6) var(--esp-4) var(--esp-7); } .bienvenida, .contador, .historia, .evento, .itinerario, .dress-code, .mesa-regalos, .hospedaje, .rsvp { max-width: var(--ancho); margin: 0 auto var(--esp-8); text-align: center; } /* Divisor: filete terracota con una gota-diamante central (marca de sección) */ .divisor { position: relative; display: block; width: 190px; height: 16px; margin: 0 auto var(--esp-4); font-size: 0; } .divisor::before { content: ""; position: absolute; top: 50%; left: 50%; width: 190px; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, var(--filete-terra) 24%, var(--filete-terra) 76%, transparent); } .divisor::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); background: var(--terracota); border-radius: 2px; box-shadow: 0 0 0 4px var(--crema); } /* Títulos de sección — SIEMPRE en caligrafía script terracota */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.6rem, 10vw, 3.9rem); line-height: 1.06; color: var(--terracota-script); letter-spacing: .01em; margin-bottom: var(--esp-4); } .bienvenida__texto { max-width: 480px; margin: 0 auto; font-family: var(--f-display); font-style: italic; font-size: 1.4rem; line-height: 1.6; color: var(--tinta-2); } /* ========================================================= CUENTA REGRESIVA — 4 tarjetas de papel EN FILA (como el original). flex:1 1 0 + min-width:0 → las 4 comprimen y NUNCA desbordan en 360. ========================================================= */ .contador__lista { list-style: none; display: flex; gap: var(--esp-2); justify-content: center; flex-wrap: nowrap; max-width: 560px; margin: 0 auto; } .contador__item { flex: 1 1 0; min-width: 0; padding: var(--esp-4) var(--esp-2); background: var(--marfil); border: 1px solid var(--filete-terra); border-radius: var(--radio); box-shadow: 0 6px 18px rgba(122,52,28,.08); } .contador__num { display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 8.5vw, 3rem); line-height: 1; color: var(--terracota-prof); font-variant-numeric: lining-nums; } .contador__label { display: block; margin-top: var(--esp-2); font-family: var(--f-display); font-weight: 600; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--terracota-osc); } /* ========================================================= HISTORIA / timeline (BODA) — sendero con nodos de terracota ========================================================= */ .historia__linea { list-style: none; max-width: 520px; margin: 0 auto; text-align: left; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-6); border-left: 1px solid var(--filete-terra); } .historia__item:last-child { padding-bottom: 0; border-left-color: transparent; } .historia__item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--terracota-cl), var(--terracota-prof)); box-shadow: 0 0 0 3px var(--crema), 0 0 0 4px var(--filete-terra-2); } .historia__fecha { font-family: var(--f-display); font-style: italic; font-weight: 600; letter-spacing: .04em; font-size: .95rem; color: var(--terracota-osc); margin-bottom: var(--esp-1); } .historia__titulo { font-family: var(--f-script); font-weight: 400; font-size: 2rem; color: var(--terracota-script); line-height: 1.05; margin-bottom: var(--esp-2); } .historia__texto { color: var(--tinta-2); font-style: italic; } .historia__img { margin-top: var(--esp-3); width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--filete-terra); padding: 6px; background: var(--marfil); border-radius: var(--radio); } /* ========================================================= EVENTOS (ceremonia / recepción) — tarjeta de papel + mapa ========================================================= */ .evento { padding: var(--esp-6) var(--esp-4) var(--esp-5); background: var(--arena); border: 1px solid var(--filete-terra); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(122,52,28,.08); /* Flex-column para reordenar por CSS: LUGAR arriba, HORA debajo (como el original). */ display: flex; flex-direction: column; align-items: center; } .evento > * { max-width: 100%; } .evento__lugar, .evento__direccion { width: 100%; } .evento__lugar { order: 1; } .evento__hora { order: 2; margin-top: var(--esp-2); } .evento__direccion { order: 3; } .evento__mapa { order: 4; } .evento__boton { order: 5; } .evento__hora { display: inline-block; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.25rem; color: var(--tinta-2); margin-bottom: var(--esp-3); } .evento__hora::before, .evento__hora::after { content: "· "; color: var(--arcilla); } .evento__hora::after { content: " ·"; } .evento__lugar { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 6vw, 2.3rem); color: var(--tinta); line-height: 1.15; } .evento__direccion { color: var(--tinta-2); font-style: italic; margin: var(--esp-2) 0 var(--esp-4); } /* Ícono entre lugar y dirección, CORRECTO por tipo de evento: la ceremonia religiosa lleva anillos (no cubiertos/copas), la recepción lleva copas. */ .evento__direccion::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto var(--esp-3); background: var(--ico-anillos) center/contain no-repeat; opacity: .85; } #ceremonia .evento__direccion::before { background-image: var(--ico-anillos); } #recepcion .evento__direccion::before { background-image: var(--ico-copas); } /* RÉPLICA FIEL: el original NO embebe mapa en "Evento", solo el botón "Ver mapa". Se oculta el contenedor del iframe en TODA la plantilla (ceremonia y recepción) para que ninguna Caligrafía muestre el recuadro del mapa —que además renderiza en blanco—. El botón .evento__boton se conserva intacto. */ .evento__mapa { display: none; } /* Botón sólido de terracota ("Ver mapa") + botones de papelería */ .evento__boton { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-5); border: 1px solid var(--terracota-osc); border-radius: 999px; background: var(--terracota-prof); color: var(--arena); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), box-shadow var(--transicion); } .evento__boton:hover { background: var(--terracota-osc); box-shadow: 0 8px 22px rgba(122,52,28,.28); } .mesa-regalos__link, .hospedaje__link { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-2) var(--esp-5); border: 1px solid var(--terracota-prof); border-radius: 999px; color: var(--terracota-osc); text-decoration: none; background: transparent; font-family: var(--f-display); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .mesa-regalos__link:hover, .hospedaje__link:hover { background: var(--terracota-prof); color: var(--arena); border-color: var(--terracota-prof); } /* ========================================================= ITINERARIO SERPENTEANTE — la FIRMA de la plantilla. Onda vertical (SVG repeat-y) como espina que zigzaguea; cada hito con su nodo-círculo e ícono ciclado (calendario / anillos / copas). El nodo (Ø54) cubre la amplitud de la onda, así que la línea siempre pasa "por detrás" del círculo — robusto ante el contenido dinámico del motor. Móvil: espina a la izquierda, tarjetas a la derecha. ========================================================= */ .itinerario__lista { position: relative; list-style: none; max-width: 600px; margin: 0 auto; text-align: left; padding-left: 0; } /* Espina serpenteante */ .itinerario__lista::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 24px; width: 40px; transform: translateX(-50%); background: var(--serpiente) center top / 40px 160px repeat-y; opacity: .9; } /* Cada hito es una PLACA de papel a la derecha de la espina (móvil). */ .itinerario__item { position: relative; margin: 0 0 var(--esp-4) 54px; padding: var(--esp-3) var(--esp-4); background: var(--marfil); border: 1px solid var(--filete-terra); border-radius: var(--radio); box-shadow: 0 6px 18px rgba(122,52,28,.09); } .itinerario__item:last-child { margin-bottom: 0; } /* Nodo-círculo con ícono de reloj (FIJO), montado sobre la espina a la izquierda de la placa. Ícono de reloj consistente por hito (un horario es lo común a todo el itinerario; mapear ícono por actividad exigiría un dato del motor). */ .itinerario__item::before { content: ""; position: absolute; top: 50%; left: -54px; width: 48px; height: 48px; transform: translateY(-50%); border-radius: 50%; background-color: var(--arena); background-image: var(--ico-hora); background-position: center; background-repeat: no-repeat; background-size: 24px; border: 2px solid var(--terracota); box-shadow: 0 4px 12px rgba(122,52,28,.16), 0 0 0 5px var(--crema); } .itinerario__hora { display: block; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--terracota-prof); line-height: 1.2; } .itinerario__actividad { display: block; color: var(--tinta-2); font-size: 1.05rem; } /* ========================================================= DRESS CODE ========================================================= */ .dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--tinta-2); font-style: italic; } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .dress-code__color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--arena); box-shadow: 0 0 0 1px var(--filete-terra), 0 4px 12px rgba(74,50,37,.16); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--tinta-2); font-style: italic; } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .mesa-regalos__link { margin-top: 0; } /* ========================================================= HOSPEDAJE ========================================================= */ .hospedaje__lista { list-style: none; display: grid; gap: var(--esp-3); grid-template-columns: 1fr; } .hospedaje__item { background: var(--arena); border: 1px solid var(--filete-terra); border-radius: var(--radio); padding: var(--esp-5) var(--esp-4) var(--esp-4); text-align: center; box-shadow: 0 6px 18px rgba(122,52,28,.07); } .hospedaje__nombre { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--tinta); margin-bottom: var(--esp-1); } .hospedaje__direccion { color: var(--tinta-2); font-style: italic; margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--terracota-osc); text-decoration: none; letter-spacing: .03em; font-weight: 600; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-1) var(--esp-4); font-size: .72rem; } /* ========================================================= GALERÍA — carrusel con BANDA WASHI terracota (arriba/abajo) ========================================================= */ /* Sección con BANDA WASHI: superficie cálida de bordes angulados (como el marco oliva del original) y la foto enmarcada por bandas arriba/abajo. */ .galeria { position: relative; padding: var(--esp-6) 0 calc(var(--esp-6) + var(--esp-2)); max-width: none; margin: 0 auto var(--esp-8); text-align: center; background: var(--crema-2); } .carrusel { position: relative; max-width: 920px; 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 90%; scroll-snap-align: center; padding: 0 var(--esp-2); } /* Foto RECTA (sin polaroid ni inclinación) con MARCO de terracota y borde superior tipo passe-partout de papel (equivalente al marco olivo del original). Más grande. */ .carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--marfil); border: 8px solid var(--terracota); border-top-width: 18px; box-shadow: 0 14px 34px rgba(122,52,28,.18); } /* Con UNA sola foto no hay carrusel: oculta flechas y puntos (evita el look de carrusel del original, que muestra una foto suelta). */ .carrusel:has(.carrusel__track > .carrusel__slide:only-child) .carrusel__nav, .galeria:has(.carrusel__track > .carrusel__slide:only-child) .carrusel__dots { display: none; } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filete-terra); background: rgba(255,253,248,.92); color: var(--terracota-osc); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 4px 14px rgba(122,52,28,.16); } .carrusel__nav--prev { left: 10px; } .carrusel__nav--next { right: 10px; } .carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); } .carrusel__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--terracota-prof); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--terracota-prof); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(48,26,16,.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: 4px solid var(--arena); border-radius: var(--radio); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--arena); font-size: 2.4rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--arena); font-size: 2.6rem; 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.2rem; } .rsvp__form { max-width: 440px; margin: 0 auto; text-align: left; } .rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); font-size: .95rem; font-style: italic; font-family: var(--f-display); color: var(--terracota-osc); } .rsvp__bloqueado { margin-top: var(--esp-3); } .campo { margin-bottom: var(--esp-5); border: none; } .campo__label { display: block; margin-bottom: var(--esp-2); font-family: var(--f-display); font-weight: 700; font-size: .72rem; color: var(--terracota-osc); text-transform: uppercase; letter-spacing: var(--ls-2); } .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(--filete-terra); border-radius: 0; transition: border-color var(--transicion), box-shadow var(--transicion); } textarea.campo__input { border: 1px solid var(--filete-terra); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.1rem; line-height: 1.6; resize: vertical; background: var(--marfil); } .campo__input::placeholder { color: var(--tinta-3); opacity: .7; } .campo__input:focus-visible { outline: none; border-color: var(--terracota-prof); box-shadow: 0 1px 0 0 var(--terracota-prof); } textarea.campo__input:focus-visible { box-shadow: 0 0 0 3px rgba(171,83,48,.18); } .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-style: italic; font-size: 1.2rem; color: var(--tinta-2); min-height: 44px; } .rsvp__radio input { accent-color: var(--terracota-prof); width: 1.1em; height: 1.1em; } /* Botón sólido de terracota */ .boton { display: block; width: 100%; margin-top: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--terracota-osc); border-radius: 999px; background: var(--terracota-prof); color: var(--arena); font-family: var(--f-display); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; transition: background var(--transicion), box-shadow var(--transicion), transform .1s ease; } .boton:hover { background: var(--terracota-osc); box-shadow: 0 8px 22px rgba(122,52,28,.28); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 700; min-height: 1.4em; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; } .rsvp__estado--ok { color: var(--terracota-osc); } .rsvp__estado--error { color: #a4392f; } /* ========================================================= MÚSICA (botón flotante). El pulso .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(--filete-terra); background: var(--marfil); color: var(--terracota-osc); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(122,52,28,.22); } .musica[aria-pressed="true"] .musica__icono { animation: tc-gira 4s linear infinite; } @keyframes tc-gira { to { transform: rotate(360deg); } } /* ========================================================= SALUDO al invitado (lo inyecta el motor con ?i=codigo) — NATIVO. Se define aquí a propósito para NO heredar el fallback de secciones.css. ========================================================= */ .saludo { text-align: center; padding: var(--esp-6) var(--esp-4); background: var(--crema-2); border-top: 1px solid var(--filete-terra); border-bottom: 1px solid var(--filete-terra); } .saludo__hola { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 1.1; color: var(--terracota-script); } .saludo__pases { margin-top: 6px; font-family: var(--f-display); font-style: italic; letter-spacing: .03em; font-size: 1rem; color: var(--terracota-osc); } /* ========================================================= PIE — colofón caligráfico ========================================================= */ .pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 70px); border-top: 1px solid var(--filete-suave); } .pie .divisor { margin: 0 auto var(--esp-5); } .pie__nombres { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.8rem, 11vw, 4rem); color: var(--terracota-script); line-height: 1.05; } .pie__fecha { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; margin: var(--esp-3) 0 var(--esp-2); color: var(--tinta-2); } .pie__credito { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--tinta-3); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(48,26,16,.96); color: var(--arena); 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,.14); color: var(--arena); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--terracota); color: #2d160c; } /* ========================================================= FOCO VISIBLE GLOBAL (accesibilidad, AA) ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terracota-prof); outline-offset: 3px; border-radius: var(--radio); } .hero__scroll:focus-visible { outline-offset: 4px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 560px) { /* Cuenta regresiva: tarjetas más aireadas (ya van 4 en fila desde móvil) */ .contador__lista { gap: var(--esp-3); } .contador__item { padding: var(--esp-5) var(--esp-2); } .contador__label { font-size: .66rem; letter-spacing: .16em; } } @media (min-width: 768px) { .carrusel__slide { flex: 0 0 64%; } .hospedaje__lista { grid-template-columns: 1fr 1fr; } .historia__img { aspect-ratio: 16/10; } /* ITINERARIO SERPENTEANTE alternado (desktop): espina al centro y PLACAS que se alternan izquierda/derecha alrededor de la onda; el nodo va sobre el eje. */ .itinerario__lista { max-width: 720px; padding-left: 0; } .itinerario__lista::before { left: 50%; } .itinerario__item { width: calc(50% - 46px); margin: 0 0 var(--esp-5) 0; } .itinerario__item:last-child { margin-bottom: 0; } .itinerario__item:nth-child(odd) { margin-right: auto; text-align: right; } .itinerario__item:nth-child(odd)::before { left: auto; right: -68px; } .itinerario__item:nth-child(even) { margin-left: auto; text-align: left; } .itinerario__item:nth-child(even)::before { left: -68px; right: auto; } } /* ========================================================= ACCESIBILIDAD — reduce motion ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } /* Deja el hero en su estado final (visible, no oculto) */ .hero::before, .hero__sello, .hero__intro, .hero__nombres, .hero__filigrana, .hero__fecha, .hero__scroll { opacity: 1; transform: none; } .hero::before { transform: translate(-50%, -50%); } } /* ========================================================= AJUSTES QA v0.22.1 — áreas táctiles ≥44px y hospedaje aireado. Reglas ADITIVAS (mismo look). Las cartelas de hospedaje son centradas. La flecha de scroll ya es un círculo de 46px (cumple ≥44px). ========================================================= */ .hospedaje__item { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); } .hospedaje__tel, .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%; } } .evento__boton, .mesa-regalos__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* ========================================================= PORTADA DE APERTURA (SPEC 0008) — variante CALIGRAFÍA Emblema de filigrana + título script terracota + CTA terracota sólido. secciones.css carga ANTES → esta hoja gana la cascada. ========================================================= */ :root { --portada-bg: var(--crema); --portada-tinta: var(--terracota-osc); --portada-acento: var(--terracota-prof); --portada-titulo-font: var(--f-script); --portada-radio: 999px; --portada-cta-bg: var(--terracota-prof); --portada-cta-tinta: var(--arena); } .ti-portada { background: radial-gradient(70% 55% at 50% 40%, rgba(194,106,69,.14), transparent 70%), var(--crema); } .ti-portada__emblema { display: block; width: 78px; height: 78px; margin: 0 auto var(--esp-2); border: 1px solid var(--filete-terra); border-radius: 50%; background: var(--marfil) var(--ico-anillos) center/40px no-repeat; } .ti-portada__titulo { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.6rem, 11vw, 3.8rem); color: var(--terracota); line-height: 1.05; } .ti-portada__invitado { display: none; } .ti-portada__cta { text-transform: uppercase; letter-spacing: .14em; font-size: .92rem; font-weight: 700; padding: 14px 32px; }