/* ============================================================
   Alervet — hoja de estilos principal
   Paleta y tipografía definidas una sola vez, aquí arriba.
   ============================================================ */

:root{
  /* Colores tomados de la guía de marca de Alervet.
     El verde de marca no alcanza contraste para texto (3.48:1 sobre el
     fondo), así que para leer se usan variantes más oscuras del MISMO
     tono. El ojo las reconoce como el mismo color; el texto se lee. */
  --teal:          #30937b;   /* verde de marca: SOLO rellenos, nunca
                                 texto: da 3.48:1 sobre el fondo      */
  --teal-dark:     #287c68;   /* texto y enlaces        4.65:1        */
  --teal-darker:   #1b5244;   /* títulos sobre claro    8.31:1        */
  --teal-press:    #24705c;   /* botón en hover                       */
  --teal-wash:     #e6f1ee;
  --verde-oliva:   #6ea03c;   /* solo decoración                      */
  --verde-claro:   #93b742;   /* solo decoración                      */

  --navy:          #1a4285;   /* títulos                8.98:1        */
  --navy-oscuro:   #122267;
  --azul-petroleo: #13779d;   /* enlaces secundarios    4.68:1        */

  /* Neutros ligeramente azulados, para que acompañen al azul de marca. */
  --ground:        #F7F6F2;
  --surface:       #FFFFFF;
  --sunk:          #EEEFEC;
  --ink:           #22303f;
  --body:          #44525f;
  --muted:         #59646e;   /* gris secundario       5.59:1        */
  --line:          #dfe2e6;

  /* Semánticos, derivados del rojo y el verde oliva de la guía. */
  --rojo:          #c2201e;   /* obligatorio, alertas   5.52:1        */
  --rojo-oscuro:   #a01a18;
  --rojo-wash:     #fbeceb;
  --oliva-oscuro:  #4a6b28;   /* «abierto ahora»        5.34:1        */
  --oliva-wash:    #eef4e6;

  --whatsapp:      #25D366;
  --whatsapp-dark: #1DA851;

  --radius:   14px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(26,66,133,.05), 0 10px 30px -14px rgba(26,66,133,.22);
  --shadow-l: 0 2px 4px rgba(26,66,133,.06), 0 20px 50px -20px rgba(26,66,133,.3);

  --w:      1140px;
  --gutter: 22px;
  --header: 74px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:Asap,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Encode Sans","Arial Narrow",Arial,sans-serif;
  font-stretch:condensed;
  color:var(--navy);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.2rem,5.4vw,3.5rem);line-height:1.05}
h2{font-size:clamp(1.75rem,3.8vw,2.5rem)}
h3{font-size:1.3rem;line-height:1.25}
h4{font-size:1.05rem}
p{margin:0}
img{max-width:100%;height:auto;display:block}

a{color:var(--teal-dark);text-underline-offset:3px}
a:hover{color:var(--teal)}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:720px}
.center{text-align:center;margin-left:auto;margin-right:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--radius-s) 0;font-weight:700}
.skip:focus{left:0}

/* ─── Etiquetas y textos de apoyo ─────────────────────────── */
.eyebrow{
  font-family:Asap,sans-serif;font-size:.78rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 14px;
}
.lede{font-size:1.15rem;line-height:1.6;color:var(--body)}
.muted{color:var(--muted)}
.small{font-size:.92rem}

/* ─── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Asap,sans-serif;font-size:1rem;font-weight:800;
  padding:14px 26px;border-radius:100px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex-shrink:0}

.btn-wa{background:var(--whatsapp);color:#0A2E18;box-shadow:0 6px 18px -6px rgba(37,211,102,.65)}
.btn-wa:hover{background:var(--whatsapp-dark);color:#fff}

/* El verde de marca (#30937b) sirve de relleno, pero con una etiqueta
   blanca encima se queda en 3.76:1 y a 16px en negrita hacen falta 4.5:1.
   El botón usa el verde oscuro de la misma familia: 5.03:1. */
.btn-solid{background:var(--teal-dark);color:#fff}
.btn-solid:hover{background:var(--teal-press);color:#fff}

.btn-ghost{background:transparent;color:var(--teal-dark);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);background:var(--surface);color:var(--teal-dark)}

.btn-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* ─── Encabezado ──────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(247,246,242,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.header-in{
  max-width:var(--w);margin:0 auto;padding:0 var(--gutter);
  height:var(--header);display:flex;align-items:center;gap:20px;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo img{width:50px;height:50px;object-fit:contain}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:1.32rem;color:var(--teal-dark);letter-spacing:-.02em}
.logo-text span{font-size:.66rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:3px;font-weight:700}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.site-nav a{
  font-size:.94rem;font-weight:700;color:var(--body);text-decoration:none;
  padding:9px 13px;border-radius:var(--radius-s);white-space:nowrap;
}
.site-nav a:hover{background:var(--teal-wash);color:var(--teal-darker)}
.site-nav a[aria-current="page"]{color:var(--teal-darker);background:var(--teal-wash)}
.site-nav a.btn{margin-left:8px;padding:11px 20px;font-size:.94rem}
.site-nav a.btn-solid,
.site-nav a.btn-solid:hover{color:#fff}
.site-nav a.btn-solid:hover{background:var(--teal-press)}

.menu-toggle{
  display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);width:46px;height:46px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--ink);
}
.menu-toggle svg{width:24px;height:24px}
.menu-toggle .ico-close{display:none}
.menu-toggle[aria-expanded="true"] .ico-open{display:none}
.menu-toggle[aria-expanded="true"] .ico-close{display:block}

@media (max-width:1040px){
  .menu-toggle{display:flex}
  .site-nav{
    position:fixed;inset:var(--header) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:2px;background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 22px;box-shadow:var(--shadow-l);margin-left:0;
  }
  .site-nav[hidden]{display:none}
  .site-nav a{padding:14px 12px;font-size:1.05rem;border-radius:var(--radius-s)}
  .site-nav a.btn{margin:10px 0 0;padding:15px 20px;font-size:1rem}
}

/* ─── Portada ─────────────────────────────────────────────
   Foto a todo lo ancho con la tarjeta del mensaje encima.
   --------------------------------------------------------- */
.hero{position:relative}

.hero-foto{
  position:relative;min-height:clamp(430px,56vw,620px);
  display:flex;align-items:center;
  overflow:hidden;
  /* Color de respaldo, tomado del borde izquierdo de la foto. */
  background:linear-gradient(180deg,#083433 0%,#042c28 58%,#001a16 100%);
}
/* Rellena lo que sobra a la izquierda estirando la franja izquierda de la
   propia foto, que es fondo liso. Un degradado plano dejaba una línea
   visible, porque el fondo de la imagen tiene viñeta; y una copia con
   «cover» tomaba los tonos más claros del centro. Estirando el borde, el
   color continúa exactamente donde empieza la imagen. */
.hero-foto::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/portada.webp") left center / 700% 100% no-repeat;
  filter:blur(6px);
}
.hero-foto>img{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  /* «contain» en vez de «cover»: la mascota se ve entera, sin recortes. */
  object-fit:contain;object-position:right center;
}
/* Velo para que la tarjeta no compita con la foto. */
.hero-foto::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,32,30,.22) 0%,rgba(10,32,30,.06) 50%,transparent 78%);
}
.hero-foto>.wrap{position:relative;z-index:2;width:100%}

.hero-card{
  background:var(--surface);border-radius:var(--radius);
  padding:clamp(28px,3.6vw,44px) clamp(26px,3.4vw,46px);
  max-width:620px;box-shadow:0 18px 50px -18px rgba(12,36,34,.5);
}
.hero-card .eyebrow{margin-bottom:12px}
.hero-card h1 .accent{color:var(--teal)}
.hero-card .lede{margin-top:16px;max-width:46ch}
.hero-card .btn-row{margin-top:26px}

/* Aviso mientras no haya foto real. Se borra al poner la imagen. */
.hero-sinfoto{
  position:absolute;right:26px;bottom:22px;z-index:2;max-width:270px;
  color:rgba(255,255,255,.82);font-size:.82rem;line-height:1.45;text-align:right;
}
.hero-sinfoto b{display:block;color:#fff;font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;
  font-size:1.05rem;margin-bottom:4px}

@media (max-width:860px){
  .hero-foto{
    min-height:0;flex-direction:column;align-items:stretch;
    padding-top:clamp(190px,44vw,290px);
  }
  .hero-foto::after{background:linear-gradient(180deg,rgba(10,32,30,.18) 0%,transparent 40%)}
  /* En celular la foto es una banda propia, a su tamaño real. */
  .hero-foto{padding-top:0}
  .hero-foto>img{position:relative;inset:auto;height:auto;width:100%}
  .hero-card{max-width:none;border-radius:var(--radius) var(--radius) 0 0}
  .hero-foto>.wrap{padding-left:0;padding-right:0}
  .hero-card{margin:0 12px;border-radius:var(--radius)}
  .hero-sinfoto{top:22px;bottom:auto;left:22px;right:22px;max-width:none;text-align:left}
}

/* ─── Franja de confianza ─────────────────────────────────── */
.trust{border-block:1px solid var(--line);background:var(--surface)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust-item{background:var(--surface);padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
/* El title reserva siempre el alto de dos renglones, así los subtítulos de
   las cuatro casillas quedan alineados aunque uno de ellos parta en dos. */
.trust-item b{display:flex;align-items:center;justify-content:center;min-height:2em;
  font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:1.7rem;
  color:var(--teal-dark);line-height:1.05;margin-bottom:7px;text-wrap:balance}
.trust-item span{font-size:.9rem;color:var(--muted);font-weight:600;line-height:1.4;display:block}
@media (max-width:760px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item{padding:20px 14px}
  .trust-item b{font-size:1.4rem}
}

/* ─── Secciones ───────────────────────────────────────────── */
.section{padding:clamp(52px,7vw,88px) 0}
.section-alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{margin-bottom:44px;max-width:660px}
.section-head p{margin-top:15px;color:var(--muted);font-size:1.08rem}
.section-head.center{text-align:center}

/* ─── Secciones con fondo decorado ────────────────────────── */
/* Lavado de color + motivos de la clínica. El SVG va en una capa
   aparte para que el contenido siempre quede encima de él. */
.section-deco{
  position:relative; overflow:hidden;
  background:linear-gradient(152deg,#dcefe8 0%,#f2faf6 40%,#e4f2ea 100%);
  border-block:1px solid var(--line);
}
.section-deco::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Nada de "cover": en las secciones altas recortaba los lados, que es
     justo donde van los motivos. Con el ancho fijo al 100% el dibujo se ve
     entero siempre; si la sección es más alta que el dibujo, arriba y abajo
     queda solo el lavado de color, sin costuras de repetición. */
  background-image:url("../img/fondo-clinico.svg");
  background-size:100% auto; background-position:center; background-repeat:no-repeat;
}
.section-deco>.wrap{position:relative}
/* Sobre el lavado de color el texto pierde contraste, así que en estas
   secciones se usan los tonos oscuros de la misma paleta:
   antetítulo 6.3:1 y párrafo 5.6:1 incluso encima de un motivo. */
.section-deco .section-head p:not(.eyebrow){color:var(--body)}
.section-deco .eyebrow{color:var(--teal-darker)}
/* Las tarjetas se despegan del fondo con un poco más de sombra. */
.section-deco .card{box-shadow:0 10px 30px -14px rgba(27,82,68,.30)}

/* Variante celular: centro claro y color hacia los bordes, para que el
   texto y la foto caigan sobre la parte más limpia del fondo. */
.section-deco.deco-celular{
  background:radial-gradient(125% 95% at 46% 42%,#ffffff 0%,#f3fbf8 40%,#ddeeea 100%);
}
.section-deco.deco-celular::before{background-image:url("../img/fondo-celular.svg")}

/* Variante botánica: follaje y polen, para "Quién te atiende". */
.section-deco.deco-botanico{
  background:radial-gradient(120% 100% at 44% 40%,#ffffff 0%,#f5fbf8 42%,#e2f0ea 100%);
}
.section-deco.deco-botanico::before{background-image:url("../img/fondo-botanico.svg")}

/* Variante ruta: la clínica, la casa y el camino entre las dos. */
.section-deco.deco-ruta{
  background:radial-gradient(130% 110% at 50% 38%,#ffffff 0%,#f4fbf9 44%,#dfeff0 100%);
}
.section-deco.deco-ruta::before{background-image:url("../img/fondo-ruta.svg")}

/* Variante agenda: reloj, libreta, calendario, campana y lápiz. */
.section-deco.deco-agenda{
  background:radial-gradient(120% 90% at 50% 34%,#ffffff 0%,#f5fbf9 44%,#e2f0ec 100%);
}
.section-deco.deco-agenda::before{background-image:url("../img/fondo-agenda.svg")}

/* Variante dermatología: corte de piel, folículos, pelos y lupa. */
.section-deco.deco-derma{
  background:radial-gradient(122% 96% at 48% 38%,#ffffff 0%,#f5fbf8 42%,#e3f1ea 100%);
}
.section-deco.deco-derma::before{background-image:url("../img/fondo-derma.svg")}

/* Variante inmunoterapia: viales, jeringa, anticuerpos y dosis. */
.section-deco.deco-inmuno{
  background:radial-gradient(124% 98% at 50% 36%,#ffffff 0%,#f4fafc 42%,#dfeef2 100%);
}
.section-deco.deco-inmuno::before{background-image:url("../img/fondo-inmuno.svg")}

/* Variante acupuntura: agujas, puntos de meridiano y círculo zen. */
.section-deco.deco-acupuntura{
  background:radial-gradient(122% 96% at 48% 38%,#ffffff 0%,#f6fbf9 42%,#e4f1ec 100%);
}
.section-deco.deco-acupuntura::before{background-image:url("../img/fondo-acupuntura.svg")}
@media (prefers-reduced-motion:no-preference){
  .section-deco::before{will-change:auto}
}

/* ─── Tarjetas de servicio ────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:22px}
/* Con cuatro tarjetas el auto-fit deja 3 y 1 huérfana: mejor 2x2. */
.cards.cards-par{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.cards.cards-par{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.section-alt .card{background:var(--ground)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:var(--teal)}
.card-icon{
  width:52px;height:52px;border-radius:14px;background:var(--teal-wash);
  display:flex;align-items:center;justify-content:center;color:var(--teal-dark);margin-bottom:20px;
}
.card-icon svg{width:27px;height:27px}
.card h3{margin-bottom:11px}
.card>p{font-size:.98rem;color:var(--body)}
.card ul:not(.checklist){margin:14px 0 0;padding-left:20px;font-size:.96rem}
.card ul:not(.checklist) li{margin-bottom:6px}
.card ul:not(.checklist) li::marker{color:var(--teal)}
.price{
  font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:2rem;color:var(--teal-dark);
  margin:22px 0 0;line-height:1;font-weight:600;
}
.price small{display:block;font-family:Asap,sans-serif;font-size:.8rem;
  color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.card .btn{margin-top:20px;align-self:flex-start}
.card-foot{margin-top:auto;padding-top:20px}

/* ─── Horario ─────────────────────────────────────────────── */
.hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:760px){.hours-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.section-alt .panel{background:var(--ground)}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.hours-row:last-child{border-bottom:0}
.hours-row span:first-child{font-weight:700;color:var(--ink)}
.hours-row span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.hours-row.closed span:last-child{color:var(--muted);font-style:italic}

.status{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.95rem;
  padding:9px 17px;border-radius:100px;margin-bottom:20px;
}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0}
.status.open{background:var(--oliva-wash);color:var(--oliva-oscuro)}
.status.shut{background:var(--sunk);color:var(--muted)}

/* ─── Aviso / nota ────────────────────────────────────────── */
.note{
  background:var(--teal-wash);border-left:4px solid var(--teal);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:20px 24px;margin-top:26px;
}
.note h4{color:var(--teal-darker);margin-bottom:9px}
.note p{font-size:.97rem}
.note ul{margin:12px 0 0;padding-left:20px;font-size:.97rem}
.note li{margin-bottom:6px}
.note li::marker{color:var(--teal)}

.checklist{list-style:none;margin:18px 0 0;padding:0}
.checklist li{position:relative;padding-left:33px;margin-bottom:14px;font-size:.99rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;
  background:var(--teal-wash);
}
.checklist li::after{
  content:"";position:absolute;left:7px;top:9px;width:7px;height:11px;
  border:solid var(--teal-dark);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}

/* ─── Historia ────────────────────────────────────────────── */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,58px);align-items:center}
@media (max-width:820px){.story{grid-template-columns:1fr}}
.story-photo{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--shadow-l);
  background:linear-gradient(150deg,var(--navy),var(--teal-darker));
  display:flex;align-items:flex-end;padding:24px;color:rgba(255,255,255,.9);
  font-size:.88rem;font-weight:700;line-height:1.5;
}
.story-photo>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
}
/* Para imágenes cuadradas, como la del vial. */
.story-photo.cuadrada{aspect-ratio:1/1}
.story-photo.cuadrada>img{object-position:center}
.quote{
  font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;
  color:var(--ink);font-style:italic;margin:0 0 24px;
}
.byline{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.byline b{display:block;color:var(--ink);font-size:1.02rem}
.byline span{font-size:.9rem;color:var(--muted)}

/* ─── Formularios ─────────────────────────────────────────── */
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:800;font-size:.93rem;color:var(--ink)}
.field .hint{font-size:.85rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-s);
  background:var(--surface);width:100%;transition:border-color .15s ease;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-wash)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.req{color:var(--rojo)}
.form-note{font-size:.88rem;color:var(--muted);margin-top:4px}

/* ─── Ubicación ───────────────────────────────────────────── */
.place{display:grid;grid-template-columns:1fr 1.25fr;gap:26px;align-items:start}
@media (max-width:820px){.place{grid-template-columns:1fr}}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:330px;background:var(--sunk)}
.map-frame iframe{width:100%;height:100%;min-height:330px;border:0;display:block}
.addr{list-style:none;margin:0;padding:0}
.addr li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.addr li:last-child{border-bottom:0}
.addr svg{width:21px;height:21px;color:var(--teal);flex-shrink:0;margin-top:3px}
.addr b{display:block;color:var(--ink);margin-bottom:3px}
.addr a{color:var(--teal-dark);font-weight:700;text-decoration:none}
.addr a:hover{text-decoration:underline}

/* ─── Llamada final ───────────────────────────────────────── */
.cta-band{
  background:linear-gradient(140deg,var(--teal-dark) 0%,var(--teal-darker) 100%);
  color:#fff;border-radius:var(--radius);padding:clamp(38px,6vw,62px) clamp(26px,5vw,54px);
  text-align:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.87);margin:16px auto 0;max-width:52ch;font-size:1.08rem}
.cta-band .btn-row{justify-content:center}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ─── Botón flotante de WhatsApp ──────────────────────────── */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;align-items:center;gap:11px;
  background:var(--whatsapp);color:#0A2E18;font-weight:800;font-size:.97rem;
  padding:14px 22px;border-radius:100px;text-decoration:none;
  box-shadow:0 8px 26px -6px rgba(37,211,102,.7);
  transition:transform .18s ease,background .18s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.02);background:var(--whatsapp-dark);color:#fff}
.wa-float svg{width:25px;height:25px;flex-shrink:0}
@media (max-width:560px){
  .wa-float{padding:15px;right:16px;bottom:16px}
  .wa-float span{display:none}
}

/* ─── Pie ─────────────────────────────────────────────────── */
.site-footer{background:var(--teal-darker);color:rgba(255,255,255,.76);padding:60px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:38px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;gap:32px}}
.site-footer h4{color:#fff;font-family:Asap,sans-serif;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:17px;font-weight:800}
.site-footer a{color:rgba(255,255,255,.76);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:11px;font-size:.95rem}
.footer-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.footer-logo img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:14px;padding:7px}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.16);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;
}

/* ─── Modalidades de atención ─────────────────────────────
   Un servicio puede prestarse en clínica y a domicilio, con
   precios distintos. Cada modalidad es una caja con su propio
   precio y sus propios botones de agendar.
   --------------------------------------------------------- */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.opt{
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 26px;background:var(--surface);
  display:flex;flex-direction:column;
}
.section-alt .opt{background:var(--ground)}
.opt-label{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal-darker);background:var(--teal-wash);
  padding:6px 13px;border-radius:100px;margin-bottom:16px;
}
.opt-label svg{width:15px;height:15px}
.opt .price{margin:0 0 4px}
.opt-note{font-size:.91rem;color:var(--muted);line-height:1.5;margin-top:10px}
.opt-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.opt-actions .btn{width:100%}

/* Google Calendar: acción secundaria, para que WhatsApp siga siendo la principal. */
.btn-cal{background:var(--surface);color:var(--teal-dark);border-color:var(--teal)}
.btn-cal:hover{background:var(--teal-wash);color:var(--teal-darker)}
.section-alt .btn-cal{background:var(--ground)}

.opt-single{max-width:420px}

/* ─── Disponibilidad por bloques de hora ──────────────────
   Selector de día + rejilla de bloques de una hora. Cada
   bloque tiene un estado: libre, ocupado, pasado o sin datos.
   --------------------------------------------------------- */
.agenda{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.section-alt .agenda{background:var(--ground)}

/* ─── Calendario ──────────────────────────────────────────── */
.cal{margin-bottom:24px}
.cal-barra{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.cal-barra strong{
  font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:1.15rem;font-weight:600;color:var(--ink);
  text-align:center;flex:1;
}
.cal-nav{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,background .15s ease;
}
.section-alt .cal-nav{background:var(--ground)}
.cal-nav svg{width:19px;height:19px}
.cal-nav:hover:not(:disabled){border-color:var(--teal);color:var(--teal-dark)}
.cal-nav:disabled{opacity:.35;cursor:not-allowed}

.cal-semana,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-semana{margin-bottom:7px}
.cal-semana span{
  text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:var(--muted);padding:5px 0;
}
.cal-dia{
  aspect-ratio:1/1;border-radius:var(--radius-s);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:inherit;
  font-size:.97rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.section-alt .cal-dia{background:var(--ground)}
.cal-dia:hover:not(:disabled){border-color:var(--teal);background:var(--teal-wash);transform:translateY(-1px)}
.cal-dia.elegido{background:var(--teal);border-color:var(--teal);color:#fff}
.cal-dia.es-hoy:not(.elegido){box-shadow:inset 0 0 0 1.5px var(--teal)}
.cal-dia:disabled{cursor:not-allowed;font-weight:400;color:var(--muted);opacity:.45}
.cal-dia.cerrado{background:transparent;border-style:dashed}
.cal-dia.no-disponible{background:var(--sunk);border-color:transparent}

@media (max-width:420px){
  .cal-dias,.cal-semana{gap:3px}
  .cal-dia{font-size:.88rem}
}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.slot{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px 16px;border-radius:var(--radius-s);border:1.5px solid var(--line);
  background:var(--surface);font-family:inherit;text-align:left;
  color:var(--body);text-decoration:none;line-height:1.3;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.section-alt .slot{background:var(--ground)}
.slot .hora{font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:1.12rem;color:var(--ink);font-variant-numeric:tabular-nums}
.slot .estado{font-size:.79rem;font-weight:700;letter-spacing:.02em}

.slot.libre{border-color:var(--teal)}
.slot.libre .estado{color:var(--teal-dark)}
.slot.libre:hover{background:var(--teal-wash);transform:translateY(-2px)}

.slot.consultar .estado{color:var(--muted)}
.slot.consultar:hover{border-color:var(--teal);transform:translateY(-2px)}

.slot.ocupado,.slot.pasado{background:var(--sunk);border-style:dashed;cursor:not-allowed;opacity:.72}
.slot.ocupado .hora,.slot.pasado .hora{color:var(--muted);text-decoration:line-through}
.slot.ocupado .estado,.slot.pasado .estado{color:var(--muted)}

.agenda-cerrado{padding:26px;text-align:center;color:var(--muted);background:var(--sunk);border-radius:var(--radius-s)}

.leyenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.leyenda span{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--muted)}
.leyenda i{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--line);flex-shrink:0}
.leyenda .l-libre{border-color:var(--teal);background:var(--teal-wash)}
.leyenda .l-ocupado{background:var(--sunk);border-style:dashed}

.agenda-aviso{
  margin-top:20px;padding:14px 17px;border-radius:var(--radius-s);
  background:var(--teal-wash);font-size:.89rem;line-height:1.5;color:var(--body);
}
.agenda-aviso.error{background:var(--rojo-wash);color:var(--rojo-oscuro)}

@media (max-width:520px){
  .slots{grid-template-columns:repeat(2,1fr)}
  .agenda{padding:22px 18px}
}

/* ─── Ventana de reserva ──────────────────────────────────
   Se abre al tocar un bloque de hora libre.
   --------------------------------------------------------- */
.reserva{
  border:0;padding:0;border-radius:var(--radius);background:var(--surface);
  color:var(--body);max-width:560px;width:calc(100% - 32px);
  box-shadow:0 24px 70px -20px rgba(20,48,45,.45);
}
.reserva::backdrop{background:rgba(18,48,45,.55);backdrop-filter:blur(3px)}

.reserva-head{
  padding:24px 26px 20px;border-bottom:1px solid var(--line);
  display:flex;gap:16px;align-items:flex-start;
}
.reserva-head div{flex:1}
.reserva-head h3{margin-bottom:6px}
.reserva-cuando{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;
  color:var(--teal-darker);background:var(--teal-wash);padding:7px 14px;border-radius:100px;
}
.reserva-cerrar{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--ground);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
}
.reserva-cerrar:hover{background:var(--sunk)}

.reserva-cuerpo{padding:24px 26px;max-height:62vh;overflow-y:auto}
.reserva-pie{padding:18px 26px 24px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
/* Una clase con display gana al atributo hidden: hay que decirlo explícito. */
.reserva-pie[hidden],
.reserva-ok[hidden],
.form[hidden]{display:none}
.reserva-pie .btn{flex:1;min-width:140px}

.reserva-error{
  background:var(--rojo-wash);color:var(--rojo-oscuro);border-radius:var(--radius-s);
  padding:13px 16px;font-size:.92rem;margin-bottom:18px;
}
.reserva-error[hidden]{display:none}

/* Confirmación */
.reserva-ok{text-align:center;padding:16px 4px 8px}
.reserva-ok .tick{
  width:64px;height:64px;border-radius:50%;background:var(--teal-wash);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.reserva-ok .tick svg{width:32px;height:32px;color:var(--teal-dark)}
.reserva-ok h3{margin-bottom:12px}
.reserva-ok p{color:var(--body)}
.reserva-ok .resumen{
  margin-top:22px;padding:16px 18px;background:var(--ground);border-radius:var(--radius-s);
  text-align:left;font-size:.93rem;
}
.reserva-ok .resumen b{color:var(--ink)}

.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

@media (max-width:560px){
  .reserva{max-width:none;width:100%;margin:0;border-radius:var(--radius) var(--radius) 0 0;
    position:fixed;bottom:0;left:0;right:0;top:auto;max-height:92vh}
  .reserva-cuerpo{max-height:56vh}
}

/* ─── Tarjetas de servicio: lista, acciones y aviso ────────── */
.card ul.card-lista{margin-top:16px;padding-left:0}
.card-lista li{padding-left:29px;margin-bottom:10px;font-size:.95rem}
.card-lista li::before{width:19px;height:19px;top:2px}
.card-lista li::after{left:6px;top:7px;width:6px;height:10px;border-width:0 2.2px 2.2px 0}

.card-acciones{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.card-acciones .btn{width:100%;padding:12px 18px;font-size:.94rem}

.card-domicilio{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.45;color:var(--muted);
}
.card-domicilio a{color:var(--teal-dark);font-weight:700}

/* ─── Desglose del precio a domicilio ─────────────────────── */
.formula{display:grid;gap:14px;margin-top:22px}
.formula-parte{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:18px 20px;
}
.section-alt .formula-parte{background:var(--ground)}
.formula-parte>b{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--teal-wash);color:var(--teal-darker);
  display:flex;align-items:center;justify-content:center;
  font-size:.92rem;font-weight:800;
}
.formula-parte h4{margin-bottom:5px}
.formula-parte p{font-size:.94rem;color:var(--muted);line-height:1.5}
.formula-parte ul{margin:10px 0 0;padding-left:19px;font-size:.94rem}
.formula-parte li{margin-bottom:5px}
.formula-parte li::marker{color:var(--teal)}

.tarifas{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem}
.tarifas th,.tarifas td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.tarifas th{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:800;
}
.tarifas td:last-child,.tarifas th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.tarifas tr:last-child td{border-bottom:0}
.tarifas .pendiente{color:var(--muted);font-style:italic}

.ejemplo{
  margin-top:18px;padding:16px 19px;border-radius:var(--radius-s);
  background:var(--teal-wash);font-size:.95rem;line-height:1.55;
}
.ejemplo b{color:var(--teal-darker)}

.promesa{
  margin-top:18px;display:flex;gap:12px;align-items:flex-start;
  font-size:.96rem;line-height:1.5;
}
.promesa svg{width:21px;height:21px;color:var(--teal);flex-shrink:0;margin-top:2px}
.promesa b{color:var(--ink)}

/* ─── Calculadora de traslado ─────────────────────────────── */
.calc{
  background:var(--teal-wash);border-radius:var(--radius-s);
  padding:20px 22px;margin-top:16px;
}
.calc-label{display:block;font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:6px}
.calc-ayuda{font-size:.88rem;color:var(--muted);line-height:1.5;margin-bottom:13px}
.calc-ayuda a{color:var(--teal-darker);font-weight:700}
.calc-fila{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.calc-campo{position:relative;flex:1;min-width:150px}
.calc-campo input{
  font-family:inherit;font-size:1.05rem;font-weight:700;color:var(--ink);
  padding:13px 52px 13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-s);
  background:var(--surface);width:100%;
}
.calc-campo input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(43,122,114,.18)}
.calc-campo span{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:.9rem;font-weight:700;color:var(--muted);pointer-events:none;
}

.calc-out{margin-top:16px;font-size:.95rem;line-height:1.55}
.calc-out[hidden]{display:none}
.calc-op{color:var(--muted);font-size:.9rem}
.calc-op b{color:var(--ink);font-variant-numeric:tabular-nums}
.calc-total{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  margin-top:11px;padding-top:13px;border-top:1px solid rgba(43,122,114,.28);
}
.calc-total span{font-size:.8rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-dark)}
.calc-total b{font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:2rem;line-height:1;color:var(--teal-darker)}
.calc-cotiza{
  margin-top:13px;padding:13px 16px;background:var(--surface);
  border-radius:var(--radius-s);border-left:3px solid var(--teal);
  font-size:.94rem;color:var(--body);
}
.calc-nota{margin-top:12px;font-size:.87rem;color:var(--muted);line-height:1.5}

.escalones{width:100%;border-collapse:collapse;margin-top:16px;font-size:.92rem}
.escalones th,.escalones td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.escalones th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.escalones td:last-child,.escalones th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.escalones tr:last-child td{border-bottom:0}
.escalones tr.activo td{background:var(--teal-wash);color:var(--teal-darker)}

/* Desglose del estimado dentro de la calculadora */
.calc-desglose{display:flex;flex-direction:column;gap:9px}
.calc-desglose>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.calc-desglose span{font-size:.93rem;color:var(--body)}
.calc-desglose b{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink)}
.calc-desglose .calc-suma{
  margin-top:5px;padding-top:12px;border-top:1px solid rgba(43,122,114,.3);
}
.calc-desglose .calc-suma span{font-size:.8rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-dark)}
.calc-desglose .calc-suma b{font-family:"Encode Sans",Arial,sans-serif;font-stretch:condensed;font-size:1.85rem;
  line-height:1;color:var(--teal-darker)}
.calc select{
  font-family:inherit;font-size:1rem;color:var(--ink);width:100%;
  padding:12px 15px;border:1.5px solid var(--line);border-radius:var(--radius-s);
  background:var(--surface);
}
.calc select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(43,122,114,.18)}

/* Respaldo cuando el navegador bloquea la ventana de WhatsApp */
.wa-manual{
  margin-top:18px;padding:18px 20px;border-radius:var(--radius-s);
  background:var(--teal-wash);border-left:3px solid var(--whatsapp);
}
.wa-manual p{font-size:.93rem;color:var(--body);margin-bottom:13px}

/* ─── Fachada de la clínica ───────────────────────────────── */
.fachada{margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--sunk);box-shadow:var(--shadow)}
.fachada img{width:100%;height:auto;display:block;aspect-ratio:1592/988;object-fit:cover}
.fachada figcaption{
  padding:14px 18px;font-size:.89rem;line-height:1.5;color:var(--muted);
  background:var(--surface);border-top:1px solid var(--line);
}
.section .fachada figcaption{background:var(--surface)}