/* Crinova Hair Center — páginas estáticas (mismo estilo que el diseño de Claude Design) */
/* 28 oct (Romuald, auditoría técnica M-3): la letra Archivo se sirve desde la propia web (antes, de fonts.googleapis.com:
   bloqueaba el pintado ~0,8 s en el móvil y mandaba la IP del visitante a Google). Mismos archivos v25 de Google Fonts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-v25-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-v25-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:italic;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-v25-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-v25-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
html,body{margin:0;padding:0}
body{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;color:#1B1B1B;background:#FFFFFF;-webkit-font-smoothing:antialiased;overflow-x:clip}
*{box-sizing:border-box}
a{color:#1B1B1B;text-decoration:none}
a:hover{color:#000;text-decoration:underline;text-decoration-color:#CCFF4F;text-decoration-thickness:3px}
img{display:block;max-width:100%}
button{font-family:inherit}
.env{max-width:1400px;margin:0 auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.estrecho{max-width:860px;margin:0 auto}
/* cabecera */
.cab{position:sticky;top:0;z-index:40;background:#FFF;border-bottom:1px solid #EBEBEB}
.cab .env{padding-top:14px;padding-bottom:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.cab nav{display:flex;gap:clamp(12px,1.6vw,26px);align-items:center}
.cab nav a,.cab .nav-btn{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.cab .logo img{height:22px;width:auto}
.cab .der{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.pildora{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#CCFF4F;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#000}
.pildora:before{content:"";width:6px;height:6px;border-radius:50%;background:#000}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border:none;border-radius:999px;background:#CCFF4F;color:#000;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:hover{background:#000;color:#FFF;text-decoration:none}
.btn.negro{background:#000;color:#FFF}.btn.negro:hover{background:#000;color:#FFF;opacity:.85}
.btn.borde{background:none;border:1px solid #1B1B1B;color:#1B1B1B}.btn.borde:hover{background:#1B1B1B;color:#FFF}
.menu-movil{display:none}
@media (max-width:860px){
  .cab .env{padding:12px 16px;gap:10px;grid-template-columns:40px 1fr 40px}
  .cab nav{display:none}
  .cab .logo{justify-self:center}.cab .logo img{height:16px}
  .cab .der .pildora,.cab .der .btn{display:none}
  .menu-movil{display:flex;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#1B1B1B;padding:0}
  .cab.abierta nav{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:absolute;left:0;right:0;top:100%;background:#FFF;padding:22px 20px 26px;border-bottom:1px solid #EBEBEB}
  .cab.abierta nav a{font-size:13px}
}
/* portada */
.portada{position:relative;overflow:hidden;background:#111;min-height:clamp(520px,calc(100vh - 110px),900px);display:flex;align-items:flex-end;justify-content:center}
.portada .fondo{position:absolute;inset:0;background:#111 center/cover no-repeat}
.portada:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.7) 100%)}
.portada .txt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px clamp(44px,6vw,80px);text-align:center;max-width:760px}
.portada .palabra{height:clamp(15px,1.5vw,20px);width:auto}
.portada h1{margin:4px 0 0;font-size:clamp(28px,3.6vw,46px);line-height:1.05;font-weight:800;font-stretch:125%;letter-spacing:0;color:#FFF;text-wrap:balance}
.portada p{margin:0;font-size:clamp(14px,1.3vw,17px);color:#FFF;line-height:1.5}
.portada .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.portada .btn.borde{border-color:#FFF;color:#FFF}.portada .btn.borde:hover{background:#FFF;color:#000}
/* cabecera de página interior */
.intro{padding:clamp(40px,6vw,88px) 0 clamp(24px,3vw,40px)}
.migas{font-size:12px;color:#5A5A5A;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px}
.migas a{color:#5A5A5A}.migas span[aria-hidden]{opacity:.6}
.antetitulo{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5A5A5A}
.intro h1,.titular{margin:10px 0 0;font-size:clamp(26px,3.2vw,42px);font-weight:800;font-stretch:125%;line-height:1.02;text-transform:uppercase;text-wrap:balance}
.lima{background:#CCFF4F;padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro .entradilla{margin:18px 0 0;max-width:680px;font-size:17px;line-height:1.65;color:#383838}
.intro .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* secciones */
.sec{padding:clamp(48px,6vw,96px) 0}
.sec.gris{background:#F4F4F4}
.sec.negro{background:#000;color:#FFF}.sec.negro a{color:#FFF}
.sec h2{margin:0 0 clamp(16px,1.8vw,24px);font-size:clamp(20px,2vw,28px);font-weight:800;font-stretch:125%;line-height:1.06;text-transform:uppercase;text-wrap:balance}
.sec h3{margin:0 0 8px;font-size:clamp(17px,1.5vw,20px);font-weight:800;font-stretch:112%;line-height:1.2}
.texto{font-size:16px;line-height:1.75;color:#383838}
.texto p{margin:0 0 16px}.texto ul,.texto ol{margin:0 0 16px;padding-left:22px}.texto li{margin:0 0 8px}
.texto h2{margin-top:clamp(36px,4vw,56px)}.texto h3{margin-top:28px;color:#1B1B1B}
.texto a{text-decoration:underline;text-decoration-color:#CCFF4F;text-decoration-thickness:3px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,1.8vw,24px)}
.tarjeta{background:#F4F4F4;border-radius:24px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:10px}
.sec.gris .tarjeta{background:#FFF}
.tarjeta p{margin:0;font-size:15px;line-height:1.6;color:#383838}
.tarjeta .mas{margin-top:auto;padding-top:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.num{font-size:12px;font-weight:800;font-stretch:125%;color:#000;background:#CCFF4F;border-radius:999px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
/* centros (portada) */
.centros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(14px,1.8vw,24px);max-width:1040px;margin:0 auto}
.centro{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#111 center/cover no-repeat;text-decoration:none}
.centro:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.centro:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%)}
.centro .pie{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:#FFF}
.centro .pais{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.centro .ciudad{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:800;font-stretch:125%;line-height:1;text-transform:uppercase;margin:4px 0}
.centro .lema{font-size:13px;line-height:1.4}
.centro .flecha{flex:none;width:44px;height:44px;border-radius:50%;background:#FFF;color:#000;display:flex;align-items:center;justify-content:center}
.centro .cerca{position:absolute;z-index:1;top:16px;left:16px;padding:6px 11px;border-radius:999px;background:#CCFF4F;color:#000;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:none}
.centro.es-cerca .cerca{display:block}
.centro.pronto{background:#2A2A2A;cursor:default}.centro.pronto:hover{transform:none;box-shadow:none}
/* datos del centro (NAP) */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,64px);align-items:start}
.nap{display:flex;flex-direction:column;border-top:1px solid #1B1B1B;font-style:normal}
.nap .fila{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #EBEBEB}
.nap .et{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5A5A5A;padding-top:3px}
.nap .va{font-size:15px;line-height:1.5}
.mapa{width:100%;height:340px;border:0;border-radius:18px;display:block}
/* FAQ */
.faq details{border-bottom:1px solid #E0E0E0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16px;font-weight:700;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:#CCFF4F;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transition:transform .25s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .resp{padding:0 0 20px;font-size:15px;line-height:1.7;color:#383838}
.faq .resp p{margin:0 0 10px}
/* aviso de datos pendientes */
.pendiente{color:#5A5A5A;font-style:italic}
.hueco{border:1px dashed #CCCCCC;border-radius:24px;padding:clamp(22px,2.4vw,32px);color:#5A5A5A;font-size:15px;line-height:1.6}
/* llamada a la acción */
.cta{background:#000;color:#FFF;border-radius:28px;padding:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta h2{color:#FFF;margin:0}
.cta p{margin:8px 0 0;color:#BBBBBB;font-size:15px;line-height:1.6;max-width:560px}
.cta .btns{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn.borde{border-color:#FFF;color:#FFF}.cta .btn.borde:hover{background:#FFF;color:#000}
/* tabla */
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:14px 12px;border-bottom:1px solid #EBEBEB;vertical-align:top;line-height:1.5}
.tabla th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5A5A5A}
.tabla-env{overflow-x:auto}
/* pie */
.pie-web{background:#000;color:#FFF;padding:clamp(40px,4.5vw,64px) 0 24px}
.pie-web a{color:#FFF}
.pie-web .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px}
.pie-web .pie-tit{margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A}
.pie-web ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.pie-web address{font-style:normal;font-size:14px;line-height:1.6;color:#D6D6D6}
.pie-web .logo img{height:22px;width:auto}
.pie-web .final{margin-top:36px;padding-top:18px;border-top:1px solid #2A2A2A;font-size:12px;color:#8A8A8A;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.pie-web .final a{color:#8A8A8A}
/* reserva */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
.modal.abierto{display:flex}
.modal .velo{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal .caja{position:relative;width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#FFF;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;animation:crFade .3s ease both}
.modal .tit{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:18px;font-weight:800;font-stretch:125%;text-transform:uppercase}
.modal .cerrar{width:36px;height:36px;border:none;border-radius:50%;background:#F0F0F0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal label{font-size:12px;font-weight:600;color:#5A5A5A;display:flex;flex-direction:column;gap:6px}
.modal input,.modal select,.modal textarea{padding:13px 15px;border:1px solid #E0E0E0;border-radius:12px;font-family:inherit;font-size:15px;outline:none;color:#1B1B1B;background:#FFF;width:100%}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:#1B1B1B}
.modal .opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal .opciones label{flex-direction:row;align-items:center;gap:8px;padding:12px;border:1px solid #E0E0E0;border-radius:12px;cursor:pointer;color:#1B1B1B;font-size:14px}
.modal .opciones input{width:auto}
.modal .opciones label:has(input:checked){border-color:#000;background:#F4F4F4}
.modal .error{font-size:12px;color:#B3261E;min-height:16px}
.modal .ok{display:none;flex-direction:column;gap:10px}
.modal.enviado form{display:none}.modal.enviado .ok{display:flex}
.modal .legal{font-size:11px;color:#8A8A8A;line-height:1.5}
.wa-flota{position:fixed;right:18px;bottom:18px;z-index:50;width:54px;height:54px;border-radius:50%;background:#25D366;color:#FFF;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wa-flota:hover{text-decoration:none;transform:scale(1.05)}
/* aviso de ubicación (portada) */
.aviso-ciudad{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;width:min(440px,calc(100% - 32px));background:#000;color:#FFF;border-radius:20px;padding:18px 20px;display:none;flex-direction:column;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.25);animation:crFadeC .35s ease both}
.aviso-ciudad.visible{display:flex}
.aviso-ciudad .fila{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:1.45}
.aviso-ciudad strong{color:#CCFF4F}
.aviso-ciudad button{flex:none;padding:8px 13px;border:1px solid #FFF;border-radius:999px;background:none;color:#FFF;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.aviso-ciudad .barra{height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.aviso-ciudad .barra i{display:block;height:100%;background:#CCFF4F;transform-origin:left;animation:crBar 3s linear both}
@keyframes crFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes crBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes crFadeC{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.zonas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin-top:28px}
.zona{border:1px solid #EBEBEB;border-radius:18px;padding:18px 20px}
.zona h3{margin:0 0 6px;font-size:15px;font-weight:800;font-stretch:112%;line-height:1.3}
.zona p{margin:0;font-size:13px;line-height:1.6;color:#5A5A5A}
.texto a,.tarjeta p a,.faq .resp a{text-decoration:underline}

/* 7 oct — retoques de diseño de Eric */
.pie-web a:hover,.cab nav a:hover,.migas a:hover{text-decoration:none;color:inherit;opacity:.7}
.lab{background:#CCFF4F;color:#000;padding:0 .22em;font-weight:inherit}
.btn .lab{padding:1px 6px;margin-left:4px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.cta-flota{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:45;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px 26px}
.cta-flota:hover{background:#000;color:#FFF}
/* centros con su NAP (portada) */
.centro-info{max-width:520px;margin:14px auto 0;font-style:normal;font-size:14px;line-height:1.6;color:#383838;text-align:left;border-top:1px solid #EBEBEB;padding-top:12px}
.centro-info strong{color:#1B1B1B}
/* ventana «Pedir cita» */
.cita{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}.cita[hidden]{display:none}
.cita .velo{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.cita .caja{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:#FFF;border-radius:22px;overflow:hidden;animation:crFade .3s ease both}
.cab-cita{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #EBEBEB;font-size:13px;font-weight:800;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase}
.cab-cita .cerrar{width:34px;height:34px;border:none;border-radius:50%;background:#F0F0F0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cuerpo-cita{overflow-y:auto;padding:4px 20px 22px;scroll-behavior:smooth}
.cita .p{padding:18px 0;border-bottom:1px solid #F0F0F0}.cita .p:last-child{border-bottom:0}
.cita .p:not([data-p="que"]){display:none}.cita .p.on{display:block;animation:crFade .35s ease both}
.cita h3{margin:0 0 12px;font-size:16px;font-weight:800;font-stretch:112%}
.cita .opc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cita .tarj{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px;border:1.5px solid #E0E0E0;border-radius:14px;background:#FFF;cursor:pointer;font-family:inherit;font-size:14px;color:#1B1B1B}
.cita .tarj span{font-size:12px;color:#5A5A5A}.cita .tarj.activo{border-color:#000;box-shadow:inset 0 0 0 1px #000;background:#F7F7F7}
.cita .seg{display:inline-flex;background:#F0F0F0;border-radius:999px;padding:4px;margin-bottom:12px}
.cita .seg button{border:none;background:none;padding:9px 16px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#1B1B1B}
.cita .seg button.activo{background:#000;color:#FFF}
.cita .campo{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#5A5A5A;margin:10px 0 0}
.cita input,.cita textarea{padding:12px 14px;border:1px solid #E0E0E0;border-radius:12px;font-family:inherit;font-size:15px;color:#1B1B1B;width:100%;background:#FFF}
.cita input[readonly]{background:#F7F7F7}
.cita .rej2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cita .busca{position:relative;display:block}
.cita .sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:#FFF;border:1px solid #E0E0E0;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column}
.cita .sug[hidden]{display:none}
.cita .sug button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:none;border-bottom:1px solid #F0F0F0;background:#FFF;cursor:pointer;font-family:inherit;text-align:left}
.cita .sug button:hover{background:#F7F7F7}.cita .sug strong{font-size:14px;color:#1B1B1B}.cita .sug span{font-size:12px;color:#5A5A5A}
.cita .enlace{border:none;background:none;padding:8px 0 0;font-family:inherit;font-size:12px;text-decoration:underline;cursor:pointer;color:#5A5A5A}
.cita .centro-dir{font-size:14px;margin:0;color:#383838}
.cita .cal{border:1px solid #EBEBEB;border-radius:16px;padding:12px}
.cita .cal-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.cita .flecha{width:32px;height:32px;border:none;border-radius:50%;background:#F0F0F0;cursor:pointer;font-size:18px;line-height:1}.cita .flecha:disabled{opacity:.3;cursor:default}
.cita .cal-sem,.cita .cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cita .cal-sem span{font-size:11px;font-weight:700;color:#8A8A8A;padding:4px 0}
.cita .cal-dias button{aspect-ratio:1;border:none;border-radius:50%;background:none;font-family:inherit;font-size:14px;cursor:pointer;color:#1B1B1B}
.cita .cal-dias button:hover:not(:disabled){background:#F0F0F0}.cita .cal-dias button:disabled{color:#CCCCCC;cursor:default}
.cita .cal-dias button.activo{background:#000;color:#FFF}
.cita .horas{margin-top:12px}.cita .grupo{margin-top:10px}.cita .grupo .et{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A8A8A;margin-bottom:6px}
.cita .rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.cita .rej button{padding:10px 0;border:1.5px solid #E0E0E0;border-radius:10px;background:#FFF;font-family:inherit;font-size:14px;cursor:pointer;color:#1B1B1B}
.cita .rej button.activo{background:#000;color:#FFF;border-color:#000}
.cita .cargando{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}.cita .cargando i{height:40px;border-radius:10px;background:linear-gradient(90deg,#F0F0F0,#E6E6E6,#F0F0F0);background-size:200% 100%;animation:crBrillo 1.2s infinite}
@keyframes crBrillo{from{background-position:200% 0}to{background-position:-200% 0}}
.cita .resumen{background:#CCFF4F;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;margin:0 0 4px}
.cita .condiciones{background:#F4F4F4;border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55;margin:14px 0 0;color:#383838}
.cita .check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:12px 0 0}.cita .check input{width:auto;margin-top:2px}
.cita .err{color:#B3261E;font-size:13px;margin:8px 0 0;min-height:0}.cita .nota{font-size:12px;color:#5A5A5A;margin:8px 0 0}
.cita #c-pagar{width:100%;margin-top:12px;padding:15px}
.cita .senuelo{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:560px){.cita{padding:0;align-items:flex-end}.cita .caja{max-height:92vh;border-radius:22px 22px 0 0}.cita .rej2{grid-template-columns:1fr}}

/* 7 oct (2) — portada: tarjeta de Barcelona con el mapa de la ficha */
.centro-mapa{border-radius:24px;overflow:hidden;background:#111;box-shadow:0 1px 0 #EBEBEB}
.centro-mapa iframe{display:block;width:100%;height:280px;border:0}
.centro.centro-banda{aspect-ratio:auto;border-radius:0;min-height:150px;background:#000}
.centro.centro-banda:after{display:none}
.centro.centro-banda .cerca{top:-264px}
.centro.centro-banda:hover{transform:none;box-shadow:none}
/* ventana de cita: animación más suave, calendario más pequeño, sugerencias dentro de la ventana */
.cita .velo{animation:crVelo .35s ease both}
.cita .caja{animation:crCaja .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes crVelo{from{opacity:0}to{opacity:1}}
@keyframes crCaja{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cita .p.on{animation:crPaso .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes crPaso{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cita .cal{max-width:330px;padding:10px}
.cita .cal-cab{font-size:13px}.cita .flecha{width:28px;height:28px;font-size:16px}
.cita .cal-dias{gap:2px}.cita .cal-dias button{aspect-ratio:auto;height:34px;font-size:13px;border-radius:10px}
.cita .cal-sem span{font-size:10px;padding:2px 0}
.cita .sug{position:static;margin-top:6px;box-shadow:none}
.cita .num-falta input{border-color:#1B1B1B}
@media (max-width:560px){.cita .cal{max-width:none}.cita .caja{animation:crCajaMov .45s cubic-bezier(.2,.8,.2,1) both}}
@keyframes crCajaMov{from{transform:translateY(100%)}to{transform:none}}
.cita .calle-num{grid-template-columns:1fr 90px}
@media (max-width:560px){.cita .calle-num{grid-template-columns:1fr 90px}}
.pie-web a.red{display:inline-flex;align-items:center;gap:10px}.pie-web a.red img{width:22px;height:22px;border-radius:5px;flex:none}
.pie-web a.red img.logo-lab-pie{width:auto;height:12px;border-radius:0}
.h2-marca{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.h2-marca .logo-lab{height:clamp(16px,1.6vw,22px);width:auto}
.btn .logo-lab-btn{height:12px;width:auto;display:inline-block}
.cita [hidden]{display:none !important}
.cita .dir-ok{margin:10px 0 0;font-size:13px;color:#1B6E2E;font-weight:600}
.cita .num-piso{grid-template-columns:110px 1fr}
.cita input:disabled{background:#F7F7F7;color:#AAA}
.cita .p.on{animation:none}.cita .p.nuevo{animation:crPaso .5s cubic-bezier(.2,.8,.2,1) both}
.cita .caja{width:min(760px,100%)}
.cita .cuando{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
.cita .cuando .cal{max-width:none}
.cita .col-horas{min-height:120px}.cita .col-horas .horas{margin-top:0}
.cita .et-horas{display:block;font-size:13px;font-weight:700;margin:6px 0 4px}
.cita .col-horas .rej{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
@media (max-width:700px){.cita .cuando{grid-template-columns:1fr}}
.cita .cal-dias button.activo,.cita .cal-dias button.activo:hover{background:#000;color:#FFF}
.cita .rej button small{display:block;font-size:9px;color:#8A8A8A;margin-top:2px}.cita .rej button.activo small{color:#CCC}
.cita .alt{margin-top:10px}.cita .alt p{font-size:13px;margin:0 0 8px}
.cita .rej3{display:grid;grid-template-columns:100px 1fr 1fr;gap:10px}@media (max-width:560px){.cita .rej3{grid-template-columns:1fr 1fr 1fr}}
.cita [data-p="dia"] .cal{max-width:330px}
.cita .extra{border:1.5px solid #CCFF4F;background:#FBFFEF;border-radius:14px;padding:14px;margin:14px 0 0}
.cita .extra.cerrado .extra-cuerpo{display:none}.cita .extra-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.cita .extra .enlace{padding:0}.cita .chk2{display:flex;flex-wrap:wrap;gap:4px 18px}.cita .chk2 .check{margin-top:8px}
.cita .persona{display:grid;grid-template-columns:90px 1fr 34px;gap:8px;align-items:end;margin-top:8px}
.cita .persona select{padding:12px 10px;border:1px solid #E0E0E0;border-radius:12px;font-family:inherit;font-size:14px;background:#FFF;width:100%}
.cita .persona .quitar{width:34px;height:44px;border:none;background:none;font-size:20px;cursor:pointer;color:#8A8A8A}
.cita .btn.mini{padding:9px 14px;font-size:10px;margin-top:10px}.cita .btn.borde.mini:hover{background:#1B1B1B;color:#FFF}
.cita .op{display:flex;align-items:center;gap:8px;margin-top:10px}.cita .op span{flex:1}.cita .op b{font-size:13px}
.cita .op-tit{font-size:13px;font-weight:700;margin:14px 0 8px}
.cita .cuantos{display:flex;flex-wrap:wrap;gap:6px}.cita .cuantos button{padding:8px 12px;border:1.5px solid #E0E0E0;border-radius:999px;background:#FFF;font-family:inherit;font-size:13px;cursor:pointer;color:#1B1B1B}
.cita .cuantos button.activo{background:#000;color:#FFF;border-color:#000}
.cita .persona{grid-template-columns:28px 80px 1fr auto}.cita .persona .n{font-size:12px;font-weight:700;color:#8A8A8A;padding-bottom:14px}.cita .persona .pr{font-size:13px;font-weight:700;padding-bottom:14px;white-space:nowrap}
.cita .total{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#000;color:#FFF;font-size:14px;line-height:1.5}.cita .total:empty{display:none}.cita .total b{color:#CCFF4F}
/* 7 oct (3) — «¿Aprovechamos la visita?» con el mismo estilo que el resto de la ventana */
.cita .extra{background:#FFF;border:1px solid #EBEBEB;border-radius:16px;padding:16px}
.cita .extra .opc{margin-top:12px}
.cita input:focus,.cita select:focus,.cita textarea:focus{outline:none;border-color:#000;box-shadow:0 0 0 1px #000}
.cita input[type=number]{-moz-appearance:textfield}.cita input[type=number]::-webkit-inner-spin-button,.cita input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cita select{-webkit-appearance:none;appearance:none;padding:12px 38px 12px 14px;border:1px solid #E0E0E0;border-radius:12px;font-family:inherit;font-size:15px;color:#1B1B1B;width:100%;
  background:#FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231B1B1B' stroke-width='1.6'%3E%3Cpath d='M2 4.5L6 8.5l4-4'/%3E%3C/svg%3E") no-repeat right 14px center}
.cita .personas-cab,.cita .persona{display:grid;grid-template-columns:24px 76px 1fr 52px;gap:8px;align-items:center}
.cita .personas-cab{margin-top:12px;font-size:12px;font-weight:600;color:#5A5A5A}
.cita .persona{margin-top:6px}.cita .persona .n{font-size:12px;font-weight:700;color:#8A8A8A;padding:0}
.cita .persona .pr{font-size:14px;font-weight:700;padding:0;text-align:right}
.cita .persona input,.cita .persona select{margin:0}
.cita .tarj span[data-precio]{font-weight:700;color:#1B1B1B}
.cita .persona select{padding:12px 34px 12px 14px;background:#FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231B1B1B' stroke-width='1.6'%3E%3Cpath d='M2 4.5L6 8.5l4-4'/%3E%3C/svg%3E") no-repeat right 12px center}
.cita .t-paso{margin:0 0 12px;font-size:16px;font-weight:800;font-stretch:112%;color:#1B1B1B}
.centro-mapa .mapa-img{position:relative;display:block}.centro-mapa .mapa-img img{width:100%;height:280px;object-fit:cover;display:block}
.centro-mapa .mapa-img span{position:absolute;left:12px;top:12px;background:#FFF;color:#1B1B1B;font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.centro-mapa .mapa-img:hover{text-decoration:none}
/* 7 oct — /gracias: fotos para preparar la prótesis (mismo estilo de tarjetas que la ventana de cita) */
.fotos-cli{margin:40px auto 0;max-width:560px;text-align:left;background:#FFF;border:1px solid #EBEBEB;border-radius:16px;padding:20px}
.fotos-cli .t-paso{margin:0 0 8px;font-size:16px;font-weight:800;font-stretch:112%;color:#1B1B1B}
.fotos-cli .g-intro{margin:0 0 16px;color:#3A3A3A;font-size:15px;line-height:1.55}
.fotos-cli .subir{cursor:pointer;margin-right:8px}
.fotos-cli .miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.fotos-cli .miniaturas:empty{display:none}
.fotos-cli .mini{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;background:#F4F4F4;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.fotos-cli .mini img{width:100%;height:100%;object-fit:cover}
.fotos-cli .mini button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:#000;color:#FFF;font-size:14px;line-height:1;cursor:pointer}
.fotos-cli #g-enviar:disabled{opacity:.35;cursor:default}
.fotos-cli .g-estado{margin:10px 0 0;font-size:14px;font-weight:600;color:#1B1B1B}.fotos-cli .g-estado:empty{display:none}.fotos-cli .g-estado.mal{color:#B00020}
.fotos-cli .g-nota{margin:12px 0 0;font-size:13px;color:#6A6A6A}
.fotos-cli [hidden]{display:none!important}
/* 7 oct — revisión móvil/ordenador */
.cta-flota{transition:opacity .25s ease,transform .25s ease}
.cta-flota.oculta{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
/* portada sin foto: no dejar un bloque negro vacío enorme; el texto centrado */
.portada:not(:has(.fondo[style])){min-height:0;align-items:center;padding:clamp(56px,9vw,120px) 0}
.portada:not(:has(.fondo[style])) .txt{padding-bottom:0}
/* los botones dentro de textos no van subrayados */
.texto a.btn,.texto .btn,p a.btn{text-decoration:none}
/* precios (19 oct): tabla de servicios y tarjetas de bonos y programas */
.precios{width:100%;border-collapse:collapse;table-layout:fixed;margin:0 0 clamp(28px,3vw,40px);font-size:16px}
.precios th{padding:0 0 10px;border-bottom:2px solid #1B1B1B;text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5A5A5A}
.precios td{padding:14px 0;border-bottom:1px solid #DCDCDC;line-height:1.4}
.precios .eur{width:130px;text-align:right;white-space:nowrap;padding-left:16px}
.precios td.eur{font-weight:700}
.precio-grande{margin:0!important;font-size:clamp(22px,2vw,27px)!important;font-weight:800;font-stretch:125%;line-height:1!important;color:#000!important}
.tarjeta .lleva{margin:4px 0 0;padding-left:20px;font-size:15px;line-height:1.6;color:#383838}
.tarjeta .suelto{margin-top:auto!important;padding-top:6px;font-size:13px!important;color:#5A5A5A!important}
.ahorro{align-self:flex-start;padding:6px 12px;border-radius:999px;background:#CCFF4F;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#000}
.precio-linea{margin:24px 0 0;font-size:16px;line-height:1.6;color:#383838}.precio-linea a{text-decoration:underline;text-decoration-color:#CCFF4F;text-decoration-thickness:3px}
.nota-precios{margin:22px 0 0;font-size:13px;color:#5A5A5A}
@media (max-width:520px){.precios{font-size:15px}.precios .eur{width:92px;padding-left:10px}.precios th{font-size:10px;letter-spacing:.08em}}
/* menú con desplegables (19 oct): Centros · Servicios · Programas y suscripciones */
.cab nav .desp{position:relative}
.cab .nav-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:#1B1B1B}
.cab .nav-btn svg{transition:transform .2s ease}
.cab .desp.abierto .nav-btn svg,.cab .desp:hover .nav-btn svg{transform:rotate(180deg)}
.cab .desp .sub{display:none;position:absolute;top:calc(100% + 14px);left:-14px;min-width:250px;flex-direction:column;background:#FFF;border:1px solid #EBEBEB;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.08);padding:8px;z-index:60}
.cab .desp .sub:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.cab .desp:hover .sub,.cab .desp.abierto .sub,.cab .desp:has(:focus-visible) .sub{display:flex}
.cab .desp.cerrar .sub{display:none}
.cab .desp.cerrar .nav-btn svg{transform:none}
.cab .desp .sub a{padding:12px 12px;border-radius:10px}
.cab .desp .sub a:hover{background:#F4F4F4;opacity:1}
.cab .desp .sub a[aria-current=page]{background:#CCFF4F}
/* el menú (Centros · Servicios · Programas y suscripciones) no cabe junto al logo por debajo de 1240 px: botón de menú */
@media (max-width:1240px){
  .cab nav{display:none}
  .menu-movil{display:flex;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#1B1B1B;padding:0}
  .cab.abierta nav{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:absolute;left:0;right:0;top:100%;background:#FFF;padding:22px clamp(20px,4vw,56px) 26px;border-bottom:1px solid #EBEBEB}
  .cab.abierta nav a{font-size:13px}
  .cab.abierta nav .desp{width:100%}
  .cab.abierta nav .nav-btn{pointer-events:none;color:#5A5A5A;text-decoration:none}
  .cab.abierta nav .nav-btn svg{display:none}
  .cab.abierta nav .desp .sub{display:flex;position:static;min-width:0;border:0;box-shadow:none;background:none;padding:8px 0 0;gap:2px}
  .cab.abierta nav .desp .sub a{padding:8px 10px;margin-left:-10px}
}
.sec[id]{scroll-margin-top:84px}
.sub-tit{margin:clamp(36px,4vw,52px) 0 18px!important}
/* suscripciones (19 oct, 2.ª versión): ninguna destacada, cada tarjeta con su degradado (como Higgsfield), en colores de la marca */
.susc-cab{text-align:center;max-width:720px;margin:0 auto}
.susc-cab p{margin:0;font-size:17px;line-height:1.6;color:#383838}
.ciclo{display:flex;width:max-content;margin:26px auto clamp(28px,3vw,40px);background:#F4F4F4;border-radius:999px;padding:5px;gap:4px}
.ciclo button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;border-radius:999px;padding:8px 16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1B1B1B;cursor:pointer}
.ciclo button[aria-pressed=true]{background:#000;color:#FFF}
.ciclo .menos{background:#CCFF4F;color:#000;border-radius:999px;padding:2px 7px;font-size:10px;letter-spacing:.04em}
.planes{display:grid;grid-template-columns:1fr;max-width:560px;margin:0 auto;gap:clamp(14px,1.8vw,24px);align-items:stretch}
@media (min-width:1180px){.planes{grid-template-columns:repeat(3,1fr);max-width:none}}   /* más estrechas, las frases de la caja no caben en una línea */
.plan{display:flex;flex-direction:column;gap:12px;border:1px solid #E4E4E4;border-radius:24px;padding:clamp(22px,2.2vw,30px);background:#F6F6F6}
/* tarjetas (19 oct, 3.ª vez, Eric: «¿qué parte no entiendes de un degradado?»): la misma base clara en las tres y un degradado
   suave arriba, de blanco a gris, algo más intenso en cada plan. Ninguna en bloque de color: que se vea la progresión sin forzar. */
.plan{background:#0A0A0A;border-color:#000;color:#FFF}
.plan-starter,.plan-ninguno{background:linear-gradient(180deg,#1C1C1C 0%,#0A0A0A 45%)}
.plan-pro{background:linear-gradient(180deg,#292929 0%,#0A0A0A 50%)}
.plan-magnate{background:linear-gradient(180deg,#383838 0%,#0A0A0A 55%)}
.plan .caja{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.plan-cab{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-width:0}
.plan h3{margin:0 4px 0 0!important;font-size:clamp(19px,1.6vw,22px)!important;font-weight:800;font-stretch:125%!important;text-transform:uppercase;line-height:1!important}
.etq-dto,.etq-mejor{padding:4px 7px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#CCFF4F;color:#000}
.plan-desc{margin:-4px 0 0;font-size:15px;line-height:1.5;color:#383838}
.caja{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px 16px 14px}
.caja-tit{margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700}
.caja-eq{margin:4px 0 0 26px;font-size:clamp(12px,.95vw,13px);line-height:1.45;color:#5A5A5A}
.caja-fija{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#383838}
.caja-fija .ico{width:18px;height:18px}
.cant input[type=range],.bp-paso input[type=range]{width:100%;margin:14px 0 4px;accent-color:#000;cursor:pointer}
.cant-marcas{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding:0 4px}
.cant-pie{margin:6px 0 0;font-size:12px;color:#5A5A5A;text-align:center}
.plan-precio{margin:6px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px}
.plan-precio s{font-size:clamp(15px,1.3vw,18px);font-weight:800;font-stretch:125%;color:#9A9A9A}
.plan-precio s:empty{display:none}
.plan-precio .cifra{font-size:clamp(25px,2.2vw,30px);font-weight:800;font-stretch:125%;line-height:1}
.plan-precio .por{flex-basis:100%;font-size:12px;color:#5A5A5A}   /* siempre debajo: en las tres tarjetas igual, quepa o no al lado */
.plan .btn{justify-content:center;width:100%;padding:10px 18px;font-size:10.5px}
.plan .plan-btn{background:#CCFF4F;color:#000;border:0}
.plan-nota{margin:-2px 0 0;text-align:center;font-size:13px;color:#383838}
.grupo-tit{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.grupo ul{list-style:none;margin:0;padding:0}
.grupo li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.35}
.grupo li:first-child{border-top:0}
.grupo .que{flex:1}
.grupo li.no .que{color:#9A9A9A}
.tag{font-size:11px;font-weight:700;background:#CCFF4F;color:#000;padding:4px 8px;border-radius:6px;white-space:nowrap}
.tag.gris{background:rgba(0,0,0,.06);color:#8A8A8A}
.plan-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.plan-lista li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;line-height:1.4}
.plan-lista li.no{color:#9A9A9A}
.plan-suelto{margin:-6px 0 0;font-size:12px;color:#5A5A5A}
.plan-suelto:empty{display:none}
.plan .plan-lista{margin-top:auto}
.susc-nuevo{margin:12px auto 0!important;font-size:14px!important;color:#5A5A5A!important}
.susc-nuevo a{color:#1B1B1B;text-decoration:underline;text-underline-offset:3px}
.ico{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.si .ico,.ico.si{background:#CCFF4F;color:#000}
.no .ico,.ico.no{background:transparent;color:#AAAAAA}
/* buscador de planes: lo que necesitas → lo más barato para eso */
.busca-plan{margin-top:clamp(40px,5vw,64px);background:#FAFAFA;border:1px solid #EBEBEB;border-radius:28px;padding:clamp(22px,3.4vw,44px)}
.bp-cab h3{margin:0 0 8px!important;font-size:clamp(22px,2.4vw,32px)!important;font-weight:800;font-stretch:125%!important;text-transform:uppercase;line-height:1.05!important}
.bp-cab p{margin:0 0 clamp(20px,2.4vw,30px);font-size:16px;line-height:1.6;color:#383838;max-width:680px}
.bp-cuerpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);align-items:start}
@media (max-width:900px){.bp-cuerpo{grid-template-columns:1fr}}
.bp-preg{display:flex;flex-direction:column;gap:22px}
.bp-paso{display:grid;grid-template-columns:30px 1fr;gap:14px}
.bp-tit{margin:2px 0 4px;font-size:17px;font-weight:800}
.bp-ayuda{margin:0;font-size:13px;line-height:1.5;color:#5A5A5A}
.bp-base{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bp-base button,.bp-chip{border:1px solid #DCDCDC;background:#FFF;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600;color:#1B1B1B;cursor:pointer;text-align:left}
.bp-base button[aria-pressed=true]{background:#000;border-color:#000;color:#FFF}
.bp-valor{margin:8px 0 0;font-size:14px;font-weight:700;text-align:center}
.bp-opc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px;margin-top:12px}
.bp-chip{display:flex;align-items:center;gap:10px}
.bp-chip .marca{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid #BDBDBD;display:inline-flex;align-items:center;justify-content:center;color:transparent}
.bp-chip[aria-pressed=true]{border-color:#A0CD28;background:rgba(204,255,79,.25)}
.bp-chip[aria-pressed=true] .marca{background:#CCFF4F;border-color:#CCFF4F;color:#000}
.bp-lado{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.bp-ciclo{margin:0 auto}
.bp-reco{margin:0 0 10px;text-align:center;font-size:14px;color:#5A5A5A}
.bp-reco strong{color:#000}
.bp-uso{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:#5A5A5A}
.bp-uso b{color:#000}
.barra-uso{height:6px;border-radius:99px;background:rgba(0,0,0,.08);margin-top:6px;overflow:hidden}
.barra-uso i{display:block;height:100%;background:#000;border-radius:99px}
.bp-lineas{list-style:none;margin:0;padding:0;font-size:14px}
.bp-lineas li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.12)}
.bp-lineas li span:last-child{font-weight:700;white-space:nowrap}
.bp-porque summary{cursor:pointer;font-size:13px;font-weight:700;text-align:center;list-style:none;text-decoration:underline;text-decoration-color:#CCFF4F;text-decoration-thickness:3px}
.bp-porque summary::-webkit-details-marker{display:none}
.bp-porque ul{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.bp-porque li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bp-porque li.elegido{font-weight:800}
.bp-porque p{margin:10px 0 0;font-size:12px;line-height:1.5;color:#5A5A5A}
@media (max-width:900px){.bp-lado{position:static}}
.fidel{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,4vw,56px);align-items:end;background:#000;color:#FFF;border-radius:24px;padding:clamp(26px,4vw,52px)}
.fidel h3{margin:0 0 14px!important;font-size:clamp(20px,2vw,28px)!important;font-weight:800;font-stretch:125%!important;text-transform:uppercase;line-height:1.06!important}
.fidel p{margin:0 0 12px;font-size:16px;line-height:1.6;color:#E2E2E2}
.fidel .ejemplo{margin:18px 0 0;font-size:14px;color:#CCFF4F;font-weight:600}
.tramos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px);height:250px}
.tramos li{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:100%}
.tramos .barra{display:block;height:calc(var(--alto) * .55);background:#CCFF4F;border-radius:12px 12px 4px 4px}
.tramos .precio-t{font-size:clamp(13px,1.2vw,16px);font-weight:800;color:#FFF;white-space:nowrap}
.tramos-pie{margin:14px 0 0;display:flex;align-items:center;gap:8px;font-size:13px;color:#BDBDBD}
.tramos-pie svg{flex:none;color:#CCFF4F}
.tramos li:first-child .barra{background:#5A5A5A}
.tramos strong{display:block;min-height:2.2em;font-size:clamp(13px,1.3vw,18px);font-weight:800;font-stretch:125%;line-height:1.1}
.tramos span:last-child{font-size:12px;color:#BDBDBD;line-height:1.3}
.comparar-tit{margin:clamp(48px,5vw,72px) 0 18px!important;text-align:center;font-size:clamp(18px,1.8vw,22px)!important;font-weight:800;font-stretch:125%!important;text-transform:uppercase}
.comparar{overflow-x:auto;border:1px solid #E2E2E2;border-radius:18px;max-width:920px;margin:0 auto}
.comparar table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.comparar th:first-child{width:43%}
.comparar th,.comparar td{padding:14px 18px;text-align:center;border-bottom:1px solid #EBEBEB}
.comparar th:first-child,.comparar td:first-child{text-align:left}
.comparar thead th{background:#F4F4F4;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.comparar td .ico{margin:0 auto}
.comparar tbody tr:last-child td{border-bottom:0}
@media (max-width:720px){.comparar-tit,.comparar{display:none}.tramos{height:200px}.ciclo button{padding:8px 13px}}
.bp-ciclo{background:#EFEFEF}

/* tarjetas negras (27 oct): textos claros, precio en verde lima y el % de ahorro al lado */
.plan .plan-desc{color:#BDBDBD}
.plan .caja-eq,.plan .cant-pie,.plan .plan-precio .por,.plan .plan-suelto,.plan .bp-uso,.plan .bp-porque p{color:#A3A3A3}
.plan .plan-nota{color:#D0D0D0}
.plan .caja-fija{background:rgba(255,255,255,.07);color:#E2E2E2}
.plan input[type=range]{accent-color:#CCFF4F}
.plan .plan-precio s{color:#7A7A7A}
.plan .plan-precio .cifra{color:#CCFF4F}
.plan .pct{align-self:center;padding:3px 7px;border-radius:6px;background:#CCFF4F;color:#000;font-size:11px;font-weight:800;letter-spacing:.04em}
.plan .pct:empty{display:none}
.plan .grupo li{border-top-color:rgba(255,255,255,.08)}
.plan .grupo li.no .que,.plan .plan-lista li.no{color:#6E6E6E}
.plan .plan-lista li.info{color:#D0D0D0}
.plan .plan-lista li.info .ico{background:rgba(255,255,255,.1);color:#FFF}
.plan .tag.gris{background:rgba(255,255,255,.08);color:#8A8A8A}
.plan .no .ico,.plan .ico.no{color:#5E5E5E}
.plan .bp-lineas li{border-bottom-color:rgba(255,255,255,.15)}
.plan .bp-uso b{color:#FFF}
.plan .barra-uso{background:rgba(255,255,255,.15)}.plan .barra-uso i{background:#CCFF4F}
.plan .bp-porque li{border-bottom-color:rgba(255,255,255,.1)}

/* gráfica pequeña en cada tarjeta (27 oct): solo pagando cada mes; el precio de cada tramo al pasar el ratón o tocar la barra */
.mini{margin:0 0 2px}
.plan.ciclo-a .mini{display:none}
.mini-graf{position:relative;height:60px;margin-top:4px}
.mini-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#CCFF4F;box-shadow:0 0 0 3px #0A0A0A;cursor:pointer;outline:none;transition:transform .15s}
.mp:hover,.mp:focus{transform:scale(1.3)}
.mp:hover::after,.mp:focus::after{content:attr(data-t);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) scale(.77);transform-origin:bottom center;z-index:5;padding:5px 8px;border-radius:7px;background:#FFF;color:#000;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.mp-0:hover::after,.mp-0:focus::after{left:-4px;transform:scale(.77);transform-origin:bottom left}
.mp-3:hover::after,.mp-3:focus::after{left:auto;right:-4px;transform:scale(.77);transform-origin:bottom right}
.mini-ejes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:5px;font-size:10px;color:#8A8A8A;text-align:center}
/* efecto ruleta en las cifras */
.plan-precio .cifra,.plan .pct{font-variant-numeric:tabular-nums}
.rd-col{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.rd-tira{display:flex;flex-direction:column;will-change:transform}
.rd-tira span{display:block;height:1em;line-height:1}
.rd-fijo{display:inline-block;line-height:1;vertical-align:top}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 27 oct: «uno cada 15 días» a la derecha del título de la caja; gráfica de línea con el precio encima de cada punto */
.caja-tit .caja-cada{margin-left:auto;padding-left:10px;font-size:12px;font-weight:500;color:#A3A3A3;white-space:nowrap}
.plan .caja-eq{margin-top:6px}
.mini-graf{height:76px}
.mp-v{position:absolute;transform:translate(-50%,-24px);font-size:11px;font-weight:700;color:#E2E2E2;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
/* 27 oct: la página de precios empieza por «Suscripciones» (es su H1) */
.susc-cab h1{margin:0 0 clamp(16px,1.8vw,24px);font-size:clamp(24px,2.6vw,36px);font-weight:800;font-stretch:125%;line-height:1.06;text-transform:uppercase}
.caja-tit{flex-wrap:wrap;row-gap:2px}
.caja-tit [data-k=tit]{white-space:nowrap;font-size:15px}
.caja-tit .caja-cada{font-size:11.5px}
.caja-tit [data-k=tit]{font-size:14.5px}
.caja-tit .caja-cada{padding-left:0}
.plan .caja-eq{margin-left:0}
@media (min-width:1180px) and (max-width:1300px){.caja-tit [data-k=tit]{font-size:14px}.caja-tit .caja-cada{font-size:11px}}
/* desplegable de idioma junto a «Reservar» (27 oct) */
.cab .der .idioma .nav-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cab .der .idioma .sub{left:auto;right:0;min-width:170px}
.cab .der .idioma .sub a{font-size:14px;font-weight:600;color:#1B1B1B}
.cab .desp .sub a[aria-current=true]{background:#CCFF4F}
@media (max-width:860px){.cab .env{grid-template-columns:64px 1fr 64px}.cab .der{justify-self:end}}
/* 27 oct (Eric): el deslizador de Magnate, la parte llena y el botón del mismo verde de la marca (sin el color que pone el navegador) */
.plan input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:16px 0 8px;border-radius:99px;background:linear-gradient(to right,#CCFF4F var(--p,0%),rgba(255,255,255,.18) var(--p,0%));outline:none;cursor:pointer}
.plan input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#CCFF4F;border:none;box-shadow:none}
.plan input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#CCFF4F;border:none;box-shadow:none}
.plan input[type=range]::-moz-range-track{background:transparent}
.plan input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(204,255,79,.35)}
/* etiquetas que cambian con mensual / anual (27 oct): encima del nombre, el mismo hueco en las tres para que no se descuadren */
.plan-etqs{display:flex;flex-wrap:wrap;gap:6px;min-height:22px;margin-bottom:-4px}
.etq-pop{padding:4px 8px;border-radius:6px;background:#FFF;color:#000;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* caja de regalos (27 oct, como la de Higgsfield): verde, encima de «Qué incluye» */
.plan .caja.regalos{background:rgba(204,255,79,.09);border-color:rgba(204,255,79,.5)}
.plan .caja.regalos .grupo-tit{display:flex;align-items:center;gap:8px;color:#CCFF4F}
.plan .caja.regalos li{border-top-color:rgba(204,255,79,.16)}
.plan .caja.regalos + .caja.grupo{margin-top:-2px}
/* etiquetas al lado del nombre (27 oct, 2.ª versión): verde de la marca y una en rojo */
.plan-cab{flex-wrap:wrap;row-gap:6px}
.plan-cab .plan-etqs{display:inline-flex;flex-wrap:wrap;gap:6px;min-height:0;margin:0}
.etq-v,.etq-r{padding:4px 7px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.etq-v{background:#CCFF4F;color:#000}
.etq-r{background:#FF3B3B;color:#FFF}
.etq-v,.etq-r{padding:4px 6px;font-size:9.5px;letter-spacing:.04em}
.plan h3{margin-right:2px!important}
/* 27 oct (Eric): % de ahorro en ROJO; etiquetas («Mejor oferta», «Más económica»…) en AZUL tecnológico; «Te regalamos» sin borde verde
   (solo los ticks verdes); tarjetas un poco más pequeñas */
.plan .pct{background:#FF3B3B;color:#FFF}
.etq-v,.etq-mejor{background:#2F6BFF;color:#FFF}
.plan .caja.regalos{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.plan .caja.regalos .grupo-tit{color:#FFF}
.plan .caja.regalos li{border-top-color:rgba(255,255,255,.08)}
@media (min-width:1180px){.planes{max-width:1160px;margin-left:auto;margin-right:auto}}
.plan{padding:clamp(18px,1.8vw,24px);gap:10px}
.plan h3{font-size:clamp(17px,1.4vw,20px)!important}
.plan-desc{font-size:14px}
.plan-precio .cifra{font-size:clamp(22px,2vw,27px)}
.plan .caja{padding:13px 14px 11px}
.caja-tit [data-k=tit]{font-size:14px}
.grupo li{padding:8px 0;font-size:13.5px}
.plan-lista li{font-size:13.5px}
.plan .btn{padding:9px 16px}
/* 27 oct: el desplegable de idioma se abría pegado al borde derecho de la pantalla → ahora justo debajo de su botón */
.cab .der .idioma{position:relative}
/* etiquetas y % en cursiva (como Higgsfield); el % de ahorro, un poco más pequeño */
.etq-v,.etq-r,.etq-mejor,.plan .pct{font-style:italic}
.plan .pct{padding:2px 5px;font-size:9.5px;border-radius:5px}
/* 27 oct (Eric): «Te regalamos» SÍ con su borde verde; lo que sobraba era la bola verde detrás de los ticks → ticks verdes sin bola */
.plan .caja.regalos{background:rgba(204,255,79,.09);border-color:rgba(204,255,79,.5)}
.plan .caja.regalos .grupo-tit{color:#CCFF4F}
.plan .caja.regalos li{border-top-color:rgba(204,255,79,.16)}
.plan .si .ico,.plan .ico.si{background:transparent;color:#CCFF4F}
.plan .si .ico svg,.plan .ico.si svg{width:18px;height:18px}
.etq-v,.etq-r{padding:4px 5px;letter-spacing:.02em}
/* 27 oct (Eric): precio en BLANCO y el tachado en ROJO; el % al lado del nombre y las etiquetas a la derecha del todo
   (en Magnate, las dos una encima de otra) */
.plan .plan-precio .cifra{color:#FFF}
.plan .plan-precio s{color:#FF3B3B;text-decoration-color:#FF3B3B}
.plan-cab{flex-wrap:nowrap;align-items:center;gap:8px}
.plan-cab .pct{flex:none}
.plan-cab .plan-etqs{margin-left:auto;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
/* 27 oct (Eric): «al mes» en la misma línea que el precio; la etiqueta azul justo al lado del %; la gráfica pequeña en azul */
.plan .plan-precio .por{flex-basis:auto;align-self:baseline}
.plan-cab .plan-etqs{margin-left:0;flex-direction:row;align-items:center}
.mp{background:#2F6BFF}
/* 27 oct (Eric): fuera la raya amarilla al pasar el ratón por los idiomas (y el resto de desplegables) y bajo «Ver por qué» */
.cab .desp .sub a:hover{text-decoration:none}
.bp-porque summary{text-decoration:none;display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center}
.bp-porque summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.bp-porque[open] summary::after{transform:translateY(2px) rotate(-135deg)}
/* 27 oct (Eric, con dibujo): la etiqueta del plan Ahorro va FUERA de la tarjeta, como una pestaña encima, de lado a lado */
.plan:has(.plan-pensado){position:relative;margin-top:30px;border-top-left-radius:0;border-top-right-radius:0}
.plan-pensado{position:absolute;left:-1px;right:-1px;bottom:100%;margin:0;padding:7px 12px;border-radius:16px 16px 0 0;background:#2F6BFF;color:#FFF;font-size:11px;font-weight:700;font-style:italic;line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* con los 3 planes en fila, todos bajan lo mismo para que nombres, precios y botones queden alineados */
@media (min-width:1180px){.planes:has(.plan-pensado) .plan{margin-top:30px}}
/* «En clínica»: etiqueta montada sobre el borde de arriba a la derecha de la caja de mantenimientos */
.plan .caja:has(.caja-donde){position:relative}
.caja-donde{position:absolute;top:0;right:12px;transform:translateY(-50%);padding:3px 9px;border-radius:99px;background:#CCFF4F;color:#0A0A0A;font-size:10.5px;font-weight:700;line-height:1.2;white-space:nowrap}
@media (max-width:400px){.plan-pensado{font-size:10px;padding:7px 8px}}
/* 28 oct: bonos de mantenimiento — una caja sencilla debajo de las tarjetas (no dependen de mensual/anual) */
.bonos-prop{max-width:1160px;margin:clamp(20px,2.4vw,32px) auto 0;padding:clamp(20px,2.4vw,30px);border-radius:24px;background:#F4F4F4;display:grid;gap:clamp(14px,2vw,28px);align-items:center}
@media (min-width:900px){.bonos-prop{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.bonos-prop h3{margin:0 0 8px!important;font-size:clamp(16px,1.5vw,20px)!important;font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:1.1!important}
.bonos-prop p{margin:0;font-size:14.5px;line-height:1.55;color:#383838}
.bonos-prop ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bonos-prop li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:#FFF}
.bonos-prop .bono-que{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bonos-prop .bono-que strong{font-size:15px}
.bonos-prop .bono-que span{font-size:13px;color:#5A5A5A}
.bonos-prop .bono-precio{font-size:clamp(20px,1.9vw,24px);font-weight:800;font-stretch:125%;white-space:nowrap}
.bonos-prop .btn{padding:11px 18px;white-space:nowrap}
@media (max-width:560px){.bonos-prop li{flex-wrap:wrap}.bonos-prop .btn{flex-basis:100%}}
/* 28 oct (Eric): la bolita de los deslizadores de los planes, solo verde (sin el aro negro) */
/* 28 oct: First Class con 4 mantenimientos → el «2» de prótesis sale apagado (mínimo 3) */
.cant-marcas span.off{opacity:.3}
.cant-aviso{margin:6px 0 0;font-size:11.5px;line-height:1.4;color:#A3A3A3;text-align:center}
/* 28 oct: DOMICILIO POR ZONAS — tabla de zonas (precios y servicios), caja «¿Prefieres que vayamos a tu casa?» y zona en la cita */
.tabla-zonas{overflow-x:auto}
.zonas-dom td span{display:block;font-size:12px;color:#5A5A5A;font-weight:500}
.zonas-dom th.eur,.zonas-dom td.eur{white-space:nowrap}
@media (max-width:560px){.zonas-dom th,.zonas-dom td{padding-left:6px;padding-right:6px;font-size:13px}.zonas-dom th.eur{white-space:normal;font-size:11px}}
.texto-zonas{margin:0 0 16px;font-size:15px;line-height:1.6;color:#383838}
.nota-zonas{margin:12px 0 0;font-size:13px;color:#5A5A5A}
.casa-prop{max-width:1160px;margin:clamp(14px,1.8vw,20px) auto 0;padding:clamp(20px,2.4vw,30px);border-radius:24px;background:#F4F4F4;display:grid;gap:clamp(14px,2vw,28px);align-items:center}
@media (min-width:900px){.casa-prop{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.casa-prop .nota-zonas{grid-column:1/-1;margin-top:-6px}}
.casa-prop h3{margin:0 0 8px!important;font-size:clamp(16px,1.5vw,20px)!important;font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:1.1!important}
.casa-prop p{margin:0;font-size:14.5px;line-height:1.55;color:#383838}
.casa-prop .nota-zonas{font-size:13px;color:#5A5A5A}
.casa-prop table.precios{background:#FFF;border-radius:16px;overflow:hidden;margin:0}
.cita .dir-zona{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#F4F4F4;font-size:13px;line-height:1.5;color:#383838}
.cita .dir-zona p{margin:0}.cita .dir-zona .zona-tit{font-weight:700;color:#000;margin-bottom:2px}
/* 28 oct: buscador en clave de dinero (7 preguntas) */
.busca-plan .bp-preg{display:flex;flex-direction:column;gap:22px}
.busca-plan .bp-base button[hidden]{display:none}
.bp-casa{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.bp-casa[hidden],.bp-cuantas[hidden]{display:none}
.bp-sub{margin:0;font-size:13px;font-weight:700}
.bp-cuantas .bp-base{margin-top:6px}
.bp-dir{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:10px;align-items:end;position:relative}
.busca-plan .campo{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#5A5A5A;margin:0}
.busca-plan .campo input{padding:12px 14px;border:1px solid #DCDCDC;border-radius:12px;font-family:inherit;font-size:15px;color:#1B1B1B;width:100%;background:#FFF}
.busca-plan .campo input:disabled{background:#F7F7F7;color:#AAA}
.busca-plan .campo input:focus{outline:none;border-color:#000;box-shadow:0 0 0 1px #000}
.busca-plan .busca{position:relative;display:block}
.busca-plan .sug{grid-column:1/-1;display:flex;flex-direction:column;background:#FFF;border:1px solid #E0E0E0;border-radius:12px;overflow:hidden}
.busca-plan .sug[hidden]{display:none}
.busca-plan .sug button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:none;border-bottom:1px solid #F0F0F0;background:#FFF;cursor:pointer;font-family:inherit;text-align:left}
.busca-plan .sug button:hover{background:#F7F7F7}.busca-plan .sug strong{font-size:14px;color:#1B1B1B}.busca-plan .sug span{font-size:12px;color:#5A5A5A}
.bp-zona{margin:0;font-size:13px;font-weight:600;color:#1B6E2E}.bp-zona:empty{display:none}.bp-zona.mal{color:#C0392B}
.bp-ahorro{margin:2px 0 4px;display:flex;flex-direction:column;gap:2px}
.bp-ahorro strong{font-size:clamp(26px,2.6vw,32px);font-weight:800;font-stretch:125%;line-height:1.05;color:#CCFF4F}
.bp-ahorro span{font-size:12px;color:#A3A3A3}
.bp-msg{margin:0;font-size:13px;line-height:1.5;color:#E2E2E2}
.bp-msg:first-of-type{margin-top:2px}
.busca-plan .plan .plan-precio s{color:#FF3B3B;font-weight:700;font-size:15px;margin-right:8px}
.zonas-dom th:first-child,.zonas-dom td:first-child{min-width:104px}
.zonas-dom td strong,.zonas-dom td span{white-space:nowrap}
/* tabla de zonas: columnas de precio con su ancho natural y los títulos en varias líneas (no se pisan) */
.precios.zonas-dom{table-layout:auto}
.precios.zonas-dom th.eur{white-space:normal;width:auto;min-width:96px;line-height:1.35;vertical-align:bottom}
.precios.zonas-dom td.eur{width:auto}
.casa-prop .precios.zonas-dom th,.casa-prop .precios.zonas-dom td{padding-left:12px;padding-right:12px}
@media (max-width:560px){.precios.zonas-dom th.eur{min-width:0}.casa-prop .precios.zonas-dom th,.casa-prop .precios.zonas-dom td{padding-left:6px;padding-right:6px}.zonas-dom th:first-child,.zonas-dom td:first-child{min-width:96px}}
@media (max-width:420px){.zonas-dom th{letter-spacing:0;font-size:9.5px;hyphens:auto;-webkit-hyphens:auto}.zonas-dom th:first-child,.zonas-dom td:first-child{min-width:84px}.casa-prop .precios.zonas-dom th,.casa-prop .precios.zonas-dom td{padding-left:4px;padding-right:4px}.casa-prop{padding:16px}.zonas-dom td{font-size:13px}}
/* 28 oct (Eric): respuestas cortas en una sola línea (cada cuánto y cuánto gastar) y las 4 casillas juntas */
.bp-base[data-g="n"],.bp-base[data-g="max"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bp-base[data-g="n"] button,.bp-base[data-g="max"] button{text-align:center;padding:11px 4px;white-space:nowrap}
.busca-plan .bp-opc{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr))}
@media (max-width:480px){.bp-base[data-g="n"] button,.bp-base[data-g="max"] button{font-size:13px;padding:10px 2px;white-space:normal;line-height:1.2}}

/* 28 oct (auditoría SEO): franja de datos bajo la portada de Barcelona y de la barbería (sin encabezado) */
.franja{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.franja li{font-weight:700;font-size:14px;padding:9px 14px;border:1px solid #E0E0E0;border-radius:999px;background:#FFF}
/* 28 oct (auditoría técnica I-2): el mapa de Google se carga solo al pulsar */
.mapa-clic{position:relative;width:100%;height:340px;border-radius:18px;overflow:hidden;background:#EDEDED}
.mapa-clic img{width:100%;height:100%;object-fit:cover;display:block}
.mapa-clic .mapa-ver{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.25);white-space:nowrap}
.mapa-clic iframe{width:100%;height:100%;border:0;display:block}
#precio > .texto > h2:first-child{margin-top:0}   /* 28 oct: apartado de precio (Barcelona y barbería) */
/* 28 oct: barrios de la barbería (con búsquedas «barbería + zona»), en etiquetas compactas */
.barrios{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.barrios h3{margin:0!important;font-size:14px!important;font-weight:700;text-transform:none;letter-spacing:0;font-stretch:100%;padding:8px 14px;border:1px solid #E0E0E0;border-radius:999px;background:#FFF;line-height:1.3}
/* 28 oct: tercera opción de la cita (corte de pelo), a todo el ancho debajo de las dos de prótesis */
.cita [data-p="que"] .tarj[data-servicio="corte"]{grid-column:1/-1}
/* 28 oct: aviso de cookies (solo sale con GA4 puesto en build.py). «Rechazar» y «Aceptar» iguales. Mientras se ve, la barra de
   cita y el botón de WhatsApp suben su altura para no quedar tapados. Por debajo de las ventanas de cita (z-index 70-80). */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#FFF;border-top:1px solid #E0E0E0;box-shadow:0 -8px 30px rgba(0,0,0,.12);
  padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;justify-content:center;gap:12px 20px;flex-wrap:wrap}
.cookies[hidden]{display:none}
.cookies p{margin:0;font-size:14px;line-height:1.5;color:#383838;max-width:640px}
.cookies p a{text-decoration:underline}
.cookies-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookies-btns .btn{padding:11px 24px}
body.con-cookies .wa-flota{bottom:calc(18px + var(--cookies-alto,0px))}
body.con-cookies .cta-flota{bottom:calc(18px + var(--cookies-alto,0px))}

/* 29 oct: «Mi cuenta» (área de cliente). build.py añade este archivo al final de sitio.css SOLO con CUENTA_ACTIVA = True (apagada, la web no cambia).
   Arriba: icono a la derecha con el menú en línea; con el menú plegado, «Mi cuenta» dentro del menú. */
.cab .der .cuenta-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#1B1B1B}
.cab .der .cuenta-ico:hover{background:#F4F4F4}
.cab nav .nav-cuenta{display:none}
@media (max-width:1240px){.cab .der .cuenta-ico{display:none}.cab.abierta nav .nav-cuenta{display:block}}
.cu-intro{padding-bottom:0}
.cuenta{padding:clamp(24px,3vw,40px) 0 clamp(56px,7vw,110px)}
.cuenta .cu-caja{max-width:440px}
.cuenta h2{margin:0;font-size:clamp(18px,1.8vw,22px);font-weight:800;font-stretch:125%;line-height:1.1;text-transform:uppercase}
.cuenta form{display:flex;flex-direction:column;gap:12px}
.cuenta form[hidden]{display:none}
.cuenta .campo{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#5A5A5A}
.cuenta input{padding:13px 15px;border:1px solid #DCDCDC;border-radius:12px;font-family:inherit;font-size:16px;color:#1B1B1B;width:100%;background:#FFF}
.cuenta input:focus{outline:none;border-color:#000;box-shadow:0 0 0 1px #000}
.cuenta input[name=codigo]{max-width:240px;font-size:26px;font-weight:700;letter-spacing:.3em;text-align:center}
.cuenta .btn{align-self:flex-start}
.cuenta .btn:disabled{opacity:.55;cursor:default}
.cuenta .err{margin:0;color:#B3261E;font-size:13.5px}.cuenta .err:empty{display:none}
.cuenta .cu-ok{margin:0;color:#2E6B1F;font-size:13.5px}.cuenta .cu-ok:empty{display:none}
.cuenta .cu-nota{margin:0;font-size:13.5px;line-height:1.55;color:#5A5A5A;overflow-wrap:anywhere}
.cuenta .senuelo{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cuenta .enlace{border:none;background:none;padding:0;font-family:inherit;font-size:13px;text-decoration:underline;cursor:pointer;color:#5A5A5A}
.cuenta .enlace:disabled{text-decoration:none;cursor:default;opacity:.7}
.cuenta .cu-enlaces{display:flex;flex-wrap:wrap;gap:8px 20px;margin:2px 0 0}
.cuenta .cu-cargando{margin:0;color:#5A5A5A;font-size:14px}
.cu-hola{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:0 0 22px;border-bottom:1px solid #EBEBEB}
.cu-tit{margin:0;font-size:17px;font-weight:800;line-height:1.3;color:#1B1B1B;overflow-wrap:anywhere}
.cu-hola .cu-tit{font-size:clamp(20px,2vw,24px);font-stretch:112%}
.cu-bloque{padding:26px 0;border-bottom:1px solid #EBEBEB;display:flex;flex-direction:column;gap:12px}
.cu-bloque:last-child{border-bottom:0}
.cu-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.cu-citas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cu-citas:empty{display:none}
.cu-cita{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:6px 18px;align-items:center;background:#F4F4F4;border-radius:18px;padding:16px 18px}
.cu-cita strong{display:block;font-size:15px;color:#1B1B1B}
.cu-cita span{display:block;font-size:13.5px;line-height:1.5;color:#5A5A5A;overflow-wrap:anywhere}
.cu-cita .cu-pend{color:#7A5200;font-weight:600}
.cu-cambiar{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-decoration-color:#CCFF4F;text-decoration-thickness:3px;text-underline-offset:3px;white-space:nowrap;color:#1B1B1B}
@media (max-width:640px){.cu-cita{grid-template-columns:minmax(0,1fr)}.cu-cambiar{justify-self:start;margin-top:4px}}
.cu-pasadas summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5A5A5A;padding:6px 0}
.cu-pasadas .cu-citas{margin-top:10px}
.cu-pasadas .cu-cita{background:#FAFAFA}
.cu-vacio{margin:0;font-size:15px;line-height:1.55;color:#383838}
.cu-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0;font-size:14.5px}
.cu-datos dt{color:#5A5A5A}.cu-datos dd{margin:0;color:#1B1B1B;font-weight:600;overflow-wrap:anywhere}
.cu-bloque .btns{display:flex;flex-wrap:wrap;gap:10px}
.cu-bloque .btns:has(> [hidden]:only-child){display:none}