/* ============================================================
   PARQUE VIVO EL SAINETE — Vereda San Andrés, Girardota
   Estética tomada del logo: rojo, cenefas geométricas,
   rombos concéntricos y letra script con contorno blanco.
   ============================================================ */

/* ---------- 1. Paleta del logo ---------- */
:root{
  --rojo:#D42129;
  --rojo-osc:#A81820;
  --rojo-prof:#7C1218;
  --rojo-noche:#5A0D12;
  --verde:#00994F;
  --verde-cl:#57B96B;
  --azul:#1E4FA1;
  --azul-cl:#2E9BD6;
  --amarillo:#FFCB3D;
  --naranja:#E8622A;
  --crema:#FFF2D2;
  --blanco:#FFFFFF;

  --texto:var(--crema);
  --texto-mute:#F0CFC0;

  --radio:22px;
  --radio-sm:14px;

  --sombra:0 20px 55px -22px rgba(50,4,8,.9);
  --sombra-dura:0 6px 0 rgba(90,13,18,.55);

  --max:1200px;
  --pad:clamp(1.15rem, 4vw, 2.5rem);

  --ff-display:'Bricolage Grotesque','Archivo Black',system-ui,sans-serif;
  --ff-script:'Lobster Two',cursive;
  --ff-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;

  --nav-h:78px;

  --cenefa-rombos:url('../img/cenefa-rombos.svg');
  --cenefa-tri:url('../img/cenefa-triangulos.svg');
  --cenefa-barras:url('../img/cenefa-barras.svg');
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(1rem,.96rem + .25vw,1.09rem);
  line-height:1.68;
  color:var(--texto);
  background:var(--rojo-prof);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,1.4rem + 5.6vw,5.6rem)}
h2{font-size:clamp(1.95rem,1.25rem + 3.2vw,3.5rem)}
h3{font-size:clamp(1.2rem,1.05rem + .85vw,1.6rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:6px}
::selection{background:var(--amarillo);color:var(--rojo-noche)}

/* ---------- 3. Utilidades ---------- */
.wrap{width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.section{padding:clamp(4rem,8vw,7.5rem) 0;position:relative}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kicker{
  font-family:var(--ff-body);font-weight:700;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;color:var(--amarillo);
}
.kicker::before{content:"";width:30px;height:10px;
  background:var(--cenefa-barras) center/auto 10px repeat-x;border-radius:2px}
.kicker.center-k{justify-content:center}

.lead{font-size:clamp(1.05rem,1rem + .45vw,1.28rem);color:#FFE8CE;max-width:62ch}
.muted{color:var(--texto-mute)}

/* Letra script del logo: relleno amarillo, contorno blanco, sombra dura */
.script{
  font-family:var(--ff-script);font-weight:700;font-style:normal;
  color:var(--amarillo);
  -webkit-text-stroke:.05em var(--blanco);
  paint-order:stroke fill;
  text-shadow:.02em .05em 0 rgba(90,13,18,.6);
  letter-spacing:.045em;line-height:1.12;display:inline-block;
}
/* En tamaño grande el contorno puede ser más generoso sin comerse las letras */
h1 .script{-webkit-text-stroke:.055em var(--blanco);letter-spacing:.03em}
.script--verde{color:var(--verde-cl)}
.script--azul{color:var(--azul-cl)}
h1 .script,h2 .script{font-size:1.14em}

/* ---------- 4. Cenefas ---------- */
.cenefa{height:40px;background:var(--cenefa-tri) center/auto 40px repeat-x;position:relative;z-index:6}
.cenefa--rombos{height:46px;background:var(--cenefa-rombos) center/auto 46px repeat-x}
.cenefa--barras{height:16px;background:var(--cenefa-barras) center/auto 16px repeat-x}
.cenefa--voltear{transform:rotate(180deg)}

.tex-rombo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20Z' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E");
}
.tex-tri{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30'%3E%3Cpath d='M0 28 L9 6 L18 28 L27 6 L36 28' fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* ---------- 5. Botones ---------- */
.btn{
  --btn-bg:var(--amarillo); --btn-fg:var(--rojo-noche);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:999px;
  font-weight:700;font-size:1rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--rojo-noche);
  box-shadow:var(--sombra-dura);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .25s,color .25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(90,13,18,.55)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(90,13,18,.55)}
.btn-primario{--btn-bg:var(--verde);--btn-fg:#fff;border-color:var(--blanco)}
.btn-sol{--btn-bg:var(--amarillo);--btn-fg:var(--rojo-noche);border-color:var(--blanco)}
.btn-azul{--btn-bg:var(--azul);--btn-fg:#fff;border-color:var(--blanco)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--crema);border-color:var(--crema);box-shadow:none}
.btn-ghost:hover{background:var(--crema);color:var(--rojo);box-shadow:none;transform:translateY(-3px)}
.btn-wa{--btn-bg:#25D366;--btn-fg:#06301a;border-color:var(--blanco)}
.btn-sm{padding:.58rem 1.15rem;font-size:.9rem;border-width:2px}

/* ---------- 6. Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  transition:background .35s,backdrop-filter .35s,box-shadow .35s}
.nav.solid{background:rgba(124,18,24,.94);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 3px 0 var(--amarillo),0 14px 40px -26px #000}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(100% - 2*var(--pad),1440px);margin-inline:auto}

.brand{display:flex;align-items:center;gap:.7rem;line-height:1}
.brand img{width:52px;height:52px;border-radius:12px;border:2px solid var(--amarillo);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);flex:0 0 auto}
.brand__txt{font-family:var(--ff-script);font-weight:700;font-size:1.18rem;color:var(--amarillo);
  -webkit-text-stroke:.045em var(--blanco);paint-order:stroke fill;line-height:1.05}
.brand__txt small{display:block;font-family:var(--ff-body);font-weight:600;font-size:.6rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--crema);
  -webkit-text-stroke:0;margin-top:.3rem}

.menu{display:flex;align-items:center;gap:.15rem}
.menu .btn{display:none}
.menu a{padding:.5rem .78rem;border-radius:999px;font-weight:600;font-size:.93rem;color:var(--crema);
  transition:color .2s,background .2s}
.menu a:hover,.menu a.activo{color:var(--rojo-noche);background:var(--amarillo)}
.nav__cta{display:flex;align-items:center;gap:.6rem}

.burger{display:none;width:46px;height:46px;border-radius:12px;border:2px solid var(--amarillo);place-items:center}
.burger span{display:block;width:20px;height:2.5px;background:var(--crema);border-radius:2px;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2.5px;
  background:var(--crema);border-radius:2px;transition:.3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.abierto .burger span{background:transparent}
.nav.abierto .burger span::before{top:0;transform:rotate(45deg)}
.nav.abierto .burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .burger{display:grid}
  .nav__cta .btn{display:none}
  .menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--rojo-prof);padding:1.1rem var(--pad) 2rem;
    border-bottom:16px solid transparent;
    border-image:var(--cenefa-barras) 16 repeat;
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform .4s cubic-bezier(.2,.9,.2,1),opacity .3s;
    max-height:calc(100dvh - var(--nav-h));overflow:auto;
  }
  .nav.abierto .menu{transform:none;opacity:1;pointer-events:auto}
  .menu a{padding:.85rem 1rem;font-size:1.08rem}
  .menu .btn{display:inline-flex;margin-top:.9rem;width:100%}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 3rem) 0 5rem;overflow:hidden;background:var(--rojo)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__foto{position:absolute;inset:0;background:var(--rojo) center/cover no-repeat}
/* El velo es opaco sobre la columna de texto y se abre hacia la foto */
.hero__bg::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg, rgba(124,18,24,.95) 0%, rgba(124,18,24,.88) 34%, rgba(124,18,24,.42) 60%, rgba(124,18,24,.22) 100%),
  linear-gradient(180deg, rgba(124,18,24,.55) 0%, rgba(124,18,24,0) 22%, rgba(124,18,24,0) 62%, var(--rojo-prof) 100%)}
.hero__foto{filter:saturate(1.12) contrast(1.04)}
@media (max-width:860px){
  .hero__bg::after{background:
    linear-gradient(180deg, rgba(124,18,24,.86) 0%, rgba(124,18,24,.9) 60%, var(--rojo-prof) 100%)}
}
.hero__tex{position:absolute;inset:0;z-index:2;opacity:.5}

/* franja de cenefa al pie del hero */
.hero__cenefa{position:absolute;left:0;right:0;bottom:0;z-index:4;height:38px;
  background:var(--cenefa-rombos) center/auto 38px repeat-x}

.hero__in{position:relative;z-index:5;width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.hero h1{margin-bottom:.4em;text-shadow:0 10px 30px rgba(60,5,9,.5)}
.hero h1 .l1{display:block;font-family:var(--ff-script);font-weight:700;font-size:.32em;
  color:var(--crema);-webkit-text-stroke:0;text-shadow:none;margin-bottom:.15em;letter-spacing:.01em}
.hero h1 .l2{display:block;font-size:.92em}
.hero__sub{font-size:clamp(1.05rem,1rem + .5vw,1.32rem);max-width:56ch;color:#FFEBD6;margin-bottom:2rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.4rem}

.sellos{display:flex;flex-wrap:wrap;gap:.6rem}
.sello{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:999px;
  background:rgba(90,13,18,.5);border:2px solid rgba(255,242,210,.35);
  backdrop-filter:blur(6px);font-size:.83rem;font-weight:600;color:#FFEBD6}
.sello b{font-weight:800;color:var(--amarillo)}
.sello .pt{width:9px;height:9px;border-radius:50%;background:var(--verde-cl);
  box-shadow:0 0 0 0 rgba(87,185,107,.8);animation:latir 2.4s infinite}
@keyframes latir{70%{box-shadow:0 0 0 12px rgba(87,185,107,0)}100%{box-shadow:0 0 0 0 rgba(87,185,107,0)}}

.scroll-hint{position:absolute;bottom:3.6rem;left:50%;transform:translateX(-50%);z-index:5;
  display:grid;place-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,242,210,.75)}
.scroll-hint i{width:3px;height:34px;background:linear-gradient(var(--amarillo),transparent);
  border-radius:2px;animation:bajar 2s ease-in-out infinite}
@keyframes bajar{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- 8. Marquesina ---------- */
.marquee{background:var(--amarillo);color:var(--rojo-noche);padding:.8rem 0;overflow:hidden;
  position:relative;z-index:5;border-block:3px solid var(--rojo-noche)}
.marquee--verde{background:var(--verde);color:#fff}
.marquee--azul{background:var(--azul);color:#fff}
.marquee__track{display:flex;width:max-content;animation:correr 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__g{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;flex:0 0 auto}
.marquee span{font-family:var(--ff-script);font-weight:700;
  font-size:clamp(1.15rem,1rem + .8vw,1.85rem);white-space:nowrap;line-height:1}
.marquee i{width:14px;height:14px;flex:0 0 auto;background:currentColor;transform:rotate(45deg)}
@keyframes correr{to{transform:translateX(-50%)}}

/* ---------- 9. Superficies ---------- */
.section--claro{background:var(--rojo)}
.section--oscuro{background:var(--rojo-noche)}

.card{position:relative;border-radius:var(--radio);padding:1.8rem;background:var(--rojo-osc);
  border:3px solid rgba(255,242,210,.22);box-shadow:var(--sombra-dura);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s;overflow:hidden;height:100%}
.card:hover{transform:translateY(-6px);border-color:var(--acento,var(--amarillo))}
.card h3{margin-bottom:.5rem}
.card p{color:var(--texto-mute);font-size:.97rem}

.grid{display:grid;gap:1.2rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split--rev>*:first-child{order:2}
@media (max-width:760px){.split--rev>*:first-child{order:0}}

/* ---------- 10. Reveal ---------- */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- 11. Collage de fotos ---------- */
.collage{position:relative;aspect-ratio:4/4.4;max-width:520px;margin-inline:auto;width:100%}
.collage__f{position:absolute;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  background:var(--rojo-osc) center/cover no-repeat;border:5px solid var(--crema)}
.collage__f img{width:100%;height:100%;object-fit:cover}
.collage__f:nth-child(1){inset:0 22% 30% 0;transform:rotate(-3deg)}
.collage__f:nth-child(2){inset:34% 0 0 26%;transform:rotate(3deg);z-index:2}
.collage__badge{position:absolute;z-index:3;right:-8px;top:-16px;
  background:var(--amarillo);color:var(--rojo-noche);border-radius:999px;padding:.75rem 1.2rem;
  font-family:var(--ff-script);font-weight:700;font-size:1.15rem;line-height:1;text-align:center;
  border:3px solid var(--blanco);box-shadow:var(--sombra-dura);transform:rotate(6deg)}
.collage__badge small{display:block;font-family:var(--ff-body);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:.25rem}

/* ---------- 12. Pilares ---------- */
.pilar{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;
  border-top:2px solid rgba(255,242,210,.2)}
.pilar__n{font-family:var(--ff-script);font-weight:700;font-size:1.7rem;line-height:1;
  color:var(--acento,var(--amarillo));min-width:2.2ch;
  -webkit-text-stroke:.04em var(--blanco);paint-order:stroke fill}
.pilar h4{margin:0 0 .2rem;font-size:1.08rem}
.pilar p{margin:0;font-size:.93rem;color:var(--texto-mute)}

/* ---------- 13. Línea de tiempo ---------- */
.linea{position:relative;padding-left:2.5rem}
.linea::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:8px;border-radius:4px;
  background:var(--cenefa-barras) center/8px auto repeat-y}
.hito{position:relative;padding-bottom:2rem}
.hito:last-child{padding-bottom:0}
.hito::before{content:"";position:absolute;left:-2.5rem;top:.3rem;width:28px;height:28px;
  background:var(--acento,var(--amarillo));border:3px solid var(--blanco);
  transform:rotate(45deg);box-shadow:var(--sombra-dura)}
.hito__a{font-family:var(--ff-script);font-weight:700;font-size:1.6rem;line-height:1;
  color:var(--acento,var(--amarillo));-webkit-text-stroke:.04em var(--blanco);paint-order:stroke fill;
  display:block;margin-bottom:.35rem}
.hito h4{margin:0 0 .3rem;font-size:1.12rem}
.hito p{margin:0;font-size:.95rem;color:var(--texto-mute)}

/* ---------- 14. Cifras ---------- */
.cifras{background:var(--amarillo);color:var(--rojo-noche);position:relative;overflow:hidden;
  border-block:4px solid var(--rojo-noche)}
.cifras .tex-rombo{position:absolute;inset:0;opacity:.5;filter:invert(1)}
.cifras__grid{position:relative;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));text-align:center}
.cifra b{display:block;font-family:var(--ff-script);font-weight:700;
  font-size:clamp(2.8rem,2rem + 3.2vw,4.6rem);line-height:1;color:var(--rojo);
  -webkit-text-stroke:.035em var(--blanco);paint-order:stroke fill}
.cifra span{display:block;font-weight:700;font-size:.83rem;letter-spacing:.13em;
  text-transform:uppercase;margin-top:.4rem;opacity:.85}

/* ---------- 15. Personajes ---------- */
.pers{position:relative;border-radius:var(--radio-sm);padding:1.3rem 1.2rem;
  background:var(--rojo-osc);border:3px solid rgba(255,242,210,.2);
  box-shadow:var(--sombra-dura);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.pers::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;
  background:var(--acento,var(--amarillo));transform:rotate(45deg);opacity:.85;transition:transform .4s}
.pers:hover{transform:translateY(-6px);border-color:var(--acento,var(--amarillo))}
.pers:hover::after{transform:rotate(45deg) scale(1.25)}
.pers__n{position:relative;z-index:1;font-family:var(--ff-script);font-weight:700;font-size:1.35rem;
  line-height:1;color:var(--amarillo);-webkit-text-stroke:.04em var(--blanco);paint-order:stroke fill;
  display:block;margin-bottom:.45rem}
.pers h4{position:relative;z-index:1;margin:0 0 .25rem;font-size:1.1rem}
.pers p{position:relative;z-index:1;margin:0;font-size:.87rem;color:var(--texto-mute);line-height:1.5}

/* ---------- 16. Instrumentos ---------- */
.instr{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.instr div{text-align:center;padding:1.5rem .8rem;border-radius:var(--radio-sm);
  background:var(--rojo-osc);border:3px solid rgba(255,242,210,.2);
  box-shadow:var(--sombra-dura);transition:.3s}
.instr div:hover{border-color:var(--amarillo);transform:translateY(-5px)}
.instr em{font-size:2rem;font-style:normal;line-height:1}
.instr b{display:block;font-family:var(--ff-script);font-weight:700;font-size:1.4rem;margin-top:.5rem;
  color:var(--amarillo);-webkit-text-stroke:.035em var(--blanco);paint-order:stroke fill}

/* ---------- 17. Familias ---------- */
.familias{background:var(--rojo-noche);position:relative;overflow:hidden}
.familias__tex{position:absolute;inset:0;opacity:.32}
.apellidos{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;position:relative}
.apellidos span{font-family:var(--ff-script);font-weight:700;
  font-size:clamp(1.25rem,1rem + 1.1vw,2.1rem);line-height:1;
  padding:.5rem 1.35rem;border-radius:999px;border:3px solid var(--blanco);
  background:var(--rojo-osc);box-shadow:var(--sombra-dura);
  transition:transform .3s,background .3s;cursor:default}
.apellidos span:nth-child(5n+1){color:var(--amarillo)}
.apellidos span:nth-child(5n+2){color:var(--verde-cl)}
.apellidos span:nth-child(5n+3){color:var(--azul-cl)}
.apellidos span:nth-child(5n+4){color:var(--naranja)}
.apellidos span:nth-child(5n+5){color:var(--crema)}
.apellidos span:hover{transform:translateY(-5px) rotate(-2deg);background:var(--rojo)}

/* ---------- 18. Formatos ---------- */
.formato{display:flex;gap:1rem;align-items:center;padding:1.15rem 1.3rem;border-radius:var(--radio-sm);
  background:var(--rojo-osc);border:3px solid rgba(255,242,210,.2);
  box-shadow:var(--sombra-dura);transition:.3s;height:100%}
.formato:hover{transform:translateY(-5px);border-color:var(--acento,var(--amarillo))}
.formato em{font-size:2rem;font-style:normal;line-height:1;flex:0 0 auto}
.formato h4{margin:0 0 .1rem;font-size:1.06rem}
.formato p{margin:0;font-size:.86rem;color:var(--texto-mute);line-height:1.45}
.formato.destacado{border-color:var(--amarillo);background:var(--rojo)}

/* ---------- 19. Galería (mosaico) ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;gap:.9rem}
.gal{position:relative;border-radius:var(--radio-sm);overflow:hidden;cursor:pointer;
  background:var(--rojo-osc);border:4px solid var(--crema);box-shadow:var(--sombra-dura);
  transition:transform .3s;margin:0}
/* las verticales ocupan dos filas; las panorámicas, dos columnas */
.gal:nth-child(1),.gal:nth-child(6){grid-row:span 2}
.gal:nth-child(5),.gal:nth-child(8){grid-column:span 2}
.gal:hover{transform:translateY(-5px)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:2.2rem .9rem .8rem;font-size:.85rem;
  font-weight:600;background:linear-gradient(transparent,rgba(90,13,18,.94));
  transform:translateY(8px);opacity:0;transition:.35s}
.gal:hover img{transform:scale(1.07)}
.gal:hover figcaption{transform:none;opacity:1}
@media (max-width:1040px){.galeria{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px}}
@media (max-width:700px){
  .galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:.6rem}
  .gal{border-width:3px}
}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(60,5,9,.96);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1100px,92vw);max-height:80vh;border-radius:var(--radio-sm);
  border:5px solid var(--crema);box-shadow:var(--sombra)}
.lightbox__cap{text-align:center;margin-top:1rem;color:var(--crema);font-size:.95rem}
.lightbox__x{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;border-radius:50%;
  background:var(--amarillo);color:var(--rojo-noche);display:grid;place-items:center;
  font-size:1.4rem;border:3px solid var(--blanco)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;background:rgba(255,242,210,.18);display:grid;place-items:center;
  font-size:1.7rem;border:3px solid var(--crema);transition:.25s}
.lightbox__nav:hover{background:var(--amarillo);color:var(--rojo-noche)}
.lightbox__nav.prev{left:1rem}.lightbox__nav.next{right:1rem}

/* ---------- 20. Mapa ---------- */
.mapa{border-radius:var(--radio);overflow:hidden;border:5px solid var(--crema);
  box-shadow:var(--sombra);min-height:380px;background:var(--rojo-osc)}
.mapa iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

/* ---------- 21. Formulario y contacto ---------- */
.reserva{background:var(--rojo-noche)}
.form{display:grid;gap:.95rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--rojo-osc);border:4px solid var(--crema);border-radius:var(--radio);
  box-shadow:var(--sombra-dura);padding:clamp(1.4rem,3vw,2.4rem)}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo.full{grid-column:1/-1}
.campo label{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amarillo)}
.campo input,.campo textarea{padding:.85rem 1rem;border-radius:var(--radio-sm);
  border:2px solid rgba(255,242,210,.35);background:rgba(90,13,18,.55);color:var(--crema);
  transition:border-color .25s,background .25s}
.campo textarea{resize:vertical;min-height:110px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,242,210,.5)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--amarillo);background:rgba(90,13,18,.85)}
.form .btn{grid-column:1/-1;justify-self:start}
.nota-form{font-size:.85rem;color:var(--texto-mute);grid-column:1/-1;margin:0}

.contacto__it{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;
  border-bottom:2px solid rgba(255,242,210,.18)}
.contacto__ico{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;font-size:1.25rem;
  background:var(--acento,var(--amarillo));color:var(--rojo-noche);
  transform:rotate(45deg);border:3px solid var(--blanco)}
.contacto__ico>*{transform:rotate(-45deg)}
.contacto__it h4{margin:0 0 .15rem;font-size:1rem}
.contacto__it p,.contacto__it a{margin:0;font-size:.95rem;color:var(--texto-mute)}
.contacto__it a:hover{color:var(--amarillo)}

/* ---------- 22. Footer ---------- */
.footer{background:var(--rojo-prof);padding-top:clamp(3rem,6vw,5rem);position:relative}
.footer__grid{display:grid;gap:2.2rem;grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h5{font-family:var(--ff-script);font-weight:700;font-size:1.35rem;color:var(--amarillo);
  -webkit-text-stroke:.035em var(--blanco);paint-order:stroke fill;margin:0 0 1rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer a{color:var(--texto-mute);font-size:.94rem;transition:color .2s}
.footer a:hover{color:var(--amarillo)}
.footer__bajo{margin-top:2.8rem;padding:1.4rem 0;border-top:2px solid rgba(255,242,210,.2);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  font-size:.84rem;color:var(--texto-mute)}

/* ---------- 23. Flotantes ---------- */
.wa-flot{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;display:flex;align-items:center;gap:.6rem;
  background:#25D366;color:#06301a;padding:.8rem 1.25rem;border-radius:999px;font-weight:700;
  border:3px solid var(--blanco);box-shadow:0 6px 0 rgba(6,48,26,.45);transition:transform .25s}
.wa-flot:hover{transform:translateY(-4px)}
.wa-flot svg{width:23px;height:23px;fill:currentColor}
@media (max-width:520px){.wa-flot span{display:none}.wa-flot{padding:.9rem;border-radius:50%}}

.arriba{position:fixed;right:1.1rem;bottom:5.6rem;z-index:89;width:46px;height:46px;
  background:var(--amarillo);color:var(--rojo-noche);transform:rotate(45deg);
  border:3px solid var(--blanco);display:grid;place-items:center;font-size:1.1rem;
  opacity:0;pointer-events:none;transition:opacity .3s}
.arriba>*{transform:rotate(-45deg)}
.arriba.on{opacity:1;pointer-events:auto}

.progreso{position:fixed;top:0;left:0;height:5px;z-index:110;width:0;
  background:var(--cenefa-barras) left center/auto 5px repeat-x;transition:width .1s linear}

/* ---------- 24. Foto con marco ---------- */
.foto-marco{margin:0;border-radius:var(--radio);overflow:hidden;border:5px solid var(--crema);
  box-shadow:var(--sombra-dura);background:var(--rojo-osc)}
.foto-marco img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 25. Ajustes de pantalla pequeña ---------- */
@media (max-width:620px){
  .kicker{font-size:.7rem;letter-spacing:.16em}
  .sello{display:block;text-align:left;line-height:1.45}
  .sello .pt{display:inline-block;vertical-align:middle;margin-right:.35rem}
  .hero__acciones .btn{width:100%}
  .arriba{width:40px;height:40px;right:1.4rem;bottom:5.2rem;font-size:.95rem}
  .instr{grid-template-columns:repeat(2,1fr)}
  .apellidos{justify-content:flex-start}
}

/* ---------- 26. Videos ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.video{border-radius:var(--radio);overflow:hidden;background:var(--rojo-osc);
  border:4px solid var(--crema);box-shadow:var(--sombra-dura);transition:transform .3s}
.video:hover{transform:translateY(-6px)}
.video__marco{position:relative;aspect-ratio:16/9;background:var(--rojo-noche)}
.video__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__info{padding:1.1rem 1.2rem 1.3rem}
.video__info h4{margin:0 0 .3rem;font-size:1.02rem;line-height:1.35}
.video__info p{margin:0;font-size:.83rem;color:var(--texto-mute)}