:root{
  /* Brand */
  --brand:#136565; --brand-2:#0e4b4b;
  --cta:#0077cc; --cta-2:#005fa3; --success:#16a34a;

  /* Neutrals */
  --ink:#111827; --muted:#6b7280;
  --bg:#f7f7f7; --card:#ffffff;

  /* Radius & shadows */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:16px; --pill:999px;
  --shadow-1:0 2px 0 rgba(0,0,0,.03);
  --shadow-card:0 4px 16px rgba(17,24,39,.04);
  --shadow-card-lg:0 6px 22px rgba(17,24,39,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Layout helper */
.container{width:min(1120px,92%);margin-inline:auto}

/* Header */
.main-header{
  background:#fff; position:sticky; top:0; z-index:20; border-bottom:1px solid #e5e7eb;
}
.header-content{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo{height:36px;width:auto}
.main-header nav a{padding:8px 10px;border-radius:var(--r-xs);font-weight:600;color:#374151}
.main-header nav a:hover{background:#f1f5f9}

/* Headings & buttons font family */
h1,h2,.btn{font-family:Manrope, Inter, system-ui, sans-serif}


/* ===== Hero (chat-like) ===== */
/* Wrapper + background */
.hero{position:relative; overflow:hidden; background:#f3fbfa;}
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(420px 260px at 12% 8%, rgba(19,101,101,0.18) 0%, transparent 65%),
    radial-gradient(520px 300px at 88% 12%, rgba(0,119,204,0.16) 0%, transparent 65%),
    radial-gradient(600px 360px at 40% 110%, rgba(14,75,75,0.12) 0%, transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #eef9f7 100%);
}

/* Content */
.hero-content{text-align:center;padding:96px 0 72px}
.eyebrow{
  display:inline-block; background:rgba(19,101,101,.95); color:#fff;
  padding:6px 10px; border-radius:var(--pill); font-size:.78rem; font-weight:700; letter-spacing:.3px;
}
.hero h1{
  margin:16px 0 12px; font-size:clamp(1.9rem, 3.8vw, 3rem);
  line-height:1.15; font-weight:900; color:#0f2f2f;
}
.lead{
  font-size:clamp(1rem, 2.2vw, 1.25rem); color:#334155;
  max-width:780px; margin:0 auto 18px;
}

/* CTAs */
.cta-row{margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta-row.left{justify-content:flex-start}

@media (prefers-reduced-motion: no-preference){
  .hero-bg{ animation: floaty 18s ease-in-out infinite alternate; }
  @keyframes floaty{
    0%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(-20px) translateX(8px)}
    100%{transform:translateY(0) translateX(-8px)}
  }
}
/* quick kill switch: .hero-bg{animation:none !important;} */


/* (nuevo) chips de ciudades dentro del hero */
.cities-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cities-chips span{
  border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:var(--pill);
  font-weight:700;color:#136565
}

/* Chat demo */
.chat-demo{max-width:760px;margin:22px auto 0;display:grid;gap:10px;justify-items:start}
.bubble{
  padding:12px 14px;border-radius:var(--r-xl);max-width:90%;text-align:left;
  border:1px solid #e5e7eb;background:#fff;box-shadow:var(--shadow-1)
}
.bubble.me{justify-self:end;background:#e8f4ff;border-color:#d7e9ff}
.bubble.bot{background:#e7fbf2;border-color:#c5f2df}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);
  font-weight:800;letter-spacing:.2px;border:2px solid transparent;cursor:pointer
}
.btn.primary{background:var(--cta);color:#fff}
.btn.primary:hover{background:var(--cta-2)}
.btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.outline:hover{background:#eaf6f6}

.btn:focus-visible{
  outline:3px solid rgba(19,101,101,.35);
  outline-offset:3px;
}

/* Trust bar */
.trust{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.trust-row{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:14px 0;text-align:center}
.trust-item{display:flex;align-items:center;gap:10px;color:#374151;font-weight:600;font-size:.95rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(22,163,74,0.4)}


/* Sections */
.section{padding:56px 0;background:#fff}
.section.alt{background:var(--bg)}
h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 24px}

/* How it works center alignment */
#como-funciona{text-align:center}
#como-funciona .sub{max-width:720px;margin:0 auto 22px}


/* ===== Stats (Counters) ===== */
.stats .container{ text-align:center; }
.stats-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* mobile: 2 cols */
  justify-items:stretch;
}
@media (min-width:760px){
  .stats-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
}

.stat-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--r-xl);
  box-shadow: var(--shadow-card);
  padding:18px;
  display:grid; gap:6px; justify-items:center;
}

.stat-num{
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  color:#0f2f2f;
  line-height:1.1;
}

.stat-label{
  color:#374151;
  font-weight:700;
  font-size:1rem;
}


/* Stepper horizontal compacto */
.stepper{
  --line:#e5e7eb; --dot-bg:#136565; --dot-ink:#fff;
  display:grid; grid-template-columns:1fr; gap:18px; padding:0; margin:14px auto 0; list-style:none; max-width:1000px;
}
.stepper-item{position:relative; display:flex; align-items:center; gap:12px; justify-content:flex-start; text-align:left}
.stepper-dot{
  flex:0 0 34px; width:34px; height:34px; border-radius:var(--pill);
  background:var(--dot-bg); color:var(--dot-ink); display:grid; place-items:center;
  font-weight:800; font-size:.95rem; box-shadow:0 0 0 4px rgba(19,101,101,.10);
}
.stepper-label{font-size:.98rem;color:#374151}
.stepper-label b{display:inline;margin-right:6px;color:#0f2f2f}


/* ===== Categories (cards) ===== */
/* Grid de categorías: 2 / 3 / 4 columnas */
.grid.cats{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* móvil */
}

@media (min-width:760px){
  .grid.cats{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* tablet */
    gap: 16px;
  }
}

@media (min-width:1024px){
  .grid.cats{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* desktop */
  }
}

#categorias{text-align:center}

.grid.cats{gap:14px} /* un poquito más de aire entre cards */

.cat{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto; /* emoji | cuerpo | cta */
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:var(--r-xl);
  background:linear-gradient(0deg, #ffffff, #ffffff);
  box-shadow:var(--shadow-1);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.cat-emoji{
  font-size:1.6rem;
  line-height:1;
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:var(--pill);
  background:#f3fbfa;
}

.cat-body{display:grid; gap:4px; min-width:0}
.cat-title{
  display:block; font-weight:800; color:#0f2f2f; letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cat-sub{
  display:block; color:#64748b; font-weight:600; font-size:.92rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cat-pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e5e7eb; background:#fff;
  color:#136565; font-weight:700; font-size:.78rem;
  padding:4px 8px; border-radius:var(--pill);
}

.cat-cta{
  font-weight:800; color:var(--brand);
  border:1px solid rgba(19,101,101,.22);
  padding:8px 10px; border-radius:var(--r-sm);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover & focus */
.cat:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(17,24,39,.07);
  border-color:#cfe6e6;
  background:linear-gradient(180deg,#ffffff 0%, #fbfefd 100%);
}
.cat:hover .cat-cta{
  background:#eaf6f6; border-color:#97d1d1; color:#0e4b4b;
}

/* Accesibilidad */
.cat:focus-visible{
  outline:3px solid rgba(19,101,101,.35);
  outline-offset:3px;
}

/* Responsive refinements */
@media (min-width:760px){
  .grid.cats{gap:16px}
  .cat-emoji{width:44px;height:44px;font-size:1.8rem}
}

/* Versión compacta de categorías */
.cats-compact .cat { padding:14px; }
.cats-compact .cat-body { gap:0; }
.cats-compact .cat-title { font-size:1rem; }
.cats-compact .cat-cta { padding:6px 10px; }

/* Ciudades centrado + fondo */
#ciudades { text-align: center; }
#ciudades .chips { justify-content: center; }

/* Variante con imagen de fondo (oscurecida) */
.section.alt.map{
  position: relative;
  color:#fff;

  /* simplest, bulletproof */
  background:
    linear-gradient(0deg, rgba(11,46,46,.70), rgba(11,46,46,.70)),
    url('../images/sur-chile-osorno.webp') center/cover no-repeat;

  /* if you want fallbacks later, add them once this works */
  /* background:
    linear-gradient(0deg, rgba(11,46,46,.70), rgba(11,46,46,.70)),
    image-set(
      url('../images/sur-chile.avif') type('image/avif') 1x,
      url('../images/sur-chile.webp') type('image/webp') 1x,
      url('../images/sur-chile.jpg')  type('image/jpeg') 1x
    ) center/cover no-repeat; */
}

/* Mejorar legibilidad de títulos en fondo oscuro */
.section.alt.map h2,
.section.alt.map .sub { color:#fff; }

/* Chips sobre fondo oscuro */
.section.alt.map .chip{
  background: rgba(255,255,255,.92);
  border-color: transparent;
  color: #0b2e2e;
}

/* Badge superior “Sur de Chile” */
.region-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.92);
  color:#0b2e2e;
  font-weight:800;
  letter-spacing:.2px;
}

/* Parallax suave sólo en desktop para no afectar móviles */
@media (min-width:1024px){
  .section.alt.map{ background-attachment: fixed; }
}


/* Chips (ciudades genéricas en otras secciones) */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid #e5e7eb;background:#fff;padding:8px 12px;border-radius:var(--pill);font-weight:700}

/* Quote */
.quote{background:#fff;border:1px solid #e5e7eb;border-radius:var(--r-xl);padding:18px}


.faq details{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--r-lg);
  padding:12px 14px; margin:12px 0; box-shadow:var(--shadow-card);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.faq details:hover{border-color:#d8e7e7; box-shadow:var(--shadow-card-lg)}
.faq details[open]{background:#fbfefd; border-color:#cfe6e6}

.faq summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  font-weight:800; color:#0f2f2f; position:relative; padding-right:28px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(-90deg);
  width:10px; height:10px; border-right:2px solid #0f2f2f; border-bottom:2px solid #0f2f2f;
  opacity:.7; transition:transform .2s ease, opacity .2s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(0deg); opacity:1}
.faq summary span{line-height:1.35}
.faq p{margin:10px 2px 4px; color:#374151}

/* Focus */
.faq summary:focus-visible{
  outline:3px solid rgba(19,101,101,.35); outline-offset:3px; border-radius:10px;
}


/* Form */
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:760px}
.form-grid label{display:grid;gap:8px}
.form-grid input,.form-grid select,.form-grid textarea{padding:10px;border:1px solid #e5e7eb;border-radius:var(--r-sm);font-size:1rem}
.form-grid .full{grid-column:1/-1}




/* Evita que el sticky header tape los títulos al navegar por #anclas */
section[id] { scroll-margin-top: 80px; }

/* Igual que los botones, pero para enlaces clave */
a:focus-visible {
  outline: 3px solid rgba(19,101,101,.35);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Aumenta el alto clickeable del summary en móviles */
.faq summary { min-height: 44px; }

::selection { background: rgba(19,101,101,.18); color: inherit; }

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

/* ≥ 760px (tablet/desktop) */
@media (min-width:760px){
  /* Stepper layout */
  .stepper{grid-template-columns:repeat(3,1fr); gap:26px}
  .stepper-item{
    justify-content:center; text-align:center; flex-direction:column; gap:10px;
    padding:0 8px; min-height:120px;
  }
  /* Horizontal connector line between stepper dots */
  .stepper-item::after {
    content: "";
    position: absolute;
    top: 50%;              /* middle of the dot */
    left: 100%;            /* start right after the dot */
    width: 100%;           /* stretch to next step */
    height: 2px;
    background: var(--line);
    transform: translateY(-50%); /* keep it centered */
    z-index: -1;           /* make sure dots are above the line */
  }

  .stepper-item:last-child::after {
    display: none; /* no line after the last dot */
  }

  /* Trust, categories, hero spacing */
  .hero-content{padding:96px 0 72px}

  /* Footer grid columns */
  .foot{grid-template-columns:1.2fr .9fr 1fr}
}

/* ≤ 759.98px tweaks */
@media (max-width:759.98px){
  .stepper-item{min-height:auto}
}

/* ===== Ciudades (polish v2) ===== */
:root{
  /* darkness of the overlay (tweak .55–.75) */
  --map-overlay: rgba(11,46,46,.62);
  /* vertical focal point of the photo (20–40%) */
  --map-y: 28%;
}

.section.alt.map{
  position: relative;
  overflow: hidden;                    /* allows the fade */
  color:#fff;
  background:
    linear-gradient(0deg, var(--map-overlay), var(--map-overlay)),
    url('../images/sur-chile-osorno.webp') center var(--map-y) / cover no-repeat;
  background-attachment: fixed;        /* parallax */
}

/* center + breathing room */
.section.alt.map .container{
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 10px;
  text-align: center;
  padding: clamp(48px, 6vw, 88px) 0;
}

#testimonios.section.alt.map::after {
  content: none !important;
}

/* remove top fade (clean edge) */
.section.alt.map::before{ content:none; }

/* gentle bottom fade into white */
.section.alt.map::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:70px; pointer-events:none;
  background: linear-gradient(to bottom, transparent, #fff 55%);
}

/* title/sub legibility over photo */
.section.alt.map h2,
.section.alt.map .sub,
.section.alt.map .region-badge{
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* region badge */
.region-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  color:#0b2e2e;
  font-weight:800; letter-spacing:.2px;
}

/* chips on dark bg */
.section.alt.map .chips{ justify-content:center; }
.section.alt.map .chip{
  background: rgba(255,255,255,.94);
  border-color: transparent;
  color:#0b2e2e;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.section.alt.map .chip.active{
  background: var(--brand);
  color:#fff;
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section.alt.map{ background-attachment: scroll; }
}

/* optional: parallax only on desktop */
@media (max-width:1023.98px){
  .section.alt.map{ background-attachment: scroll; }
}


/* ===== Mobile Nav (Hamburger) ===== */

/* botón hamburger oculto en desktop */
.nav-toggle{
  display:none; appearance:none; border:0; background:transparent; cursor:pointer;
  padding:8px; margin-left:auto; border-radius:10px;
}
.nav-toggle:focus-visible{ outline:3px solid rgba(19,101,101,.35); outline-offset:3px; }
.nav-toggle-box{ display:grid; gap:4px; }
.nav-toggle-line{
  width:24px; height:2px; background:#0f2f2f; display:block; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}

/* contenedor menú base (desktop) */
.site-nav{ display:flex; gap:8px; }
.site-nav a{ padding:8px 10px; border-radius:8px; font-weight:600; color:#374151; }
.site-nav a:hover{ background:#f1f5f9; }

/* layout móvil */
@media (max-width: 759.98px){
  .nav-toggle{ display:block; }

  /* header: marca a la izquierda, botón a la derecha */
  .header-content{ gap:8px; }
  .site-nav{
    position: fixed; inset: 64px 0 0 0; /* debajo del header */
    background:#ffffff; border-top:1px solid #e5e7eb;
    display: grid; gap: 6px; padding: 12px;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .site-nav a{ padding:12px; font-size:1.05rem; }

  /* estado abierto */
  .nav-open .site-nav{
    transform: translateY(0); opacity:1; pointer-events:auto;
  }

  /* animación del ícono a "X" */
  .nav-open .nav-toggle-line:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  .nav-open .nav-toggle-line:nth-child(2){
    opacity:0;
  }
  .nav-open .nav-toggle-line:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }

  /* bloquea scroll de fondo cuando el menú está abierto */
  .nav-open{ overflow:hidden; }
}

/* ===== Compactar menú móvil ===== */
@media (max-width: 759.98px){
  .site-nav{
    display:grid;
    gap: 0;                 /* sin gaps entre filas */
    padding: 8px 10px;      /* menos padding del contenedor */
    align-content: start;   /* evita que Safari reparta el espacio vertical */
    justify-items: start;   /* alinea los links a la izquierda */
  }
  .site-nav a{
    padding: 12px 4px;      /* menos alto por ítem */
    font-size: 1rem;        /* texto un pelín más chico */
    line-height: 1.25;      /* altura de línea contenida */
    width: 100%;
    border-radius: 8px;
  }
  /* separadores sutiles en vez de grandes espacios */
  .site-nav a + a{
    border-top: 1px solid #eef2f7;
  }
}


/* ===== Hero más compacto en móvil ===== */
.hero-content{ padding: 56px 0 56px; }         /* antes: 96px 0 72px */

@media (min-width:760px){
  .hero-content{ padding: 82px 0 72px; }       /* desktop se mantiene amplio */
}

/* ===== Reviews ===== */
.reviews-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  max-width:1000px;
  margin:0 auto;
}
@media (min-width:760px){
  .reviews-grid{ grid-template-columns:repeat(3,1fr); }
}

.quote-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.quote-card blockquote{
  margin:0 0 12px 0;
  font-size:1.05rem;
  color:#374151;
  line-height:1.5;
  position:relative;
}

.quote-card blockquote::before{
  content:"“";
  position:absolute;
  top:-10px; left:-6px;
  font-size:2.5rem;
  color:#d9f2ef;
  font-family:Georgia, serif;
}

.quote-card figcaption{
  font-weight:600;
  color:#0f2f2f;
  font-size:.95rem;
  margin-top:auto;
}


/* ===== Verticales: Hogga Servicios + Hogga Turismo ===== */

#verticales {
  text-align: center;
}

#verticales .sub {
  max-width: 720px;
  margin: 0 auto 28px;
}

/* Grid de las dos tarjetas */
.verticals-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr; /* móvil: 1 columna */
}

@media (min-width: 760px) {
  .verticals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* desktop: 2 columnas */
    align-items: stretch;
  }
}

/* Card base */
.vertical-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 20px 18px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Badges */
.vertical-card .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: rgba(19, 101, 101, 0.08);
  color: #0f2f2f;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vertical-card .alt-badge {
  background: rgba(0, 119, 204, 0.10);
}

/* Títulos y texto */
.vertical-card h3 {
  margin: 6px 0 4px;
  font-size: 1.1rem;
}

.vertical-card p {
  margin: 0 0 8px;
  color: #374151;
}

/* Lista de bullets */
.pill-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 10px;
  display: grid;
  gap: 4px;
  font-size: 0.95rem;
  color: #334155;
}

/* CTA al fondo de la tarjeta */
.card-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-note {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Botón secundario */
.btn.secondary {
  background: #ffffff;
  color: var(--brand);
  border-color: var(--brand);
}

.btn.secondary:hover {
  background: #eaf6f6;
}

/* ===== Footer universal Hogga ===== */

.footer {
  background: #0b2e2e;
  color: #d1fae5;
  padding: 36px 0 16px;
}

.foot {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: flex-start;
}

@media (min-width: 760px) {
  .foot {
    grid-template-columns: 1.3fr 1.2fr; /* marca | links */
  }
}

/* Columna marca */
.foot-brand small {
  display: block;
  margin: 8px 0 14px;
  color: #bfeee4;
  font-size: 0.9rem;
}

.foot-brand .cta-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Botones WhatsApp footer */
.foot-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: #136565;
  color: #e6fffa;
  border: 2px solid transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}

.foot-cta:hover {
  background: #0e4b4b;
  transform: translateY(-1px);
}

/* Títulos columnas links */
.foot-title {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  color: #e6fffa;
}

/* Grid con Explora / Legal / Instagram */
.foot-links {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}

@media (min-width: 900px) {
  .foot-links {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

.foot-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.foot-links a {
  color: #e6fffa;
  opacity: 0.9;
  font-size: 0.95rem;
}

.foot-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Pie inferior */
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 18px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
}

.foot-bottom small {
  color: #bfeee4;
  font-size: 0.85rem;
}


/* ===== Blog ===== */
.hero--blog { padding: 56px 0 40px; }            /* más compacto */
.hero--blog .lead { max-width: 760px; }

.post-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 960px) { .post-grid { grid-template-columns: 1fr; } }

.post-card{
  display:flex; align-items:center; gap:16px;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding:14px 16px; text-decoration:none; color:var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid rgba(0,0,0,.05);
}
.post-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card-lg); }

.post-media{
  position:relative; width:64px; height:64px; margin:0; flex-shrink:0;
  border-radius: var(--r-md); overflow:hidden; background:#f1f5f9;
  display:grid; place-items:center;
}
.post-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-media .emoji{ position:absolute; inset:auto  -6px -8px auto; font-size:18px; }

.post-body{ flex:1; min-width:0; }
.post-title{ font-size:1rem; line-height:1.25rem; margin:0 0 6px; font-weight:600; }
.post-meta{ margin:0; color:var(--muted); font-size:.875rem; }

.post-cta{
  font-weight:600; color:var(--brand); background:#e8f3f3;
  padding:6px 12px; border-radius: var(--pill);
}
.chips .chip{ text-decoration:none; }