/**
 * ============================================================================
 * COMPONENTES COMPARTIDOS — ConsultasADomicilio.es
 * ============================================================================
 * Única excepción deliberada al patrón "página autocontenida" que sigue el
 * resto del sitio (ver CLAUDE.md). Estos átomos visuales (botones, badges,
 * fact-chip, selector de idioma, alcance sí/no) estaban duplicados
 * byte-a-byte en 8+ archivos CSS distintos; un cambio de diseño obligaba a
 * tocar cada uno por separado. Este archivo se carga ANTES del CSS propio
 * de cada página (mismo orden que base.css → index.css), así que cualquier
 * página puede seguir sobreescribiendo un caso puntual si hace falta.
 *
 * Depende de las variables de :root (colores, radios, sombras, tipografías)
 * que cada página sigue definiendo en su propio CSS — este archivo no
 * define :root a propósito, para no tocar ese patrón sin decidirlo aparte.
 * ============================================================================
 */

/* ===== BOTONES ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;
  padding:15px 24px;border-radius:100px;border:none;
  font-size:0.96rem;font-weight:600;text-decoration:none;line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn > svg{width:18px;height:18px;flex:0 0 18px;}
.btn-primary{background:var(--terracota);color:var(--blanco);box-shadow:0 8px 20px rgba(200,103,46,0.32);}
.btn-primary:hover{background:var(--terracota-2);transform:translateY(-2px);}
.btn-whatsapp{background:#1F7A5C;color:var(--blanco);box-shadow:0 8px 20px rgba(31,122,92,0.3);}
.btn-whatsapp:hover{background:#186347;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--noche);border:1.5px solid var(--border-strong);}
.btn-outline:hover{border-color:var(--noche);background:rgba(18,49,58,0.04);}
.btn-outline.on-dark{color:var(--blanco);border-color:rgba(245,243,238,0.4);}
.btn-outline.on-dark:hover{border-color:var(--blanco);background:rgba(245,243,238,0.08);}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:0.86rem;gap:7px;}
.btn-sm > svg{width:15px;height:15px;flex:0 0 15px;}
@media(max-width:480px){ .btn{white-space:normal;text-align:center;line-height:1.3;} }

/* ===== SELECTOR DE IDIOMA =====
   Dos variantes según la página: <button> (toggle JS sobre una sola URL,
   páginas bilingües autocontenidas) o <a> (URLs reales por idioma, las
   landing pages de localidad). Mismo aspecto visual en ambos casos. */
.lang-switch{display:flex;align-items:center;background:rgba(18,49,58,0.07);border-radius:100px;padding:3px;gap:2px;flex-shrink:0;}
.lang-switch a,
.lang-switch button{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  border:none;background:transparent;padding:8px 14px;border-radius:100px;
  font-family:var(--ff-mono);font-size:0.78rem;font-weight:600;color:var(--text-soft);
  min-height:40px;cursor:pointer;transition:background .15s, color .15s;
}
.lang-switch a.active,
.lang-switch button.active{background:var(--noche);color:var(--blanco);}

/* ===== FACT-CHIP (pills informativas: precio, idioma, tiempo de llegada) ===== */
.fact-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blanco);border:1px solid var(--border);border-radius:100px;
  padding:8px 16px;font-size:0.86rem;font-weight:600;color:var(--noche);
}
.fact-chip svg{width:15px;height:15px;stroke:var(--terracota);flex-shrink:0;}
.fact-chip .amt{font-family:var(--ff-mono);}

/* ===== BADGES ===== */
/* Pastilla de estado corta ("Nuevo") — no confundir con .fact-chip, que es
   informativa, no de estado. */
.coming-soon-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--noche);color:var(--espuma);
  border-radius:100px;padding:6px 14px;
  font-family:var(--ff-mono);font-size:0.72rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;
}
/* Bloque de estadística destacada ("−20% · 2ª visita") — deliberadamente
   distinto del badge de estado: comunica un dato, no un flag. */
.followup-badge{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--noche);color:var(--blanco);border-radius:var(--radius-m);
  padding:14px 22px;text-align:center;min-width:110px;
}
.followup-badge-num{font-family:var(--ff-mono);font-size:1.5rem;font-weight:700;color:var(--blanco);line-height:1;}
.followup-badge-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:rgba(245,243,238,0.7);margin-top:4px;}
@media(max-width:600px){ .followup-badge{width:100%;flex-direction:row;gap:8px;padding:12px;} }

/* ===== ALCANCE DEL SERVICIO (Sí atendemos / No ofrecemos) ===== */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:780px){ .fit-grid{grid-template-columns:1fr;} }
.fit-col{border-radius:var(--radius-l);padding:32px 30px;}
.fit-col.yes{background:var(--blanco);border:1px solid var(--border);}
.fit-col.no{background:var(--noche);color:var(--espuma);}
.fit-col h3{font-size:1.15rem;margin-bottom:20px;}
.fit-col.no h3{color:var(--blanco);}
.fit-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);}
.fit-col.no .fit-item{border-bottom-color:rgba(245,243,238,0.14);}
.fit-item:last-child{border-bottom:none;}
.fit-item svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;}
.fit-col.yes .fit-item svg{stroke:var(--salvia);}
.fit-col.no .fit-item svg{stroke:#E39B93;}
.fit-item span{font-size:0.95rem;color:var(--text-soft);}
.fit-col.no .fit-item span{color:rgba(245,243,238,0.82);}
.fit-item b{color:var(--noche);font-weight:600;}
.fit-col.no .fit-item b{color:var(--blanco);}
/* Ítem crítico (emergencias vitales): más peso visual que el resto de
   "No ofrecemos" — no es una limitación del servicio, es una instrucción
   de seguridad, así que se destaca en vez de mezclarse como una viñeta más. */
.fit-item.critical{margin-top:8px;padding:14px 16px;border-radius:var(--radius-m);background:rgba(227,90,90,0.25);border:1px solid rgba(227,90,90,0.55);border-bottom:none;}
.fit-item.critical svg{stroke:#F5B8B0;width:22px;height:22px;}
.fit-item.critical span{color:var(--blanco);}
.fit-item.critical b{color:var(--blanco);}
.fit-item.critical a.tel112{color:var(--blanco);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.fit-item.critical a.tel112:hover{color:#F5B8B0;}

/* ===== CONSENTIMIENTO DE COOKIES (banner + panel de preferencias) =====
   Mismo marcado/ids en toda página que cargue js/lib/consent.js — ver el
   comentario de cabecera de ese archivo. Antes solo vivía en base.css
   (index.html / politica-de-cookies.html); se comparte para que el
   rollout de GA4/Consent Mode v2 a las páginas nuevas no lo duplique. */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:900;
  max-width:640px; margin:0 auto;
  background:var(--blanco); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-l);
  box-shadow:var(--shadow-m);
  padding:24px 26px; padding-bottom:calc(24px + env(safe-area-inset-bottom));
  display:none;
  transform:translateY(12px); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.cookie-banner.visible{display:block;}
.cookie-banner.in{transform:translateY(0); opacity:1;}
.cookie-banner h2{font-size:1.05rem; margin-bottom:10px;}
.cookie-banner p{color:var(--text-soft); font-size:0.92rem; line-height:1.6;}
.cookie-banner .cookie-link{color:var(--noche); text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.cookie-actions .btn{flex:1 1 auto; min-width:140px;}
.btn-dark{background:var(--noche); color:var(--blanco);}
.btn-dark:hover{background:var(--noche-2); transform:translateY(-2px);}
@media(max-width:600px){
  .cookie-banner{left:10px; right:10px; bottom:10px; padding:20px 20px; padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .cookie-actions{flex-direction:column;}
  .cookie-actions .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner, .cookie-modal-overlay, .cookie-modal{transition:none !important;}
}
.cookie-modal-overlay{
  position:fixed; inset:0; z-index:950;
  background:rgba(11,34,41,0.55);
  display:none; align-items:center; justify-content:center;
  padding:20px; padding-top:calc(20px + env(safe-area-inset-top)); padding-bottom:calc(20px + env(safe-area-inset-bottom));
  opacity:0; transition:opacity .25s ease;
}
.cookie-modal-overlay.visible{display:flex;}
.cookie-modal-overlay.in{opacity:1;}
.cookie-modal{
  background:var(--blanco); border-radius:var(--radius-l); box-shadow:var(--shadow-m);
  width:100%; max-width:560px; max-height:min(88vh,720px);
  display:flex; flex-direction:column;
  transform:translateY(14px); transition:transform .25s ease;
}
.cookie-modal-overlay.in .cookie-modal{transform:translateY(0);}
.cookie-modal-head{padding:24px 26px 4px; flex:0 0 auto; position:relative;}
.cookie-modal-head h2{font-size:1.2rem; padding-right:34px;}
.cookie-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%; border:none;
  background:transparent; color:var(--text-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.cookie-modal-close svg{width:18px; height:18px;}
.cookie-modal-close:hover{background:rgba(18,49,58,0.07); color:var(--noche);}
.cookie-modal-body{padding:14px 26px 6px; overflow-y:auto; flex:1 1 auto;}
.cookie-modal-foot{padding:18px 26px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); flex:0 0 auto;}
.cookie-category{padding:16px 0; border-bottom:1px solid var(--border);}
.cookie-category:last-child{border-bottom:none;}
.cookie-category-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.cookie-category-head h3{font-size:0.98rem; font-family:var(--ff-body); font-weight:700; color:var(--noche);}
.cookie-category p{color:var(--text-soft); font-size:0.86rem; margin-top:6px; line-height:1.6;}
/* Switch accesible */
.cookie-switch{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
  width:46px; height:26px; border-radius:100px; border:none; padding:0;
  background:var(--border-strong); transition:background .18s ease; cursor:pointer;
}
.cookie-switch::before{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--blanco); box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform .18s ease;
}
.cookie-switch[aria-checked="true"]{background:var(--salvia);}
.cookie-switch[aria-checked="true"]::before{transform:translateX(20px);}
.cookie-switch:disabled{opacity:0.7; cursor:not-allowed;}
.cookie-switch:disabled::before{background:var(--espuma);}
.cookie-actions-modal{display:flex; flex-wrap:wrap; gap:10px;}
.cookie-actions-modal .btn{flex:1 1 auto; min-width:120px;}
@media(max-width:520px){
  .cookie-actions-modal{flex-direction:column;}
  .cookie-actions-modal .btn{width:100%;}
  .cookie-modal{max-height:92vh;}
}
.footer-cookie-settings-btn{
  background:none; border:none; padding:6px 0; margin-top:6px;
  font-size:0.86rem; font-weight:600; color:rgba(245,243,238,0.75);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  min-height:44px; line-height:32px; display:inline-block; font-family:inherit;
}
.footer-cookie-settings-btn:hover{color:var(--blanco);}
/* Usadas solo dentro del panel de preferencias (enlace a política de
   cookies bajo los botones de acción). */
.mt-14{margin-top:14px;}
.text-sm{font-size:0.82rem;}

/* ============================================================================
   RESEÑAS DE GOOGLE — sección "espectacular" (home + landings de Ads) y
   badge chico (páginas de zona). Lee de public.reviews vía js/lib/reviews.js.
   ============================================================================ */
.reviews-section{
  background:linear-gradient(180deg, var(--salvia-soft), var(--blanco) 78%);
  border-radius:var(--radius-l);
  padding:56px 0; margin:0 0 56px;
}
.reviews-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.reviews-head .eyebrow{justify-content:center;}
.reviews-head h2{font-size:clamp(1.5rem,3.2vw,2rem); margin-top:10px;}
.reviews-rating-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:14px 0 6px; flex-wrap:wrap;
}
.reviews-rating-row .g-icon{width:22px; height:22px; flex-shrink:0;}
.reviews-stars{color:#F5A623; font-size:1.15rem; letter-spacing:1px;}
.reviews-rating-row .reviews-rating-label{font-weight:600; color:var(--noche); font-size:0.98rem;}

.reviews-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  align-items:center; max-width:1080px; margin:0 auto;
}
@media(max-width:900px){ .reviews-grid{grid-template-columns:1fr; max-width:520px;} }

.review-card{
  background:var(--blanco); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:30px 26px 26px; box-shadow:var(--shadow-s); position:relative;
  display:flex; flex-direction:column; gap:14px;
}
.review-card--featured{
  box-shadow:var(--shadow-m); transform:scale(1.06); z-index:1;
  border-color:var(--terracota-soft);
}
@media(max-width:900px){
  .review-card--featured{transform:none; order:-1;}
}
.review-card-quote{
  position:absolute; top:14px; right:20px; font-family:var(--ff-display);
  font-size:3.2rem; line-height:1; color:var(--salvia-soft); user-select:none; z-index:0;
}
.review-stars{color:#F5A623; font-size:0.95rem; letter-spacing:1px;}
.review-text{color:var(--text); font-size:0.95rem; line-height:1.6; position:relative; z-index:1;}
.review-text-note{display:block; margin-top:8px; font-size:0.78rem; color:var(--text-faint); font-style:italic;}
.review-author{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px;}
.review-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--noche-2); color:var(--blanco); font-family:var(--ff-display);
  font-weight:600; font-size:1.05rem;
}
.review-author-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.review-name{font-weight:600; font-size:0.9rem; color:var(--noche); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.review-google-badge{display:inline-flex; align-items:center; gap:5px; font-size:0.76rem; color:var(--text-faint);}
.review-google-badge svg{width:13px; height:13px; flex-shrink:0;}

.reviews-cta{
  display:flex; justify-content:center; margin-top:36px;
}
.reviews-cta a{
  font-size:0.86rem; font-weight:600; color:var(--terracota-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.reviews-cta a:hover{border-color:var(--terracota-2);}

/* Badge chico para páginas de zona — no repite las tarjetas completas,
   solo enlaza a la sección grande del home. */
.reviews-badge-link{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  background:var(--blanco); border:1px solid var(--border); border-radius:100px;
  font-size:0.85rem; color:var(--text-soft); text-decoration:none; margin-top:14px;
}
.reviews-badge-link .reviews-stars{font-size:0.85rem;}
.reviews-badge-link:hover{border-color:var(--terracota);}