/* ============================================
   LO QUE LADRAMOS — estilos base compartidos
   Paletas tomadas directamente de las huellas de
   la imagen de referencia (cama_principal.png)
   ============================================ */

:root{
  --tinta:      #2b2117;   /* texto principal, marrón oscuro cálido */
  --papel:      #fffaf3;
  --borde-suave: rgba(43,33,23,.12);

  /* Te leo la patita — lila */
  --oraculo-bg:     #f4ecf8;
  --oraculo-mid:    #d9bfe8;
  --oraculo-accent: #a877c4;

  /* Podcast — amarillo */
  --podcast-bg:     #fff8e4;
  --podcast-mid:    #ffe4a3;
  --podcast-accent: #e8a83c;

  /* Foro — hueso/tostado */
  --foro-bg:        #fdf3e2;
  --foro-mid:       #f0cd94;
  --foro-accent:    #c98a3f;

  /* Luto peludo — rosa */
  --luto-bg:        #fdeef3;
  --luto-mid:       #f6c3d6;
  --luto-accent:    #d9628f;

  /* Petshop — verde claro */
  --petshop-bg:     #eef8ec;
  --petshop-mid:    #bfe3b8;
  --petshop-accent: #5fa356;

  /* Plan patitas — verde azulado */
  --plan-bg:        #e9f6f1;
  --plan-mid:       #b7ddce;
  --plan-accent:    #3f9e83;

  /* Conozcámonos — azul */
  --conoce-bg:      #eaf3fb;
  --conoce-mid:     #b9d9f2;
  --conoce-accent:  #4a8fc7;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Nunito","Segoe UI",sans-serif;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-family:"Baloo 2","Nunito",sans-serif;}

/* ---------- Header compartido (todas las secciones) ---------- */
.sitio-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
}
.sitio-header .logo{
  font-family:"Baloo 2","Nunito",sans-serif;
  font-weight:800;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.sitio-header .logo img{height:34px;width:auto;}
.sitio-header nav.icons{display:flex;align-items:center;gap:14px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);
  border:1px solid var(--borde-suave);
  cursor:pointer;
}
.icon-btn svg{width:18px;height:18px;}

/* ---------- Menú deslizante ---------- */
.menu-panel{
  position:fixed; top:0; right:-320px; width:300px; height:100%;
  background:var(--papel); box-shadow:-8px 0 30px rgba(0,0,0,.15);
  padding:26px 22px; z-index:50; transition:right .28s ease;
  overflow-y:auto;
}
.menu-panel.abierto{right:0;}
.menu-panel h3{font-size:14px;letter-spacing:.03em;color:#8a6a56;margin-bottom:14px;}
.menu-panel a{
  display:flex;align-items:center;gap:10px;
  padding:11px 10px;border-radius:14px;margin-bottom:6px;
  font-weight:700;font-size:15px;
}
.menu-panel a:hover{background:#f4ece0;}
.menu-cerrar{position:absolute;top:18px;right:18px;font-size:22px;background:none;border:none;cursor:pointer;}
.overlay-fondo{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40;
}
.overlay-fondo.activo{opacity:1;pointer-events:auto;}

/* ---------- Hero de portada (imagen real + hotspots) ---------- */
.hero-portada{position:relative;width:100%;max-width:1312px;margin:0 auto;}
.hero-portada img{width:100%;height:auto;}
.hotspot{
  position:absolute;
  display:block;
}
.hotspot span{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:800; opacity:0; transition:opacity .15s;
  white-space:nowrap; background:var(--tinta); color:#fff; padding:2px 8px; border-radius:8px;
}
.hotspot:hover span{opacity:.9;}
.hotspot:hover{outline:2px dashed rgba(43,33,23,.3); outline-offset:2px; border-radius:40%;}

/* Franja inicial debajo del hero, mismo tono cálido de piso de la foto */
.franja-inferior{
  background:#f6ead9;
  text-align:center;
  padding:28px 16px 40px;
}
.franja-inferior p{
  max-width:520px;margin:0 auto;font-size:15px;color:#5c4632;line-height:1.5;
}

/* ---------- Plantilla de sección (color dinámico via variables) ---------- */
.seccion-hero{
  padding:46px 22px 54px;
  text-align:center;
  background:
    radial-gradient(circle at 15% 20%, var(--sec-mid) 0, transparent 42%),
    radial-gradient(circle at 85% 15%, var(--sec-mid) 0, transparent 38%),
    var(--sec-bg);
  position:relative;
  overflow:hidden;
}
.seccion-hero .huella-marca{
  width:64px;height:64px;margin:0 auto 14px;
}
.seccion-hero h1{font-size:30px;color:var(--sec-accent);}
.seccion-hero p.tagline{max-width:480px;margin:12px auto 0;font-size:15px;color:#5c4a3d;}
.volver-inicio{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:18px;font-weight:700;font-size:13px;color:var(--sec-accent);
}

.seccion-contenido{padding:36px 22px 60px;max-width:760px;margin:0 auto;}
.tarjeta{
  background:#fff;border:1px solid var(--borde-suave);
  border-radius:22px;padding:22px 24px;margin-bottom:18px;
  box-shadow:0 14px 30px -20px rgba(60,40,20,.25);
}
.tarjeta h3{color:var(--sec-accent);font-size:17px;margin-bottom:6px;}
.tarjeta p{font-size:14px;line-height:1.55;color:#4a3c30;margin:0;}

.boton-cta{
  display:inline-block;margin-top:8px;
  background:var(--sec-accent);color:#fff;font-weight:800;
  padding:13px 26px;border-radius:30px;font-size:14px;border:none;cursor:pointer;
}
.badge-proximamente{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;
  background:var(--sec-mid);color:var(--sec-accent);
  padding:5px 12px;border-radius:20px;margin-bottom:10px;
}

/* Paletas específicas por sección */
.section-oraculo   { --sec-bg:var(--oraculo-bg);  --sec-mid:var(--oraculo-mid);  --sec-accent:var(--oraculo-accent); }
.section-podcast    { --sec-bg:var(--podcast-bg);  --sec-mid:var(--podcast-mid);  --sec-accent:var(--podcast-accent); }
.section-foro       { --sec-bg:var(--foro-bg);     --sec-mid:var(--foro-mid);     --sec-accent:var(--foro-accent); }
.section-luto       { --sec-bg:var(--luto-bg);     --sec-mid:var(--luto-mid);     --sec-accent:var(--luto-accent); }
.section-petshop    { --sec-bg:var(--petshop-bg);  --sec-mid:var(--petshop-mid);  --sec-accent:var(--petshop-accent); }
.section-plan       { --sec-bg:var(--plan-bg);     --sec-mid:var(--plan-mid);     --sec-accent:var(--plan-accent); }
.section-conoce     { --sec-bg:var(--conoce-bg);   --sec-mid:var(--conoce-mid);   --sec-accent:var(--conoce-accent); }

/* ---------- Formularios ---------- */
.campo-label{
  display:block;font-size:12.5px;font-weight:800;color:#5c4a3d;
  margin:12px 0 5px;
}
.campo-input{
  width:100%;padding:11px 13px;border-radius:12px;
  border:1px solid var(--borde-suave);font-family:inherit;font-size:14px;
  background:#fffdfa;
}
.campo-input:focus{outline:2px solid var(--sec-accent, #a877c4);outline-offset:1px;}
.lista-homenajes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.mini-homenaje{
  background:var(--sec-bg);border:1px solid var(--sec-mid);
  padding:6px 12px;border-radius:16px;font-size:13px;font-weight:700;
}

footer.sitio-footer{
  text-align:center;padding:26px;font-size:12px;color:#9a8a78;
}