:root{
  --brand:#0b3d3b;
  --accent:#15a39a;

  --bg:#f4f7f8;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ring: rgba(21,163,154,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1214;
    --card:#0f1719;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --shadow: 0 12px 30px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box }
html,body{ margin:0;padding:0;  }
html{ scroll-behavior: smooth; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, "Helvetica Neue", sans-serif;
  background:var(--bg); color:var(--text);
}

/* HERO */
header.hero{
  position:relative; min-height:44vh; display:grid; place-items:center; text-align:center;
  color:#fff; padding:3rem 1rem; overflow:hidden;
  background:#0b3d3b;
}
header.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('IMG_2505.jpg') center/cover no-repeat; /* cambia si prefieres otra foto */
  filter:saturate(1.05) contrast(1.03);
  opacity:.95;
}
.hero-content{ position:relative; z-index:1; max-width:1100px; margin:auto; padding:0 1rem; }
.hero-content h1{ margin:.25rem 0 0; font-size:clamp(1.8rem,3.2vw,2.8rem) }
.lead{ max-width:75ch; margin:.9rem auto 0; opacity:.96 }

/* NAV superior */
nav.top{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:.6rem; flex-wrap:wrap; z-index:2;
}
nav.top a{
  color:#fff; text-decoration:none; font-weight:600; padding:.45rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(4px);
}
nav.top a:hover{ background:rgba(255,255,255,.22) }

/* Layout base */
.container{ max-width:1100px; margin:0 auto; padding:1.25rem }
.grid{ display:grid; gap:1.25rem }
.grid-2{ grid-template-columns:1fr; }
@media(min-width:900px){ .grid-2{ grid-template-columns:1.2fr .8fr } }

.card{
  background:var(--card); border-radius:16px; padding:1rem;
  box-shadow:var(--shadow);
}
.section-title{ margin:.25rem 0 1rem; font-size:1.25rem; color:var(--brand) }

/* Iframes embebidos (UNIFICADO) */
.embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;      /* relación por defecto; ajusta a 4/3 si prefieres */
  max-height: 720px;         /* techo en pantallas grandes */
  min-height: 420px;         /* suelo razonable en pantallas pequeñas */
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

@media (max-width: 900px){ .embed{ max-height: 560px } }
@media (max-width: 600px){ .embed{ aspect-ratio: 4 / 3; max-height: 520px } }

/* Mapa */
#mapaElManzano{ height:420px; border-radius:12px; overflow:hidden }

/* Footer */
footer{ padding:1.5rem; text-align:center; color:var(--muted) }
footer .logos,
footer > div{
  display:flex; justify-content:center; align-items:center;
  gap: clamp(16px, 4vw, 30px); flex-wrap:wrap;
}
footer img{
  height:auto; max-height: clamp(60px, 12vw, 120px);
}

/* Tipografías fluidas */
h1 { font-size: clamp(22px, 5.5vw, 36px); }
h2 { font-size: clamp(18px, 4.5vw, 28px); }
.lead { font-size: clamp(14px, 3.8vw, 18px); }

/* Responsive móvil */
@media (max-width: 820px) {
  .grid.grid-2 {
    display:grid; grid-template-columns: 1fr !important; gap: 16px;
  }
  .hero .hero-content img {
    transform:none !important; max-width: min(70vw, 320px); height:auto;
  }
  #mapaElManzano { height: 300px; }
  .card { padding: 12px; }
}

@media (max-width: 480px) {
  .hero .hero-content img { max-width: min(80vw, 260px); }
  #mapaElManzano { height: 260px; }
}

/* Bloque details "Explicación de rangos" */
.rangos-info { margin-top: 10px; }
.rangos-info > summary {
  display:inline-block; padding:8px 12px; border:1px solid #cfd6e6; border-radius:10px;
  background:#f3f5fb; font-weight:600; cursor:pointer; user-select:none;
}
.rangos-info > summary::-webkit-details-marker { display:none; }
.rangos-info[open] > summary { background:#e9eefc; border-color:#9db2ff; }
.rangos-info ul {
  margin:10px 0 0; padding-left:0; list-style:none; line-height:1.6;
}
.rangos-info li {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}

/* Puntitos de colores (UNIFICADO) */
.dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.dot.opt   { background: green; }
.dot.imp   { background: yellow; }
.dot.undef { background: orange; }
.dot.risk  { background: red; }
.dot.gray  { background: gray; }

/* Consulta por día */
.card-lite{ margin-top:14px; padding:10px; border:1px solid #e6e8ef; border-radius:10px; background:#fff; }
.fila-consulta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fila-consulta label{ font-weight:600; margin-right:4px; }
.fila-consulta select, .fila-consulta button{
  padding:6px 10px; border:1px solid #cfd6e6; border-radius:8px; background:#fff; cursor:pointer;
}
.resultado-dia{ margin-top:10px; }
.resultado-dia table{ width:100%; border-collapse:collapse; }
.resultado-dia th, .resultado-dia td{ padding:8px 10px; border-bottom:1px solid #eef1f6; }
.resultado-dia th{ text-align:left; opacity:.75; font-weight:600; }

@media (max-width:600px){
  .fila-consulta{ gap:6px; }
  .resultado-dia td, .resultado-dia th{ padding:6px; }
}