/* ============================================================================
   teloponefacil.com — sistema visual
   Un solo fichero, sin dependencias externas: se sirve con cache larga y
   la primera pintura no espera a nada.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme: light dark;

  --marca:        #0d7a5c;
  --marca-fuerte: #0a5f48;
  --marca-clara:  #17a67a;
  --marca-suave:  #e7f5ef;
  --marca-borde:  #bfe4d4;
  --wa:           #25d366;
  --wa-oscuro:    #128c7e;
  --tg:           #29a9eb;
  --tg-oscuro:    #0f6dab;
  --oro:          #a8791a;
  --oro-fondo:    #fdf6e7;
  --oro-borde:    #ecd9a8;
  --peligro:      #c0392b;
  --peligro-fondo:#fdefed;
  --aviso:        #b4690e;

  --fondo:        #f5f8f7;
  --superficie:   #ffffff;
  --superficie-2: #eef3f1;
  --tinta:        #131a18;
  --tinta-media:  #40504a;
  --tinta-suave:  #6b7c75;
  --borde:        #e2eae6;
  --borde-fuerte: #cfdbd6;

  --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-full: 999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --sombra-1: 0 1px 2px rgba(12,32,26,.05), 0 1px 3px rgba(12,32,26,.04);
  --sombra-2: 0 4px 12px rgba(12,32,26,.07), 0 2px 4px rgba(12,32,26,.04);
  --sombra-3: 0 14px 34px rgba(12,32,26,.11), 0 4px 10px rgba(12,32,26,.06);

  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ancho: 1140px;
  --transicion: .18s cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marca:        #2fb98d;
    --marca-fuerte: #45d3a5;
    --marca-clara:  #45d3a5;
    --marca-suave:  #14302a;
    --marca-borde:  #1f4a3f;
    --oro:          #d9ad55;
    --oro-fondo:    #2a2317;
    --oro-borde:    #4a3d21;
    --peligro:      #f08b7e;
    --peligro-fondo:#2e1a17;

    --fondo:        #0d1412;
    --superficie:   #141d1a;
    --superficie-2: #1b2622;
    --tinta:        #e9f0ed;
    --tinta-media:  #b3c2bc;
    --tinta-suave:  #8b9c95;
    --borde:        #223029;
    --borde-fuerte: #2e4038;

    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 4px 14px rgba(0,0,0,.45);
    --sombra-3: 0 16px 40px rgba(0,0,0,.55);
  }
}
:root[data-tema="oscuro"]{
  --marca:#2fb98d; --marca-fuerte:#45d3a5; --marca-clara:#45d3a5;
  --marca-suave:#14302a; --marca-borde:#1f4a3f;
  --oro:#d9ad55; --oro-fondo:#2a2317; --oro-borde:#4a3d21;
  --peligro:#f08b7e; --peligro-fondo:#2e1a17;
  --fondo:#0d1412; --superficie:#141d1a; --superficie-2:#1b2622;
  --tinta:#e9f0ed; --tinta-media:#b3c2bc; --tinta-suave:#8b9c95;
  --borde:#223029; --borde-fuerte:#2e4038;
  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 4px 14px rgba(0,0,0,.45);
  --sombra-3:0 16px 40px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--tipo); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--marca); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 var(--s3); line-height:1.2; letter-spacing:-.021em; font-weight:750}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}
h3{font-size:1.06rem}
p{margin:0 0 var(--s3)}
:focus-visible{outline:3px solid var(--marca-clara); outline-offset:2px; border-radius:var(--r-xs)}
::selection{background:var(--marca-suave); color:var(--tinta)}

.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 var(--s5)}
.saltar{position:absolute; left:-9999px; top:0; background:var(--marca); color:#fff;
  padding:var(--s3) var(--s4); border-radius:0 0 var(--r-sm) 0; z-index:100}
.saltar:focus{left:0}
.oculto{display:none !important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- cabecera */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--superficie) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
}
.cabecera .contenedor{display:flex; align-items:center; gap:var(--s4); min-height:64px}
.logo{display:flex; align-items:center; gap:var(--s2); font-weight:800; font-size:1.06rem;
  letter-spacing:-.03em; color:var(--tinta); white-space:nowrap; text-decoration:none}
.logo:hover{text-decoration:none}
.logo .marca-b{color:var(--marca)}
.logo .punto{color:var(--tinta-suave); font-weight:600}
.logo-icono{width:28px;height:28px;flex:none;border-radius:9px;
  background:linear-gradient(140deg,var(--marca-clara),var(--marca-fuerte));
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800}
.logo-poblacion{color:var(--tinta-suave); font-weight:600}
.cabecera-acciones{margin-left:auto; display:flex; align-items:center; gap:var(--s2)}

/* ---------------------------------------------------------------- buscador */
.buscador{position:relative; flex:1; max-width:440px}
.buscador input{
  width:100%; padding:11px 40px 11px 40px; font:inherit; font-size:.94rem;
  border:1.5px solid var(--borde-fuerte); border-radius:var(--r-full);
  background:var(--superficie-2); color:var(--tinta); transition:var(--transicion);
}
.buscador input::placeholder{color:var(--tinta-suave)}
.buscador input:focus{outline:none; border-color:var(--marca); background:var(--superficie);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--marca) 15%, transparent)}
.buscador .lupa{position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--tinta-suave); pointer-events:none; font-size:15px}
.buscador .limpiar{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:var(--tinta-suave);cursor:pointer;font-size:18px;
  padding:4px 8px;border-radius:var(--r-full);line-height:1}
.buscador .limpiar:hover{background:var(--superficie-2);color:var(--tinta)}
.sugerencias{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  box-shadow:var(--sombra-3); overflow:hidden; display:none;
}
.sugerencias.abierta{display:block}
.sugerencias a{display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4);
  color:var(--tinta); font-size:.92rem; text-decoration:none}
.sugerencias a:hover,.sugerencias a.activa{background:var(--marca-suave)}
.sugerencias .tipo{font-size:.72rem; color:var(--tinta-suave); margin-left:auto; white-space:nowrap}

/* -------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid transparent; border-radius:var(--r-full); cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:650; padding:10px 18px;
  transition:var(--transicion); text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-primario{background:linear-gradient(140deg,var(--marca-clara),var(--marca-fuerte));
  color:#fff; box-shadow:0 2px 8px color-mix(in srgb,var(--marca) 32%,transparent)}
.btn-primario:hover{box-shadow:0 5px 16px color-mix(in srgb,var(--marca) 40%,transparent)}
.btn-wa{background:var(--wa); color:#06261a; font-weight:700;
  box-shadow:0 2px 8px rgba(37,211,102,.35)}
.btn-wa:hover{background:#1fc45c; box-shadow:0 5px 16px rgba(37,211,102,.42)}
.btn-tg{background:var(--tg); color:#04212f; font-weight:700;
  box-shadow:0 2px 8px rgba(41,169,235,.35)}
.btn-tg:hover{background:#1c98d9; box-shadow:0 5px 16px rgba(41,169,235,.42)}
.btn-suave{background:var(--superficie-2); color:var(--tinta-media); border-color:var(--borde)}
.btn-suave:hover{background:var(--superficie); border-color:var(--borde-fuerte); color:var(--tinta)}
.btn-fantasma{background:transparent; color:var(--marca); border-color:var(--marca-borde)}
.btn-fantasma:hover{background:var(--marca-suave)}
.btn-peligro{background:var(--peligro-fondo); color:var(--peligro); border-color:transparent}
.btn-peligro:hover{background:var(--peligro); color:#fff}
.btn-sm{padding:7px 13px; font-size:.83rem}
.btn-lg{padding:14px 26px; font-size:1rem}
.btn-bloque{width:100%}
.icono{width:1em;height:1em;flex:none;fill:currentColor;vertical-align:-.12em}

/* --------------------------------------------------------------- etiquetas */
.chip{display:inline-flex; align-items:center; gap:5px; padding:4px 11px;
  border-radius:var(--r-full); font-size:.76rem; font-weight:600;
  background:var(--superficie-2); color:var(--tinta-media); border:1px solid var(--borde)}
.chip-marca{background:var(--marca-suave); color:var(--marca-fuerte); border-color:var(--marca-borde)}
.chip-oro{background:var(--oro-fondo); color:var(--oro); border-color:var(--oro-borde)}
.chip-wa{background:rgba(37,211,102,.14); color:var(--wa-oscuro); border-color:rgba(37,211,102,.3)}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .chip-wa{color:#63e295}}
.chip-tg{background:rgba(41,169,235,.14); color:var(--tg-oscuro); border-color:rgba(41,169,235,.3)}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .chip-tg{color:#7cd0f7}}
.chip a{color:inherit}

/* ------------------------------------------------------------------- migas */
.migas{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.84rem;
  color:var(--tinta-suave); margin:var(--s5) 0 var(--s4); padding:0; list-style:none}
.migas li{display:flex; align-items:center; gap:6px}
.migas li+li::before{content:"›"; color:var(--borde-fuerte)}
.migas a{color:var(--tinta-suave); font-weight:550}
.migas a:hover{color:var(--marca)}
.migas [aria-current]{color:var(--tinta); font-weight:600}

/* --------------------------------------------------------------------- hero */
.hero{padding:var(--s7) 0 var(--s6); text-align:center; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% 20% auto; height:420px;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--marca) 16%,transparent), transparent 68%);
  pointer-events:none; z-index:-1}
.hero h1{margin-bottom:var(--s3)}
.hero .entradilla{font-size:clamp(1rem,.95rem + .3vw,1.14rem); color:var(--tinta-media);
  max-width:46ch; margin:0 auto var(--s5)}
.hero .entradilla--portada{font-size:clamp(.85rem,.8rem + .25vw,.95rem)}
.hero .buscador{max-width:520px; margin:0 auto}
.hero .buscador input{padding-block:14px; font-size:1rem}
.hero-datos{display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s5);
  margin-top:var(--s5); color:var(--tinta-suave); font-size:.86rem}
.hero-datos b{display:block; font-size:1.5rem; color:var(--tinta); font-weight:750;
  letter-spacing:-.02em; line-height:1.1}

/* ------------------------------------------------------------------ rejillas */
main{padding-bottom:var(--s8); min-height:60vh}
.seccion{margin:var(--s7) 0}
.seccion-cabecera{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap}
.seccion-cabecera h2{margin:0}
.seccion-cabecera .enlace-mas{font-size:.88rem; font-weight:600}

.rejilla{display:grid; gap:var(--s4)}
.rejilla-nav{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.rejilla-fichas{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---------------------------------------------------- tarjeta de navegación */
.tarjeta-nav{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s4);
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-lg);
  box-shadow:var(--sombra-1); color:var(--tinta); text-decoration:none;
  transition:var(--transicion);
}
.tarjeta-nav:hover{text-decoration:none; transform:translateY(-3px);
  box-shadow:var(--sombra-3); border-color:var(--marca-borde)}
.tarjeta-nav .emoji{width:46px;height:46px;flex:none;display:grid;place-items:center;
  font-size:21px; border-radius:14px; background:var(--marca-suave)}
.tarjeta-nav .txt{min-width:0; display:block}
.tarjeta-nav .nom{display:block; font-weight:680; font-size:.96rem; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tarjeta-nav .sub{display:block; font-size:.79rem; color:var(--tinta-suave); margin-top:1px}

/* -------------------------------------------------------- tarjeta de negocio */
.ficha-tarjeta{
  position:relative; display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5) var(--s4) var(--s4); background:var(--superficie);
  border:1px solid var(--borde); border-radius:var(--r); box-shadow:var(--sombra-1);
  transition:var(--transicion);
}
.ficha-tarjeta:hover{box-shadow:var(--sombra-2); transform:translateY(-2px);
  border-color:var(--borde-fuerte)}
.ficha-tarjeta.premium{border:1.5px solid var(--oro-borde);
  background:linear-gradient(180deg,var(--oro-fondo),var(--superficie) 42%)}
.ficha-tarjeta.sin-contacto{opacity:.72}
.sello-premium{position:absolute; top:-11px; left:var(--s4);
  background:linear-gradient(140deg,#d4a444,var(--oro)); color:#241a04;
  font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 11px; border-radius:var(--r-full); box-shadow:var(--sombra-1)}
.ficha-tarjeta h3{margin:0; font-size:1.02rem; line-height:1.3}
.ficha-tarjeta h3 a{color:var(--tinta)}
.ficha-tarjeta h3 a:hover{color:var(--marca); text-decoration:none}
.ficha-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.79rem;
  color:var(--tinta-suave)}
.ficha-dir{font-size:.86rem; color:var(--tinta-media); display:flex; gap:6px;
  align-items:flex-start}
.ficha-desc{font-size:.86rem; color:var(--tinta-media); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ficha-acciones{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:auto; padding-top:var(--s3)}
.ficha-acciones .btn{flex:1 1 auto; min-width:120px}
.aviso-sin-contacto{font-size:.82rem; color:var(--tinta-suave); font-style:italic;
  padding-top:var(--s3)}

/* ------------------------------------------------------------- ficha detalle */
.ficha-cabecera{background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sombra-1);
  display:flex; gap:var(--s5); flex-wrap:wrap; align-items:flex-start}
.ficha-cabecera .identidad{flex:1 1 320px; min-width:0}
.ficha-cabecera h1{margin-bottom:var(--s2); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.ficha-cabecera .contacto{flex:0 0 280px; display:flex; flex-direction:column; gap:var(--s2)}
.dato{display:flex; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--borde);
  font-size:.92rem; align-items:baseline}
.dato:last-child{border-bottom:0}
.dato dt{flex:0 0 108px; color:var(--tinta-suave); font-size:.83rem; margin:0}
.dato dd{margin:0; min-width:0; word-break:break-word}
.tel-grande{font-size:1.32rem; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.barra-movil{display:none}

/* ------------------------------------------------------------------ filtros */
.filtros{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--s5)}
.filtros .btn{font-size:.83rem}
.filtros .etq-filtro{font-size:.76rem;color:var(--tinta-suave);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;margin-right:2px}
.filtros .separador{width:1px;height:22px;background:var(--borde);margin:0 var(--s2)}
.filtro-activo{background:var(--marca); color:#fff; border-color:var(--marca)}
.contador{color:var(--tinta-suave); font-size:.88rem; margin-left:auto}

/* --------------------------------------------------------------- paginación */
.paginacion{display:flex; justify-content:center; align-items:center; gap:var(--s2);
  margin:var(--s6) 0 0; flex-wrap:wrap}
.paginacion .actual{padding:8px 14px; font-size:.88rem; color:var(--tinta-suave)}

/* ---------------------------------------------------------------- formularios */
.formulario{display:grid; gap:var(--s4); max-width:640px}
.campo{display:grid; gap:6px}
.campo label{font-size:.88rem; font-weight:600}
.campo .ayuda{font-size:.79rem; color:var(--tinta-suave)}
.campo input,.campo select,.campo textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:.95rem;
  border:1.5px solid var(--borde-fuerte); border-radius:var(--r-sm);
  background:var(--superficie); color:var(--tinta); transition:var(--transicion);
}
.campo textarea{min-height:96px; resize:vertical; line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--marca);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 14%,transparent)}
.campo input[aria-invalid="true"]{border-color:var(--peligro)}
.campo .contador-texto{font-size:.76rem;color:var(--tinta-suave);text-align:right}
.campo-check-fila{display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:8px 13px; min-height:38px; box-sizing:border-box;
  border:1.5px solid var(--borde-fuerte); border-radius:var(--r-md);
  background:var(--superficie)}
.campo-check-fila input[type="checkbox"]{width:19px; height:19px; flex:none;
  margin:0; accent-color:var(--marca)}
.campo-check-fila span{font-size:.88rem; font-weight:600}
.fila{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.consentimiento{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3);
  border:1.5px solid var(--borde); border-radius:var(--r-sm); background:var(--superficie);
  font-size:.87rem; line-height:1.5; cursor:pointer}
.consentimiento:hover{border-color:var(--marca-borde)}
.consentimiento input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--marca)}
.error-campo{color:var(--peligro); font-size:.82rem}

.aviso{padding:var(--s4); border-radius:var(--r-sm); font-size:.9rem; line-height:1.55;
  border:1px solid var(--borde); background:var(--superficie-2)}
.aviso-ok{background:var(--marca-suave); border-color:var(--marca-borde); color:var(--marca-fuerte)}
.aviso-error{background:var(--peligro-fondo); border-color:color-mix(in srgb,var(--peligro) 30%,transparent);
  color:var(--peligro)}
.aviso-info{background:var(--oro-fondo); border-color:var(--oro-borde); color:var(--oro)}

/* -------------------------------------------------------------------- tablas */
.tabla-envoltorio{overflow-x:auto; border:1px solid var(--borde); border-radius:var(--r);
  background:var(--superficie)}
table.tabla{width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px}
table.tabla th,table.tabla td{padding:10px var(--s3); text-align:left;
  border-bottom:1px solid var(--borde); white-space:nowrap}
table.tabla th{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-suave); font-weight:700; background:var(--superficie-2);
  position:sticky; top:0}
table.tabla tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:var(--superficie-2)}

/* -------------------------------------------------------------------- modal */
.modal-fondo{position:fixed; inset:0; background:rgba(8,18,15,.55);
  backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center;
  padding:var(--s4); z-index:80}
.modal-fondo.abierto{display:flex}
.modal{background:var(--superficie); border-radius:var(--r-lg); padding:var(--s5);
  width:100%; max-width:460px; max-height:92vh; overflow-y:auto; box-shadow:var(--sombra-3);
  border:1px solid var(--borde)}
.modal h2{font-size:1.2rem; margin-bottom:2px}
.modal .modal-sub{font-size:.9rem; color:var(--marca); font-weight:650; margin-bottom:var(--s4)}
.opciones{display:grid; gap:var(--s2)}
.opcion{display:flex; align-items:center; gap:var(--s3); padding:11px var(--s3);
  border:1.5px solid var(--borde); border-radius:var(--r-sm); cursor:pointer; font-size:.9rem}
.opcion:hover{border-color:var(--marca-borde); background:var(--marca-suave)}
.opcion input{accent-color:var(--marca); width:17px; height:17px; flex:none}
.opcion:has(input:checked){border-color:var(--marca); background:var(--marca-suave)}
.franjas{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.franjas .opcion{font-size:.82rem; padding:9px var(--s3)}
.modal-acciones{display:flex; gap:var(--s3); margin-top:var(--s5)}
.modal-acciones .btn{flex:1}
.modal-ok{text-align:center; padding:var(--s4) 0}
.modal-ok .marca-ok{width:56px;height:56px;margin:0 auto var(--s3);border-radius:50%;
  background:var(--marca-suave); color:var(--marca); display:grid; place-items:center; font-size:28px}

/* ------------------------------------------------------------------- vacío */
.vacio{text-align:center; padding:var(--s8) var(--s4); color:var(--tinta-suave)}
.vacio .emoji{font-size:44px; margin-bottom:var(--s3)}
.vacio h2{color:var(--tinta)}

/* --------------------------------------------------------------------- pie */
.pie{border-top:1px solid var(--borde); background:var(--superficie);
  padding:var(--s7) 0 var(--s5); margin-top:var(--s8); font-size:.88rem}
.pie-rejilla{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pie h3{font-size:.79rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-suave); margin-bottom:var(--s3)}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.pie a{color:var(--tinta-media)}
.pie a:hover{color:var(--marca)}
.pie-legal{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--borde);
  color:var(--tinta-suave); font-size:.82rem; display:flex; flex-wrap:wrap; gap:var(--s3);
  justify-content:space-between; align-items:center}

/* --------------------------------------------------------------- pestañas */
.pestanas{display:flex; gap:var(--s1); border-bottom:1px solid var(--borde);
  margin-bottom:var(--s5); overflow-x:auto}
.pestana{padding:11px var(--s4); border:0; background:none; font:inherit; font-size:.92rem;
  font-weight:650; color:var(--tinta-suave); cursor:pointer; white-space:nowrap;
  border-bottom:2.5px solid transparent; margin-bottom:-1px}
.pestana:hover{color:var(--tinta)}
.pestana[aria-selected="true"]{color:var(--marca); border-bottom-color:var(--marca)}

/* --------------------------------------------------------------- estadística */
.dato-tarjeta{background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); padding:var(--s4); box-shadow:var(--sombra-1)}
.dato-tarjeta .n{font-size:1.9rem; font-weight:780; letter-spacing:-.03em; line-height:1.05}
.dato-tarjeta .etq{font-size:.8rem; color:var(--tinta-suave); margin-top:2px}

/* --------------------------------------------------------------- responsive */
@media (max-width:860px){
  .contenedor{padding:0 var(--s4)}
  .cabecera .contenedor{min-height:58px; gap:var(--s3); flex-wrap:wrap; padding-block:10px}
  .logo{min-width:0; flex-shrink:1}
  .logo-texto{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .cabecera .buscador{order:3; flex-basis:100%; max-width:none}
  .ficha-cabecera .contacto{flex-basis:100%}
  .dato dt{flex-basis:92px}
}
@media (max-width:560px){
  .hero{padding:var(--s6) 0 var(--s5)}
  .rejilla-fichas{grid-template-columns:1fr}
  .ficha-acciones .btn{flex-basis:100%}
  /* barra fija de contacto: en móvil llamar o escribir tiene que estar siempre a mano */
  .barra-movil{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    gap:var(--s2); padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--superficie) 94%,transparent);
    backdrop-filter:blur(12px); border-top:1px solid var(--borde)}
  .barra-movil .btn{flex:1}
  body.con-barra{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .btn:hover,.tarjeta-nav:hover,.ficha-tarjeta:hover{transform:none}
}
@media print{
  .cabecera,.pie,.barra-movil,.ficha-acciones,.filtros,.buscador{display:none !important}
  body{background:#fff}
  .ficha-cabecera{box-shadow:none; border:1px solid #ccc}
}

/* --- validación de formularios ------------------------------------------ */
/* Un aviso arriba del todo no basta: el que rellena tiene que ver QUÉ campo
   falla. El rojo lo pone el JS con aria-invalid, que además lo anuncian los
   lectores de pantalla. */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{
  border-color:var(--peligro);
  background:var(--peligro-fondo);
}
.campo input[aria-invalid="true"]:focus,
.campo select[aria-invalid="true"]:focus,
.campo textarea[aria-invalid="true"]:focus{
  outline:2px solid var(--peligro); outline-offset:1px;
}
.consentimiento:has(input[aria-invalid="true"]){
  color:var(--peligro);
}
.consentimiento input[aria-invalid="true"]{
  outline:2px solid var(--peligro); outline-offset:2px;
}
.error-campo{display:block; margin-top:2px}