/* =========================================================
   PANTALASA EXPEDICIONES · ESTILOS GENERALES
   Tema: Arena + Azul | Hero con slider de imágenes
   ========================================================= */

:root{
  /* Paleta */
  --bg: #e8d2b0;        /* fondo arena */
  --panel: #f2e4cc;     /* tarjetas */
  --text: #0b1e2d;      /* azul principal */
  --muted:#3a4f63;      /* texto secundario */
  --line: rgba(11,30,45,0.15);
  --accent:#0b1e2d;

  --shadow: 0 10px 22px rgba(11,30,45,0.15);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

/* Reset básico */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Contenedores */
.container{
  width: min(var(--max), calc(100% - 2rem));
  margin-inline:auto;
}

/* Skip link accesibilidad */
.skip-link{
  position:absolute;
  left:-999px;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  padding:.5rem .75rem;
  background:var(--panel);
  border-radius:10px;
  z-index:9999;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background: rgba(232,210,176,0.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 0;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
}

.logo-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(145deg, rgba(11,30,45,.95), rgba(11,30,45,.6));
  border:1px solid rgba(11,30,45,.25);
}

.brand small{
  display:block;
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.08em;
}

.navlinks{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

.navlinks a{
  padding:.45rem .55rem;
  border-radius:12px;
  color:var(--muted);
}

.navlinks a[aria-current="page"]{
  background: rgba(255,255,255,.4);
  color:var(--text);
  border:1px solid var(--line);
}

/* =========================================================
   BOTONES
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.8rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(11,30,45,.2);
  background: rgba(255,255,255,.3);
  font-weight:800;
  box-shadow: var(--shadow);
}

.btn.primary{
  background: var(--accent);
  color: var(--panel);
  border-color: rgba(11,30,45,.5);
}

.btn.ghost{
  background: transparent;
}

.btn.small{
  padding:.6rem .9rem;
  font-size:.95rem;
}

/* =========================================================
   SECCIONES Y TARJETAS
   ========================================================= */

.section{
  padding:3rem 0;
}
.section.tight{
  padding:2.2rem 0;
}

.section-title{
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin:0 0 .6rem 0;
}

.section-subtitle{
  color:var(--muted);
  margin:0 0 1.6rem 0;
  max-width:70ch;
}

.grid{
  display:grid;
  gap:1.1rem;
}
.grid.cols-2{
  grid-template-columns: repeat(2, 1fr);
}

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.25rem;
  box-shadow: var(--shadow);
}

.card h3{
  margin:0 0 .55rem 0;
}

.card p,
.card ul{
  color:var(--muted);
}

.card ul{
  margin:.8rem 0 0 1.1rem;
}

.cta-row{
  margin-top:1rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}

/* =========================================================
   HERO BANNER (SLIDER)
   ========================================================= */

.hero-banner{
  position:relative;
  min-height:520px;
  display:grid;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

/* Capas de imágenes */
.hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation: heroSlideFade 24s infinite;
}

/* Imágenes (rutas IMPORTANTES) */
.hero-slide.s1{ background-image:url("../img/hero-1.jpg"); }
.hero-slide.s2{ background-image:url("../img/hero-2.jpg"); animation-delay:6s; }
.hero-slide.s3{ background-image:url("../img/hero-3.jpg"); animation-delay:12s; }
.hero-slide.s4{ background-image:url("../img/hero-4.jpg"); animation-delay:18s; }

@keyframes heroSlideFade{
  0%   { opacity:0; }
  8%   { opacity:1; }
  25%  { opacity:1; }
  33%  { opacity:0; }
  100% { opacity:0; }
}

/* Overlay montaña */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    90deg,
    rgba(15,28,36,.65),
    rgba(15,28,36,.3)
  );
}

/* Contenido hero */
.hero-banner-content{
  position:relative;
  z-index:2;
  max-width:820px;
  padding:3.2rem 0;
}

.kicker{
  display:inline-flex;
  padding:.4rem .75rem;
  border-radius:999px;
  background: rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.95);
  font-weight:800;
  font-size:.85rem;
  margin-bottom:.9rem;
}

.hero-banner h1{
  color:#fff;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  margin:0 0 .9rem 0;
  line-height:1.05;
}

.hero-lead{
  color: rgba(255,255,255,.92);
  margin:0 0 .7rem 0;
}

.hero-text{
  color: rgba(255,255,255,.88);
  margin:0 0 1.2rem 0;
}

.hero-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

/* Botón ghost sobre foto */
.hero-banner .btn.ghost{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color:#fff;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  border-top:1px solid var(--line);
  padding:2rem 0;
  color:var(--muted);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1.2rem;
}

.footer-links{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:980px){
  .grid.cols-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-banner{ min-height:460px; }
}

@media (max-width:520px){
  .hero-banner{ min-height:420px; }
}
/* ===========================
   MODERN UPGRADE (solo CSS)
   Pegar al final
   =========================== */

/* Mejor tipografía y ritmo */
body{
  letter-spacing: 0.1px;
}
.section-title{
  letter-spacing: -0.6px;
}
.section-subtitle{
  font-size: 1.03rem;
}

/* Contenedor: un pelín más “premium” */
.container{
  width: min(1160px, calc(100% - 2rem));
}

/* Tarjetas con “material”, borde suave y efecto hover */
.card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25));
  border: 1px solid rgba(11,30,45,0.14);
  box-shadow:
    0 12px 30px rgba(11,30,45,0.10),
    0 2px 0 rgba(255,255,255,0.55) inset;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  overflow: hidden;
}

/* Línea/acento superior sutil (estética moderna) */
.card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, rgba(11,30,45,0.95), rgba(11,30,45,0.25));
  opacity: 0.55;
}

.card:hover{
  transform: translateY(-4px);
  border-color: rgba(11,30,45,0.22);
  box-shadow:
    0 18px 44px rgba(11,30,45,0.16),
    0 2px 0 rgba(255,255,255,0.6) inset;
}

/* Texto dentro de tarjeta: un poco más contraste */
.card p, .card ul{
  color: rgba(11,30,45,0.72);
}
.card h3{
  font-size: 1.2rem;
}

/* Secciones: “bloques” con fondo muy sutil para que no sea plano */
.section.tight{
  position: relative;
}
.section.tight::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,0.35), transparent 70%);
  pointer-events:none;
}
.section.tight .container{
  position: relative;
  z-index:1;
}

/* Botones: más modernos, con presión */
.btn{
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 10px 18px rgba(11,30,45,0.10);
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0px);
}

/* Hero: un poco más “cinematográfico” */
.hero-banner{
  border-bottom: 1px solid rgba(11,30,45,0.12);
}
.hero-banner-content{
  padding: 3.6rem 0;
}
.hero-banner h1{
  text-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Header: más limpio y menos “bloque” */
.site-header{
  box-shadow: 0 10px 24px rgba(11,30,45,0.08);
}
.navlinks a{
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.navlinks a:hover{
  text-decoration:none;
  background: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

/* Grid: más aire */
.grid{
  gap: 1.25rem;
}

/* Footer más “acabado” */
.site-footer{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
}
/* =====================================================
   ZIG-ZAG MODERNO · SECCIÓN ACTIVIDADES
   ===================================================== */

/* Contenedor preparado para composición editorial */
.activities-wrap{
  position: relative;
}

/* Ajuste fino del grid */
.activities-wrap .grid{
  align-items: stretch;
}

/* Primera tarjeta (Montaña): ligeramente elevada */
.activities-wrap .card:first-child{
  margin-top: 0;
}

/* Segunda tarjeta (Océano): desplazada hacia abajo */
.activities-wrap .card:last-child{
  margin-top: 3.8rem;
}

/* Sensación de “diálogo” visual entre tarjetas */
.activities-wrap .card{
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Microinteracción suave */
.activities-wrap .card:hover{
  transform: translateY(-6px);
}

/* En móvil: se anula el zig-zag para claridad */
@media (max-width: 980px){
  .activities-wrap .card:last-child{
    margin-top: 1.2rem;
  }
}
/* =====================================================
   LAYOUT EDITORIAL MODERNO (serio, no “plantilla”)
   ===================================================== */

.split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.2rem;
  align-items:start;
}

/* Columna izquierda: texto con presencia */
.split-left{
  position: sticky;
  top: 92px; /* debajo del header sticky */
  align-self:start;
}

/* CTA pequeño y sobrio */
.mini-cta{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top: 1.2rem;
}

/* Tarjetas de actividades: apiladas con offset */
.activities-cards{
  display:grid;
  gap: 1.15rem;
}
.activities-cards .card:nth-child(2){
  margin-left: 2.1rem;
  margin-top: .4rem;
}

/* Tags discretos (serios) */
.tag{
  display:inline-flex;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(11,30,45,0.10);
  border: 1px solid rgba(11,30,45,0.16);
  color: rgba(11,30,45,0.85);
  margin-bottom: .75rem;
}

/* “Por qué” en versión editorial */
.why-split{
  margin-top: .6rem;
}
.why-cards{
  display:grid;
  gap: 1.15rem;
}

/* Separador sutil entre secciones para evitar “bloques planos” */
.section + .section{
  position: relative;
}
.section + .section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,30,45,0.22), transparent);
}

/* Responsive: vuelve a una columna y desactiva sticky/offset */
@media (max-width: 980px){
  .split{
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .split-left{
    position: static;
  }
  .activities-cards .card:nth-child(2){
    margin-left: 0;
    margin-top: 0;
  }
}
/* =====================================================
   MODULOS DINAMICOS (Explora + Cifras + Destacado)
   ===================================================== */

/* Head de sección con CTA a la derecha */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.2rem;
}
.head-cta{ display:flex; gap:.6rem; }

/* Explora (catálogo) */
.explore-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:1.15rem;
}
.explore-card{
  display:block;
  padding:1.25rem;
  border-radius: var(--radius);
  border: 1px solid rgba(11,30,45,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.20));
  box-shadow: 0 14px 34px rgba(11,30,45,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  text-decoration:none;
}
.explore-card:hover{
  transform: translateY(-5px);
  border-color: rgba(11,30,45,0.22);
  box-shadow: 0 20px 46px rgba(11,30,45,0.16);
}
.explore-card.primary{
  background: linear-gradient(180deg, rgba(11,30,45,0.92), rgba(11,30,45,0.70));
  border-color: rgba(255,255,255,0.18);
}
.explore-card.primary h3,
.explore-card.primary p{ color: rgba(255,255,255,0.92); }
.explore-card h3{ margin: .6rem 0 .35rem 0; }
.explore-card p{ margin:0; color: rgba(11,30,45,0.72); }

.explore-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.pill{
  display:inline-flex;
  padding:.28rem .62rem;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background: rgba(11,30,45,0.10);
  border: 1px solid rgba(11,30,45,0.16);
  color: rgba(11,30,45,0.85);
}
.explore-card.primary .pill{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}
.arrow{
  font-weight:900;
  opacity:.75;
}

/* Cifras/criterios */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
}
.stats-card{
  border-radius: var(--radius);
  border: 1px solid rgba(11,30,45,0.14);
  background: rgba(255,255,255,0.22);
  box-shadow: 0 12px 26px rgba(11,30,45,0.08);
  padding: 1.25rem;
}
.stat-num{
  font-weight: 950;
  letter-spacing: -0.6px;
  font-size: 1.45rem;
}
.stat-label{
  margin-top: .25rem;
  color: rgba(11,30,45,0.72);
  font-weight: 700;
}

/* Destacado */
.feature{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:1.2rem;
  align-items:stretch;
}
.feature-card{
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid rgba(11,30,45,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18));
  box-shadow: 0 18px 44px rgba(11,30,45,0.12);
  padding: 1.5rem;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px 260px at 20% 10%, rgba(255,255,255,0.32), transparent 70%);
  pointer-events:none;
}
.feature-badge{
  display:inline-flex;
  padding:.28rem .62rem;
  border-radius:999px;
  font-weight:950;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: rgba(11,30,45,0.10);
  border: 1px solid rgba(11,30,45,0.16);
  color: rgba(11,30,45,0.85);
}
.feature-card h2{
  margin:.8rem 0 .35rem 0;
  letter-spacing:-0.8px;
}
.feature-sub{
  margin:0 0 .9rem 0;
  color: rgba(11,30,45,0.70);
  font-weight: 750;
}

.feature-side{
  display:grid;
  gap:1.2rem;
}
.side-card{
  border-radius: var(--radius);
  border: 1px solid rgba(11,30,45,0.14);
  background: rgba(255,255,255,0.20);
  box-shadow: 0 12px 26px rgba(11,30,45,0.08);
  padding: 1.1rem;
}
.side-card h3{ margin:0 0 .35rem 0; }
.side-card p{ margin:0; color: rgba(11,30,45,0.72); }

/* Responsive */
@media (max-width: 980px){
  .section-head{ align-items:flex-start; }
  .explore-grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .feature{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .stats{ grid-template-columns: 1fr; }
}
/* Logo real en header */
.logo-img{
  height: 44px;
  width: auto;
  display: block;
}
/* =====================================================
   MONTAÑA + OCÉANO · TARJETAS CON FOTO + HOVER DESLIZANTE
   ===================================================== */

/* Contenedor: centra las 2 tarjetas */
.explore-media-row{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:1.15rem;
  margin-top: 1.15rem; /* separa del resto de cards */
  flex-wrap:wrap;
}

/* Tarjeta con imagen */
.media-card{
  position:relative;
  width: min(520px, 100%);
  height: 210px;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(11,30,45,0.14);
  box-shadow: 0 18px 44px rgba(11,30,45,0.12);
  text-decoration:none;
  background: rgba(255,255,255,0.15);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.media-card:hover{
  transform: translateY(-5px);
  border-color: rgba(11,30,45,0.22);
  box-shadow: 0 22px 54px rgba(11,30,45,0.16);
}

.media-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform 240ms ease, filter 240ms ease;
}

.media-card:hover img{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay: título visible siempre + texto se desliza al hover */
.media-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(
    0deg,
    rgba(15,28,36,0.70),
    rgba(15,28,36,0.10)
  );
}

/* Título siempre visible */
.media-overlay h3{
  margin:0;
  color:#fff;
  font-size:1.4rem;
  letter-spacing:-0.4px;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Texto oculto inicialmente (desliza desde abajo) */
.media-overlay p{
  margin:.55rem 0 0 0;
  color: rgba(255,255,255,0.90);
  max-width: 48ch;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Hover: aparece el texto deslizándose */
.media-card:hover .media-overlay p{
  transform: translateY(0);
  opacity: 1;
}

/* Accesibilidad: también en foco teclado */
.media-card:focus{
  outline: 3px solid rgba(11,30,45,0.35);
  outline-offset: 4px;
}
.media-card:focus .media-overlay p{
  transform: translateY(0);
  opacity: 1;
}

/* Responsive: más alto en móvil */
@media (max-width: 520px){
  .media-card{ height: 240px; }
}
/* =====================================================
   TARJETAS FOTO · AJUSTE FINO CON SUS IMÁGENES
   ===================================================== */

.media-card{
  height: 230px;                 /* un poco más alto: favorece la vertical de montaña */
  border-radius: var(--radius2);
}

.media-card img{
  transform: scale(1.01);
  filter: contrast(1.02) saturate(1.02);
}

/* Encadre específico por tipo de foto */
.media-montana img{
  object-position: 65% 75%;      /* lleva el foco hacia el escalador (abajo-derecha) */
}
.media-oceano img{
  object-position: 50% 42%;      /* centra a los buzos */
}

/* Overlay más premium y legible */
.media-overlay{
  padding: 1.15rem 1.2rem;
  background: linear-gradient(
    0deg,
    rgba(15,28,36,0.78),
    rgba(15,28,36,0.18) 55%,
    rgba(15,28,36,0.06)
  );
}

/* Título: más “cartel” y sin depender del fondo */
.media-overlay h3{
  font-size: 1.55rem;
  letter-spacing: -0.6px;
  text-shadow: 0 14px 34px rgba(0,0,0,0.45);
}

/* Texto: aparece con slide suave y sin saltos */
.media-overlay p{
  max-width: 46ch;
  opacity: 0;
  transform: translateY(18px);
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Hover */
.media-card:hover .media-overlay p{
  opacity: 1;
  transform: translateY(0);
}

/* Extra: oscurece un poco el fondo al hover para lectura perfecta */
.media-card:hover .media-overlay{
  background: linear-gradient(
    0deg,
    rgba(15,28,36,0.86),
    rgba(15,28,36,0.26) 55%,
    rgba(15,28,36,0.10)
  );
}

/* Responsive */
@media (max-width: 520px){
  .media-card{ height: 260px; }
}

/* =====================================================
   CRITERIOS SIN TARJETAS + ICONOS
   ===================================================== */

.criteria{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 2.2rem;
  align-items:start;
  padding-top: .25rem;
}

/* cada item ya NO es un recuadro */
.criteria-item{
  display:flex;
  align-items:flex-start;
  gap: .95rem;
  padding: .25rem 0;
}

/* icono “serio”: aro sutil */
.criteria-ico{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(11,30,45,0.16);
  color: rgba(11,30,45,0.82);
  flex: 0 0 auto;
  box-shadow: 0 10px 22px rgba(11,30,45,0.08);
}

.criteria-ico svg{
  width: 22px;
  height: 22px;
}

.criteria-title{
  font-weight: 950;
  font-size: 1.18rem;
  letter-spacing: -0.4px;
}

.criteria-sub{
  margin-top: .22rem;
  color: rgba(11,30,45,0.72);
  font-weight: 750;
}

/* si aún existen estilos de .stats-card, los neutralizamos aquí */
.stats, .stats-card{ display:none !important; }

/* Responsive */
@media (max-width: 980px){
  .criteria{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.4rem;
  }
}
@media (max-width: 520px){
  .criteria{
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   CRITERIOS · UNA SOLA TIPOGRAFÍA + ICONOS GRANDES
   ===================================================== */

.criteria{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  align-items:center;
}

/* Cada item */
.criteria-item{
  display:flex;
  align-items:center;
  gap: 1.1rem;
}

/* Iconos: grandes, limpios, modernos */
.criteria-ico{
  width: 56px;
  height: 56px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(11,30,45,0.18);
  color: rgba(11,30,45,0.85);
  flex: 0 0 auto;
}

/* SVG más grande y fino */
.criteria-ico svg{
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}

/* Texto: una sola voz */
.criteria-text{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.25px;
  color: rgba(11,30,45,0.9);
  line-height: 1.25;
}

/* Responsive */
@media (max-width: 980px){
  .criteria{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }
}
@media (max-width: 520px){
  .criteria{
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   BLOQUE CRITERIOS · ICONOS MODERNOS · UNA SOLA TIPOGRAFIA
   ===================================================== */

/* Contenedor general */
.criteria{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.6rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* Cada criterio */
.criteria-item{
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Icono: grande, limpio, sin ruido */
.criteria-ico{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(11,30,45,0.18);
  color: rgba(11,30,45,0.9);
  flex: 0 0 auto;
}

/* SVG: trazo fino y consistente */
.criteria-ico svg{
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}

/* Texto: una sola voz tipográfica */
.criteria-text{
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: rgba(11,30,45,0.95);
  text-transform: uppercase;
}

/* Quitar cualquier resto de estilos antiguos */
.stats,
.stats-card{
  display: none !important;
}

/* Responsive */
@media (max-width: 980px){
  .criteria{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 520px){
  .criteria{
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .criteria-ico{
    width: 58px;
    height: 58px;
  }

  .criteria-ico svg{
    width: 28px;
    height: 28px;
  }
}
/* =====================================================
   ACTIVIDADES · MONTAÑA / OCÉANO / CULTURA
   ===================================================== */

.activities-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin-top: 2.5rem;
}

/* Tarjeta grande y protagonista */
.activity-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 320px;
  display: block;
  box-shadow: 0 24px 48px rgba(11,30,45,0.18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.activity-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay */
.activity-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,30,45,0.75),
    rgba(11,30,45,0.15) 55%,
    rgba(11,30,45,0.05)
  );
  color: #fff;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.activity-overlay h3{
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: .6rem;
}

.activity-overlay p{
  font-size: .95rem;
  line-height: 1.45;
  opacity: .95;
  max-width: 90%;
}

/* Hover sutil */
.activity-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 32px 64px rgba(11,30,45,0.25);
}

/* Responsive */
@media (max-width: 1100px){
  .activities-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .activities-grid{
    grid-template-columns: 1fr;
  }

  .activity-card{
    min-height: 280px;
  }
}
/* =====================================================
   ACTIVIDADES · TITULO SIEMPRE, TEXTO SOLO EN HOVER
   + MOVIMIENTO/ZOOM DE IMAGEN
   ===================================================== */

.activity-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 340px;
  display: block;
  box-shadow: 0 24px 48px rgba(11,30,45,0.18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.activity-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .55s ease, filter .55s ease;
}

/* Overlay base (solo título visible) */
.activity-overlay{
  position: absolute;
  inset: 0;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;

  /* Oscurecido suave para que el título sea legible */
  background: linear-gradient(
    to top,
    rgba(11,30,45,0.62),
    rgba(11,30,45,0.12) 60%,
    rgba(11,30,45,0.05)
  );

  transition: background .35s ease;
}

.activity-overlay h3{
  font-size: 1.95rem;
  font-weight: 950;
  margin: 0;
  text-shadow: 0 16px 38px rgba(0,0,0,0.45);
}

/* Texto oculto por defecto */
.activity-overlay .hover-text{
  margin-top: .65rem;
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.45;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Hover: movimiento + texto aparece */
.activity-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 70px rgba(11,30,45,0.26);
}

.activity-card:hover img{
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.05);
}

/* Oscurece un poco más al hover para que el texto se lea perfecto */
.activity-card:hover .activity-overlay{
  background: linear-gradient(
    to top,
    rgba(11,30,45,0.80),
    rgba(11,30,45,0.20) 60%,
    rgba(11,30,45,0.10)
  );
}

.activity-card:hover .activity-overlay .hover-text{
  opacity: .98;
  transform: translateY(0);
}

/* Accesibilidad: que también funcione al navegar con teclado */
.activity-card:focus{
  outline: 3px solid rgba(11,30,45,0.35);
  outline-offset: 5px;
}
.activity-card:focus img{
  transform: scale(1.08);
}
.activity-card:focus .activity-overlay{
  background: linear-gradient(
    to top,
    rgba(11,30,45,0.80),
    rgba(11,30,45,0.20) 60%,
    rgba(11,30,45,0.10)
  );
}
.activity-card:focus .activity-overlay .hover-text{
  opacity: .98;
  transform: translateY(0);
}

/* Mobile: como no hay hover real, lo dejamos siempre visible al tocar */
@media (hover: none){
  .activity-overlay .hover-text{
    opacity: .98;
    transform: translateY(0);
  }
}

/* Ajuste responsive */
@media (max-width: 640px){
  .activity-card{
    min-height: 290px;
  }
}
/* =====================================================
   EXPEDICION · LAYOUT INFO / CARTEL 50-50
   ===================================================== */

.expedition-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Columna info */
.expedition-info h1{
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: .5rem;
}

.expedition-location{
  color: rgba(11,30,45,0.7);
  margin-bottom: 1rem;
  font-weight: 600;
}

.expedition-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.2rem;
}

.expedition-tags span{
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(11,30,45,0.08);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.expedition-intro{
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.expedition-actions{
  display: flex;
  gap: .8rem;
  margin-bottom: 2rem;
}

.expedition-includes h3{
  margin-top: 1.6rem;
  margin-bottom: .5rem;
}

.expedition-includes ul{
  padding-left: 1.2rem;
}

.expedition-includes li{
  margin-bottom: .4rem;
}

/* Columna cartel */
.expedition-poster{
  position: sticky;
  top: 110px;
}

.expedition-poster img{
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(11,30,45,0.22);
}

/* Responsive */
@media (max-width: 900px){
  .expedition-grid{
    grid-template-columns: 1fr;
  }

  .expedition-poster{
    position: relative;
    top: 0;
  }
}
/* ===== LISTADO EXPEDICIONES (TARJETAS) ===== */
.trip-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.trip-card{
  border-radius: 22px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(11,30,45,0.12);
  box-shadow: 0 18px 40px rgba(11,30,45,0.12);
  padding: 1.4rem 1.4rem;
}

.trip-top{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.trip-title{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
}

.trip-meta{
  color: rgba(11,30,45,0.65);
  font-weight: 650;
}

.trip-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .9rem 0 1rem;
}

.trip-tags span{
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(11,30,45,0.08);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.trip-desc{
  margin: 0 0 1.1rem;
  line-height: 1.55;
}

.trip-actions{
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

/* =========================
   Fondo topografía + grano EN EL CONTENIDO (main)
   (para que no lo tapen las secciones)
========================= */

:root{
  --bg-sand: #e7d6b9;
  --bg-sand-2: #e2ccab;
  --topo-opacity: 0.35;
  --grain-opacity: 0.05;
}

/* El fondo ya no va al body, va al main */
main#contenido{
  position: relative;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(74,163,199,.16), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(230,177,90,.20), transparent 55%),
    linear-gradient(180deg, var(--bg-sand), var(--bg-sand-2));
}

/* Topografía (dentro del main) */
main#contenido::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--topo-opacity);
  mix-blend-mode: multiply;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='none' stroke='rgba(18,24,33,0.22)' stroke-width='1'%3E%3Cpath d='M32 120c76-60 140-28 216 16 92 52 168 60 264-8'/%3E%3Cpath d='M16 200c92-70 168-36 254 10 96 52 174 56 284-18'/%3E%3Cpath d='M20 280c104-70 188-44 276 0 92 46 168 38 268-34'/%3E%3Cpath d='M18 360c120-72 210-58 304-12 92 44 164 26 256-46'/%3E%3Cpath d='M26 440c128-70 232-68 326-18 84 44 150 22 242-52'/%3E%3Cpath d='M24 520c132-68 252-78 346-26 78 42 140 20 224-56'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 780px 780px;
  background-repeat: repeat;
}

/* Grano (dentro del main) */
main#contenido::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Todo el contenido por encima del fondo */
main#contenido > *{
  position: relative;
  z-index: 1;
}

.site-footer{
  position: relative;
  overflow: hidden;
}

.site-footer::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(74,163,199,.20) 0px,
    rgba(74,163,199,.20) 2px,
    transparent 2px,
    transparent 14px
  );
}

/* =========================
   Relieve 3D decorativo (premium)
   Se aplica al contenido principal sin afectar a legibilidad
========================= */

main#contenido{
  position: relative;
}

/* Capa relieve */
main#contenido::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Cambia el archivo aquí */
  background-image: url("assets/img/bg-pangea.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Hace que sea decorativo, no protagonista */
  opacity: 0.16;
  filter: saturate(0.9) contrast(1.05) brightness(1.02);

  /* Mezcla para que se integre con tu arena sin “ensuciar” */
  mix-blend-mode: multiply;
}

/* Tu contenido por encima */
main#contenido > *{
  position: relative;
  z-index: 1;
}

main#contenido::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(900px 500px at 20% 15%, rgba(255,255,255,0.22), transparent 60%);
  mix-blend-mode: soft-light;
}

main#contenido::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.18;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='60'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.9'/%3E%3C/svg%3E");
  background-size: cover;
  mix-blend-mode: multiply;
  filter: contrast(1.15) brightness(1.05);
}

/* =========================
   Fondo relieve 3D (corteza oceánica / terrestre)
   Estilo premium Pantalasa
========================= */

main#contenido{
  position: relative;
  background:
    linear-gradient(180deg, #ead8b9, #e2ccab);
  overflow: hidden;
}

/* Relieve 3D decorativo */
main#contenido::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image: url("assets/img/bg-relieve-3d.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* INTEGRACIÓN */
  opacity: 0.18;                  /* clave */
  filter: 
    saturate(0.85)
    contrast(1.08)
    brightness(1.02);
  mix-blend-mode: multiply;
}

/* Luz direccional suave (efecto maqueta) */
main#contenido::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      1200px 600px at 15% 20%,
      rgba(255,255,255,0.25),
      transparent 60%
    );
  mix-blend-mode: soft-light;
}

/* Contenido siempre por encima */
main#contenido > *{
  position: relative;
  z-index: 1;
}

/* =========================
   FONDO RELIEVE 3D PANTALASA
========================= */

main#contenido{
  position: relative;
  background-color: #e7d6b9; /* color base arena */
  overflow: hidden;
}

/* Imagen relieve */
main#contenido::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("assets/img/bg-relieve-3d.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.20;
  mix-blend-mode: multiply;
  filter: saturate(0.85) contrast(1.1);
}

/* Luz suave para efecto maqueta */
main#contenido::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
    900px 500px at 20% 15%,
    rgba(255,255,255,0.25),
    transparent 60%
  );
  mix-blend-mode: soft-light;
}

/* Contenido por encima */
main#contenido > *{
  position: relative;
  z-index: 1;
}

/* Fondo relieve 3D en main */
main#contenido{
  position: relative;
  background: linear-gradient(180deg, #ead8b9, #e2ccab);
  overflow: hidden;
}

main#contenido::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* RUTA CORRECTA desde assets/css/ */
  background-image: url("../img/bg-relieve-3d.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.22;                 /* súbelo para comprobar */
  mix-blend-mode: multiply;
  filter: saturate(0.85) contrast(1.1);
}

main#contenido::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(900px 500px at 20% 15%, rgba(255,255,255,0.25), transparent 60%);
  mix-blend-mode: soft-light;
}

main#contenido > *{
  position: relative;
  z-index: 1;
}

/* Refinado premium del relieve */
main#contenido::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image: url("../img/bg-relieve-3d.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Integración más natural */
  opacity: 0.18;
  mix-blend-mode: multiply;
  filter: saturate(0.78) contrast(1.08) brightness(1.03) blur(0.6px);

  /* Limpia el área central para texto (más intenso en bordes) */
  -webkit-mask-image: radial-gradient(900px 520px at 30% 20%, rgba(0,0,0,0.20), rgba(0,0,0,0.95) 65%);
  mask-image: radial-gradient(900px 520px at 30% 20%, rgba(0,0,0,0.20), rgba(0,0,0,0.95) 65%);
}

/* Panel invisible para mejorar legibilidad del bloque superior */
main#contenido .container:first-child{
  background: rgba(231,214,185,0.55);
  backdrop-filter: blur(2px);
  border-radius: 18px;
  padding: 18px 18px;
}

/* Quitar panel/marco del bloque "Explora Pantalasa" */
main#contenido .container{
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================
   Grid editorial para 3 categorías (sin marcos)
========================= */

/* Contenedor: si ya es grid, esto lo mejora; si no lo es, lo convierte */
.categories,
.category-grid,
.grid-categories,
.cards-row,
.explora-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Cada tarjeta ocupa 4 columnas (3 en fila) */
.categories > *,
.category-grid > *,
.grid-categories > *,
.cards-row > *,
.explora-grid > *{
  grid-column: span 4;
}

/* Tarjeta flotante */
.categories > *,
.category-grid > *,
.grid-categories > *,
.cards-row > *,
.explora-grid > *{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11,30,45,0.18);
  transform: translateZ(0);
}

/* Imagen a sangre */
.categories img,
.category-grid img,
.grid-categories img,
.cards-row img,
.explora-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 260ms ease, filter 260ms ease;
  filter: saturate(1.02) contrast(1.03);
}

/* Overlay avanzado (mejor que un cuadro) */
.categories > *::before,
.category-grid > *::before,
.grid-categories > *::before,
.cards-row > *::before,
.explora-grid > *::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  opacity: 0.85;
  pointer-events:none;
}

/* Título sobre la imagen (sin caja) */
.categories h3,
.category-grid h3,
.grid-categories h3,
.cards-row h3,
.explora-grid h3,
.categories .title,
.category-grid .title,
.grid-categories .title,
.cards-row .title,
.explora-grid .title{
  position: absolute;
  left: 22px;
  bottom: 18px;
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 8px 18px rgba(0,0,0,0.35);
  z-index: 2;
}

/* Hover: microinteracción */
.categories > *:hover img,
.category-grid > *:hover img,
.grid-categories > *:hover img,
.cards-row > *:hover img,
.explora-grid > *:hover img{
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.06);
}

/* Responsive */
@media (max-width: 980px){
  .categories > *,
  .category-grid > *,
  .grid-categories > *,
  .cards-row > *,
  .explora-grid > *{ grid-column: span 6; }
}

@media (max-width: 640px){
  .categories > *,
  .category-grid > *,
  .grid-categories > *,
  .cards-row > *,
  .explora-grid > *{ grid-column: span 12; }
}

/* =========================
   EXPLORA – Rediseño avanzado (sin marcos)
========================= */

/* 1) Quitar el “cuadro”/panel del contenedor en esta sección */
.section[aria-label="Explora Pantalasa"] .container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-top: 0; /* opcional */
}

/* 2) Cabecera más editorial */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.section-title{
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.section-subtitle{
  margin: 0;
  max-width: 62ch;
  opacity: 0.85;
}

/* 3) Grid avanzado */
.activities-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  margin-top: 18px;
}

/* 4) Tarjetas: sin borde/marco, flotantes */
.activity-card{
  grid-column: span 4;
  position: relative;
  border-radius: 26px;
  overflow: hidden;

  /* elimina marcos previos */
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;

  /* estética pro */
  box-shadow: 0 18px 42px rgba(11, 30, 45, 0.18);
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Imagen full-bleed */
.activity-card > img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5; /* da consistencia visual */
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 260ms ease, filter 260ms ease;
  filter: saturate(1.03) contrast(1.04);
}

/* Overlay premium (sin “caja” dura) */
.activity-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;

  /* gradiente editorial */
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.62));
}

/* Título */
.activity-overlay h3{
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

/* Texto hover: oculto por defecto, aparece suave */
.hover-text{
  margin: 0;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
  max-width: 42ch;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Microinteracciones pro */
.activity-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(11, 30, 45, 0.22);
}

.activity-card:hover > img{
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.06);
}

.activity-card:hover .hover-text{
  opacity: 1;
  transform: translateY(0);
}

/* Accesibilidad: focus visible para teclado */
.activity-card:focus-visible{
  outline: 3px solid rgba(74,163,199,0.55) !important;
  outline-offset: 4px;
}

/* 5) Responsive */
@media (max-width: 980px){
  .activity-card{ grid-column: span 6; }
  .section-head{ align-items: flex-start; }
}

@media (max-width: 640px){
  .activity-card{ grid-column: span 12; }
  .activity-overlay h3{ font-size: 1.65rem; }
}

/* =========================
   EXPLORA – Layout asimétrico PRO (1 grande + 2 pequeñas)
   No cambia el HTML
========================= */

/* Quitar el panel/marco del contenedor en esta sección */
.section[aria-label="Explora Pantalasa"] .container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Grid */
.activities-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  margin-top: 18px;
}

/* Tarjeta base (flotante, sin marcos) */
.activity-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;

  box-shadow: 0 18px 42px rgba(11, 30, 45, 0.18);
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Imagen */
.activity-card > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 260ms ease, filter 260ms ease;
  filter: saturate(1.03) contrast(1.04);
}

/* Overlay editorial */
.activity-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.62));
}

.activity-overlay h3{
  margin: 0;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  text-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

.hover-text{
  margin: 0;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
  max-width: 44ch;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Hover pro */
.activity-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(11, 30, 45, 0.22);
}
.activity-card:hover > img{
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.06);
}
.activity-card:hover .hover-text{
  opacity: 1;
  transform: translateY(0);
}

.activity-card:focus-visible{
  outline: 3px solid rgba(74,163,199,0.55) !important;
  outline-offset: 4px;
}

/* =========================
   Layout asimétrico (desktop)
   1ª grande a la izquierda, 2ª/3ª apiladas a la derecha
========================= */
@media (min-width: 981px){
  .activity-card:nth-child(1){
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }
  .activity-card:nth-child(2){
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .activity-card:nth-child(3){
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  /* Alturas consistentes */
  .activity-card:nth-child(1) > img{ aspect-ratio: 7 / 8; }
  .activity-card:nth-child(2) > img,
  .activity-card:nth-child(3) > img{ aspect-ratio: 5 / 3; }

  .activity-card:nth-child(2) .activity-overlay h3,
  .activity-card:nth-child(3) .activity-overlay h3{ font-size: 1.65rem; }
}

/* Tablet: 2 columnas */
@media (max-width: 980px){
  .activity-card{ grid-column: span 6; }
  .activity-card > img{ aspect-ratio: 4 / 5; }
}

/* Móvil: 1 columna */
@media (max-width: 640px){
  .activity-card{ grid-column: span 12; }
  .activity-overlay h3{ font-size: 1.65rem; }
}
/* =========================
   EXPLORA – 1 grande "PRÓXIMOS VIAJES" + 3 pequeñas derecha
========================= */

@media (min-width: 981px){
  .activities-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 26px;
    align-items: stretch;
  }

  /* Grande (PRÓXIMOS VIAJES) */
  .activities-grid .activity-card:nth-child(1){
    grid-column: 1 / span 7;
    grid-row: 1 / span 3;
  }

  /* Derecha: 3 pequeñas apiladas */
  .activities-grid .activity-card:nth-child(2){
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .activities-grid .activity-card:nth-child(3){
    grid-column: 8 / span 5;
    grid-row: 2;
  }
  .activities-grid .activity-card:nth-child(4){
    grid-column: 8 / span 5;
    grid-row: 3;
  }

  /* Proporciones imagen */
  .activities-grid .activity-card:nth-child(1) > img{ aspect-ratio: 7 / 9; }
  .activities-grid .activity-card:nth-child(2) > img,
  .activities-grid .activity-card:nth-child(3) > img,
  .activities-grid .activity-card:nth-child(4) > img{ aspect-ratio: 5 / 3; }

  /* Títulos un poco más compactos en las pequeñas */
  .activities-grid .activity-card:nth-child(2) .activity-overlay h3,
  .activities-grid .activity-card:nth-child(3) .activity-overlay h3,
  .activities-grid .activity-card:nth-child(4) .activity-overlay h3{
    font-size: 1.55rem;
  }
}

/* (Opcional) Estilo distintivo para "PRÓXIMOS VIAJES" */
.activity-feature .activity-overlay{
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.68));
}

.activity-feature .activity-overlay h3{
  letter-spacing: 0.06em;
}

@media (min-width: 981px){
  .activities-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 26px;
  }

  /* Grande: PRÓXIMOS VIAJES */
  .activities-grid .activity-card:nth-child(1){
    grid-column: 1 / span 7;
    grid-row: 1 / span 3;
  }

  /* Tres pequeñas apiladas */
  .activities-grid .activity-card:nth-child(2){
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .activities-grid .activity-card:nth-child(3){
    grid-column: 8 / span 5;
    grid-row: 2;
  }
  .activities-grid .activity-card:nth-child(4){
    grid-column: 8 / span 5;
    grid-row: 3;
  }

  .activities-grid .activity-card:nth-child(1) > img{ aspect-ratio: 7 / 9; }
  .activities-grid .activity-card:nth-child(2) > img,
  .activities-grid .activity-card:nth-child(3) > img,
  .activities-grid .activity-card:nth-child(4) > img{ aspect-ratio: 5 / 3; }
}

<div class="activities-grid">

  <!-- GRANDE -->
  <a href="expediciones.html"
     class="activity-card activity-feature">
    <img src="assets/img/Prox-viajes.jpg" alt="Próximos viajes">
    <div class="activity-overlay">
      <h3>Próximos viajes</h3>
      <p class="hover-text">
        Expediciones programadas y próximas salidas.
      </p>
    </div>
  </a>

  <!-- PEQUEÑAS -->
  <a href="expediciones.html" class="activity-card">
    <img src="assets/img/montana.jpg">
    <div class="activity-overlay"><h3>Montaña</h3></div>
  </a>

  <a href="expediciones.html" class="activity-card">
    <img src="assets/img/oceano.jpg">
    <div class="activity-overlay"><h3>Océano</h3></div>
  </a>

  <a href="expediciones.html" class="activity-card">
    <img src="assets/img/cultura.jpg">
    <div class="activity-overlay"><h3>Cultura</h3></div>
  </a>

</div>

/* =========================================================
   EXPEDICIONES · Columna izquierda (moderna / tech premium)
   (no requiere cambios en HTML)
========================================================= */

/* Grid general: respiración y alineación */
.expedition-grid{
  align-items: start;
  gap: clamp(22px, 3vw, 44px);
}

/* Panel principal */
.expedition-info{
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 22px;

  /* “glass” cálido, sin fondo decorativo */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35));
  border: 1px solid rgba(15, 35, 48, 0.10);
  box-shadow:
    0 18px 45px rgba(11, 30, 45, 0.10),
    0 2px 0 rgba(255,255,255,0.55) inset;

  backdrop-filter: blur(8px);
}

/* Título: más “tech” por jerarquía y tracking */
.expedition-info h1{
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(34px, 3.2vw, 54px);
}

/* Localización con etiqueta sutil */
.expedition-location{
  margin: 0 0 14px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 35, 48, 0.06);
  border: 1px solid rgba(15, 35, 48, 0.10);
  color: rgba(15, 35, 48, 0.85);
  font-weight: 600;
}

.expedition-location::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(15, 35, 48, 0.55);
  box-shadow: 0 0 0 4px rgba(15, 35, 48, 0.10);
}

/* Tags: chips más “producto” */
.expedition-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.35);
  border: 1px dashed rgba(15, 35, 48, 0.18);
}

.expedition-tags span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15, 35, 48, 0.06);
  border: 1px solid rgba(15, 35, 48, 0.10);
  color: rgba(15, 35, 48, 0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Intro: más legible y con ancho óptimo */
.expedition-intro{
  margin: 10px 0 18px 0;
  max-width: 62ch;
  color: rgba(15, 35, 48, 0.85);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Botones: alineación más “UI” */
.expedition-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0 18px 0;
}

.expedition-actions .btn{
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 12px 22px rgba(11, 30, 45, 0.12);
}

.expedition-actions .btn.ghost{
  box-shadow: none;
}

/* Bloques Incluye / No incluye: cards internas */
.expedition-includes{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 35, 48, 0.12);
}

.expedition-includes h3{
  margin: 16px 0 10px 0;
  letter-spacing: -0.01em;
  font-size: 1.1rem;
}

/* Listas más “producto”: bullets modernos */
.expedition-includes ul{
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: grid;
  gap: 10px;
}

.expedition-includes li{
  position: relative;
  padding: 10px 12px 10px 38px;
  border-radius: 14px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(15, 35, 48, 0.10);
  color: rgba(15, 35, 48, 0.88);
}

.expedition-includes li::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(15, 35, 48, 0.55);
  box-shadow: 0 0 0 4px rgba(15, 35, 48, 0.10);
}

/* Disclaimer: estilo “nota técnica” */
.disclaimer{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15, 35, 48, 0.06);
  border: 1px solid rgba(15, 35, 48, 0.14);
  color: rgba(15, 35, 48, 0.86);
  line-height: 1.55;
}

/* Responsive: botones en columna si hace falta */
@media (max-width: 640px){
  .expedition-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   EXPEDICIONES · FIX PREMIUM (sobre-escribe el estilo "glass")
   Pegar AL FINAL del styles.css
========================================================= */

.expedition-info{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Título: más editorial y potente */
.expedition-info h1{
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(34px, 3.2vw, 56px);
  margin: 0 0 12px 0;
}

/* Localización: etiqueta mínima, sin "pastilla" gris */
.expedition-location{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(15,35,48,0.78);
  font-weight: 600;
}
.expedition-location::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,35,48,0.55);
  box-shadow: 0 0 0 5px rgba(15,35,48,0.10);
}

/* Tags: chips finos "tech", sin recuadro punteado */
.expedition-tags{
  padding: 0 !important;
  margin: 10px 0 18px 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.expedition-tags span{
  background: rgba(15,35,48,0.04) !important;
  border: 1px solid rgba(15,35,48,0.14) !important;
  color: rgba(15,35,48,0.88) !important;

  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Intro: más contraste, menos gris */
.expedition-intro{
  max-width: 62ch;
  color: rgba(15,35,48,0.86) !important;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 8px 0 18px 0;
}

/* Botones: más "producto", sin sombras grandes */
.expedition-actions{
  margin: 14px 0 18px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.expedition-actions .btn{
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(11,30,45,0.10) !important;
}

.expedition-actions .btn.ghost{
  box-shadow: none !important;
  border: 1px solid rgba(15,35,48,0.18) !important;
  background: rgba(255,255,255,0.15) !important;
}

/* Separador fino y limpio antes de "Incluye" */
.expedition-includes{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,35,48,0.14);
}

/* Listas: sin cajas grandes, bullets premium */
.expedition-includes ul{
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: grid;
  gap: 10px;
}

.expedition-includes li{
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 6px 26px !important;
  border-radius: 0 !important;
  color: rgba(15,35,48,0.86);
  position: relative;
}

.expedition-includes li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(15,35,48,0.55);
  box-shadow: 0 0 0 4px rgba(15,35,48,0.10);
}

/* Disclaimers: bloque sobrio */
.disclaimer{
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(15,35,48,0.14) !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 640px){
  .expedition-actions{ flex-direction: column; align-items: stretch; }
}

/* =========================================================
   EXPEDICIONES · Estilo limpio / contemporáneo (premium)
   Pegar AL FINAL del styles.css
========================================================= */

/* Columna izquierda sin paneles ni efectos */
.expedition-info{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Título más editorial */
.expedition-info h1{
  margin: 0 0 12px 0;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-size: clamp(34px, 3.3vw, 58px);
}

/* Subtítulo / ubicación: discreto */
.expedition-location{
  margin: 0 0 14px 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(15,35,48,0.72);
  font-weight: 600;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.expedition-location::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15,35,48,0.55);
  box-shadow: 0 0 0 6px rgba(15,35,48,0.08);
}

/* Chips: minimal, sin caja alrededor */
.expedition-tags{
  margin: 10px 0 18px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.expedition-tags span{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,35,48,0.16) !important;
  background: rgba(255,255,255,0.22) !important;
  color: rgba(15,35,48,0.82) !important;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Texto introductorio: mejor legibilidad */
.expedition-intro{
  margin: 8px 0 18px 0;
  max-width: 62ch;
  color: rgba(15,35,48,0.84) !important;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* Botones: sobrios, consistentes */
.expedition-actions{
  margin: 14px 0 18px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.expedition-actions .btn{
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 10px 22px rgba(11,30,45,0.08) !important;
}
.expedition-actions .btn.ghost{
  box-shadow: none !important;
  border: 1px solid rgba(15,35,48,0.18) !important;
  background: transparent !important;
}

/* Separador fino antes de “Incluye” */
.expedition-includes{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,35,48,0.14);
}

/* Títulos de bloque */
.expedition-includes h3{
  margin: 18px 0 10px 0;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

/* Listas: limpias, sin “cajas” */
.expedition-includes ul{
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  gap: 10px;
}
.expedition-includes li{
  position: relative;
  padding: 6px 0 6px 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(15,35,48,0.84);
  line-height: 1.55;
}
.expedition-includes li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(15,35,48,0.50);
  box-shadow: 0 0 0 5px rgba(15,35,48,0.08);
}

/* Nota / disclaimer: sobria */
.disclaimer{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(15,35,48,0.14) !important;
  box-shadow: none !important;
  color: rgba(15,35,48,0.78);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px){
  .expedition-actions{ flex-direction: column; align-items: stretch; }
}

/* =========================
   EXPEDICIONES · AJUSTES LISTAS
========================= */

/* Quitar el punto/bolita antes de "Alto Atlas · Marruecos" */
.expedition-location::before{
  content: none !important;
  display: none !important;
}

/* Listas "Incluye / No incluye" sin bullets y con check */
.expedition-includes ul{
  list-style: none;
  padding-left: 0;
  margin: .6rem 0 0;
}

.expedition-includes li{
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  line-height: 1.45;
}

.expedition-includes li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .05rem;
  font-weight: 900;
  opacity: .75;
}

/* =========================
   AJUSTE TÍTULO EXPEDICIÓN
========================= */

.expedition-hero h1,
.expedition-header h1,
main h1{
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* =========================
   BLOQUE INCLUYE · ESTILO LIMPIO
========================= */

h3 + ul{
  list-style: none;
  padding: 1.2rem 1.4rem;
  margin-top: .6rem;
  background: rgba(255,255,255,.35);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  max-width: 520px;
}

h3 + ul li{
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  line-height: 1.45;
  font-size: .95rem;
}

h3 + ul li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: .1rem;
  font-size: .85rem;
  opacity: .7;
}
/* =========================
   EXPEDICIÓN · AJUSTES VISUALES
========================= */

/* 1) Título H1 más equilibrado */
.expedition-info h1{
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.4px;
}

/* 2) Bloque "Incluye" con caja limpia + lista moderna */
.expedition-includes{
  margin-top: 1.6rem;
}

.expedition-includes h3{
  margin-bottom: .65rem;
}

.expedition-includes ul{
  list-style: none;
  padding: 1.05rem 1.2rem;
  margin: 0 0 1.1rem 0;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
}

.expedition-includes li{
  position: relative;
  padding-left: 1.55rem;
  margin: .55rem 0;
  line-height: 1.45;
}

.expedition-includes li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .05rem;
  font-weight: 900;
  opacity: .65;
}
/* =========================
   EXPEDICIÓN · AJUSTES VISUALES
========================= */

/* 1) Título H1 más equilibrado */
.expedition-info h1{
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.4px;
}

/* 2) Bloque "Incluye" con caja limpia + lista moderna */
.expedition-includes{
  margin-top: 1.6rem;
}

.expedition-includes h3{
  margin-bottom: .65rem;
}

.expedition-includes ul{
  list-style: none;
  padding: 1.05rem 1.2rem;
  margin: 0 0 1.1rem 0;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
}

.expedition-includes li{
  position: relative;
  padding-left: 1.55rem;
  margin: .55rem 0;
  line-height: 1.45;
}

.expedition-includes li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .05rem;
  font-weight: 900;
  opacity: .65;
}

/* =========================
   EXPEDICIÓN · PASO 2: INCLUYE / NO INCLUYE MODERNO
========================= */

/* Títulos de sección más finos y coherentes */
.expedition-includes h3{
  margin-top: 1.6rem;
  margin-bottom: .65rem;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* Tarjeta moderna (no plana): degradado + sombra suave */
.expedition-includes h3 + ul{
  list-style: none;
  margin: 0;
  padding: 1.05rem 1.1rem;

  /* No “pegatina”: fondo con matiz y profundidad */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.18)
  );
  border: 1px solid rgba(11,30,45,.08);
  border-radius: 16px;

  /* Profundidad discreta */
  box-shadow:
    0 10px 22px rgba(11,30,45,.08),
    inset 0 1px 0 rgba(255,255,255,.35);

  /* Encaja con el fondo arena */
  backdrop-filter: blur(6px);
}

/* Items: alineación limpia */
.expedition-includes h3 + ul li{
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .55rem .2rem;
  line-height: 1.45;
  margin: 0;
}

/* Separadores suaves entre líneas */
.expedition-includes h3 + ul li + li{
  border-top: 1px solid rgba(11,30,45,.06);
}

/* Icono moderno (círculo suave) */
.expedition-includes h3 + ul li::before{
  content: "✓";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: .85rem;

  background: rgba(11,30,45,.08);
  border: 1px solid rgba(11,30,45,.10);
  color: rgba(11,30,45,.80);
  margin-top: .05rem;
}

/* NO INCLUYE: cambia el icono a "×" y tono algo más “alerta” */
.expedition-includes h3:nth-of-type(2) + ul li::before{
  content: "×";
  background: rgba(120, 45, 45, .08);
  border: 1px solid rgba(120, 45, 45, .12);
  color: rgba(120, 45, 45, .85);
}

.expedition-location::before{
  content: none !important;
  display: none !important;
}

/* =========================
   COLOR TIPOGRAFÍA · MÁS CONTRASTE
========================= */

/* Azul oscuro coherente con el H1 (ajústalo si quieres) */
:root{
  --ink: #0b1e2d;   /* azul oscuro */
  --ink2: #000000;  /* negro */
}

/* Textos principales de la ficha */
.expedition-info,
.expedition-info p,
.expedition-location,
.expedition-info .meta,
.expedition-info .description{
  color: var(--ink) !important;
}

/* Si prefieres negro puro, activa esto y comenta lo de arriba */
/*
.expedition-info,
.expedition-info p,
.expedition-location{
  color: var(--ink2) !important;
}
*/

/* =========================
   INCLUYE / NO INCLUYE · REDISEÑO COMPLETO
========================= */

/* Separación y título */
.expedition-includes{
  margin-top: 1.8rem;
}

.expedition-includes h3{
  color: var(--ink) !important;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin: 1.6rem 0 .75rem;
}

/* Contenedor visual: efecto “panel” integrado (no pegatina plana) */
.expedition-includes h3 + ul{
  list-style: none !important;
  margin: 0;
  padding: 1rem 1.1rem;

  /* Fondo con profundidad, sin parecer sticker */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 60%, rgba(255,255,255,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(11,30,45,.10);
  border-radius: 18px;

  box-shadow:
    0 18px 40px rgba(11,30,45,.10),
    inset 0 1px 0 rgba(255,255,255,.55);

  backdrop-filter: blur(7px);

  /* Layout moderno */
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

/* En pantallas grandes, 2 columnas para que respire */
@media (min-width: 980px){
  .expedition-includes h3 + ul{
    grid-template-columns: 1fr 1fr;
    gap: .7rem 1.2rem;
  }
}

/* Cada item como “fila” moderna */
.expedition-includes h3 + ul li{
  color: var(--ink) !important;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(11,30,45,.08);
  border-radius: 14px;

  padding: .75rem .85rem .75rem 2.75rem;
  line-height: 1.35;
  position: relative;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40);
}

/* Icono moderno: círculo con check */
.expedition-includes h3 + ul li::before{
  content: "✓";
  position: absolute;
  left: .85rem;
  top: .78rem;

  width: 26px;
  height: 26px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: .9rem;

  background: rgba(11,30,45,.10);
  border: 1px solid rgba(11,30,45,.14);
  color: rgba(11,30,45,.90);
}

/* NO INCLUYE: mismo diseño pero icono “×” y tono distinto */
.expedition-includes h3:nth-of-type(2) + ul li::before{
  content: "×";
  background: rgba(120, 45, 45, .10);
  border: 1px solid rgba(120, 45, 45, .16);
  color: rgba(120, 45, 45, .92);
}

/* =========================
   FIX DEFINITIVO · ICONOS QUE SE SOLAPAN
========================= */

/* 1) Anular cualquier pseudo-elemento antiguo que esté creando círculos */
.expedition-includes h3 + ul li::after{
  content: none !important;
  display: none !important;
}
.expedition-includes h3 + ul li::before{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* 2) Asegurar espacio real para el icono y que el texto no arranque debajo */
.expedition-includes h3 + ul li{
  padding-left: 2.2rem !important; /* espacio fijo para el icono */
}

/* 3) Reposicionar el icono (check / x) para que no toque el texto */
.expedition-includes h3 + ul li::before{
  position: absolute !important;
  left: .8rem !important;
  top: 1.05rem !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  opacity: .95 !important;
  pointer-events: none;
}

/* Incluye: check */
.expedition-includes h3 + ul li::before{
  content: "✓" !important;
  color: rgba(11,30,45,.95) !important;
}

/* No incluye: X */
.expedition-includes h3:nth-of-type(2) + ul li::before{
  content: "×" !important;
  color: rgba(120,45,45,.95) !important;
}

/* Logo (imagen) -> tono verde */
.site-header .brand img{
  filter: hue-rotate(105deg) saturate(1.8) brightness(1.05) contrast(1.05);
}

/* Logo redondo (elemento CSS) -> verde */
.site-header .brand-mark,
.site-header .logo-mark,
.site-header .brand .mark{
  background: radial-gradient(circle at 30% 30%, #63d38f 0%, #1f7a4f 45%, #0f3b2a 100%) !important;
}

/* ===== HEADER · LOGO REAL ===== */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:44px;
  height:44px;
  object-fit: contain;      /* asegura que se vea completo */
  display:block;
}

/* Si tu logo es redondo o quieres marco */
.brand-logo{
  border-radius: 12px;      /* quítalo si no quieres esquinas redondeadas */
}

.logo-mark{ display:none; }

body{
  background-image: url("../img/bg-arena.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.section,
.hero,
.expedition-info,
.content-box{
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  border-radius: 18px;
}

/* === BACK TO PREVIOUS BACKGROUND === */
body{
  background-image: none !important;
  background-attachment: initial !important;
  background-size: auto !important;
  background-repeat: initial !important;
  background-position: initial !important;
}

/* Recuperar fondos sólidos de secciones (estilo anterior) */
.hero,
.section,
.explore,
.content-section{
  background: #dcc8a3 !important; /* ajusta si tu anterior era otro tono */
}

.section,
.explore,
.hero{
  background-color: #f3ead8;
}

/* Botón principal hero: texto blanco */
.hero .btn-primary,
.hero .btn-primary:visited{
  color: #ffffff !important;
}

.hero a.button,
.hero .button{
  color: #ffffff !important;
}

/* FORZAR TEXTO BLANCO EN BOTÓN HERO */
.hero button,
.hero .btn,
.hero .cta,
.hero a,
.hero a span{
  color: #ffffff !important;
}

/* Explora Pantalasa · solo 2 cards a la derecha */
.explore-right{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* Explora Pantalasa · igualar alturas izquierda/derecha */
.explore-grid{
  align-items: stretch;
}

.explore-left,
.explore-right{
  height: 100%;
}

/* Imagen grande Próximos Viajes */
.explore-left img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.explore-right{
  display: grid;
  grid-template-rows: 1fr 1fr;
}

/* =========================
   HOME · BLOQUE 1+2 TARJETAS ALINEADAS
========================= */

.explore-grid{
  /* altura común del bloque (ajustable) */
  --tileH: clamp(520px, 60vh, 680px);
  --gap: 24px;

  align-items: stretch;
}

/* IZQUIERDA: una tarjeta de altura fija */
.explore-left{
  height: var(--tileH);
  border-radius: 28px;  /* respeta tu estilo */
  overflow: hidden;     /* recorta la imagen */
}

/* Imagen dentro de la tarjeta izquierda */
.explore-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* recorta sin deformar */
  object-position: center;      /* cambia a 'center bottom' si prefieres */
  display: block;
}

/* DERECHA: dos tarjetas que suman la misma altura que la izquierda */
.explore-right{
  height: var(--tileH);
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}

/* Cada tarjeta derecha: se adapta a su fila y recorta su imagen */
.explore-right .explore-card,
.explore-right a{
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}

/* Si hay img dentro de las tarjetas derechas */
.explore-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

--tileH: clamp(520px, 60vh, 680px);


/* ===========================
   BLOQUE ICONOS (MEJORAS)
   =========================== */

:root{
  --icon-bg: #0f3d5c;      /* Azul océano (círculo) */
  --icon-fg: #ffffff;      /* Blanco (icono) */
  --icon-size: 34px;       /* Tamaño icono */
  --icon-circle: 76px;     /* Diámetro círculo */
}

/* Contenedor del item (icono + texto) */
.features,
.features-grid,
.icon-row,
.values-row{
  /* Si ya tienes grid/flex definido, esto no molesta. */
  gap: 40px;
}

/* Cada “tarjeta”/bloque de icono */
.feature,
.value-item,
.icon-item{
  text-align: center;
  max-width: 240px;
}

/* Círculo del icono */
.icon-circle,
.feature .icon,
.value-item .icon,
.icon-item .icon{
  width: var(--icon-circle);
  height: var(--icon-circle);
  border-radius: 50%;
  background-color: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;

  /* Mejora de legibilidad y estética */
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* Iconos tipo <i> (Font Awesome u otros) */
.icon-circle i,
.feature .icon i,
.value-item .icon i,
.icon-item .icon i,
.icon-circle .fa,
.icon-circle .fas,
.icon-circle .far,
.icon-circle .fab{
  color: var(--icon-fg);
  font-size: var(--icon-size);
  line-height: 1;
}

/* Iconos SVG (inline o <img> svg via mask no; esto es para inline <svg>) */
.icon-circle svg,
.feature .icon svg,
.value-item .icon svg,
.icon-item .icon svg{
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: var(--icon-fg);
  fill: none;
  stroke-width: 2;
}

/* Si algún SVG usa fill en vez de stroke, forzamos blanco (sin romper lineales) */
.icon-circle svg [fill]:not([fill="none"]),
.feature .icon svg [fill]:not([fill="none"]),
.value-item .icon svg [fill]:not([fill="none"]),
.icon-item .icon svg [fill]:not([fill="none"]){
  fill: var(--icon-fg);
}

/* Títulos bajo icono (más consistentes y legibles) */
.feature h3,
.value-item h3,
.icon-item h3{
  margin-top: 14px;
  margin-bottom: 0;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Ajuste responsive */
@media (max-width: 768px){
  :root{
    --icon-circle: 68px;
    --icon-size: 30px;
  }
  .features,
  .features-grid,
  .icon-row,
  .values-row{
    gap: 22px;
  }
}

/* ===========================
   FIX FUERTE ICONOS (FINAL DEL CSS)
   =========================== */

/* 1) Círculos: forzamos fondo azul a cualquier círculo típico */
.features *[class*="icon"],
.features *[class*="circle"],
.features *[class*="badge"],
.features *[class*="pill"],
.features .icon,
.features .icon-circle,
.features .feature-icon,
.features .value-icon,
.features .service-icon,
.features .item-icon{
  background-color: #0f3d5c !important;
  border-radius: 999px !important;
}

/* Si el círculo tiene borde gris, lo quitamos */
.features *[class*="icon"],
.features *[class*="circle"],
.features .icon,
.features .icon-circle,
.features .feature-icon{
  border: 0 !important;
}

/* 2) Centrado y tamaño del círculo (ajusta si lo quieres más grande/pequeño) */
.features .icon,
.features .icon-circle,
.features .feature-icon,
.features .value-icon,
.features .service-icon,
.features .item-icon{
  width: 76px !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}

/* 3) Iconos tipo i (FontAwesome u otros): blanco */
.features i,
.features i::before,
.features .fa,
.features .fas,
.features .far,
.features .fab{
  color: #ffffff !important;
}

/* 4) Iconos SVG inline: blanco */
.features svg{
  width: 34px !important;
  height: 34px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
}
.features svg [fill]:not([fill="none"]){
  fill: #ffffff !important;
}

/* 5) Si usas <img> para el icono (PNG/SVG como imagen),
      NO se puede “poner blanco” con CSS normal.
      Como mínimo, aseguramos tamaño y centrado. */
.features img{
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

/* =====================================================
   FIX ICONOS CRITERIOS: círculo azul + icono blanco
   Pegar AL FINAL del styles.css
===================================================== */

/* Círculo */
.criteria-ico{
  background: #0f3d5c !important;     /* azul océano */
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(11,30,45,0.18) !important;
}

/* Iconos SVG (los que se ven en tu captura) */
.criteria-ico svg{
  stroke: #ffffff !important;
  fill: none !important;
}

/* Si algún SVG usa relleno (fill) en vez de trazo (stroke) */
.criteria-ico svg [fill]:not([fill="none"]){
  fill: #ffffff !important;
}

/* Si en algún caso el icono es tipo <i> (FontAwesome u otro) */
.criteria-ico i,
.criteria-ico .fa,
.criteria-ico .fas,
.criteria-ico .far,
.criteria-ico .fab{
  color: #ffffff !important;
}

/* =========================================
   ICONOS CRITERIOS – MISMO AZUL QUE EL BOTÓN
========================================= */

.criteria-ico{
  background-color: #0b2f44 !important; /* ← MISMO AZUL DEL BOTÓN */
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(11,47,68,0.25) !important;
}

/* Iconos en blanco */
.criteria-ico svg{
  stroke: #ffffff !important;
  fill: none !important;
}

.criteria-ico svg [fill]:not([fill="none"]){
  fill: #ffffff !important;
}

/* =========================================
   HEADER · LOGO ÚNICO (SIN TEXTO)
========================================= */

.site-header{
  background-color: var(--panel); /* tu arena */
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Logo */
.brand-logo img{
  height: 72px;          /* tamaño grande pero elegante */
  width: auto;
  display: block;
}

/* Responsive */
@media (max-width: 768px){
  .brand-logo img{
    height: 56px;
  }
}

/* ==============================
   HEADER: LOGO GRANDE IZQUIERDA
============================== */

.brand{
  gap: 0 !important;            /* por si había texto antes */
}

.brand-logo{
  width: auto !important;
  height: 74px !important;       /* tamaño “grande” */
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;   /* quita esquinas redondeadas */
}

/* Ajuste móvil */
@media (max-width: 768px){
  .brand-logo{
    height: 56px !important;
  }
}
/* ==============================
   HEADER: LOGO GRANDE IZQUIERDA
============================== */

.brand{
  gap: 0 !important;            /* por si había texto antes */
}

.brand-logo{
  width: auto !important;
  height: 74px !important;       /* tamaño “grande” */
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;   /* quita esquinas redondeadas */
}

/* Ajuste móvil */
@media (max-width: 768px){
  .brand-logo{
    height: 56px !important;
  }
}

/* HEADER: logo grande a la izquierda */
.brand-logo{
  height: 74px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* móvil */
@media (max-width: 768px){
  .brand-logo{ height: 56px; }
}
/* =========================================
   LOGO HEADER – FORZAR TAMAÑO GRANDE
========================================= */

/* Altura real del header */
.site-header{
  padding: 28px 0 !important;
}

/* Contenedor navbar */
.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.brand{
  display: flex;
  align-items: center;
}

/* IMAGEN DEL LOGO – AQUÍ ESTÁ LA CLAVE */
.brand-logo{
  height: 110px !important;   /* GRANDE, visible */
  width: auto !important;
  max-height: none !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
}

@media (max-width: 768px){
  .brand-logo{
    height: 72px !important;
  }
}

/* =========================================
   HEADER FINO Y SEMITRANSPARENTE
========================================= */

.site-header{
  padding: 2px 0 !important;              /* banda mucho más fina */
  background-color: rgba(243, 234, 216, 0.85) !important; /* arena con transparencia */
  backdrop-filter: blur(6px);              /* efecto elegante al hacer scroll */
}

/* navbar alineada */
.navbar{
  min-height: 28px;
  align-items: center;
}

/* =========================================
   LOGO: FORZAR VISIBILIDAD REAL
========================================= */

.brand{
  display: flex;
  align-items: center;
}

/* CLAVE: usar width, no solo height */
.brand-logo{
  width: 260px !important;    /* controla el tamaño REAL */
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

@media (max-width: 768px){
  .brand-logo{
    width: 180px !important;
  }

  .site-header{
    padding: 8px 0 !important;
  }
}

/* =========================================
   HEADER COMPACTO Y ELEGANTE
========================================= */

/* Banda arena: mucho más corta */
.site-header{
  padding: 6px 0 !important;                 /* antes era enorme */
  background-color: rgba(243,234,216,0.9);   /* arena con ligera transparencia */
  backdrop-filter: blur(4px);
}

/* Navbar: altura controlada */
.navbar{
  min-height: 42px !important;
  align-items: center;
}

/* Logo: se mantiene grande pero sin forzar la banda */
.brand-logo{
  width: 220px !important;   /* tamaño real del logo */
  height: auto !important;
  display: block;
}

/* Menú bien alineado verticalmente */
.navlinks{
  display: flex;
  align-items: center;
  gap: 28px;
}

@media (max-width: 768px){
  .site-header{
    padding: 4px 0 !important;
  }

  .brand-logo{
    width: 160px !important;
  }
}

/* =========================================
   HEADER ULTRACORTO
========================================= */

.site-header{
  padding: 2px 0 !important;                 /* mínimo real */
  background-color: rgba(243,234,216,0.88);  /* arena muy ligera */
  backdrop-filter: blur(3px);
}

/* Navbar sin altura extra */
.navbar{
  min-height: 44px !important;               /* clave */
  align-items: center;
}

/* Logo: mismo tamaño visual, no empuja altura */
.brand-logo{
  width: 200px !important;   /* sigue siendo grande */
  height: auto !important;
  display: block;
}

/* Menú perfectamente centrado */
.navlinks{
  align-items: center;
}

/* =========================================
   HEADER – REDUCCIÓN REAL AL 50%
========================================= */

/* Banda arena: cortada a la mitad */
.site-header{
  padding: 0 !important;                      /* elimina aire */
  background-color: rgba(243,234,216,0.88);
  backdrop-filter: blur(3px);
}

/* Navbar: fuerza altura pequeña */
.navbar{
  min-height: 36px !important;                /* CLAVE */
  height: 36px !important;
  align-items: center;
}

/* Logo: grande pero NO empuja la banda */
.brand{
  height: 36px;
  display: flex;
  align-items: center;
}

/* Logo visible y protagonista */
.brand-logo{
  width: 190px !important;                    /* sigue viéndose grande */
  height: auto !important;
  display: block;
}

/* Menú compacto */
.navlinks{
  height: 36px;
  align-items: center;
}

/* =========================================
   HEADER – AJUSTE +1 CM
========================================= */

.site-header{
  padding: 0 !important;
  background-color: rgba(243,234,216,0.88);
  backdrop-filter: blur(3px);
}

/* Altura real de la banda (+1 cm) */
.navbar{
  height: 74px !important;        /* ≈ 36px + 1cm */
  min-height: 74px !important;
  align-items: center;
}

/* El logo no empuja la altura */
.brand{
  height: 74px;
  display: flex;
  align-items: center;
}

/* Logo sigue grande y equilibrado */
.brand-logo{
  width: 200px !important;
  height: auto !important;
  display: block;
}

/* Menú centrado verticalmente */
.navlinks{
  height: 74px;
  align-items: center;
}

@media (max-width: 768px){
  .navbar,
  .brand,
  .navlinks{
    height: 56px !important;      /* proporcional al +1 cm desktop */
    min-height: 56px !important;
  }

  .brand-logo{
    width: 150px !important;
  }
}

/* =========================================
   LOGO HEADER: color real + tamaño grande
   (pegar AL FINAL del styles.css)
========================================= */

.site-header .brand img{
  filter: none !important;     /* quita el tono morado/verde */
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Tamaño del logo */
.brand-logo{
  height: 256px !important;     /* ajusta aquí si lo quieres más grande */
  width: auto !important;
  max-height: none !important;
  border-radius: 0 !important; /* por si se redondeó */
  display: block !important;
}

/* Móvil */
@media (max-width: 768px){
  .brand-logo{
    height: 52px !important;
  }
}

/* =========================================
   CENTRADO VERTICAL REAL DEL LOGO
========================================= */

/* El navbar define la altura real de la banda */
.navbar{
  display: flex;
  align-items: center !important;  /* CLAVE */
}

/* Contenedor del logo */
.brand{
  display: flex;
  align-items: center !important;  /* CLAVE */
  height: 100%;
}

/* Imagen del logo */
.brand-logo{
  display: block;
  margin: 0;                       /* elimina desplazamientos raros */
}

/* =========================================
   AJUSTE ÓPTICO LOGO HEADER
========================================= */

.brand-logo{
  transform: translateY(2px);   /* baja ligeramente el logo */
}

transform: translateY(3px);

/* =========================================
   BAJAR MÁS EL LOGO (AJUSTE ÓPTICO)
========================================= */

.brand-logo{
  transform: translateY(10px) !important;
}

/* ====== FIX DEFINITIVO LOGO HEADER (tamaño + bajarlo + color) ====== */

/* Asegura que no haya filtros raros */
.site-header .brand img,
.site-header .brand .brand-logo{
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Tamaño REAL del logo (anula el 44x44 que lo encoge) */
.site-header .brand .brand-logo{
  width: 340px !important;     /* <- súbelo a 260/280 si lo quieres más grande */
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Centrado vertical + BAJAR MÁS el logo (sin depender de transform) */
.site-header .brand{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: 10px !important;  /* <- esto lo BAJA. Prueba 12px si quieres más */
}

/* =====================================================
   EXPLORA (FIX): 1 grande izquierda = 2 derechas juntas
   (Pegar AL FINAL del styles.css)
===================================================== */

@media (min-width: 981px){
  /* 2 filas iguales + gap = altura total “derecha” */
  .activities-grid{
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  /* Izquierda: ocupa exactamente 2 filas */
  .activities-grid .activity-card:nth-child(1){
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  /* Derecha: 2 tarjetas apiladas */
  .activities-grid .activity-card:nth-child(2){
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .activities-grid .activity-card:nth-child(3){
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  /* Muy importante: quitamos las aspect-ratio que te rompen la altura */
  .activities-grid .activity-card > img{
    aspect-ratio: auto !important;
    height: 100% !important;
  }
}

/* =========================================
   ICONOS CRITERIOS – CONTRASTE CORRECTO
========================================= */

/* Círculo (ya está bien, lo dejo por claridad) */
.criteria-ico{
  background-color: #0b1e2d;
}

/* ICONOS SVG */
.criteria-ico svg{
  stroke: #ffffff !important;
  fill: none !important;
}

/* Si algún SVG usa fill en vez de stroke */
.criteria-ico svg path,
.criteria-ico svg circle,
.criteria-ico svg rect{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ICONOS tipo <i> (Font Awesome / similares) */
.criteria-ico i{
  color: #ffffff !important;
}

/* ===== GALERÍA ===== */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.gallery-item figcaption{
  margin: 0;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;              /* texto blanco */
  background: #0b1e2d;     /* AZUL PANTALASA REAL */
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              0 -2px 8px rgba(0,0,0,0.22);
}

.gallery-item img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;   /* <-- RECTÁNGULO VERTICAL (ideal para tu foto) */
  object-fit: cover;
}

.gallery-item figcaption{
  padding: 10px 12px 12px;
  font-weight: 700;
  letter-spacing: .4px;
}


/* ===== FIX TÍTULOS EXPEDICIONES (UNA SOLA LÍNEA) ===== */
.expedition-info h1{
  font-size: clamp(1.85rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Ajuste tamaño logo en el header */
.brand-logo{
  height: 44px;   /* antes seguramente ~56px */
  width: auto;
}

/* ===== Logo header: visible y un poco más pequeño ===== */
.site-header .brand{
  display: flex;
  align-items: center;
}

.site-header .brand img{
  height: 52px;       /* “un poco más pequeño” pero visible */
  width: auto;
  display: block;
}

/* ===== FIX DEFINITIVO LOGO HEADER ===== */
.site-header{
  height: auto;              /* evita recorte */
}

.navbar{
  align-items: center;       /* centra verticalmente */
  padding: 12px 0;           /* da aire arriba y abajo */
}

.site-header .brand img{
  height: 52px;              /* SOLO un poco más pequeño */
  width: auto;
  display: block;
}

.site-header {
  background-color: #f3ead8;
  height: 96px;                 /* ALTURA FIJA PARA TODAS */
  display: flex;
  align-items: center;          /* centra verticalmente */
  position: relative;
  z-index: 1000;
}

.site-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand img {
  height: 56px;                 /* ajusta si quieres 52–60 */
  transform: translateY(-4px);  /* SUBE LIGERAMENTE */
}

.navbar {
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 40px;   /* separación desde el logo */
}

.navbar a {
  color: #1f2f3a;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 20px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.navbar a:hover {
  background-color: #1f4e79; /* azul oscuro Pantalasa */
  color: #ffffff;
}

.brand {
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

/* --- NO subrayar el logo (brand) nunca --- */
a.brand,
a.brand:hover,
a.brand:focus,
a.brand:active,
a.brand:visited {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Por si el subrayado es un pseudo-elemento (muy común) */
a.brand::after,
a.brand::before {
  content: none !important;
  display: none !important;
}

/* El logo jamás tiene subrayado/linea */
.brand,
.brand:hover,
.brand:focus,
.brand:active,
.brand:visited {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Por si el "subrayado" viene de ::after / ::before */
.brand::after,
.brand::before {
  content: none !important;
  display: none !important;
}

/* Menú: SOLO los links dentro de nav-links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 40px;
}

.nav-links .nav-link {
  color: #1f2f3a;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 20px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-links .nav-link:hover {
  background-color: #1f4e79;
  color: #ffffff;
  text-decoration: none;
}

/* El logo jamás tiene subrayado/linea */
.brand,
.brand:hover,
.brand:focus,
.brand:active,
.brand:visited {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Por si el "subrayado" viene de ::after / ::before */
.brand::after,
.brand::before {
  content: none !important;
  display: none !important;
}

/* Menú: SOLO los links dentro de nav-links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 40px;
}

.nav-links .nav-link {
  color: #1f2f3a;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 20px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-links .nav-link:hover {
  background-color: #1f4e79;
  color: #ffffff;
  text-decoration: none;
}

/* --- APAGA CUALQUIER SUBRAYADO/LINEA DEL LOGO SÍ O SÍ --- */
.site-header a.brand,
.site-header a.brand:hover,
.site-header a.brand:focus,
.site-header a.brand:active,
.site-header a.brand:visited {
  text-decoration: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header a.brand::after,
.site-header a.brand::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  border: 0 !important;
}

/* --- HOVER SOLO PARA LAS PESTAÑAS (NO para el logo) --- */
.site-header .nav-link {
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 20px;
  transition: background-color .2s ease, color .2s ease;
}

.site-header .nav-link:hover {
  background-color: #1f4e79;
  color: #fff;
}

.brand { 
  display: inline-flex; 
  align-items: center; 
}

.brand img {
  display: block;
  height: 56px; /* o el tamaño que uses */
  pointer-events: auto; /* por si algún estilo lo anuló */
}

/* ===== LINKS DEL MENÚ ===== */
.nav-links a {
  position: relative;
  text-decoration: none;
  color: #1f2f3a;
  padding: 10px 16px;
  border-radius: 20px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

/* HOVER */
.nav-links a:hover {
  background-color: #1f4e79;
  color: #ffffff;
  transform: translateY(-1px); /* micro-elevación */
}

/* ESTADO ACTIVO (página actual) */
.nav-links a.active {
  background-color: #0f3556; /* más oscuro que hover */
  color: #ffffff;
  font-weight: 600;
}

/* El activo NO se mueve al hacer hover */
.nav-links a.active:hover {
  transform: none;
}

/* ===== FORZAR HOVER + ACTIVO (PISAR TODO LO ANTERIOR) ===== */
.site-header .nav-links a{
  position: relative !important;
  text-decoration: none !important;
  color: #1f2f3a !important;
  padding: 10px 16px !important;
  border-radius: 20px !important;
  background: transparent !important;
  transition: background-color .25s ease, color .25s ease, transform .2s ease !important;
}

.site-header .nav-links a:hover{
  background-color: #1f4e79 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Estado activo (página actual) */
.site-header .nav-links a.active{
  background-color: #0f3556 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transform: none !important;
}

.site-header .nav-links a.active:hover{
  background-color: #0f3556 !important;
  color: #ffffff !important;
  transform: none !important;
}

/* ===== MENÚ PANTALASA ===== */
.site-header .nav-links a {
  position: relative;
  text-decoration: none !important;
  color: #1f2f3a;
  padding: 10px 18px;
  border-radius: 22px;
  background: transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* HOVER */
.site-header .nav-links a:hover {
  background-color: var(--pantalasa-azul);
  color: #ffffff;
}

/* ACTIVO (página actual) */
.site-header .nav-links a.active {
  background-color: var(--pantalasa-azul);
  color: #ffffff;
  font-weight: 600;
}

/* El activo no cambia al hover */
.site-header .nav-links a.active:hover {
  background-color: var(--pantalasa-azul);
  color: #ffffff;
}

/* ================================
   NAV PANTALASA · BLOQUE ÚNICO OK
   (pegar al FINAL del styles.css)
================================== */

:root{
  --pantalasa-azul: #1f4e79; /* azul corporativo */
}

/* 1) El logo NUNCA se subraya */
.site-header a.brand,
.site-header a.brand:hover,
.site-header a.brand:focus,
.site-header a.brand:active,
.site-header a.brand:visited{
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.site-header a.brand::after,
.site-header a.brand::before{
  content: none !important;
  display: none !important;
}

/* 2) Links del menú: SIN subrayado por defecto (quitamos el underline global) */
.site-header .navlinks a,
.site-header .navlinks a:hover{
  text-decoration: none !important;
}

/* 3) Estilo base de pestañas */
.site-header .navlinks a{
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 22px;
  color: #1f2f3a;
  background: transparent;
  transition: background-color .22s ease, color .22s ease, transform .18s ease;
}

/* 4) “Subrayado” animado (azul Pantalasa) */
.site-header .navlinks a::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--pantalasa-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  opacity: .95;
}

/* 5) Hover: contraste + animación */
.site-header .navlinks a:hover{
  background: rgba(31, 78, 121, 0.14); /* halo suave */
  color: #0b1e2d;
}
.site-header .navlinks a:hover::after{
  transform: scaleX(1);
}

/* 6) Activo (tu HTML usa class="active") */
.site-header .navlinks a.active{
  background: var(--pantalasa-azul);
  color: #ffffff;
  font-weight: 650;
}
.site-header .navlinks a.active::after{
  transform: scaleX(1);
  background: #ffffff; /* subrayado blanco sobre el azul activo */
  opacity: .95;
}

/* 7) El activo NO cambia en hover */
.site-header .navlinks a.active:hover{
  background: var(--pantalasa-azul);
  color: #ffffff;
  transform: none;
}

/* Activo SIN subrayado */
.site-header .navlinks a.active::after{
  display: none;
}

.site-header .navlinks a:hover{
  transform: translateY(-1px);
}
.site-header .navlinks a{
  transition: background-color .22s ease, color .22s ease, transform .18s ease;
}

.btn, .cta, .button, button{
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover, .cta:hover, .button:hover, button:hover{
  box-shadow: 0 10px 24px rgba(31, 78, 121, .18);
}

.btn:active, .cta:active, .button:active, button:active{
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(31, 78, 121, .14);
}

.card, .exp-card, .tile{
  transition: transform .18s ease, box-shadow .22s ease;
}

.card:hover, .exp-card:hover, .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* =========================
   MICRO-ANIMACIONES · BOTONES
========================= */

.btn{
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

/* Hover */
.btn:hover{
  transform: translateY(-1px);
}

/* Click */
.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(11,30,45,0.14);
}

/* =========================
   MICRO-ANIMACIONES · CARDS
========================= */

.card{
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.card:hover{
  transform: translateY(-4px);
}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
   REVEAL ON SCROLL (fade + slide)
========================= */

[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
  will-change: opacity, transform;
}

[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================
   GALERÍA · reducir hueco intro → fotos
========================= */

.gallery-intro{
  padding-bottom: 0.8rem; 
}

.gallery-photos{
  padding-top: 0.4rem; 
}

/* =========================
   GALERÍA · reducir hueco intro → fotos
========================= */

.gallery-intro {
  padding-bottom: 1rem !important;
}

.gallery-photos {
  padding-top: 0.5rem !important;
}

/* =========================
   GALERÍA · AJUSTE ESPACIO (intro → fotos)
   (sobrescribe .section y .section.tight)
========================= */

/* Reduce padding real del bloque de cabecera */
.section.gallery-intro{
  padding-top: 1.6rem !important;
  padding-bottom: 0.8rem !important;
}

/* Quita márgenes “por defecto” del navegador que añaden hueco */
.section.gallery-intro h1{
  margin: 0 0 0.6rem 0 !important;
}

.section.gallery-intro .section-intro{
  margin: 0 !important;
}

/* Reduce el padding superior del bloque de fotos */
.section.tight.gallery-photos{
  padding-top: 0.8rem !important;
  padding-bottom: 2.2rem !important; /* deja aire abajo como antes */
}

/* Asegura que la grid no mete margen extra */
.gallery-grid{
  margin-top: 0 !important;
}

/* =========================
   GALERÍA · TÍTULO CENTRADO + LÍNEA MÁS PRESENTE
========================= */

.gallery-intro h1{
  text-align: center;
}

/* GALERÍA · centrar texto descriptivo */
.gallery-intro p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   GALERÍA · BLOQUE FINAL CENTRADO
========================= */

.gallery-cta{
  text-align: center;
}

.gallery-cta p{
  margin-left: auto;
  margin-right: auto;
}

.gallery-cta .btn,
.gallery-cta .button,
.gallery-cta .cta-buttons{
  justify-content: center;
}

/* =========================
   GALERÍA · CENTRAR BLOQUE CTA FINAL
========================= */

/* Centra todo el contenido del bloque */
.cta-split{
  text-align: center;
}

/* Centra títulos y párrafos */
.cta-split h2,
.cta-split p{
  margin-left: auto;
  margin-right: auto;
}

/* Limita ancho para que no se vea desparramado */
.cta-split p{
  max-width: 760px;
}

/* Centra los botones */
.cta-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* =========================
   SOBRE · layout más pro
========================= */

.about-wrap{
  max-width: 1040px;
}

.about-head h1{
  margin: 0;
}

.about-sub{
  margin: .4rem 0 0;
  opacity: .85;
}

/* Intro: dos columnas */
.about-intro{
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 22px;
  margin-top: 18px;
}

.about-copy{
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(11,30,45,0.10);
  border-radius: 16px;
  padding: 18px 18px;
}

.about-lead{
  margin: 0;
  line-height: 1.65;
}

.about-note{
  margin: 12px 0 0;
  line-height: 1.6;
  opacity: .92;
}

.about-badges{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-badges li{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,30,45,0.08);
  border: 1px solid rgba(11,30,45,0.10);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Panel lateral */
.about-panel{
  border-radius: 16px;
  padding: 18px;
  background: rgba(11,30,45,0.06);
  border: 1px solid rgba(11,30,45,0.12);
}

.about-panel h3{
  margin: 0 0 10px;
}

.about-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.about-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}

.about-list .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #0b1e2d; /* azul Pantalasa (el del título) */
  margin-top: 6px;
}

/* Valores: grid de cards */
.values-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.value-card{
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(11,30,45,0.10);
  box-shadow: 0 14px 30px rgba(11,30,45,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.value-card:hover{
  transform: translateY(-3px);
  border-color: rgba(11,30,45,0.18);
  box-shadow: 0 22px 48px rgba(11,30,45,0.14);
}

.value-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #0b1e2d;
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}

.value-card h3{
  margin: 0 0 6px;
}

.value-card p{
  margin: 0;
  line-height: 1.5;
  opacity: .9;
}

/* Responsive */
@media (max-width: 980px){
  .about-intro{
    grid-template-columns: 1fr;
  }
  .values-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .values-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================
   SOBRE · Bloque iconos final (FIX iconos + spacing)
========================= */

.values-icons{
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}

/* 4 columnas solo cuando haya espacio real */
.values-icons-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 34px;
  align-items: center;
}

/* Cada item: círculo + texto */
.value-icon-item{
  display: grid;
  grid-template-columns: 86px 1fr;
  column-gap: 18px;
  align-items: center;
  min-width: 0;
}

.icon-circle{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #0b1e2d;     /* azul Pantalasa */
  display: grid;
  place-items: center;
  color: #ffffff;          /* IMPORTANTE: da blanco al SVG */
  flex-shrink: 0;
  box-shadow: 0 16px 34px rgba(11,30,45,0.22);
}

/* Forzamos que el SVG use blanco SIEMPRE */
.icon-circle svg{
  width: 28px;
  height: 28px;
  display: block;
  stroke: #ffffff;
  fill: none;
}

.value-icon-item h3{
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.1;
  word-break: keep-all;
}

/* RESPONSIVE: evita solapes */
@media (max-width: 1180px){
  .values-icons-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .values-icons-grid{
    grid-template-columns: 1fr;
  }
}

:root{
  --brand: #0b2b3a;          /* AJUSTA a tu azul Pantalasa */
  --ink: #0b1220;
  --paper: #f3ead8;          /* tu arena */
  --card: rgba(255,255,255,.18);
  --stroke: rgba(255,255,255,.28);
  --shadow: 0 20px 50px rgba(5, 10, 18, .18);
}

/* ===== ABOUT HERO: fondo con capas (gradiente + manchas + noise) ===== */
.about-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 92px) 0;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(11,43,58,.14), transparent 60%),
              radial-gradient(900px 500px at 80% 35%, rgba(11,43,58,.10), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));
}

.about-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background-image:
    radial-gradient(600px 240px at 22% 26%, rgba(255,255,255,.16), transparent 65%),
    radial-gradient(480px 220px at 74% 18%, rgba(255,255,255,.10), transparent 62%);
  filter: blur(0px);
  pointer-events:none;
}

.about-hero::after{
  content:"";
  position:absolute; inset:0;
  opacity:.12;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ===== Tipografía y jerarquía ===== */
.about-head{
  margin-bottom: 22px;
}

.about-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(11,43,58,.85);
  padding: 8px 12px;
  border: 1px solid rgba(11,43,58,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

.about-head h1{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  margin: 14px 0 10px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.about-sub{
  max-width: 62ch;
  font-size: 16px;
  color: rgba(11,18,32,.78);
}

/* ===== KPIs ===== */
.about-highlights{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.kpi{
  flex: 0 0 auto;
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(5,10,18,.08);
}

.kpi-num{
  font-size: 12px;
  letter-spacing:.10em;
  text-transform: uppercase;
  color: rgba(11,43,58,.70);
  font-weight: 800;
}

.kpi-val{
  margin-top: 4px;
  font-weight: 800;
  color: var(--ink);
}

/* ===== Layout: dos tarjetas con profundidad ===== */
.about-intro{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

.about-copy,
.about-panel{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  position: relative;
}

.about-copy{
  padding: clamp(18px, 2vw, 26px);
}

.about-panel{
  padding: clamp(18px, 2vw, 22px);
}

/* brillo suave en hover (no agresivo) */
.about-copy:hover,
.about-panel:hover{
  transform: translateY(-2px);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 26px 60px rgba(5,10,18,.22);
}

.about-panel h3{
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--ink);
}

/* ===== Feature list moderna ===== */
.feature-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feature-list li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(243,234,216,.35);
}

.feature-list strong{
  display:block;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 2px;
}

.feature-list span{
  display:block;
  color: rgba(11,18,32,.72);
  font-size: 13.5px;
  line-height: 1.25;
}

.fi{
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg, rgba(11,43,58,.95), rgba(11,43,58,.70));
  box-shadow: 0 10px 20px rgba(11,43,58,.25);
}

/* CTA */
.btn-cta{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: white;
  background: linear-gradient(180deg, rgba(11,43,58,1), rgba(11,43,58,.82));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 40px rgba(11,43,58,.24);
}
.btn-cta:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Chips: menos “botón plano”, más premium */
.about-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
}

.about-badges li{
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  color: rgba(11,18,32,.86);
  border: 1px solid rgba(11,43,58,.18);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(5,10,18,.08);
}
.about-badges li:hover{
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px){
  .about-intro{ grid-template-columns: 1fr; }
  .kpi{ min-width: 140px; }
}

/* Respeta usuarios con menos animación */
@media (prefers-reduced-motion: reduce){
  .about-copy:hover, .about-panel:hover, .btn-cta:hover, .about-badges li:hover{ transform:none; }
  .about-copy, .about-panel, .btn-cta, .about-badges li{ transition:none; }
}

.about-hero {
  padding-top: clamp(32px, 4vw, 48px); /* antes era mucho mayor */
}

.about-head {
  margin-bottom: 16px; /* reduce separación con el contenido */
}

/* ===== SOBRE: HERO FOTO TIPO "Kananaga" ===== */
.about-banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 26px;
  margin: 18px auto 0;
  background: #000;
}

/* imagen (alto tipo banner) */
.about-banner__media{
  height: clamp(240px, 34vw, 420px);
  background-image: url("../img/sobre-hero.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.03);
}

/* overlay oscuro suave para legibilidad del texto */

.about-banner__overlay{
  position: absolute;
  inset: 0;
  /* Degradado suave SOLO arriba para legibilidad, sin banda negra abajo */
  background: linear-gradient(
    180deg,
    rgba(7,18,28,.30) 0%,
    rgba(7,18,28,.12) 35%,
    rgba(7,18,28,0) 70%
  );
}

.about-banner__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 3vw, 34px);
  color: #fff;
}

.about-banner__eyebrow{
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 10px;
}

.about-banner__title{
  margin: 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.about-banner__subtitle{
  margin: 10px 0 0;
  max-width: 70ch;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}

/* ===== SOBRE: TEXTO CENTRADO + JUSTIFICADO (EDITORIAL) ===== */
.about-body{
  padding-top: clamp(28px, 4vw, 46px);
}

.about-prose{
  max-width: 880px;               /* ancho editorial */
  margin: 0 auto;                 /* centrado */
  padding: 0;
  border: 0;
  background: transparent;
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.about-prose p{
  color: rgba(11,18,32,.82);
  line-height: 1.85;
  font-size: 16.5px;
}

.about-prose__h2{
  margin: 0 0 12px;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.about-prose__h2{
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11,43,58,.18);
  margin-bottom: 16px;
}

.about-prose p{
  margin: 0 0 14px;
  color: rgba(11,18,32,.82);
  line-height: 1.75;

  /* Justificado “bonito” */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* móvil: a veces el justificado se ve feo; lo ajustamos */
@media (max-width: 640px){
  .about-prose p{
    text-align: left;
    hyphens: none;
  }
}

/* Para que el banner tenga el mismo margen que tus secciones con container */
.about-banner{
  max-width: min(1200px, calc(100% - 32px));
}

.about-banner__media{
  height: clamp(170px, 22vw, 260px);
  background-image: url("../img/sobre-hero.jpg");
  background-size: cover;
  background-position: center 60%; /* 👈 CLAVE */
}

/* CTA WhatsApp en banner */
.about-banner__cta{
  margin-top: 18px;
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 22px;
  border-radius: 999px;

  background: rgba(12, 90, 70, 0.85);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .02em;

  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.about-banner__cta:hover{
  background: rgba(12, 90, 70, 1);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

.about-banner__eyebrow{ display:none; }

/* =====================================================
   FORZAR FONDO UNIFORME (SOBRE PANTALASA)
   Pegar AL FINAL del styles.css
   ===================================================== */

/* Color base único del sitio */
body,
html {
  background-color: #d9c6a0 !important; /* AJUSTA si usas otro tono arena */
}

/* Elimina cualquier fondo, degradado o imagen residual */
section,
main,
.about-hero,
.about-banner,
.about-body,
.about-page,
.container {
  background: transparent !important;
}

/* Evita fondos heredados en pseudo-elementos */
.about-banner::before,
.about-banner::after,
.about-body::before,
.about-body::after {
  background: none !important;
  content: none !important;
}

/* Garantiza que no aparezcan bandas oscuras */
.about-banner__overlay {
  background: linear-gradient(
    180deg,
    rgba(7,18,28,.25) 0%,
    rgba(7,18,28,.10) 35%,
    rgba(7,18,28,0) 70%
  ) !important;
}

/* Por si algún wrapper tiene sombra oscura */
.about-banner {
  box-shadow: none !important;
}

/* Banner: que TODAS las capas respeten el redondeo */
.about-banner{
  border-radius: 26px !important;
  overflow: hidden !important;
}

.about-banner__media,
.about-banner__overlay{
  border-radius: inherit !important;
}

/* Reencuadre: sube un poco la imagen para que la aleta no caiga bajo el título */
.about-banner__media{
  background-position: center 52% !important;
}

/* Título/subtítulo: más a la izquierda y con margen inferior controlado */
.about-banner__inner{
  padding: 28px 34px !important;
}

.about-banner__title{
  max-width: 18ch;
  font-size: clamp(28px, 3.6vw, 46px) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.about-banner__subtitle{
  max-width: 52ch;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
}

/* Botón WhatsApp "bien hecho" dentro del banner */
.wa-fab{
  position: absolute;
  left: 34px;
  bottom: 20px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;

  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.wa-fab:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 22px 50px rgba(0,0,0,.32);
}

.wa-fab__icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(7,18,28,.22);
  border: 1px solid rgba(255,255,255,.16);
}

.wa-fab__text{
  font-size: 14px;
}

/* En móvil, que no tape el texto del banner */
@media (max-width: 640px){
  .wa-fab{
    left: 16px;
    bottom: 14px;
    padding: 10px 14px;
  }
  .wa-fab__text{ font-size: 13px; }
}

/* Botón flotante WhatsApp (siempre visible y a la derecha) */
.wa-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  background: rgba(11,43,58,.92); /* azul Pantalasa */
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;

  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(0,0,0,.30);
  filter: brightness(1.02);
}

.wa-float__icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.wa-float__text{
  font-size: 14px;
}

/* Móvil: más compacto */
@media (max-width: 640px){
  .wa-float{
    right: 14px;
    bottom: 14px;
    padding: 11px 14px;
  }
  .wa-float__text{ font-size: 13px; }
}

/* Texto del banner: muévelo a la izquierda */
.about-banner__inner{
  padding-left: 22px !important;   /* antes era más grande */
  padding-right: 34px !important;
}

/* Subtítulo en negrita */
.about-banner__subtitle{
  font-weight: 800 !important;
}

.about-banner__title{
  position: relative;
  z-index: 1;
  color: #ffffff;
}


.about-banner__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Colocar el texto del banner en la parte superior */
.about-banner__inner{
  justify-content: flex-start !important;
  padding-top: 26px !important;
  padding-bottom: 0 !important;
}


.about-banner__title{
  display: inline-block;
  max-width: 16ch;
}