/* ============================================================
   HABITALE COSOCASA — Hoja de estilos principal
   Identidad: blanco cálido + morado corporativo (#873276)
   Organización:
     1. Tokens y reset
     2. Utilidades y layout
     3. Cabecera y navegación
     4. Botones y elementos comunes
     5. Portada (hero, confianza, tarjetas, comparador, pasos…)
     6. Formulario multipaso
     7. Páginas interiores
     8. Pie de página
     9. Banner y modal de cookies
    10. Elementos flotantes (CTA móvil, WhatsApp)
    11. Responsive y accesibilidad
   ============================================================ */

/* ---------- 1. Tokens y reset ---------- */
:root{
  /* Colores corporativos */
  --morado:        #873276;
  --morado-oscuro: #763573;
  --morado-fondo:  #5A214F; /* solo acentos pequeños, nunca superficies grandes */
  --morado-claro:  #E7BAD3;
  --morado-050:    #F7EDF3;
  --morado-100:    #F3E3EE;

  /* Neutros cálidos */
  --tinta:      #3A3340;  /* gris oscuro, no negro absoluto */
  --tinta-suave:#6E6675;
  --fondo:      #FFFFFF;
  --fondo-calido:#FDFBFA;
  --linea:      #EFE7ED;

  /* Formas y sombras */
  --radio:    18px;
  --radio-s:  12px;
  --sombra:   0 10px 30px rgba(90,33,79,.08);
  --sombra-s: 0 4px 14px rgba(90,33,79,.07);

  /* Tipografía */
  --fuente: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ancho: 1180px;
  --transicion: .25s ease;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
}

body{
  margin:0;
  font-family:var(--fuente);
  color:var(--tinta);
  background:var(--fondo);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--morado); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--morado-oscuro); }
h1,h2,h3,h4{ line-height:1.22; color:var(--tinta); margin:0 0 .6em; font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 4.6vw, 3.1rem); }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.3rem); }
h3{ font-size:1.22rem; font-weight:700; }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.2em; }
li{ margin-bottom:.35em; }
strong{ font-weight:700; }

/* Foco visible (accesibilidad teclado) */
:focus-visible{
  outline:3px solid var(--morado);
  outline-offset:2px;
  border-radius:4px;
}

/* Salto al contenido */
.saltar-contenido{
  position:absolute; left:-9999px; top:0;
  background:var(--morado); color:#fff; padding:.7em 1.2em; z-index:300; border-radius:0 0 12px 0;
}
.saltar-contenido:focus{ left:0; color:#fff; }

/* ---------- 2. Utilidades y layout ---------- */
.contenedor{ width:min(var(--ancho), 100% - 2.5rem); margin-inline:auto; }
.seccion{ padding:clamp(3.2rem, 7vw, 5.5rem) 0; }
.seccion--calida{ background:var(--fondo-calido); }
.seccion--tinta{ background:var(--morado-050); }
.cabecera-seccion{ max-width:46rem; margin-bottom:2.4rem; }
.cabecera-seccion--centro{ margin-inline:auto; text-align:center; }
.etiqueta{
  display:inline-block;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--morado); background:var(--morado-100);
  padding:.45em 1em; border-radius:999px; margin-bottom:1.1rem;
}
.subtitulo{ color:var(--tinta-suave); font-size:1.12rem; }
.rejilla{ display:grid; gap:1.4rem; }
.rejilla-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rejilla-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rejilla-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ---------- 3. Cabecera y navegación ---------- */
.cabecera{
  position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{
  display:flex; align-items:center; gap:1.2rem;
  padding:.7rem 0;
}
.cabecera__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex-shrink:0; text-decoration:none; }
.cabecera__marca{ color:var(--morado); font-weight:800; font-size:.72rem; letter-spacing:.32em; line-height:1; padding-left:2px; }
.cabecera__logo img{ height:42px; width:auto; }
.navegacion{ margin-left:auto; }
.navegacion__lista{ display:flex; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.navegacion__lista > li{ position:relative; margin:0; }
.navegacion__lista a,
.navegacion__lista .desplegable__boton{
  display:block; padding:.62em .8em; border-radius:10px;
  color:var(--tinta); text-decoration:none; font-weight:600; font-size:.98rem;
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.navegacion__lista a:hover,
.navegacion__lista .desplegable__boton:hover{ background:var(--morado-050); color:var(--morado-oscuro); }
.desplegable__boton::after{ content:""; display:inline-block; margin-left:.45em; border:.34em solid transparent; border-top-color:currentColor; transform:translateY(.18em); }
.desplegable__menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:290px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-s);
  box-shadow:var(--sombra); padding:.5rem; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:var(--transicion);
}
.desplegable:hover .desplegable__menu,
.desplegable:focus-within .desplegable__menu{ opacity:1; visibility:visible; transform:none; }
.desplegable__menu li{ margin:0; }
.desplegable__menu a{ font-weight:500; font-size:.95rem; white-space:nowrap; }

.cabecera__telefono{
  display:flex; align-items:center; gap:.5em;
  font-weight:700; color:var(--morado-oscuro); text-decoration:none; white-space:nowrap;
}
.cabecera__telefono:hover{ color:var(--morado); }
.cabecera__cta{ white-space:nowrap; }

/* Botón hamburguesa (solo móvil) */
.boton-menu{
  display:none; margin-left:auto;
  width:46px; height:46px; border:1px solid var(--linea); border-radius:12px;
  background:#fff; cursor:pointer; padding:0;
}
.boton-menu span, .boton-menu span::before, .boton-menu span::after{
  content:""; display:block; width:20px; height:2px; background:var(--tinta);
  margin:0 auto; position:relative; transition:var(--transicion);
}
.boton-menu span::before{ position:absolute; top:-6px; }
.boton-menu span::after{ position:absolute; top:6px; }
body.menu-abierto .boton-menu span{ background:transparent; }
body.menu-abierto .boton-menu span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-abierto .boton-menu span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Panel móvil */
.panel-movil{
  display:none;
  position:fixed; inset:64px 0 0 0; z-index:110;
  background:#fff; padding:1.4rem 1.25rem 6rem; overflow-y:auto;
}
body.menu-abierto .panel-movil{ display:block; }
body.menu-abierto{ overflow:hidden; }
.panel-movil a{ display:block; padding:.85em .4em; font-size:1.1rem; font-weight:600; color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--linea); }
.panel-movil a:hover{ color:var(--morado); }
.panel-movil .panel-movil__grupo{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-suave); margin:1.2rem 0 .2rem; }
.panel-movil__contacto{ display:flex; gap:.8rem; margin-top:1.6rem; }

/* ---------- 4. Botones y elementos comunes ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95em 1.7em; border-radius:999px;
  font-weight:700; font-size:1.02rem; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:var(--transicion); font-family:inherit; line-height:1.2;
}
.boton--primario{ background:var(--morado); color:#fff; box-shadow:0 6px 18px rgba(135,50,118,.28); }
.boton--primario:hover{ background:var(--morado-oscuro); color:#fff; transform:translateY(-1px); }
.boton--secundario{ background:#fff; color:var(--morado-oscuro); border-color:var(--morado-claro); }
.boton--secundario:hover{ border-color:var(--morado); color:var(--morado); background:var(--morado-050); }
.boton--grande{ padding:1.05em 2.1em; font-size:1.08rem; }
.boton--completo{ width:100%; }
.boton svg{ flex-shrink:0; }

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.7rem; box-shadow:var(--sombra-s);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta--enlace{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.tarjeta--enlace:hover{ transform:translateY(-4px); box-shadow:var(--sombra); color:inherit; }
.tarjeta__icono{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:var(--morado-100); color:var(--morado); margin-bottom:1rem;
}
.tarjeta__enlace{ margin-top:auto; font-weight:700; color:var(--morado); }
.tarjeta__enlace::after{ content:" →"; }

.lista-check{ list-style:none; padding:0; margin:0; }
.lista-check li{ padding-left:1.9em; position:relative; margin-bottom:.55em; }
.lista-check li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:1.15em; height:1.15em; border-radius:50%;
  background:var(--morado-100) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23873276" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/62% no-repeat;
}

.migas{ list-style:none; display:flex; flex-wrap:wrap; gap:.4em; padding:0; margin:0 0 1.6rem; font-size:.9rem; color:var(--tinta-suave); }
.migas li{ margin:0; display:flex; gap:.4em; align-items:center; }
.migas li:not(:last-child)::after{ content:"›"; color:var(--morado-claro); }
.migas a{ color:var(--tinta-suave); }

.acordeon{ border:1px solid var(--linea); border-radius:var(--radio-s); background:#fff; margin-bottom:.8rem; overflow:hidden; }
.acordeon__pregunta{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 1.25rem; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; font-size:1.03rem; font-weight:700; color:var(--tinta);
}
.acordeon__pregunta::after{
  content:""; flex-shrink:0; width:10px; height:10px;
  border-right:2px solid var(--morado); border-bottom:2px solid var(--morado);
  transform:rotate(45deg); transition:var(--transicion); margin-bottom:4px;
}
.acordeon__pregunta[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-bottom:-2px; }
.acordeon__respuesta{ padding:0 1.25rem; overflow:hidden; max-height:0; transition:max-height .3s ease; }
.acordeon__respuesta > div{ padding-bottom:1.15rem; color:var(--tinta-suave); }

/* ---------- 5. Portada ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--morado-100), transparent 60%),
    radial-gradient(800px 420px at -10% 110%, var(--morado-050), transparent 55%),
    var(--fondo-calido);
  padding:clamp(2.6rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  overflow:hidden;
}
.hero__rejilla{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.hero h1{ margin-bottom:1rem; }
.hero__texto{ font-size:1.15rem; color:var(--tinta-suave); max-width:34rem; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.7rem 0 1.9rem; }
.hero__puntos{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; list-style:none; padding:0; margin:0; font-size:.95rem; font-weight:600; color:var(--tinta-suave); }
.hero__puntos li{ margin:0; padding-left:1.5em; position:relative; }
.hero__puntos li::before{
  content:""; position:absolute; left:0; top:.3em; width:1em; height:1em;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23873276" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}

/* Tarjeta de valoración de la primera pantalla */
.valoracion-card{
  background:#fff; border-radius:calc(var(--radio) + 6px);
  box-shadow:0 24px 60px rgba(90,33,79,.14);
  padding:clamp(1.4rem, 2.6vw, 2.1rem);
  border:1px solid var(--linea);
}
.valoracion-card h2{ font-size:1.35rem; margin-bottom:.3rem; }
.valoracion-card p{ color:var(--tinta-suave); font-size:.97rem; margin-bottom:1.2rem; }
.proposito-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.proposito-opciones .opcion{ min-height:64px; }

/* Franja de confianza */
.confianza{ background:var(--morado-fondo); }
.confianza .rejilla{ gap:2rem; }
.confianza__item{ color:#F4E6F0; text-align:center; }
.confianza__item svg{ color:var(--morado-claro); margin:0 auto .7rem; }
.confianza__item strong{ display:block; color:#fff; font-size:1.06rem; }
.confianza__item span{ font-size:.93rem; opacity:.85; }

/* Comparador antes/después */
.comparador{
  position:relative; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); user-select:none; touch-action:pan-y;
  background:var(--morado-050);
}
.comparador img{ width:100%; height:auto; pointer-events:none; }
.comparador__despues{ position:absolute; top:0; right:0; bottom:0; overflow:hidden; width:50%; border-left:3px solid #fff; }
.comparador__despues img{ position:absolute; right:0; top:0; width:auto; height:100%; max-width:none; }
.comparador__manija{
  position:absolute; top:0; bottom:0; left:50%; width:0; z-index:5;
}
.comparador__manija::before{
  content:""; position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23873276" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6-5 6 5 6"/><path d="m15 6 5 6-5 6"/></svg>') center/26px no-repeat;
  box-shadow:0 6px 18px rgba(90,33,79,.35); cursor:ew-resize;
}
.comparador__etiqueta{
  position:absolute; top:14px; z-index:4;
  background:rgba(255,255,255,.92); color:var(--tinta);
  font-size:.82rem; font-weight:700; padding:.4em .9em; border-radius:999px;
}
.comparador__etiqueta--antes{ left:14px; }
.comparador__etiqueta--despues{ right:14px; background:var(--morado); color:#fff; }
@media (max-width: 720px){
  .comparador__etiqueta{ top:8px; font-size:.66rem; padding:.35em .6em; max-width:48%; }
  .comparador__etiqueta--antes{ left:8px; }
  .comparador__etiqueta--despues{ right:8px; }
}
.comparador--animar .comparador__despues{ animation:barrido 2.4s ease-in-out 1; }
.comparador--animar .comparador__manija{ animation:barrido-manija 2.4s ease-in-out 1; }
@keyframes barrido{ 0%,100%{ width:50%; } 45%{ width:72%; } 75%{ width:32%; } }
@keyframes barrido-manija{ 0%,100%{ left:50%; } 45%{ left:28%; } 75%{ left:68%; } }
.comparador__rango{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:6;
}

/* Pasos */
.pasos{ counter-reset:paso; }
.paso{ position:relative; padding-top:1rem; }
.paso__numero{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--morado-claro); color:var(--morado);
  font-weight:800; font-size:1.2rem; margin-bottom:1rem;
}

/* Equipo */
.equipo-card{ text-align:center; }
.equipo-card img{ border-radius:var(--radio); aspect-ratio:2/3; object-fit:cover; width:100%; }
.equipo-card .equipo-card__nombre{ margin:1rem 0 .15rem; font-size:1.08rem; }
.equipo-card .equipo-card__cargo{ color:var(--morado); font-size:.82rem; font-weight:600; margin:0 0 .4rem; text-transform:uppercase; letter-spacing:.04em; }
.equipo-card .equipo-card__nota{ color:var(--tinta-suave); font-size:.92rem; margin:0; }
.nota-muestra{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.6rem;
  background:var(--morado-050); border:1px dashed var(--morado-claro);
  color:var(--tinta-suave); font-size:.9rem; padding:.7em 1.1em; border-radius:999px;
}

/* Casos y reseñas pendientes */
.pendiente{
  border:1.5px dashed var(--morado-claro); border-radius:var(--radio);
  background:var(--fondo-calido); padding:2rem; text-align:center; color:var(--tinta-suave);
}
.pendiente strong{ color:var(--tinta); display:block; margin-bottom:.3rem; }

/* Pie del comparador */
.comparador__pie{ text-align:center; color:var(--tinta-suave); font-size:.92rem; margin:.9rem 0 0; }

/* Casos reales */
.casos{ align-items:stretch; }
.caso{
  background:#fff; border:1px solid var(--borde, #E4E0E7); border-radius:var(--radio);
  padding:1.6rem; display:flex; flex-direction:column; box-shadow:0 6px 22px rgba(38,32,43,.06);
}
.caso__tipo{
  align-self:flex-start; background:var(--morado-050); color:var(--morado);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.3rem .8rem; border-radius:999px; margin-bottom:.9rem;
}
.caso__titulo{ font-size:1.08rem; line-height:1.35; margin:0 0 .3rem; }
.caso__lugar{ color:var(--morado); font-size:.85rem; font-weight:600; margin:0 0 .9rem; }
.caso p{ font-size:.92rem; margin:0 0 .7rem; }
.caso p strong{ color:var(--tinta); }
.caso__dato{
  background:var(--morado-050); border-left:3px solid var(--morado); border-radius:6px;
  padding:.7rem .9rem; font-size:.9rem; font-weight:600; color:var(--morado-oscuro); margin:.2rem 0 .9rem;
}
.caso__cita{
  margin:auto 0 0; padding-top:.9rem; border-top:1px solid var(--borde, #E4E0E7);
  color:var(--tinta-suave); font-size:.9rem; font-style:italic;
}
.casos__aviso{
  max-width:56rem; margin:2rem auto 0; text-align:center;
  color:var(--tinta-suave); font-size:.85rem;
}

/* CTA final */
.cta-final{
  background:
    radial-gradient(900px 400px at 50% -30%, var(--morado-100), transparent 65%),
    var(--fondo-calido);
  text-align:center;
}
.cta-final .contenedor{ max-width:44rem; }

/* ---------- 6. Formulario multipaso ---------- */
.formulario{
  background:#fff; border:1px solid var(--linea); border-radius:calc(var(--radio) + 4px);
  box-shadow:var(--sombra); padding:clamp(1.4rem,3vw,2.4rem);
}
.formulario__progreso{ margin-bottom:1.6rem; }
.formulario__progreso-texto{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--tinta-suave); margin-bottom:.5rem; font-weight:600; }
.formulario__barra{ height:8px; background:var(--morado-100); border-radius:999px; overflow:hidden; }
.formulario__barra span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--morado-claro), var(--morado));
  border-radius:999px; transition:width .4s ease;
}
.formulario__paso{ display:none; }
.formulario__paso.activo{ display:block; animation:aparecer .35s ease; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.formulario__titulo-paso{ font-size:1.3rem; margin-bottom:.2rem; }
.formulario__ayuda{ color:var(--tinta-suave); font-size:.95rem; margin-bottom:1.3rem; }

.opciones{ display:grid; gap:.7rem; }
.opciones--2{ grid-template-columns:1fr 1fr; }
.opciones--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.opcion{
  display:flex; align-items:center; gap:.7em; text-align:left;
  padding:.9em 1.05em; border:1.5px solid var(--linea); border-radius:var(--radio-s);
  background:#fff; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:600; color:var(--tinta);
  transition:var(--transicion); min-height:56px;
}
.opcion:hover{ border-color:var(--morado-claro); background:var(--morado-050); }
.opcion[aria-pressed="true"]{
  border-color:var(--morado); background:var(--morado-050);
  box-shadow:inset 0 0 0 1px var(--morado);
}
.opcion svg{ color:var(--morado); flex-shrink:0; }

.campo{ margin-bottom:1.05rem; }
.campo label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.35rem; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo select,
.campo textarea{
  width:100%; padding:.85em 1em; border:1.5px solid var(--linea); border-radius:var(--radio-s);
  font-family:inherit; font-size:1rem; color:var(--tinta); background:#fff;
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--morado); box-shadow:0 0 0 3px var(--morado-100);
}
.campo__error{ display:none; color:#A33A3A; font-size:.86rem; margin-top:.3rem; font-weight:600; }
.campo__nota{
  margin:.5rem 0 0; padding:.55rem .8rem; border-radius:8px;
  background:var(--morado-050); border-left:3px solid var(--morado);
  color:var(--morado-oscuro); font-size:.86rem;
}
.campo--error input, .campo--error select{ border-color:#C46A6A; background:#FDF6F6; }
.campo--error .campo__error{ display:block; }
.campos-fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.conmutadores{ display:flex; flex-wrap:wrap; gap:.6rem; }
.conmutador{
  display:inline-flex; align-items:center; gap:.45em;
  border:1.5px solid var(--linea); border-radius:999px; padding:.5em 1.05em;
  cursor:pointer; font-weight:600; font-size:.95rem; color:var(--tinta-suave);
  transition:var(--transicion); background:#fff; font-family:inherit;
}
.conmutador[aria-pressed="true"]{ border-color:var(--morado); background:var(--morado-050); color:var(--morado-oscuro); }

.consentimiento{ display:flex; gap:.7em; align-items:flex-start; margin-bottom:.9rem; font-size:.93rem; color:var(--tinta-suave); }
.consentimiento input{ width:20px; height:20px; margin-top:.15em; accent-color:var(--morado); flex-shrink:0; }
.consentimiento--error{ color:#A33A3A; }

.formulario__navegacion{ display:flex; gap:.9rem; margin-top:1.6rem; }
.formulario__navegacion .boton--atras{
  background:none; border:2px solid var(--linea); color:var(--tinta-suave);
}
.formulario__navegacion .boton--atras:hover{ border-color:var(--morado-claro); color:var(--morado); }
.formulario__estado{ margin-top:1rem; font-weight:600; }
.formulario__estado--error{ color:#A33A3A; }
.formulario__estado--ok{ color:var(--morado-oscuro); }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Éxito inline (además de la página /gracias) */
.exito{ text-align:center; padding:1.5rem 0; }
.exito__icono{
  width:74px; height:74px; margin:0 auto 1.1rem; border-radius:50%;
  background:var(--morado-050); display:grid; place-items:center; color:var(--morado);
}

/* ---------- 7. Páginas interiores ---------- */
.hero-interior{
  background:
    radial-gradient(900px 380px at 90% -20%, var(--morado-100), transparent 60%),
    var(--fondo-calido);
  padding:clamp(2.4rem,5vw,4rem) 0;
}
.hero-interior__rejilla{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.hero-interior img{ border-radius:var(--radio); box-shadow:var(--sombra); }
.hero-interior h1{ font-size:clamp(1.9rem,4vw,2.7rem); }

.columna-contenido{ max-width:46rem; }
.columna-contenido h2{ margin-top:2.2rem; }
.columna-contenido h2:first-child{ margin-top:0; }

.aviso-nota{
  background:var(--morado-050); border-left:4px solid var(--morado);
  border-radius:0 var(--radio-s) var(--radio-s) 0;
  padding:1.1rem 1.3rem; margin:1.6rem 0; color:var(--tinta);
}

.dos-columnas{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3vw,3rem); align-items:start; }

/* ---------- 8. Pie de página ---------- */
.pie{ background:var(--fondo-calido); border-top:1px solid var(--linea); padding:3rem 0 2rem; margin-top:2rem; }
.pie .contenedor{ max-width:62rem; }
.pie__rejilla{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr); gap:2rem; }
.pie__logo img{ height:66px; width:auto; margin-bottom:1rem; }
.pie p, .pie li{ font-size:.95rem; color:var(--tinta-suave); }
.pie h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--tinta); margin-bottom:.9rem; }
.pie ul{ list-style:none; padding:0; margin:0; }
.pie ul a{ color:var(--tinta-suave); text-decoration:none; }
.pie ul a:hover{ color:var(--morado); }
.pie__legal{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-size:.86rem; color:var(--tinta-suave);
}
.pie__legal nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; }

/* ---------- 9. Cookies ---------- */
.cookies-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  width:min(720px, calc(100% - 2rem)); z-index:200;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:0 20px 50px rgba(90,33,79,.22); padding:1.4rem 1.5rem;
}
.cookies-banner p{ font-size:.92rem; color:var(--tinta-suave); margin-bottom:1rem; }
.cookies-banner__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }
.cookies-banner .boton{ padding:.65em 1.3em; font-size:.95rem; }
.cookies-modal{
  position:fixed; inset:0; z-index:210; display:grid; place-items:center;
  background:rgba(58,51,64,.45); padding:1rem;
}
.cookies-modal__caja{
  background:#fff; border-radius:var(--radio); max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto; padding:1.8rem;
}
.cookies-modal__opcion{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--linea); }
.cookies-modal__opcion p{ margin:0; font-size:.9rem; color:var(--tinta-suave); }
.cookies-modal__opcion strong{ display:block; color:var(--tinta); }
.interruptor{ position:relative; width:52px; height:28px; flex-shrink:0; }
.interruptor input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; }
.interruptor span{
  position:absolute; inset:0; border-radius:999px; background:#D9CDD6; transition:var(--transicion); pointer-events:none;
}
.interruptor span::before{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; transition:var(--transicion); box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.interruptor input:checked + span{ background:var(--morado); }
.interruptor input:checked + span::before{ transform:translateX(24px); }
.interruptor input:disabled + span{ background:var(--morado-100); }
[hidden]{ display:none !important; }

/* ---------- 10. Flotantes ---------- */
.cta-movil{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  background:rgba(255,255,255,.97); border-top:1px solid var(--linea);
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); gap:.6rem;
  box-shadow:0 -8px 24px rgba(90,33,79,.10);
}
.cta-movil .boton{ flex:1; padding:.85em .6em; font-size:.98rem; }
.cta-movil__icono{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  border:1.5px solid var(--linea); color:var(--morado); flex-shrink:0; text-decoration:none;
}
.whatsapp-flotante{
  position:fixed; right:18px; bottom:18px; z-index:125;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra); color:#1FA855;
  transition:var(--transicion);
}
.whatsapp-flotante:hover{ transform:scale(1.06); }

/* ---------- 11. Responsive ---------- */
@media (max-width: 1280px){
  .navegacion__lista a, .navegacion__lista .desplegable__boton{ padding:.62em .5em; font-size:.9rem; }
  .cabecera__cta{ padding:.8em 1.1em; font-size:.95rem; }
  .cabecera__logo img{ height:38px; }
}
@media (max-width: 1080px){
  .navegacion__lista a, .navegacion__lista .desplegable__boton{ padding:.62em .45em; font-size:.86rem; }
  .cabecera__telefono span{ display:none; }
}
@media (max-width: 940px){
  .navegacion, .cabecera__cta, .cabecera__telefono{ display:none; }
  .boton-menu{ display:block; }
  .hero__rejilla, .hero-interior__rejilla{ grid-template-columns:1fr; }
  .hero__rejilla{ gap:2.2rem; }
  .rejilla-3, .rejilla-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pie__rejilla{ grid-template-columns:1fr 1fr; }
  .cta-movil{ display:flex; }
  .whatsapp-flotante{ bottom:88px; }
  body{ padding-bottom:0; }
  .pie{ margin-bottom:76px; }
  .dos-columnas{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .rejilla-2, .rejilla-3, .rejilla-4{ grid-template-columns:1fr; }
  .proposito-opciones{ grid-template-columns:1fr; }
  .opciones--2, .opciones--3, .campos-fila{ grid-template-columns:1fr; }
  .confianza .rejilla{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  .hero__acciones .boton{ width:100%; }
  .formulario__navegacion{ flex-direction:column-reverse; }
  .formulario__navegacion .boton{ width:100%; }
  .pie__rejilla{ grid-template-columns:1fr; gap:1.8rem; }
  .cookies-banner__acciones .boton{ flex:1; }
}

/* ============================================================
   ESTIMADOR INSTANTÁNEO (3 pasos + resultado + salidas)
   ============================================================ */
.estimador{ background:#fff; border:1px solid var(--morado-100, #EFE3EA); border-radius:18px; padding:1.8rem 1.8rem 2rem; box-shadow:0 10px 30px rgba(58,51,64,.06); }
.valoracion-card--estimador{ max-width:34rem; }
.valoracion-card--estimador .estimador{ border:none; box-shadow:none; padding:0; }
.valoracion-card--estimador h2{ margin-bottom:.3rem; }

/* Etiquetas que envuelven el campo (sin id) */
.campo label input, .campo label select{ display:block; width:100%; margin-top:.35rem; font-weight:400; }
.campo-grupo{ margin-bottom:1.05rem; }

/* Deslizador de superficie */
.campo--slider{ margin-top:1.2rem; }
.campo--slider .slider-salida{ font-weight:800; color:var(--morado-oscuro); }
.campo--slider input[type="range"]{ width:100%; margin-top:.6rem; accent-color:var(--morado); height:28px; cursor:pointer; }
.slider-escala{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--tinta-suave); }

/* Resultado en pantalla */
.estimador__resultado{ text-align:center; padding:.6rem 0 .2rem; animation:aparecer .35s ease; }
.estimador__resumen{ font-weight:600; color:var(--tinta-suave); margin-bottom:.4rem; }
.estimador__cifras{ display:flex; align-items:baseline; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.estimador__cifras span{ font-size:clamp(1.7rem, 4.5vw, 2.4rem); font-weight:800; color:var(--morado-oscuro); letter-spacing:-.01em; }
.estimador__cifras em{ color:var(--tinta-suave); font-style:normal; }
.estimador__ancho{ background:var(--morado-050); border-left:4px solid var(--morado); border-radius:10px; padding:.9rem 1.1rem; text-align:left; font-size:.97rem; margin:0 0 .9rem; }
.estimador__fuente{ font-size:.84rem; color:var(--tinta-suave); text-align:left; margin-bottom:.5rem; }
.estimador__salidas{ display:grid; gap:.7rem; margin-top:1.3rem; }
.estimador__recalcular{ background:none; border:none; color:var(--tinta-suave); text-decoration:underline; font-size:.88rem; margin-top:1rem; cursor:pointer; }
.estimador__recalcular:hover{ color:var(--morado); }
.estimador__fallo{ background:#FDF6F6; border:1px solid #E8C9C9; border-radius:10px; padding:.9rem 1.1rem; margin-top:1.2rem; }

/* Lo que la estimación no sabe (impactos orientativos, punto 2) */
.estimador__no-sabe{ background:#fff; border:1px solid var(--morado-100,#EFE3EA); border-radius:12px; padding:1rem 1.1rem .7rem; text-align:left; margin:0 0 .9rem; }
.estimador__no-sabe p{ margin:0 0 .2rem; }
.estimador__no-sabe ul{ list-style:none; margin:.4rem 0 .7rem; padding:0; }
.estimador__no-sabe li{ display:flex; justify-content:space-between; gap:1rem; padding:.32rem 0; border-bottom:1px dashed var(--morado-100,#EFE3EA); font-size:.94rem; }
.estimador__no-sabe li:last-child{ border-bottom:none; }
.estimador__no-sabe li span:last-child{ font-weight:700; color:var(--morado-oscuro); white-space:nowrap; }
.estimador__no-sabe .estimador__fuente{ margin-bottom:.2rem; }

/* El entregable concreto: los comparables (punto 3) */
.estimador__comparables{ background:var(--morado-050); border-radius:12px; padding:1.1rem 1.2rem; margin:1.2rem 0 0; text-align:left; }
.estimador__comparables h3{ font-size:1.15rem; margin-bottom:.3rem; }
.estimador__comparables p{ margin:0; color:var(--tinta-suave); }

/* Tres salidas visibles a la vez (punto 4) */
.estimador__salidas3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1rem; text-align:left; }
.estimador__salidas3 .salida{ border:1px solid var(--morado-100,#EFE3EA); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.estimador__salidas3 .salida h4{ margin:0; font-size:1rem; }
.estimador__salidas3 .salida > p{ margin:0; font-size:.88rem; color:var(--tinta-suave); flex:1; }
.estimador__salidas3 .salida .boton{ margin-top:.45rem; }
.estimador__salidas3 .formulario-comparables{ margin-top:.45rem; }
.estimador__salidas3 .formulario-comparables .campo{ margin-bottom:.55rem; }
.estimador__salidas3 .formulario-comparables .consentimiento{ font-size:.84rem; }
@media (max-width:720px){ .estimador__salidas3{ grid-template-columns:1fr; } }

/* Puente discreto a Cosocasa Capital (punto 9) */
.estimador__capital{ border-top:1px solid var(--morado-100,#EFE3EA); margin-top:1.4rem; padding-top:1rem; text-align:left; font-size:.93rem; color:var(--tinta-suave); }
.estimador__capital p{ margin:0 0 .35rem; }
.estimador__capital a{ font-weight:600; }

/* Suscripción mensual del observatorio (punto 8) */
.suscripcion{ background:var(--morado-050); border:1px solid var(--morado-100,#EFE3EA); border-radius:14px; padding:1.4rem 1.5rem; margin:2rem 0; }
.suscripcion h2{ font-size:1.35rem; margin-bottom:.3rem; }
.suscripcion__texto p{ color:var(--tinta-suave); margin-bottom:1rem; }
.formulario-suscripcion__fila{ display:grid; grid-template-columns:1fr 1fr auto; gap:.8rem; align-items:end; }
.formulario-suscripcion__fila .campo{ margin-bottom:0; }
.formulario-suscripcion .boton{ white-space:nowrap; }
.formulario-suscripcion .consentimiento{ margin-top:.8rem; }
@media (max-width:720px){
  .formulario-suscripcion__fila{ grid-template-columns:1fr; }
  .formulario-suscripcion__fila .boton{ width:100%; }
}

/* Salidas: formularios cortos */
.formulario-corto, .formulario-monitorizacion{ margin-top:1.8rem; border-top:1px solid var(--morado-100, #EFE3EA); padding-top:1.5rem; text-align:left; animation:aparecer .35s ease; }
.formulario-corto h3, .formulario-monitorizacion h3{ font-size:1.2rem; margin-bottom:.4rem; }
.formulario__exito{ background:var(--morado-050); border-left:4px solid var(--morado); border-radius:10px; padding:1rem 1.2rem; }

/* ============================================================
   WIDGET DE RESEÑAS DE GOOGLE
   ============================================================ */
.resenas-google__resumen{ display:flex; justify-content:center; margin-bottom:1.4rem; }
.resenas-google__nota{ display:inline-flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--morado-100, #EFE3EA); border-radius:999px; padding:.55rem 1.2rem; font-size:.97rem; color:var(--tinta-suave); }
.resenas-google__nota strong{ font-size:1.25rem; color:var(--tinta); }
.resena{ background:#fff; border:1px solid var(--morado-100, #EFE3EA); border-radius:14px; padding:1.2rem 1.3rem; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.resena__estrellas{ display:inline-flex; gap:2px; }
.estrella svg{ display:block; }
.estrella--on{ color:#E8A33D; }
.estrella--on svg{ fill:currentColor; }
.estrella--off{ color:#DDD3D8; }
.estrella--off svg{ fill:currentColor; }
.resena__texto{ margin:0; font-size:.96rem; line-height:1.55; color:var(--tinta); }
.resena__autor{ font-weight:700; font-size:.93rem; }
.resena__fecha{ font-weight:400; color:var(--tinta-suave); font-size:.85rem; }
.resenas-google__fuente{ text-align:center; margin-top:1.4rem; font-size:.92rem; }
.resenas-google--inline{ max-width:52rem; margin:0 auto; padding:0 1.2rem 2.5rem; }
.resenas-google--inline .resena{ max-width:40rem; margin:0 auto; }

@media (max-width: 720px){
  .estimador{ padding:1.3rem 1.1rem 1.6rem; }
  .resenas-google--inline{ padding:0 1rem 2rem; }
}

/* ---------- Anclas: que cada enlace caiga al inicio exacto de la sección ---------- */
section[id], main[id]{ scroll-margin-top:100px; }

/* ---------- Prueba social dentro del estimador ---------- */
.estimador__resenas{ display:grid; gap:.7rem; margin:1.2rem 0 0; }
.estimador__resena{
  margin:0; padding:.75rem 1rem .8rem;
  background:var(--morado-050); border-left:3px solid var(--morado); border-radius:6px;
}
.estimador__resena .estrellas{ color:#E8A33D; font-size:.85rem; letter-spacing:.08em; }
.estimador__resena p{ margin:.25rem 0 .3rem; font-size:.9rem; font-style:italic; color:var(--tinta); }
.estimador__resena cite{ font-size:.8rem; font-style:normal; color:var(--tinta-suave); }

.formulario__resenas-nota{ text-align:center; font-size:.88rem; color:var(--tinta-suave); margin:.6rem 0 0; }
.formulario__resenas-nota a{ color:var(--tinta-suave); text-decoration:underline; text-underline-offset:2px; }
.formulario__resenas-nota strong{ color:var(--morado); }

/* ---------- Landings PPC (sin navegación, estimador primero) ---------- */
.cabecera--ppc .cabecera__fila{ justify-content:space-between; }
.ppc-hero{ padding:2.4rem 0 2.8rem; background:linear-gradient(180deg, var(--morado-050), var(--fondo) 85%); }
.ppc-hero__rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2.6rem; align-items:center; }
.ppc-hero h1{ margin:.5rem 0 .8rem; }
.ppc-confianza{ list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.55rem; }
.ppc-confianza li{ display:flex; align-items:center; gap:.55rem; font-size:.98rem; }
.ppc-confianza svg{ color:var(--morado); flex-shrink:0; }
.ppc-confianza .estrellas{ color:#E8A33D; letter-spacing:.06em; }
.pie--ppc{ padding:1.8rem 0 5.5rem; text-align:center; font-size:.85rem; color:var(--tinta-suave); border-top:1px solid var(--linea); }
.pie--ppc nav{ margin-top:.4rem; display:flex; gap:1.2rem; justify-content:center; }
.pie--ppc a{ color:var(--tinta-suave); }
@media (max-width: 940px){
  .ppc-hero__rejilla{ grid-template-columns:1fr; gap:1.6rem; }
  .ppc-hero__rejilla > :last-child{ order:-1; } /* estimador primero en móvil */
  .ppc-hero{ padding:1.2rem 0 2rem; }
  .ppc-hero h1{ font-size:1.7rem; }
}

/* ---------- Páginas de barrio (capa local) ---------- */
.tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabla-precios{ width:100%; min-width:34rem; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.95rem; }
.tabla-precios caption{ text-align:left; font-weight:600; margin-bottom:.5rem; }
.tabla-precios th, .tabla-precios td{ padding:.55rem .7rem; text-align:right; border-bottom:1px solid var(--linea); }
.tabla-precios th:first-child, .tabla-precios td:first-child{ text-align:left; }
.tabla-precios thead th{ border-bottom:2px solid var(--morado-claro); font-weight:600; color:var(--morado-oscuro); }
.tabla-precios tbody tr:nth-child(even){ background:var(--fondo-calido); }
.tabla-precios--zonas td:nth-child(2), .tabla-precios--zonas th:nth-child(2){ text-align:right; }
.tabla-precios a{ color:var(--morado); }
.zona-dato{
  background:var(--morado-050); border-left:3px solid var(--morado); border-radius:6px;
  padding:.7rem .9rem; font-size:.95rem; margin:.2rem 0 1.1rem;
}
.zona-dato strong{ color:var(--morado-oscuro); }
@media (max-width: 720px){
  .tabla-precios{ font-size:.85rem; }
  .tabla-precios th, .tabla-precios td{ padding:.45rem .4rem; }
}

/* ================================================================
   OBSERVATORIO DE PRECIOS (/precios-vivienda/) y franja de portada
   ================================================================ */
.franja-datos{ padding:1.6rem 0; background:var(--morado-050); border-block:1px solid var(--morado-claro); text-align:center; }
.franja-datos__cifras{ margin:0; font-size:1.02rem; }
.franja-datos__enlace{ margin:.5rem 0 0; }

.datos-cifras{ margin:1.4rem 0 1.8rem; }
.dato-cifra{ background:var(--morado-050); border:1px solid var(--morado-claro); border-radius:14px;
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.3rem; text-align:center; }
.dato-cifra__numero{ font-size:1.65rem; font-weight:800; color:var(--morado-oscuro); line-height:1.1; }
.dato-cifra__texto{ font-size:.88rem; color:var(--tinta-suave); }

.grafico-caja{ position:relative; background:#fff; border:1px solid var(--linea); border-radius:14px;
  padding:1rem; margin:1.2rem 0 1.8rem; }
.grafico-caja canvas{ max-width:100%; }

.fuente-oficial{ font-size:.82rem; color:var(--tinta-suave); border-top:1px solid var(--linea);
  padding-top:1rem; margin-top:2.2rem; }

.calc-subida{ background:#fff; border:1px solid var(--linea); border-radius:16px; padding:1.6rem; }
.calc-subida__campos{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.calc-subida__campos label{ display:flex; flex-direction:column; gap:.4rem; font-weight:600; font-size:.92rem; flex:1 1 10rem; }
.calc-subida__campos select, .calc-subida__campos input{ font:inherit; padding:.65rem .8rem;
  border:1px solid var(--linea); border-radius:10px; background:#fff; }
.calc-subida__campos select:focus, .calc-subida__campos input:focus{ outline:2px solid var(--morado-claro); border-color:var(--morado); }
.calc-subida__resultado{ margin-top:1.4rem; text-align:center; }
.calc-subida__resultado .boton{ margin-top:.6rem; }
@media (max-width: 720px){
  .dato-cifra__numero{ font-size:1.35rem; }
  .grafico-caja{ padding:.6rem; }
}


/* ================================================================
   12. Guías SEO, tarjeta de descarga y componentes gráficos
   ================================================================ */

/* Tarjeta de descarga del informe anual */
.tarjeta-descarga{
  position:relative; overflow:hidden; margin:2rem 0; border-radius:18px;
  background:linear-gradient(120deg, var(--morado-oscuro) 0%, var(--morado) 55%, #9c4a8b 100%);
  color:#fff; padding:2rem 2.2rem;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1.8rem; align-items:center;
  box-shadow:0 14px 34px rgba(118,53,115,.28);
}
.tarjeta-descarga::before{
  content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px;
  border-radius:50%; background:rgba(255,255,255,.09);
}
.tarjeta-descarga::after{
  content:""; position:absolute; right:40px; bottom:-90px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.07);
}
.tarjeta-descarga .etiqueta{ background:rgba(255,255,255,.16); color:#fff; }
.tarjeta-descarga h3{ color:#fff; margin:.7rem 0 .5rem; font-size:1.45rem; }
.tarjeta-descarga p{ color:rgba(255,255,255,.88); margin:0; font-size:.97rem; }
.tarjeta-descarga__texto, .tarjeta-descarga__accion{ position:relative; z-index:1; }
.tarjeta-descarga__accion{ text-align:center; }
.tarjeta-descarga__accion .boton--primario{ background:#fff; color:var(--morado-oscuro); }
.tarjeta-descarga__accion .boton--primario:hover{ background:var(--morado-050); transform:translateY(-2px); }
.tarjeta-descarga__mas{ display:inline-block; margin-top:.85rem; color:rgba(255,255,255,.85);
  font-size:.88rem; text-decoration:underline; text-underline-offset:3px; }
.tarjeta-descarga__mas:hover{ color:#fff; }
@media (max-width:720px){
  .tarjeta-descarga{ grid-template-columns:minmax(0,1fr); padding:1.6rem; text-align:left; }
  .tarjeta-descarga__accion{ text-align:left; }
}

/* Pasos verticales con conector */
.pasos-guia{ counter-reset:paso-guia; list-style:none; margin:1.4rem 0 1.8rem; padding:0; }
.pasos-guia li{
  counter-increment:paso-guia; position:relative; padding:0 0 1.5rem 3.4rem; margin:0;
}
.pasos-guia li::before{
  content:counter(paso-guia); position:absolute; left:0; top:0;
  width:2.3rem; height:2.3rem; border-radius:50%; display:grid; place-items:center;
  background:var(--morado); color:#fff; font-weight:800; font-size:1.02rem;
}
.pasos-guia li::after{
  content:""; position:absolute; left:1.1rem; top:2.5rem; bottom:.3rem; width:2px;
  background:var(--morado-claro);
}
.pasos-guia li:last-child::after{ display:none; }
.pasos-guia strong{ display:block; margin-bottom:.25rem; }
.pasos-guia p{ margin:0; }

/* Checklist con marca */
.checklist{ list-style:none; margin:1.2rem 0 1.6rem; padding:0; }
.checklist li{
  position:relative; padding:.65rem .9rem .65rem 2.6rem; margin:0 0 .55rem;
  background:#fff; border:1px solid var(--linea); border-radius:12px;
}
.checklist li::before{
  content:"✓"; position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:1.25rem; height:1.25rem; border-radius:50%; display:grid; place-items:center;
  background:var(--morado-050); border:1.5px solid var(--morado-claro);
  color:var(--morado); font-weight:800; font-size:.8rem;
}

/* Etiqueta energética A-G */
.etiqueta-energetica{ margin:1.4rem 0 1.8rem; display:grid; gap:.3rem; max-width:34rem; }
.etiqueta-energetica__fila{ display:flex; align-items:center; gap:.7rem; }
.etiqueta-energetica__letra{
  width:2rem; height:1.55rem; display:grid; place-items:center; flex:none;
  color:#fff; font-weight:800; font-size:.85rem;
  clip-path:polygon(0 0, calc(100% - .55rem) 0, 100% 50%, calc(100% - .55rem) 100%, 0 100%);
}
.etiqueta-energetica__barra{ height:.5rem; border-radius:99px; background:currentColor; opacity:.28; }
.etiqueta-energetica__nota{ font-size:.8rem; color:var(--tinta-suave); margin-top:.4rem; }
.ee-a{ color:#0a7d44; } .ee-b{ color:#3aa655; } .ee-c{ color:#8cc63f; } .ee-d{ color:#f5c518; }
.ee-e{ color:#f39200; } .ee-f{ color:#e95d1f; } .ee-g{ color:#d42b1e; }
.etiqueta-energetica__letra.ee-a{ background:#0a7d44; } .etiqueta-energetica__letra.ee-b{ background:#3aa655; }
.etiqueta-energetica__letra.ee-c{ background:#8cc63f; } .etiqueta-energetica__letra.ee-d{ background:#f5c518; color:#5a4a00; }
.etiqueta-energetica__letra.ee-e{ background:#f39200; } .etiqueta-energetica__letra.ee-f{ background:#e95d1f; }
.etiqueta-energetica__letra.ee-g{ background:#d42b1e; }

/* Barras horizontales comparativas (CSS puro) */
.barras-h{ margin:1.4rem 0 1.8rem; display:grid; gap:1rem; max-width:40rem; }
.barras-h__item{ display:grid; gap:.35rem; }
.barras-h__cab{ display:flex; justify-content:space-between; gap:1rem; font-size:.93rem; }
.barras-h__cab strong{ white-space:nowrap; }
.barras-h__pista{ height:1.05rem; background:var(--morado-050); border-radius:99px; overflow:hidden; }
.barras-h__valor{ display:block; height:100%; border-radius:99px; }
.barras-h__valor--morado{ background:var(--morado); }
.barras-h__valor--claro{ background:var(--morado-claro); }
.barras-h__valor--gris{ background:#B9AFC0; }
.barras-h__nota{ font-size:.8rem; color:var(--tinta-suave); }

/* Tarjetas en comparación (versus) */
.tarjetas-versus{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:1.4rem 0 1.8rem; }
.tarjeta-versus{
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:1.4rem 1.5rem;
}
.tarjeta-versus--destacada{ border:2px solid var(--morado); box-shadow:0 10px 26px rgba(135,50,118,.14); }
.tarjeta-versus h3{ margin:0 0 .6rem; font-size:1.08rem; color:var(--morado-oscuro); }
.tarjeta-versus p{ margin:0 0 .6rem; font-size:.95rem; }
.tarjeta-versus p:last-child{ margin-bottom:0; }
.tarjeta-versus .tarjeta-versus__precio{ font-size:1.3rem; font-weight:800; color:var(--morado); }
@media (max-width:720px){ .tarjetas-versus{ grid-template-columns:minmax(0,1fr); } }

/* Pie: línea de red */
.pie__red{ margin-top:1.2rem; font-size:.88rem; }
.pie__red a{ color:var(--morado); }

/* Caja de cifra destacada en guías */
.cifra-destacada{
  margin:1.6rem 0; padding:1.5rem 1.7rem; border-radius:16px; text-align:center;
  background:var(--morado-050); border:1px solid var(--morado-claro);
}
.cifra-destacada__numero{ font-size:2.1rem; font-weight:800; color:var(--morado-oscuro); line-height:1.1; }
.cifra-destacada__texto{ margin:.4rem 0 0; color:var(--tinta-suave); font-size:.95rem; }