@font-face{
  font-family:'Respaldo Cormorant G';
  src:local('Georgia'), local('Georgia Regular');
  size-adjust:92.9%; ascent-override:100%; descent-override:31%; line-gap-override:0%;
}
@font-face{
  font-family:'Respaldo Cormorant T';
  src:local('Times New Roman'), local('TimesNewRomanPSMT'),
      local('Liberation Serif'), local('Tinos');
  size-adjust:96.8%; ascent-override:95%; descent-override:29%; line-gap-override:0%;
}
@font-face{
  font-family:'Respaldo Cormorant N';
  src:local('Noto Serif'), local('Droid Serif');
  size-adjust:97.1%; ascent-override:95%; descent-override:30%; line-gap-override:0%;
}

:root{
  --bg:          #061B1E;
  --bg-2:        #09262A;
  --surface:     #0D3236;
  --surface-2:   #124146;
  --line:        rgba(230,246,243,.11);
  --line-strong: rgba(230,246,243,.22);

  --text:        #EAF6F3;
  --text-2:      #C2D9D6;
  --muted:       #829C9A;

  --accent:      #2FC4C0;
  --accent-2:    #6FE3DA;
  --accent-deep: #12868C;
  --on-accent:   #03171A;
  --glow:        rgba(47,196,192,.34);
  --glow-soft:   rgba(47,196,192,.12);

  --verde:       #4FD79B;
  --verde-hondo: #1F8F63;

  --vidrio:        linear-gradient(165deg,rgba(230,246,243,.07),rgba(230,246,243,.02));
  --vidrio-fuerte: linear-gradient(165deg,rgba(230,246,243,.12),rgba(230,246,243,.04));
  --campo-bg:      rgba(6,27,30,.55);

  --tracking-h:  -.02em;
  --radius:      2px;
  --radius-sm:   2px;
  --radius-pill: 2px;

  --sh-depth: 0 8px 34px rgba(0,0,0,.72);
  --sh-lit:   0 0 26px rgba(47,196,192,.32);
  --sh-hover: 0 0 24px rgba(111,227,218,.85);
  --sh-suave: 0 2px 14px rgba(0,0,0,.6);
  --sombra-panel: 0 40px 90px -60px #000;

  --grano-op: .06;
  --vineta: radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(2,12,14,.58) 100%);
}

.bg-static{ opacity:.85 }
.hero__grid{ display:none }

.h1, .h2, .h3{
  text-transform:uppercase;
  font-feature-settings:'liga' 0;

  font-variant-numeric:lining-nums;
}

.h1{
  font-family:'Cormorant Garamond', 'Respaldo Cormorant G', 'Respaldo Cormorant T', 'Respaldo Cormorant N', var(--serif), Georgia, serif;
  font-weight:600;
  font-size:clamp(2rem, 4.2vw, 3.9rem);
  line-height:1.08;
  letter-spacing:.035em;

  text-shadow:0 6px 54px rgba(2,11,13,.96),
              0 2px 16px rgba(2,11,13,.82),
              0 1px 2px rgba(2,11,13,.7);
}

.hero__title{ max-width:14em }

.h3{
  font-family:'Cormorant Garamond', 'Respaldo Cormorant G', 'Respaldo Cormorant T', 'Respaldo Cormorant N', var(--serif), Georgia, serif;
  font-weight:600; letter-spacing:.04em;
}

.hero__foto{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero__foto img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.hero__foto::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,20,22,.92) 0%, rgba(4,20,22,.62) 46%, rgba(4,20,22,.30) 100%),
    linear-gradient(180deg, rgba(4,20,22,.55) 0%, transparent 30%, rgba(4,20,22,.75) 100%);
}
@media (max-width:900px){
  .hero__foto::after{ background:linear-gradient(180deg, rgba(4,20,22,.72) 0%, rgba(4,20,22,.5) 45%, rgba(4,20,22,.9) 100%) }
}

.titulo-vivo{
  --tv-1:#EAF6F3;
  --tv-2:#6FE3DA;
  --tv-3:#EAF6F3;
  --tv-luz:8.5s;
  --tv-ola:6.2s;
  --tv-alto:-6px;
}

.hero__lead.destella{ --dest-base:var(--text-2); --dest-luz:#6FE3DA; animation-duration:11s }

.tarjeta{ overflow:hidden; padding:0 }
.tarjeta img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease) }
.tarjeta:hover img{ transform:scale(1.05) }
.tarjeta__txt{ padding:clamp(1.2rem,2.4vw,1.7rem) }
.tarjeta__txt b{ display:block; color:var(--accent); font-weight:500; font-size:.86rem; margin-top:.6rem }

.galeria{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.galeria figure{ aspect-ratio:16/10 }

.galeria figure:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3 }

.galeria figure:nth-child(2){ grid-column:3; grid-row:1 / 3; aspect-ratio:auto }

.galeria figure:nth-child(6){ grid-column:1 / 4; aspect-ratio:32/9 }
.galeria img{ aspect-ratio:auto }

@media (max-width:760px){
  .galeria{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .galeria figure:nth-child(1){ grid-column:1 / 3; grid-row:auto; aspect-ratio:16/9 }
  .galeria figure:nth-child(2){ grid-column:auto;  grid-row:auto; aspect-ratio:16/10 }
  .galeria figure:nth-child(6){ grid-column:1 / 3; aspect-ratio:2/1 }
}

.cinta{ margin-block:clamp(2.5rem,6vw,4rem) }
.cinta--chica .cinta__pista > span{ gap:2.4rem; padding-right:2.4rem }
.cinta b{ padding-inline:.4rem }

.hero__sello{
  position:absolute; right:clamp(1.5rem,5vw,4rem); bottom:clamp(2rem,8vh,5rem); z-index:2;
}
@media (max-width:900px){ .hero__sello{ display:none } }
.sello text{ font-family:var(--font); font-size:10px; letter-spacing:.2em }

.cifras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:760px){ .cifras{ grid-template-columns:1fr 1fr } }
.cifras div{ background:var(--surface); padding:clamp(1rem,2.4vw,1.6rem) .4rem; text-align:center }
.cifras b{
  display:block; font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:500;
  letter-spacing:-.04em; color:var(--accent-2); line-height:1;
}
.cifras span{ font-size:.76rem; color:var(--muted) }

.tarjeta__ord{
  display:block; font-size:.72rem; letter-spacing:.22em;
  color:var(--muted); margin-bottom:.7rem;
}

#quienes .hero__media img{ aspect-ratio:4/3; object-fit:cover }

@media (min-width:861px){
  #quienes.seccion .contacto__grid{ grid-template-columns:1fr 1.25fr }
}

.h2{
  font-family:'Cormorant Garamond', 'Respaldo Cormorant G', 'Respaldo Cormorant T', 'Respaldo Cormorant N', var(--serif), Georgia, serif;

  font-weight:600;

  font-size:clamp(1.7rem, 3.7vw, 3.1rem);
  line-height:1.14;
  letter-spacing:.045em;

  max-width:15em;
  color:#E4F4F0;

  text-shadow:0 4px 44px rgba(2,11,13,.96),
              0 2px 14px rgba(2,11,13,.8),
              0 1px 2px rgba(2,11,13,.7);
}
.reflejo{
  --rf-1:#E4F4F0;
  --rf-2:#FFFFFF;
  --rf-3:#2FC4C0;
  --rf-luz: 7.5s;
}

.hero__title.reflejo{
  --rf-1:#CFE7E2;
  --rf-luz: 5.6s;
}

.h1 em, .h2 em{ color:var(--verde); font-family:inherit; font-style:italic }

.tarjeta-gira{
  --gira-fondo:var(--surface);
  --gira-color:#0B2529;
  --gira-tinta:#EAF6F3;
}
.tarjeta-gira:hover img{ transform:none }
.tarjeta-gira .gira__frente{ border-color:var(--line) }

.gira__dorso{
  background-image:linear-gradient(155deg,#12454A 0%, #0B2529 58%, #05161A 100%);
  border:1px solid rgba(47,196,192,.34);
  justify-content:center;
}
.tarjeta-gira .gira__paso{ margin-top:1.6rem; padding-top:0 }
.gira__dorso h4{
  font-family:'Cormorant Garamond', 'Respaldo Cormorant G', 'Respaldo Cormorant T', 'Respaldo Cormorant N', var(--serif), Georgia, serif;
  font-weight:600; color:#E4F4F0;
}
.gira__dorso .tarjeta__ord{ color:var(--accent-2); opacity:.9 }
.gira__precio{
  display:block; margin-top:.9rem;
  font-family:'Cormorant Garamond', 'Respaldo Cormorant G', 'Respaldo Cormorant T', 'Respaldo Cormorant N', var(--serif), Georgia, serif;
  font-size:clamp(1.3rem,2.6vw,1.75rem); font-weight:500;

  color:var(--verde); letter-spacing:-.01em;
}
.gira__dorso .gira__paso{ color:#EBD9AC }

.mapa{
  margin:2.6rem 0 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#052A35;
}
.mapa__svg{ display:block; width:100%; height:auto }

.mapa__agua{ fill:#052A35 }

.mapa__tierra{
  fill:#0E3A38;
  stroke:rgba(111,227,218,.62);
  stroke-width:1.3;
  stroke-linejoin:round;
}

.mapa__hondo path{
  fill:none;
  stroke:rgba(47,196,192,.26);
  stroke-width:1.2;
}

.mapa__relieve path{
  fill:none;
  stroke:rgba(79,215,155,.20);
  stroke-width:1;
  stroke-linecap:round;
}

.mapa__ruta{ fill:none; stroke-linecap:round }

.mapa__ruta--base{ stroke:#031E26; stroke-width:5.4 }
.mapa__ruta--filo{ stroke:rgba(234,246,243,.62); stroke-width:1.6 }

.mapa__calles{ stroke:rgba(234,246,243,.34); stroke-width:1; fill:none }
.mapa__muelle{ stroke:rgba(234,246,243,.45); stroke-width:1.6; stroke-linecap:round; fill:none }

.mapa__gota{ fill:var(--verde); stroke:#031E26; stroke-width:1.3 }
.mapa__ojo{ fill:#031E26 }
.mapa__pulso{
  fill:var(--verde);
  transform-origin:0 -18px;
  animation:mapaLate 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes mapaLate{
  0%       { transform:scale(.6);  opacity:.55 }
  55%, 100%{ transform:scale(4.4); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .mapa__pulso{ animation:none; opacity:.22; transform:scale(2.4) }
}

.mapa__rotulo{
  font-family:var(--font);
  font-size:13px;
  letter-spacing:.14em;
  fill:rgba(234,246,243,.55);
}
.mapa__rotulo--marca{
  font-size:16px;
  letter-spacing:.1em;
  fill:var(--verde);
  font-weight:600;
}
.mapa__rotulo--pueblo{ fill:var(--text); font-size:14px }
.mapa__rotulo--agua  { fill:rgba(111,227,218,.66) }
.mapa__rotulo--tierra{ fill:rgba(234,246,243,.42); font-size:11px }
.mapa__rotulo--ruta  { fill:rgba(234,246,243,.58); font-size:11px }

.mapa__escala path{ stroke:rgba(234,246,243,.5); stroke-width:1.2; fill:none }
.mapa__escala text{ font-family:var(--font); font-size:12px; fill:rgba(234,246,243,.55) }

.mapa figcaption{
  padding:.85rem 1.1rem;
  border-top:1px solid var(--line);
  background:var(--bg-2);
  color:var(--muted);
  font-size:.84rem;
}