/* Común a todas las páginas. Se carga después de sitio.css (el diseño de los novios), así que gana.
   Aquí solo va lo que añade la web al diseño: menú que se oculta, formulario por familia y código,
   «Instalar app», avisos y acceso al panel. El diseño se cambia en sitio.css, no aquí. */

/* Menú: se oculta al bajar en móvil (comun.js) */
.bar{transition:transform .25s ease}
.bar.oculta{transform:translateY(-110%)}
@media(prefers-reduced-motion:reduce){.bar{transition:none}}

/* ===== Formulario de confirmación: código de invitación y familia (index.html) ===== */
/* Nota con el código de invitación (formulario general) */
.conf .rsvp .cod{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.conf .rsvp .cod p{margin:0 0 10px;font-size:15px;line-height:1.5}
.conf .rsvp .cod-f{display:flex;gap:10px;align-items:stretch}
.conf .rsvp .cod-f input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em}
.conf .rsvp .btn-o{flex:none;border:1.5px solid var(--blue);color:var(--blue);background:transparent;border-radius:15px;padding:10px 18px;font-family:var(--body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.conf .rsvp .btn-o:hover{background:var(--blue);color:var(--bg)}
.conf .rsvp .cod .err{margin:10px 0 0}
/* Formulario por familia */
.conf .rsvp .fam-hola{font-family:var(--display);font-size:clamp(34px,6vw,46px);line-height:1.1;margin:0 0 6px;text-align:center}
.conf .rsvp .pp{border-top:1px solid var(--line);padding:16px 0 4px}
.conf .rsvp .pp:first-child{border-top:0;padding-top:4px}
.conf .rsvp .pn{font-size:20px;letter-spacing:.03em;margin:0 0 10px}
.conf .rsvp .pp .choice{margin-bottom:14px}
.conf .rsvp .pd{padding-left:2px}
.conf .rsvp #fam-comun{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.conf .rsvp .fam-otro{margin:18px 0 0;text-align:center}
.conf .rsvp .fam-otro button{font:inherit;font-size:14px;background:none;border:0;color:var(--blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:4px}


/* Bloque «Instalar app» tras confirmar (comun.js: ofrecerInstalar) */
.instalar{margin-top:22px}
.instalar .hintq{margin-bottom:8px}

/* ===== Avisos (comun.js) ===== */
/* Franja de avisos bajo la cuenta atrás: rosa claro de la paleta, texto azul */
.franja{position:relative;background:#F8E1E6;color:#366BAA;font-family:var(--body);font-size:15px;line-height:1.45;letter-spacing:.02em;
  text-align:center;padding:10px 46px 10px 16px;border-bottom:1px solid rgba(54,107,170,.18)}
.franja p{margin:0}
.franja strong{font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-right:8px}
.franja a{color:inherit;margin-left:6px;white-space:nowrap}
.franja button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:24px;line-height:1;padding:6px 12px;cursor:pointer}

/* Franja al abrir la app instalada: «¿Quieres recibir avisos?» */
.avisos-banda{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;max-width:640px;margin:0 auto;
  background:#366BAA;color:#FFFFFF;border-radius:15px;padding:14px 18px;box-shadow:0 10px 28px rgba(10,30,60,.28);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;font-family:var(--body);font-size:15px;line-height:1.45;letter-spacing:.02em}
.avisos-banda p{margin:0;flex:1 1 220px}
.avisos-banda .ab-acc{display:flex;align-items:center;gap:14px}
.avisos-banda .ab-si{background:#F4EDE9;color:#366BAA;border:0;border-radius:15px;padding:10px 20px;font-family:var(--body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.avisos-banda .ab-no{background:none;border:0;color:#FFFFFF;font-family:var(--body);font-size:14px;text-decoration:underline;cursor:pointer;padding:6px 0}
.avisos-banda .av-err{flex-basis:100%;font-size:14px}

/* Ventana «Avisos» del pie */
.avisos-dlg{position:fixed;inset:0;z-index:60;background:rgba(20,40,75,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.avisos-dlg[hidden]{display:none!important}
.avisos-dlg .ad-caja{position:relative;width:100%;max-width:460px;max-height:90vh;overflow:auto;background:#F6F6F5;color:#366BAA;
  padding:30px 28px 28px;box-shadow:0 10px 28px rgba(10,30,60,.25);font-family:var(--body);font-size:16px;line-height:1.55;letter-spacing:.02em;text-align:left}
.avisos-dlg h2{font-family:var(--display);font-weight:400;font-size:56px;line-height:1.05;margin:0 0 12px;color:#366BAA!important}
.avisos-dlg p{margin:0 0 14px}
.avisos-dlg ol{margin:0 0 14px;padding-left:22px}
.avisos-dlg li{margin-bottom:6px}
.avisos-dlg .ad-cerrar{position:absolute;top:8px;right:10px;background:none;border:0;color:#366BAA;font-size:30px;line-height:1;padding:6px 10px;cursor:pointer}
.avisos-dlg .ad-btn{display:inline-block;background:#366BAA;color:#F4EDE9;border:1px solid #366BAA;border-radius:15px;padding:14px 26px;
  font-family:var(--body);font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.avisos-dlg .ad-btn-o{background:transparent;color:#366BAA}
.avisos-dlg .ad-btn:disabled{opacity:.6}
.av-err{color:#9B2C2C}
.avisos-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;
  background:#366BAA;color:#F4EDE9;padding:12px 22px;border-radius:15px;font-family:var(--body);font-size:15px;box-shadow:0 10px 28px rgba(10,30,60,.2)}
.avisos-toast[hidden]{display:none}

/* Acceso al panel de los novios: pequeño y tenue al final del pie */
footer .fn-acceso{margin:22px 0 0}
footer .fn-acceso a{color:#FFFFFF!important;opacity:.55;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
footer .fn-acceso a:hover,footer .fn-acceso a:focus-visible{opacity:.9;text-decoration:underline;text-underline-offset:4px}

/* Aviso completo al tocar la notificación (comun.js: avisoDeLaUrl) */
.aviso-dlg{position:fixed;inset:0;z-index:65;background:rgba(20,40,75,.5);display:flex;align-items:center;justify-content:center;padding:16px;animation:av-entra .2s ease}
.aviso-dlg .av-caja{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;background:#F6F6F5;color:#366BAA;text-align:center;
  padding:52px 28px 30px;box-shadow:0 14px 40px rgba(10,30,60,.3);font-family:var(--body);letter-spacing:.02em}
.aviso-dlg .av-caja:focus{outline:none}
.aviso-dlg .av-de{margin:0 0 6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.aviso-dlg h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,12vw,60px);line-height:1.05;margin:0 0 14px;color:#366BAA!important;overflow-wrap:anywhere}
.aviso-dlg .av-texto{margin:0;font-size:18px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.aviso-dlg .av-cuando{margin:18px 0 0;font-size:13px;opacity:.75}
.aviso-dlg .av-cuando:empty{display:none}
.aviso-dlg .av-cerrar{position:absolute;top:8px;right:10px;background:none;border:0;color:#366BAA;font-size:32px;line-height:1;padding:6px 12px;cursor:pointer}
@keyframes av-entra{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.aviso-dlg{animation:none}}


/* ===== Ajustes pedidos por los novios sobre el diseño del artefacto (2026-11-15) ===== */

/* «Nuestro día» (Inicio) con fondo azul: textos, línea e iconos en claro; el botón, claro con letra azul */
.dia{background:var(--blue)!important;color:var(--bg)!important}
.dia h2{color:var(--bg)!important}
.tl::before,.tl::after,.tl-m{background:var(--bg)!important}
.tl-h i{border-top-color:var(--bg)!important}
.tl-i img{filter:brightness(0) invert(1) sepia(.12) saturate(.6)}   /* los iconos son azules: se pasan a claro */
.dia .btn{background:var(--bg)!important;color:var(--blue)!important}

@media(max-width:640px){
  /* «Nuestro día» en móvil: a un lado y a otro de la línea, a todo el ancho (como en ordenador) */
  .tl{max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .tl::before,.tl::after{left:50%!important}
  .tl-row,.tl-row.rev{grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr)!important;gap:0 16px!important;padding:12px 0!important;align-items:center!important}
  .tl-row .tl-m,.tl-row.rev .tl-m{grid-column:2!important;grid-row:1!important;margin-left:0!important;width:3px}
  .tl-row .tl-t{grid-column:1!important;grid-row:1!important;text-align:right!important}
  .tl-row .tl-i{grid-column:3!important;grid-row:1!important;justify-content:flex-start!important}
  .tl-row.rev .tl-t{grid-column:3!important;grid-row:1!important;text-align:left!important}
  .tl-row.rev .tl-i{grid-column:1!important;grid-row:1!important;justify-content:flex-end!important}
  .tl-t{flex-direction:column!important}
  .tl-h{order:0!important;display:block!important}
  .tl-h i{display:none!important}

  /* Ceremonia y finca, compacto: foto pequeña a la izquierda y el texto al lado (antes el texto se montaba sobre la foto) */
  .lug2{padding-block:30px 34px!important}
  .locs{gap:22px!important;margin-top:20px!important}
  .loc,.loc:nth-child(even){grid-template-columns:38% minmax(0,1fr)!important;grid-template-areas:"f t" "f b"!important;grid-template-rows:auto auto!important;column-gap:16px!important;row-gap:0!important;align-items:center!important;align-content:center!important}
  .loc figure{padding:5px!important}
  .loc figure img{aspect-ratio:4/5!important}
  .loc .t{align-self:end!important}
  .loc .t b{font-size:34px!important;margin-bottom:4px!important}
  .loc .t .n{font-size:16px!important;margin-top:4px!important;line-height:1.3}
  .loc .t .d{font-size:14px!important;line-height:1.4;margin-top:4px!important}

  /* Alojamientos, Transporte, Madrid y Regalo: de dos en dos */
  .mas .mcols{grid-template-columns:1fr 1fr!important;gap:34px 12px!important}
  .mas .mcols>div{gap:10px}
  .mas .mic{width:48px;height:48px}
  .mas h3{font-size:30px!important}
  .mas .btn,.mas .btn.alt{padding:11px 14px!important;font-size:11px!important;letter-spacing:.1em!important}
}

/* Ceremonia y finca: la hora al lado del título, el nombre en negrita y «Cómo llegar» como enlace pequeño y discreto */
.loc .t b .h{display:inline!important;font-family:var(--body);font-size:15px!important;letter-spacing:.08em!important;text-transform:none!important;margin-left:8px;white-space:nowrap}
.loc .t .n{font-weight:700!important}
.lug2 .loc a.btn{background:transparent!important;color:var(--blue)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:2px 0!important;margin-top:8px!important;
  font-size:11px!important;letter-spacing:.14em!important;text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1px!important;justify-self:start;align-self:start}
.lug2 .loc a.btn::after{content:" →";text-decoration:none;display:inline-block;margin-left:4px}

/* Accesos (Alojamientos, Transporte, Madrid, Regalo): iconos dibujados, aclarados sobre el azul */
.mas img.mic{width:auto!important;height:clamp(54px,7vw,72px)!important;filter:brightness(0) invert(1) sepia(.12) saturate(.6);object-fit:contain}
@media(max-width:640px){.mas img.mic{height:50px!important}}

/* Menú en móvil: logo, Inicio, Itinerario, Regalo, Confirmar y un botón que despliega el resto (comun.js) */
.menu-btn,.menu-mas{display:none}
@media(max-width:860px){
  .bar.con-menu{position:sticky}
  .bar.con-menu .w{position:relative;gap:clamp(5px,1.8vw,14px)!important;justify-content:flex-start!important}
  .bar.con-menu .m{font-size:clamp(22px,7vw,36px)!important}
  .bar.con-menu .l{overflow:visible!important;flex:1 1 auto!important;justify-content:flex-end!important;gap:clamp(5px,2vw,18px)!important}
  .bar.con-menu .l .nl,.bar.con-menu .l .nr{gap:clamp(5px,2vw,18px)!important;margin-left:0!important}
  .bar.con-menu .l a{font-size:clamp(8.5px,2.5vw,12.5px)!important;letter-spacing:.03em!important}
  .bar.con-menu .l a.en-menu{display:none!important}
  .bar.con-menu .rs{padding:clamp(6px,1.8vw,9px) clamp(6px,2vw,15px)!important}
  .menu-btn{display:flex;flex:none;align-items:center;justify-content:center;width:clamp(28px,8.5vw,38px);height:38px;margin-right:-6px;padding:0;background:none;border:0;color:var(--blue);cursor:pointer}
  .menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .menu-mas{display:block;position:absolute;top:100%;right:0;min-width:210px;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 28px rgba(10,30,60,.18);padding:8px 0}
  .menu-mas[hidden]{display:none}
  .menu-mas a{display:block;padding:13px 22px;font-family:var(--body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--blue)}
  .menu-mas a:hover,.menu-mas a:focus-visible{background:rgba(54,107,170,.08)}
}

/* Itinerario: las horas llevan «h» (17.30h), así que su columna necesita algo más de ancho */
.ptl .w{grid-template-columns:clamp(96px,14vw,140px) clamp(54px,8vw,80px) minmax(0,1fr)}
/* …y en móvil también se ven los iconos (el artefacto los ocultaba) */
@media(max-width:560px){.ptl .w{grid-template-columns:72px 44px minmax(0,1fr);gap:12px}.ptl time{letter-spacing:.02em;font-size:21px}.ptl img{display:block!important;height:42px}}

/* Itinerario, final: «¡Alma Llanera!» en una sola línea y «Felices para siempre» justo debajo */
.fnl .al{display:block;margin:0!important;white-space:nowrap}
.fnl i{display:block;font-size:.8em;font-weight:400;margin-top:2px}
@media(max-width:360px){.fnl .al{font-size:17px;letter-spacing:0}}
/* …y los dos párrafos de agradecimiento, más pequeños y justificados */
.ptl li:last-child p{font-size:clamp(14px,1.6vw,16px);line-height:1.5;text-align:justify;hyphens:auto;margin-top:6px}
@media(max-width:640px){.ptl li:last-child p{text-align:left;hyphens:manual}}   /* en móvil, a la izquierda: justificado dejaba huecos */

/* Formulario: el título («Confirmen su asistencia») en una sola línea en móvil */
@media(max-width:640px){.conf h2{font-size:min(46px,10.2vw)!important;white-space:nowrap}}

/* «Importante:» sobre el bloque de instalar la app, tras confirmar */
.instalar .imp{font-weight:700;text-transform:uppercase;font-size:13px!important;letter-spacing:.16em!important;margin-bottom:2px!important}

/* Madrid: fotos tipo polaroid como las de Inicio, pero fijas y rectas (de tres en tres; en móvil, de dos en dos) */
.pols{padding-bottom:clamp(20px,4vw,40px)}
.pols .w{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.4vw,26px);max-width:860px}
.pols figure{margin:0;flex:0 0 calc((100% - 2*clamp(14px,2.4vw,26px))/3);background:var(--surface);padding:9px 9px 30px;box-shadow:0 10px 28px rgba(10,30,60,.2)}
.pols img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:640px){.pols figure{flex-basis:calc((100% - clamp(14px,2.4vw,26px))/2);padding:6px 6px 22px}}