/* ============================================================
   ATELIER · Maria & Javier — 5 junio 2027
   Propuesta visual editorial. Misma paleta, tipografía y textos;
   composición nueva con motivo de arcos (columnata de La Casona).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

:root {
  --bg:        #F3EFE4;   /* crema papel */
  --paper:     #FBFAF3;   /* lámina */
  --ink:       #1f2b23;   /* verde-tinta */
  --muted:     #5c6a5f;
  --faint:     #8c9587;
  --keyline:   #d8d4c2;   /* líneas finas */
  --keyline-2: #c8c4af;
  --sage:      #699481;   /* verde salvia (secciones destacadas) */
  --sage-deep: #557a69;
  --on-sage:   #F3EFE4;
  --accent:    #B86B4A;   /* terracota (sobrescribible por tweaks) */
  --botanical: #C4B891;   /* ilustraciones botanicas: linea suave taupe-sage sobre el beige */

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  --maxw: 1280px;
  --rail: 96px;            /* ancho del meridiano izquierdo */
  --ease: cubic-bezier(.22,.61,.36,1);
}

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-weight: 360;
  font-size: 16px; line-height: 1.75;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
.amp { font-family: var(--font-display); font-style: italic; color: var(--accent); }
::selection { background: var(--accent); color: var(--bg); }

/* Grano de papel sutil */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJyBvcGFjaXR5PScuMDM1Jy8+PC9zdmc+");
  mix-blend-mode: multiply;
}

/* ---------- Ilustraciones botanicas (marca de agua, muy sutiles) ---------- */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
.sec, #hero, footer { isolation: isolate; }
.botanical { position: absolute; z-index: -1; pointer-events: none; color: var(--botanical); display: block; height: auto; fill: none; }
body[data-botanica="off"] .botanical { display: none; }
/* Entrada: las ilustraciones se "dibujan" via Web Animations API (app.js),
   pero su estado de reposo SIEMPRE es visible — nunca dependen de una
   transicion que pueda quedar congelada en previsualizacion. */
.botanical.bot-anim { opacity: 1; }
@media (max-width: 760px) {
  .botanical { opacity: .8; }
  .botanical.bot-hide-m { display: none; }
}
@media (prefers-reduced-motion: no-preference) {}

/* ---------- Scroll progress ---------- */
#scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent); z-index: 1200; transition: width .1s linear; }

/* ============================================================
   ARCO (motivo): semicírculo + jambas
   ============================================================ */
.arch {
  border: 1.2px solid var(--accent); border-bottom: none;
  border-top-left-radius: 999px; border-top-right-radius: 999px;
}
/* fila decorativa de arquitos */
.arch-row { display: flex; gap: 6px; align-items: flex-end; justify-content: center; }
.arch-row i { display: block; width: 16px; height: 22px; border: 1px solid var(--accent); border-bottom: none; border-radius: 8px 8px 0 0; opacity: .8; }
.arch-row i:nth-child(even) { height: 30px; }

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: 76px;
  padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .4s, height .4s, background .4s;
}
nav.scrolled { border-bottom-color: var(--keyline); height: 64px; }
.nav-logo { font-family: var(--font-display); font-size: 24px; letter-spacing: .01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  position: relative; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 6px 0; transition: color .25s;
}
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: width .3s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.lang-toggle { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; user-select: none; white-space: nowrap; }
.lang-toggle span { color: var(--faint); transition: color .25s; }
.lang-toggle span.active { color: var(--ink); }
.lang-toggle .sep { color: var(--keyline-2); margin: 0 5px; }

.nav-burger { display: none; width: 40px; height: 40px; border: none; background: transparent; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
body.menu-open #mobile-menu { opacity: 1; visibility: visible; }
#mobile-menu a { font-family: var(--font-display); font-size: 30px; color: var(--ink); text-decoration: none; padding: 7px 0; transform: translateY(14px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease), color .2s; }
body.menu-open #mobile-menu a { transform: none; opacity: 1; }
#mobile-menu a:hover { color: var(--accent); }
#mobile-menu .mm-date { margin-top: 24px; font-family: var(--font-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   MERIDIANO IZQUIERDO (spine editorial)
   ============================================================ */
#meridian { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail); z-index: 900; pointer-events: none; display: none; }
#meridian .line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--keyline); }
#meridian .tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); white-space: nowrap; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); transition: opacity .3s; }
#meridian .idx { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 20px; color: var(--accent); }
#meridian .idx small { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: .2em; color: var(--faint); text-align: center; margin-top: 2px; }

/* ============================================================
   HERO
   ============================================================ */
#hero { padding: 150px 40px 70px; position: relative; }
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.hero-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; margin-bottom: 30px; }
.hero-eyebrow { font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; font-family: var(--font-display); font-style: italic; }
.hero-names { font-family: var(--font-display); font-size: clamp(34px, 9.5vw, 150px); line-height: .9; letter-spacing: -.01em; min-height: .9em; white-space: nowrap; }
.hero-meta { text-align: right; padding-bottom: 12px; }
.hero-meta .d { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1; min-height: 1em; }
.hero-meta .l { font-size: 12.5px; letter-spacing: .04em; color: var(--muted); margin-top: 12px; max-width: 230px; margin-left: auto; min-height: 1.2em; }
.typewriter-cursor { display: inline-block; width: 3px; height: .8em; background: var(--accent); margin-left: 4px; transform: translateY(.04em); animation: blink .8s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-rule { display: flex; align-items: center; gap: 18px; margin: 26px 0 4px; }
.hero-rule .ln { flex: 1; height: 1px; background: var(--keyline-2); }
.hero-rule .arch-row { flex: 0 0 auto; }
.hero-rule .casona-rule { flex: 0 0 auto; width: clamp(230px, 30vw, 320px); height: auto; color: var(--accent); display: block; overflow: visible; }
@media (max-width: 520px) { .hero-rule .casona-rule { width: clamp(190px, 60vw, 240px); } }

/* Lámina con la ilustración COMPLETA (sin recorte) */
.plate { position: relative; margin-top: 30px; padding: clamp(16px, 2.4vw, 34px); background: var(--paper); border: 1px solid var(--keyline); box-shadow: 0 30px 60px -44px rgba(31,43,35,.5); }
.plate::before, .plate::after { content: ''; position: absolute; width: 26px; height: 26px; border: 1px solid var(--accent); z-index: 2; }
.plate::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.plate::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.plate-frame { position: relative; overflow: hidden; }
.plate-frame img { width: 100%; height: auto; aspect-ratio: 1296 / 830; display: block; object-fit: contain; transform: scale(1.04); transition: transform 1.4s var(--ease), clip-path 1.4s var(--ease); clip-path: inset(0 0 100% 0); }
.plate.in .plate-frame img { transform: scale(1); clip-path: inset(0 0 0 0); }
body.no-anim .plate-frame img { clip-path: none !important; transform: none !important; }
.plate-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.plate-caption .t { font-family: var(--font-display); font-style: italic; font-size: 18px; }
.plate-caption .n { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

.scroll-cue { display: flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); justify-content: center; }
.scroll-cue .bar { width: 46px; height: 1px; background: var(--keyline-2); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ''; position: absolute; inset: 0 100% 0 0; background: var(--accent); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0%{inset:0 100% 0 0} 55%,100%{inset:0 0 0 100%} }

/* ============================================================
   SECCIONES (genérico editorial)
   ============================================================ */
.sec { padding: clamp(86px, 13vh, 150px) 40px; position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.narrow { max-width: 940px; margin: 0 auto; }

/* Datos del acompañante (se despliegan) */
.companion-fields[hidden] { display: none; }
.companion-fields { animation: compIn .45s var(--ease) both; border-left: 2px solid var(--accent); padding-left: 22px; margin-left: 2px; }
.companion-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 18px; }
@keyframes compIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
body.no-anim .companion-fields { animation: none; }
.sec-head { position: relative; margin-bottom: clamp(48px, 7vh, 88px); }
.sec-num { font-family: var(--font-display); font-size: clamp(56px, 8vw, 116px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--keyline-2); text-stroke: 1px var(--keyline-2); }
.sec-head .ht { padding-top: 0; }
.sec-label { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 18px; }
.sec-label::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.sec-title { font-family: var(--font-display); font-size: clamp(44px, 6.5vw, 84px); line-height: 1.02; letter-spacing: -.005em; }
.sec-intro { font-size: 17px; color: var(--muted); line-height: 1.85; margin-top: 22px; max-width: 620px; text-wrap: pretty; }

/* centrada (para secciones destacadas) */
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .sec-num { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); z-index: -1; opacity: .5; }
.sec-head.center .sec-label::before { display: none; }
.sec-head.center .sec-intro { margin-left: auto; margin-right: auto; }

/* Bloque destacado SAGE */
.sec-sage { background: var(--sage); color: var(--on-sage); }
.sec-sage .sec-num { -webkit-text-stroke-color: color-mix(in srgb, var(--on-sage) 45%, transparent); }
.sec-sage .sec-label { color: color-mix(in srgb, var(--on-sage) 88%, transparent); }
.sec-sage .sec-intro { color: color-mix(in srgb, var(--on-sage) 82%, transparent); }
.sec-sage .arch { border-color: color-mix(in srgb, var(--on-sage) 70%, transparent); }

/* ============================================================
   COUNTDOWN (sage, con arco)
   ============================================================ */
#countdown { padding: clamp(70px,10vh,104px) 40px; background: var(--sage); color: var(--on-sage); text-align: center; position: relative; }
.cd-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--on-sage) 80%, transparent); margin-bottom: 34px; }
.countdown-inner { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.cd-block { padding: 0 clamp(22px,5vw,58px); position: relative; }
.cd-block + .cd-block::before { content: ''; position: absolute; left: 0; top: 8px; width: 1px; height: 62px; background: color-mix(in srgb, var(--on-sage) 30%, transparent); }
.cd-number { font-family: var(--font-display); font-size: clamp(50px, 9vw, 88px); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--on-sage) 64%, transparent); margin-top: 12px; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.nos-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(44px, 6vw, 88px); align-items: center; }
.prose p { font-size: 17px; color: var(--muted); margin-bottom: 22px; line-height: 1.95; text-wrap: pretty; }
.prose p:first-child::first-letter { font-family: var(--font-display); float: left; font-size: 3.6em; line-height: .76; padding: 10px 14px 0 0; color: var(--accent); }
.nos-firma { margin-top: 30px; color: var(--ink) !important; line-height: 1.6; }
.firma-nombres { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--accent); }

/* Emblema bajo gran arco */
.emblem-arch { position: relative; max-width: 360px; margin: 0 auto; }
.emblem-arch .archtop { height: 150px; border: 1.4px solid var(--accent); border-bottom: none; border-radius: 999px 999px 0 0; }
.emblem-arch .body { border: 1.4px solid var(--accent); border-top: none; padding: 30px 30px 40px; text-align: center; margin-top: -1px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.emblem-arch .mono { font-family: var(--font-display); font-size: clamp(72px, 10vw, 110px); line-height: .9; margin-top: -86px; background: var(--bg); padding: 0 18px; }
.emblem-arch .sub { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.emblem-arch .rule { width: 44px; height: 1px; background: var(--accent); }

/* ============================================================
   PROGRAMA — columnata de arcos
   ============================================================ */
.colonnade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; align-items: end; }
.col-item { position: relative; padding: 0 14px; text-align: center; }
.col-arch { margin-bottom: 6px; }
.col-arch::after { content: attr(data-h); display: block; text-align: center; font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px); line-height: 1.12; color: var(--accent); font-variant-numeric: tabular-nums; }
.col-base { padding-bottom: 4px; }
.col-nombre { font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px); line-height: 1.12; }

/* ============================================================
   LOGÍSTICA
   ============================================================ */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.card { padding: 42px; background: var(--paper); border: 1px solid var(--keyline); transition: border-color .3s, transform .3s, box-shadow .3s; }
.card:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: 0 22px 44px -32px rgba(31,43,35,.4); }
.card-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 14px; font-weight: 600; }
.card h3 { font-family: var(--font-display); font-size: clamp(27px, 3vw, 35px); margin-bottom: 20px; }
.card p, .card li { font-size: 15px; color: var(--muted); line-height: 1.8; }
.card ul { list-style: none; margin: 6px 0; }
.card ul li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--keyline); }
.card ul li span:last-child { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card .note { color: var(--accent); font-size: 13.5px; margin: 4px 0 14px; }
.card p[style] { margin-top: 14px; }
.maplink { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap .25s, color .25s; }
.maplink:hover { gap: 14px; color: var(--sage-deep); }

.prose-card { padding: clamp(28px, 3vw, 40px); }
.prose-card p + p { margin-top: 16px; }
.prose-card:hover { transform: none; box-shadow: none; border-color: var(--keyline); }
.prose .prose-card p, .form-intro .prose-card p { margin-bottom: 0; }
.form-intro .prose-card + .deadline { margin-top: 20px; }
.aloj { padding: 42px; background: var(--paper); border: 1px solid var(--keyline); }
.aloj .card-kicker { font-family: var(--font-display); font-size: 31px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; margin-bottom: 8px; }
.aloj-sub { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 640px; margin-bottom: 14px; }
.aloj-zona { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-deep); margin: 32px 0 12px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--keyline); }
.aloj-table-wrap { overflow-x: auto; }
table.aloj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.aloj-table th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; text-align: left; padding: 12px; border-bottom: 1px solid var(--keyline); white-space: nowrap; }
table.aloj-table td { padding: 15px 12px; border-bottom: 1px solid var(--keyline); color: var(--muted); }
table.aloj-table td:first-child { color: var(--ink); }
table.aloj-table td a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
table.aloj-table td a:hover { color: var(--ink); border-bottom-color: var(--ink); }
table.aloj-table tr:hover td { background: color-mix(in srgb, var(--sage) 8%, transparent); }
.shuttle-note { margin-top: 20px; font-size: 14px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.sub { margin-bottom: clamp(52px, 7vh, 88px); scroll-margin-top: 110px; }
.sub:last-child { margin-bottom: 0; }
.sub-head { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 400; color: var(--ink); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--keyline); }
.sub-lead { font-size: 15px; color: var(--muted); line-height: 1.85; max-width: 680px; text-wrap: pretty; }
.bus-card { margin-bottom: 28px; }
.bus-lead { font-size: 18px; max-width: 62ch; }
.bus-card p { max-width: 720px; }
.prog-card { background: var(--paper); border: 1px solid var(--keyline); padding: clamp(30px, 4vw, 54px) clamp(20px, 3vw, 40px); box-shadow: 0 30px 60px -50px rgba(31,43,35,.45); }
.pl-map { width: 100%; height: auto; display: block; margin-top: 28px; background: var(--paper); border: 1px solid var(--keyline); }
.pl-map .pl-title { font-family: var(--font-display); font-size: 34px; letter-spacing: .22em; fill: var(--ink); }
.pl-map .pl-rule { fill: none; stroke: var(--keyline); stroke-width: 1; }
.pl-map .pl-route { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-map .pl-bus { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-map .pl-bus-body { fill: var(--paper); }
.pl-map .pl-dot { fill: var(--ink); }
.pl-map .pl-place { font-family: var(--font-body); font-size: 14px; letter-spacing: .16em; fill: var(--ink); }
.pl-map .pl-note { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
.pl-map .pl-badge circle { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.pl-map .pl-badge .pl-badge-in { stroke: var(--keyline); stroke-width: 1; }
.pl-map .pl-badge-t { font-family: var(--font-body); font-size: 14px; letter-spacing: .14em; fill: var(--ink); }
.pl-map .pl-badge-r { stroke: var(--accent); stroke-width: 1; }
.pl-map .pl-badge-s { font-family: var(--font-display); font-style: italic; font-size: 17px; fill: var(--accent); }
.pl-map .pl-mid { font-family: var(--font-display); font-style: italic; font-size: 19px; fill: var(--accent); }
.pl-map .pl-scale path { fill: none; stroke: var(--muted); stroke-width: 1; }
.pl-map.pl-map-v { display: none; max-width: 380px; margin-left: auto; margin-right: auto; }
.wc-map .wash { mix-blend-mode: multiply; }
.wc-map .wc-name { font-family: var(--font-display); font-size: 22px; fill: #33463b; }
.wc-map .wc-tag { font-family: var(--font-body); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; fill: #6a7a6d; }
.wc-map .wc-mid { font-family: var(--font-display); font-style: italic; font-size: 19px; fill: #a55f3f; }
.wc-map .mp-town { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; fill: #5f7268; }
.wc-map .mp-coast { fill: none; stroke: #7ea7ad; stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.wc-map .mp-river { fill: none; stroke: #7ea7ad; stroke-width: 1.8; stroke-linecap: round; opacity: .55; }
.wc-map .mp-road { fill: none; stroke: #a89c7e; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.wc-map .mp-route { fill: none; stroke: #a55f3f; stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.wc-map .mp-line { fill: none; stroke: #a55f3f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wc-map .mp-bus { fill: none; stroke: #a55f3f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wc-map .mp-casona { color: #a55f3f; }
.wc-map .mp-dot { fill: #fbf8ef; stroke: #a55f3f; stroke-width: 1.6; }
.nos-foto { margin: 0; }
.foto-frame { position: relative; padding: 15px; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
.foto-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.foto-frame .orn { position: absolute; width: 34px; height: 34px; color: var(--accent); fill: none; }
.foto-frame .orn.tl { top: -7px; left: -7px; }
.foto-frame .orn.tr { top: -7px; right: -7px; transform: scaleX(-1); }
.foto-frame .orn.bl { bottom: -7px; left: -7px; transform: scaleY(-1); }
.foto-frame .orn.br { bottom: -7px; right: -7px; transform: scale(-1); }
.nos-foto img { width: 100%; height: auto; display: block; box-shadow: 0 30px 60px -42px rgba(31,43,35,.5); }
.nos-foto figcaption { margin-top: 14px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--muted); }
.sec-sage .sub-head { color: var(--bg); border-bottom-color: color-mix(in srgb, var(--on-sage) 28%, transparent); }
.faq { margin-top: clamp(48px, 6vh, 76px); }
.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--on-sage) 22%, transparent); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); color: var(--bg); transition: color .25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: color-mix(in srgb, var(--on-sage) 70%, transparent); transition: transform .3s; }
.faq-item[open] summary::after { content: '–'; }
.faq-item summary:hover { color: color-mix(in srgb, var(--on-sage) 78%, transparent); }
.faq-item p { padding: 0 44px 24px 0; font-size: 15.5px; line-height: 1.85; color: color-mix(in srgb, var(--on-sage) 82%, transparent); max-width: 760px; text-wrap: pretty; }
.faq-item a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.faq-item a:hover { color: color-mix(in srgb, var(--on-sage) 74%, transparent); }

/* ============================================================
   MAPA
   ============================================================ */
.mapa-frame { position: relative; border: 1px solid var(--keyline); background: var(--paper); overflow: hidden; height: clamp(340px, 52vh, 520px); }
.mapa-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sage) 8%, transparent) 0 2px, transparent 2px 18px); }
.mapa-pin { font-size: 28px; color: var(--accent); }
.mapa-fb-name { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.2; max-width: 90%; }
.mapa-fb-sub { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mapa-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(.96); }
.mapa-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.mapa-caption .addr { font-size: 14px; color: var(--muted); }
.mapa-caption .addr strong { color: var(--ink); }

/* ============================================================
   REGALO (sage)
   ============================================================ */
.regalo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,64px); align-items: center; }
.regalo-grid .prose p { font-size: 18px; color: color-mix(in srgb, var(--on-sage) 86%, transparent); }
.iban-card { background: var(--paper); padding: 38px; border: 1px solid var(--keyline); position: relative; color: var(--ink); }
.iban-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); }
.iban-row + .iban-row { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--keyline); }
.iban-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.iban-value { font-size: 17px; color: var(--ink); word-break: break-all; line-height: 1.5; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.iban-copy { margin-top: 24px; display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--bg); border: none; padding: 12px 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background .25s; }
.iban-copy:hover { background: var(--accent); }
.iban-copy.copied { background: var(--sage); }

/* ============================================================
   MÚSICA
   ============================================================ */
.song-box { max-width: 780px; margin: 0 auto; }
.song-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.song-field { display: flex; flex-direction: column; gap: 8px; }
.song-field label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.song-field input { border: none; border-bottom: 1.4px solid var(--keyline-2); background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 9px 2px; outline: none; transition: border-color .25s; }
.song-field input:focus { border-bottom-color: var(--accent); }
.song-add { background: var(--accent); color: var(--bg); border: none; height: 46px; padding: 0 26px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: filter .2s, transform .15s; white-space: nowrap; }
.song-add:hover { filter: brightness(1.06); }
.song-add:active { transform: scale(.97); }
.song-list { list-style: none; margin-top: 40px; }
.song-list li { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--keyline); animation: songIn .5s var(--ease) both; }
@keyframes songIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.song-num { font-family: var(--font-display); font-size: 19px; color: var(--accent); width: 32px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.song-meta { flex: 1; min-width: 0; }
.song-title { font-size: 16px; color: var(--ink); }
.song-artist { font-size: 13px; color: var(--muted); }

/* ============================================================
   RSVP
   ============================================================ */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px,5vw,68px); align-items: start; }
.form-intro p { font-size: 18px; color: var(--muted); line-height: 1.9; margin-bottom: 14px; }
.deadline { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; border: 1px solid var(--keyline-2); padding: 9px 15px; }
.form-row { margin-bottom: 28px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
form label.field-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
form input[type="text"], form input[type="email"], form textarea, form select { width: 100%; border: none; border-bottom: 1.4px solid var(--keyline-2); background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 10px 0; outline: none; transition: border-color .25s; }
form input:focus, form textarea:focus, form select:focus { border-bottom-color: var(--accent); }
form textarea { resize: vertical; min-height: 76px; }
.radio-group { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-option { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--muted); border: 1px solid var(--keyline-2); padding: 12px 18px; transition: border-color .25s, color .25s, background .25s; }
.radio-option:has(input:checked) { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.radio-option input { width: 13px; height: 13px; border: 1.5px solid var(--keyline-2); border-radius: 50%; appearance: none; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.radio-option input:checked { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.btn-submit { background: var(--ink); color: var(--bg); border: none; font-family: var(--font-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; padding: 17px 46px; transition: background .25s, transform .15s; margin-top: 6px; }
.btn-submit:hover { background: var(--accent); }
.btn-submit:active { transform: scale(.98); }
.btn-submit:disabled { opacity: .5; cursor: default; }
.form-msg { display: none; margin-top: 22px; padding: 16px 18px; font-size: 14px; border-left: 3px solid var(--sage); background: color-mix(in srgb, var(--sage) 14%, transparent); color: var(--ink); }
.form-msg.error { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.form-hint { font-size: 12.5px; color: var(--faint); margin-top: 16px; }
.form-hint a { color: var(--accent); }

/* ============================================================
   CONTACTO (sage)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 26px; justify-content: center; }
.contact-card { padding: 38px 30px; border: 1px solid color-mix(in srgb, var(--on-sage) 40%, transparent); background: color-mix(in srgb, var(--paper) 12%, transparent); text-align: center; transition: background .3s, transform .3s; }
.contact-card:hover { background: color-mix(in srgb, var(--paper) 22%, transparent); transform: translateY(-3px); }
.contact-role { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--on-sage) 80%, transparent); margin-bottom: 14px; font-weight: 600; }
.contact-name { font-family: var(--font-display); font-size: 27px; margin-bottom: 16px; color: var(--bg); }
.contact-links { display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: color-mix(in srgb, var(--on-sage) 86%, transparent); }
.contact-links a { color: inherit; text-decoration: none; transition: color .2s; }
.contact-links a:hover { color: var(--bg); }

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria-ph { aspect-ratio: 16/7; min-height: 300px; border: 1px solid var(--keyline); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; position: relative; overflow: hidden; background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sage) 6%, transparent) 0 2px, transparent 2px 16px); }
.galeria-ph .g-mono { font-family: var(--font-display); font-size: 60px; color: var(--accent); opacity: .85; }
.galeria-ph p { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding: 90px 40px; text-align: center; border-top: 1px solid var(--keyline); position: relative; }
.footer-arch { margin: 0 auto 30px; }
.footer-name { font-family: var(--font-display); font-size: clamp(40px, 6vw, 68px); margin-bottom: 18px; }
.footer-info { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 2; margin-bottom: 20px; }
.footer-msg { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); }
.footer-mark { margin-top: 28px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-32px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(32px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-r.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }

body.no-anim .reveal, body.no-anim .reveal-l, body.no-anim .reveal-r, body.no-anim .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r, .stagger > * { opacity: 1 !important; transform: none !important; }
  .plate-frame img { clip-path: none !important; transform: none !important; }
  .scroll-cue .bar::after, .song-list li { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1180px) {
  #meridian { display: block; }
  nav, .hero-inner, .wrap, .sec > .wrap, .sec { } /* rail is decorative; content stays centered */
  body { padding-left: 0; }
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  nav { padding: 0 24px; }
}
@media (max-width: 920px) {
  .sec { padding: 76px 24px; }
  #hero { padding: 120px 24px 56px; }
  .hero-top { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .hero-meta { text-align: left; }
  .hero-meta .l { margin-left: 0; }
  .sec-head { gap: 10px; margin-bottom: 44px; }
  .sec-num { font-size: clamp(48px, 16vw, 80px); }
  .nos-grid { grid-template-columns: 1fr; gap: 48px; }
  .emblem-arch { margin-top: 8px; }
  .colonnade { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .cards-2 { grid-template-columns: 1fr; gap: 22px; }
  .card, .aloj, .iban-card { padding: 30px; }
  .regalo-grid, .form-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .song-form { grid-template-columns: 1fr; }
  .song-add { width: 100%; height: 50px; }
  #countdown { padding: 60px 24px; }
}
@media (max-width: 520px) {
  .hero-names { font-size: clamp(34px, 10.5vw, 92px); }
  .colonnade { grid-template-columns: repeat(2, 1fr); }
  .cd-block + .cd-block::before { display: none; }
  .form-row-2 { grid-template-columns: 1fr; gap: 28px; }
  .plate-caption { gap: 6px; }
}
@media (max-width: 760px) {
  .pl-map:not(.pl-map-v) { display: none; }
  .pl-map.pl-map-v { display: block; }
  .bus-lead { font-size: 16px !important; width: auto !important; height: auto !important; }
  .prog-card { padding: 26px 14px; }
  .col-item { padding: 0 6px; }
  .sub-head { font-size: 25px; }
  .aloj .card-kicker { font-size: 25px; line-height: 1.2; }
  .foto-frame { padding: 11px; }
  .foto-frame .orn { width: 26px; height: 26px; }
  .faq-item summary { padding-right: 38px; font-size: 19px; }
  .faq-item p { padding-right: 0; }
  form input[type="text"], form input[type="email"], form textarea, form select { font-size: 16px; }
  .card ul li { flex-wrap: wrap; gap: 4px; }
  .card ul li span:last-child { white-space: normal; }
  .iban-copy { width: 100%; justify-content: center; }
  .nav-logo { font-size: 22px !important; }
  #hero-date-text { font-size: 24px !important; }
  .contact-grid { max-width: 340px; }
  .galeria-ph { width: 100%; max-width: 100%; min-height: 0; }
  .botanical.bot-hide-m.bot-m { display: block !important; position: absolute !important; width: 112px !important; height: auto !important; opacity: .45; }
  .bot-m-tr { right: -20px !important; left: auto !important; top: 58px !important; bottom: auto !important; }
  #hero .bot-m-tr { top: auto !important; bottom: 170px !important; right: -24px !important; }
  #hero .botanical { display: block !important; position: absolute !important; height: auto !important; opacity: .42; }
  #hero .botanical:nth-of-type(1) { left: -26px !important; right: auto !important; top: 96px !important; width: 88px !important; }
  #hero .botanical:nth-of-type(2) { right: -22px !important; left: auto !important; top: 150px !important; width: 78px !important; }
  .bot-m-bl { left: -20px !important; right: auto !important; bottom: 24px !important; top: auto !important; }
  .bot-m-br { right: -20px !important; left: auto !important; bottom: 24px !important; top: auto !important; }
  body { overflow-x: hidden; }
}
@media (max-width: 400px) {
  .colonnade { grid-template-columns: 1fr; row-gap: 22px; }
  .sec { padding: 64px 18px; }
  #hero { padding: 108px 18px 48px; }
  .aloj, .card, .iban-card { padding: 24px 20px; }
}