/* ══════════════════════════════════════════════════════════════════════
   Clínica Sanar · Hoja de estilos del sitio público
   Paleta tomada del logotipo institucional
   ══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;
  --azul:#005FAC;        /* azul corporativo   */
  --azul-2:#004A87;      /* azul profundo      */
  --azul-3:#002C55;      /* azul tinta         */
  --celeste:#00A0E0;     /* celeste logotipo   */
  --lima:#8FB800;        /* verde lima         */
  --lima-2:#B4D900;      /* lima claro         */
  --amarillo:#E0A500;    /* amarillo logotipo  */
  --naranja:#F08000;     /* naranja logotipo   */
  --wa:#25D366;          /* WhatsApp           */

  --bg:#FFFFFF;
  --bg-2:#F4F8FC;
  --bg-3:#E9F1F8;
  --line:#DCE7F1;
  --line-soft:#EDF3F9;
  --text:#0D1E2C;
  --text-2:#4B6076;
  --text-3:#7A8FA5;

  --ok:#5C8A00; --ok-bg:#EFF6DC;
  --warn:#B07B00; --warn-bg:#FDF3DA;
  --info:#005FAC; --info-bg:#E4F0FA;
  --crit:#C1272D; --crit-bg:#FAE3E4;

  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(13,30,44,.05), 0 10px 30px -18px rgba(13,30,44,.35);
  --shadow-lg:0 30px 70px -30px rgba(0,44,85,.45);
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display:"Archivo","IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.18}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:5px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
.muted{color:var(--text-2)}
.tiny{font-size:12.5px;line-height:1.55}
.mono{font-family:var(--mono);letter-spacing:-.01em}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;z-index:100}
.skip:focus{left:0}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 19px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;font-weight:600;font-size:14.5px;transition:background .15s,border-color .15s,color .15s,transform .06s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--bg-2);border-color:#C6D8E7}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:0 8px 22px -14px rgba(0,95,172,.9)}
.btn.primary:hover{background:var(--azul-2);border-color:var(--azul-2)}
.btn.lima{background:var(--lima);border-color:var(--lima);color:#fff}
.btn.lima:hover{background:#7CA300;border-color:#7CA300}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#0A2E17}
.btn.wa:hover{background:#1FBE5A;border-color:#1FBE5A}
.btn.claro{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn.claro:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.btn.sm{padding:8px 13px;font-size:13.5px}
.btn.block{width:100%}
.btn svg{flex:none}

/* ── Barra superior ─────────────────────────────────────────────────── */
.topstrip{background:var(--azul-3);color:#C6DDF0;font-size:13px}
.topstrip .wrap{display:flex;align-items:center;gap:22px;justify-content:space-between;min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topstrip a{color:#EAF3FB}
.topstrip a:hover{color:#fff}
.topstrip .items{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.topstrip .item{display:flex;align-items:center;gap:7px}
.topstrip .urg{color:#FFD873;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lima-2);flex:none;box-shadow:0 0 0 3px rgba(180,217,0,.22)}

/* ── Cabecera y navegación ──────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:42px;width:auto}
nav.main{display:flex;gap:2px;margin-left:auto;align-items:center}
nav.main a{position:relative;padding:9px 13px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:14.5px}
nav.main a:hover{background:var(--bg-2);color:var(--text)}
nav.main a.activo{color:var(--azul);font-weight:600}
nav.main a.activo::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;border-radius:2px;background:var(--azul)}
nav.main a.cta{margin-left:10px;color:#fff}
nav.main a.cta::after{display:none}
.burger{display:none;margin-left:auto;padding:9px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff}

/* ── Cabecera de página interior ────────────────────────────────────── */
.pagehead{position:relative;overflow:hidden;background:linear-gradient(168deg,#F6FAFD 0%,#EAF2F9 60%,#E4EFF8 100%);border-bottom:1px solid var(--line);padding:44px 0 46px}
.pagehead::before{content:"";position:absolute;right:-180px;top:-240px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle at 40% 40%, rgba(0,160,224,.12), transparent 68%)}
.pagehead .wrap{position:relative;z-index:1}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.8px;color:var(--text-3);margin-bottom:14px}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--azul)}
.crumbs svg{opacity:.55}
.pagehead h1{font-size:clamp(28px,3.6vw,42px);font-weight:700;max-width:20ch}
.pagehead p{margin-top:14px;font-size:16.5px;color:var(--text-2);max-width:62ch}

/* ── Portada ────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:linear-gradient(168deg,#F6FAFD 0%,#EAF2F9 55%,#E2EEF8 100%);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;right:-220px;top:-260px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle at 35% 35%, rgba(0,160,224,.13), rgba(0,95,172,.05) 55%, transparent 70%)}
.hero::after{content:"";position:absolute;left:-160px;bottom:-280px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(143,184,0,.14), transparent 68%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:76px}
.hero h1{font-size:clamp(33px,4.4vw,52px);font-weight:700;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--azul)}
.hero p.lead{margin-top:20px;font-size:17.5px;color:var(--text-2);max-width:50ch}
.hero .actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.trust{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(0,74,135,.12)}
.trust .t{display:flex;flex-direction:column}
.trust .t b{font-family:var(--display);font-size:24px;color:var(--azul-2);font-weight:700;line-height:1.2}
.trust .t span{font-size:13px;color:var(--text-2)}

.quickcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.quickcard .qhead{padding:20px 22px 16px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fff,#FAFCFE)}
.quickcard .qhead h2{font-size:18px}
.quickcard .qhead p{font-size:13.5px;color:var(--text-2);margin-top:5px}
.qlinks{padding:10px}
.qlink{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:var(--r-sm);width:100%;text-align:left;border:0;background:transparent;transition:background .14s;color:inherit}
.qlink:hover{background:var(--bg-2)}
.qlink .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.qlink .ic.a{background:var(--azul)} .qlink .ic.b{background:var(--celeste)}
.qlink .ic.c{background:var(--lima)} .qlink .ic.d{background:var(--naranja)}
.qlink b{display:block;font-family:var(--display);font-size:14.5px;font-weight:600}
.qlink .sub{display:block;font-size:12.8px;color:var(--text-2);line-height:1.45}
.qlink .arr{margin-left:auto;color:var(--text-3);transition:transform .15s;line-height:0}
.qlink:hover .arr{transform:translateX(3px);color:var(--azul)}

/* ── Secciones ──────────────────────────────────────────────────────── */
section{padding:76px 0}
section.corta{padding:56px 0}
section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:62ch;margin-bottom:40px}
.shead h2{font-size:clamp(24px,2.8vw,33px);font-weight:700}
.shead p{margin-top:14px;color:var(--text-2);font-size:16.5px}
.shead-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.shead-row .shead{margin-bottom:0}

/* ── Especialidades ─────────────────────────────────────────────────── */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filtro{padding:7px 15px;border-radius:100px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:500;color:var(--text-2);transition:all .14s}
.filtro:hover{border-color:#C6D8E7;color:var(--text)}
.filtro[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.grid-esp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.esp{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;transition:border-color .16s,box-shadow .16s,transform .16s;position:relative;overflow:hidden}
.esp::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--azul));opacity:0;transition:opacity .16s}
.esp:hover{border-color:#C6D8E7;box-shadow:var(--shadow);transform:translateY(-2px)}
.esp:hover::after{opacity:1}
.esp .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--cbg,#E4F0FA);color:var(--c,var(--azul));margin-bottom:16px}
.esp h3{font-size:16.5px;font-weight:600}
.esp p{margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.6}
.esp .meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.vacio{padding:40px;text-align:center;color:var(--text-2);border:1px dashed var(--line);border-radius:var(--r);grid-column:1/-1}

/* ── Tarjetas y formularios ─────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card .chead{padding:22px 24px 18px;border-bottom:1px solid var(--line-soft)}
.card .chead h2,.card .chead h3{font-size:19px}
.card .chead p{margin-top:6px;font-size:13.8px;color:var(--text-2)}
.card .cbody{padding:22px 24px 24px}
.field{display:block;margin-bottom:15px}
.field > span{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .14s,box-shadow .14s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,95,172,.13)}
.field textarea{resize:vertical;min-height:110px}
.field .hint{display:block;margin-top:6px;font-size:12.3px;color:var(--text-3);font-weight:400}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2);margin:4px 0 18px;line-height:1.5}
.check input{margin-top:3px;flex:none;accent-color:var(--azul)}

/* ── Resultado de la consulta PQRSD ─────────────────────────────────── */
.pqr-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:start}
.result{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:none}
.result.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result .rhead{padding:16px 18px;background:var(--bg-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.result .rhead .rad{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--azul-2)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;font-size:12.3px;font-weight:600;border:1px solid transparent}
.badge .pip{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#D6E7AE}
.badge.info{background:var(--info-bg);color:var(--info);border-color:#C3DDF2}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#F1DDA8}
.badge.crit{background:var(--crit-bg);color:var(--crit);border-color:#F0C4C6}
.rbody{padding:20px 18px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.8px;margin:0 0 20px}
.kv dt{color:var(--text-3);font-weight:500}
.kv dd{margin:0;font-weight:500}
.tl{list-style:none;margin:0;padding:0 0 0 6px}
.tl li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--line)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.tl li.done::before{background:var(--lima);border-color:var(--lima)}
.tl li.now::before{background:var(--azul);border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,95,172,.16)}
.tl li b{display:block;font-family:var(--display);font-size:14.2px;font-weight:600}
.tl li .s{display:block;font-size:12.8px;color:var(--text-2);margin-top:2px}
.tl li time{display:block;font-size:12px;color:var(--text-3);font-family:var(--mono);margin-top:3px}
.alert{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.55;margin-top:16px}
.alert.err{background:var(--crit-bg);color:#8E1D22;border:1px solid #F0C4C6}
.alert.good{background:var(--ok-bg);color:#3F6000;border:1px solid #D6E7AE}
.alert svg{flex:none;margin-top:2px}

.lawbox{background:linear-gradient(165deg,var(--azul),var(--azul-2) 60%,var(--azul-3));color:#DCEBF7;border-radius:var(--r);padding:26px;box-shadow:var(--shadow-lg)}
.lawbox h2,.lawbox h3{color:#fff;font-size:17px;margin-bottom:12px}
.lawbox ul{margin:0;padding-left:18px;font-size:13.8px;line-height:1.75}
.lawbox ul li{margin-bottom:7px}
.lawbox ul li b{color:var(--lima-2)}
.lawbox .note{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:12.6px;color:#A9C8E2}
.demo-hint{margin-top:16px;background:#fff;border:1px dashed #C6D8E7;border-radius:var(--r-sm);padding:13px 15px;font-size:12.8px;color:var(--text-2)}
.demo-hint b{color:var(--text);font-family:var(--display)}
.demo-hint code{font-family:var(--mono);background:var(--bg-3);padding:1.5px 6px;border-radius:5px;font-size:12.3px;color:var(--azul-2);cursor:pointer}
.demo-hint code:hover{background:#D8E8F5}

/* ── Contacto y sedes ───────────────────────────────────────────────── */
.cont-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.sede{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.sede:last-of-type{border-bottom:0}
.pin{width:40px;height:40px;border-radius:11px;background:var(--bg-3);color:var(--azul);display:grid;place-items:center;flex:none}
.sede h3{font-size:15.5px;font-weight:600}
.sede p{font-size:13.8px;color:var(--text-2);margin-top:4px}
.sede .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.tag{font-size:11.8px;padding:3px 9px;border-radius:100px;background:var(--bg-3);color:var(--azul-2);font-weight:500}
.grid-sedes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sede-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sede-card .mapa{height:132px;background:linear-gradient(150deg,#DCEAF6,#CFE2F1);position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.sede-card .mapa::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,95,172,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,95,172,.09) 1px,transparent 1px);background-size:26px 26px}
.sede-card .mapa .pin{position:relative;background:var(--azul);color:#fff;box-shadow:0 8px 20px -8px rgba(0,44,85,.6)}
.sede-card .sbody{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.sede-card h2{font-size:18px;margin-bottom:4px}
.sede-card .dir{font-size:13.8px;color:var(--text-2)}
.datos{margin:16px 0 0;font-size:13.6px;display:grid;gap:9px}
.datos .d{display:flex;gap:10px;align-items:flex-start}
.datos .d svg{flex:none;margin-top:3px;color:var(--text-3)}
.sede-card .tags{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.sede-card .acciones{margin-top:18px;display:flex;gap:9px;flex-wrap:wrap}

/* ── Franja de cierre ───────────────────────────────────────────────── */
.cta-band{background:linear-gradient(165deg,var(--azul),var(--azul-2) 62%,var(--azul-3));color:#DCEBF7;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-150px;bottom:-220px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 60px rgba(255,255,255,.035)}
.cta-band .wrap{position:relative;z-index:1;padding-top:56px;padding-bottom:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(22px,2.6vw,30px);max-width:20ch}
.cta-band p{margin-top:10px;max-width:52ch;font-size:15.5px;color:#B7D5EE}
.cta-band .acciones{display:flex;gap:12px;flex-wrap:wrap}

/* ── Pie de página ──────────────────────────────────────────────────── */
footer.site{background:var(--azul-3);color:#A9C8E2;padding:56px 0 26px;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
footer.site h2{font-family:var(--display);color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
footer.site a{color:#C6DDF0;display:block;padding:4px 0}
footer.site a:hover{color:#fff}
/* Sin recuadro blanco. El logo original es un PNG con fondo blanco
   OPACO —no transparente—, y ese cuadro existía para disimularlo. Aquí
   se usa logo-sanar-blanco.png, generado desde el original: la tinta
   pasa a blanco y el papel a transparente, conservando el suavizado de
   los bordes. Si la clínica entrega una versión en negativo de su marca,
   se sustituye ese archivo y ya. */
footer.site .logo-card{display:inline-block;margin-bottom:16px}
footer.site .logo-card img{height:38px;width:auto;opacity:.95}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.6px;color:#89AECE}

/* ── WhatsApp ───────────────────────────────────────────────────────── */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);border:0;display:grid;place-items:center;box-shadow:0 12px 34px -10px rgba(37,211,102,.7), 0 2px 6px rgba(0,0,0,.16);transition:transform .18s}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.wa-panel{position:fixed;right:22px;bottom:92px;z-index:60;width:340px;max-width:calc(100vw - 44px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:none}
.wa-panel.on{display:block;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.wa-top{background:#075E54;color:#fff;padding:15px 17px;display:flex;align-items:center;gap:12px}
.wa-top .av{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.wa-top .av img{width:30px;height:auto}
.wa-top b{display:block;font-family:var(--display);font-size:14.5px}
.wa-top .st{display:block;font-size:12px;color:#B9E5D6}
.wa-top button{margin-left:auto;background:transparent;border:0;color:#B9E5D6;padding:4px;line-height:0}
.wa-body{padding:18px 16px;background:#ECE5DD}
.wa-msg{background:#fff;border-radius:0 10px 10px 10px;padding:11px 13px;font-size:13.6px;line-height:1.55;box-shadow:0 1px 1px rgba(0,0,0,.09);max-width:92%}
.wa-msg time{display:block;text-align:right;font-size:10.5px;color:#8A9A93;margin-top:3px}
.wa-opts{padding:12px 14px 14px;display:grid;gap:7px;background:#F6F6F6;border-top:1px solid #E3E3E3}
.wa-opt{text-align:left;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:13.3px;font-weight:500;display:flex;align-items:center;gap:9px;transition:border-color .14s,background .14s}
.wa-opt:hover{border-color:var(--wa);background:#F2FDF6}
.wa-opt .e{font-size:15px}
.wa-foot{padding:0 14px 14px;background:#F6F6F6}

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;background:rgba(9,26,40,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:22px}
.modal.on{display:flex;animation:fade .2s ease}
.modal .box{background:#fff;border-radius:var(--r);max-width:460px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden}
.modal .mtop{padding:24px 26px 20px;text-align:center;border-bottom:1px solid var(--line-soft)}
.modal .tick{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px}
.modal .mtop h2{font-size:20px}
.modal .mtop p{margin-top:8px;color:var(--text-2);font-size:14px}
.modal .mbody{padding:20px 26px 24px}
.radbox{background:var(--bg-2);border:1px dashed #C6D8E7;border-radius:var(--r-sm);padding:15px;text-align:center;margin-bottom:18px}
.radbox span{display:block;font-size:12px;color:var(--text-3);margin-bottom:5px}
.radbox b{font-family:var(--mono);font-size:20px;color:var(--azul-2)}

/* ── Adaptable ──────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:52px;padding-bottom:56px}
  .grid-esp,.grid-sedes{grid-template-columns:repeat(2,1fr)}
  .pqr-grid,.cont-grid{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  section{padding:52px 0}
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px;box-shadow:var(--shadow);gap:2px}
  nav.main.on{display:flex}
  nav.main a{width:100%;padding:12px 14px}
  nav.main a.activo::after{display:none}
  nav.main a.activo{background:var(--bg-3)}
  nav.main a.cta{margin:6px 0 0}
  .burger{display:block}
  .grid-esp,.grid-sedes{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .trust{gap:22px}
  .hide-sm{display:none}
  footer.site .cols{grid-template-columns:1fr}
}
@media print{
  .topstrip,header.site,.wa-fab,.wa-panel,footer.site,.cta-band,.pagehead,.demo-hint,.lawbox{display:none !important}
  section.alt{background:#fff;border:0}
  .card{box-shadow:none;border:0}
}

/* ══════════════════════════════════════════════════════════════════════
   Menú desplegable y menú ampliado de servicios
   ══════════════════════════════════════════════════════════════════════ */
.menu-item{position:relative}
.menu-btn{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--text-2);font-weight:500;font-size:14.5px}
.menu-btn:hover{background:var(--bg-2);color:var(--text)}
.menu-btn .cv{transition:transform .18s;opacity:.6}
.menu-item.abierto > .menu-btn{background:var(--bg-2);color:var(--text)}
.menu-item.abierto > .menu-btn .cv{transform:rotate(180deg)}
.menu-btn.activo{color:var(--azul);font-weight:600}

.drop{position:absolute;top:calc(100% + 9px);left:0;min-width:290px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:9px;display:none;z-index:55}
.menu-item.abierto > .drop{display:block;animation:pop .16s ease}
.drop a{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text);font-size:14px;font-weight:500;line-height:1.4}
.drop a:hover{background:var(--bg-2)}
.drop a .di{color:var(--azul);flex:none;margin-top:2px;opacity:.85}
.drop a .dd{display:block;font-size:12.5px;color:var(--text-3);font-weight:400;margin-top:1px}
.drop .sep{height:1px;background:var(--line-soft);margin:7px 10px}

.mega{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);width:min(1040px,calc(100vw - 44px));background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:22px 24px 18px;display:none;z-index:55}
.menu-item.abierto > .mega{display:block;animation:pop .16s ease}
.mega .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px}
.mega h3{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);padding:0 8px;margin:0 0 8px}
.mega a{display:block;padding:6px 8px;border-radius:6px;font-size:13.7px;color:var(--text-2);font-weight:500;line-height:1.35}
.mega a:hover{background:var(--bg-2);color:var(--azul)}
.mega .pie{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mega .pie .nota{font-size:12.8px;color:var(--text-3)}

/* ── Accesos del encabezado ─────────────────────────────────────────── */
.acciones-top{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.acciones-top a{display:flex;align-items:center;gap:7px;color:#EAF3FB}

/* ── Portada: bloques adicionales ───────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bloque{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:box-shadow .16s,transform .16s,border-color .16s;display:flex;flex-direction:column}
a.bloque:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#C6D8E7}
.bloque .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:var(--cbg,#E4F0FA);color:var(--c,var(--azul))}
.bloque h3{font-size:17px;font-weight:600;color:var(--text)}
.bloque p{margin-top:9px;font-size:14px;color:var(--text-2);line-height:1.6;flex:1}
.bloque .mas{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--azul);display:flex;align-items:center;gap:6px}
a.bloque:hover .mas svg{transform:translateX(3px)}
.bloque .mas svg{transition:transform .15s}

.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cifra{text-align:center;padding:8px}
.cifra b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,42px);font-weight:700;color:var(--azul);line-height:1.1}
.cifra span{display:block;margin-top:7px;font-size:13.8px;color:var(--text-2)}

/* ── Detalle de servicio ────────────────────────────────────────────── */
.det-grid{display:grid;grid-template-columns:1fr 340px;gap:38px;align-items:start}
.prosa{font-size:16px;line-height:1.75;color:var(--text-2)}
.prosa h2{font-size:22px;color:var(--text);margin:34px 0 12px}
.prosa h2:first-child{margin-top:0}
.prosa p + p{margin-top:14px}
.lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.lista li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.lista li svg{flex:none;margin-top:5px;color:var(--lima)}
.aside-sticky{position:sticky;top:96px;display:grid;gap:18px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

/* ── Contenido institucional ────────────────────────────────────────── */
.hito{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.hito:last-child{border-bottom:0}
.hito .anio{font-family:var(--display);font-size:26px;font-weight:700;color:var(--azul);line-height:1.1}
.hito h3{font-size:17px;font-weight:600;margin-bottom:6px}
.hito p{font-size:14.5px;color:var(--text-2)}
.acordeon{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.acordeon + .acordeon{margin-top:12px}
.acordeon > summary{padding:17px 20px;font-family:var(--display);font-weight:600;font-size:15.5px;cursor:pointer;display:flex;align-items:center;gap:12px;list-style:none}
.acordeon > summary::-webkit-details-marker{display:none}
.acordeon > summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg);transition:transform .18s}
.acordeon[open] > summary::after{transform:rotate(-135deg)}
.acordeon[open] > summary{border-bottom:1px solid var(--line-soft)}
.acordeon .contenido{padding:18px 20px 20px;font-size:14.5px;color:var(--text-2);line-height:1.7}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th,.tabla td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.tabla th{font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--bg-2)}
.tabla tr:last-child td{border-bottom:0}
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}

@media (max-width:1080px){
  .det-grid{grid-template-columns:1fr}
  .aside-sticky{position:static}
  .mega{width:calc(100vw - 44px)}
  .mega .cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .cifras{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:720px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .hito{grid-template-columns:1fr;gap:6px}
  /* En móvil los desplegables se muestran en línea dentro del menú */
  nav.main .menu-item{width:100%}
  .menu-btn{width:100%;justify-content:space-between;padding:12px 14px}
  .drop,.mega{position:static;transform:none;width:100%;min-width:0;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px;padding:2px 0 2px 10px}
  .mega .cols{grid-template-columns:1fr;gap:2px}
  .mega h3{margin-top:10px}
  .mega .pie{display:none}
}

/* ── Aviso de demostración ──────────────────────────────────────────────
   Mientras el sitio no tenga backend, ningún formulario radica de verdad.
   Esta cinta y las alertas .alert.warn lo dicen sin ambigüedad; se retiran
   cuando el backend entre en producción.
   ────────────────────────────────────────────────────────────────────── */
.alert.warn{background:var(--warn-bg);color:#6B4E00;border:1px solid #E7CE8E}
.alert.warn svg{color:var(--warn)}

.cinta-demo{background:var(--warn-bg);border-bottom:1px solid #E7CE8E;color:#6B4E00;font-size:13.2px;line-height:1.5}
.cinta-demo .wrap{display:flex;align-items:flex-start;gap:11px;padding-top:10px;padding-bottom:10px}
.cinta-demo svg{flex:none;margin-top:1px;color:var(--warn)}
.cinta-demo b{font-family:var(--display);font-weight:600;color:#4A3600}
.cinta-demo a{color:#6B4E00;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cinta-demo a:hover{color:#3D2C00}
@media(max-width:640px){.cinta-demo{font-size:12.4px}}

/* ══════════════════════════════════════════════════════════════════════
   Sección de video
   ──────────────────────────────────────────────────────────────────────
   La sección se arma alrededor del video, no al revés. La proporción
   viaja en --prop y de ella salen las dos cosas que importan: el recorte
   de la miniatura y el ancho de la columna, que se calcula a partir del
   alto. Un video vertical no necesita otra sección: se le cambian las
   dos variables (--prop:9/16; --alto:520px) y el resto se acomoda solo.

   La miniatura se sirve desde este servidor y YouTube sólo se carga al
   pulsar. Es lo que hace que el reproductor no ponga cookies antes de
   que el visitante acepte el aviso.
   ══════════════════════════════════════════════════════════════════════ */
.video-band{
  /* .cta-band es un div y no hereda el relleno de section; ésta sí es
     section, así que lo anula: el relleno lo pone .wrap. */
  padding:0;
  --prop:16/9;
  --alto:clamp(200px,36vw,410px);
  background:linear-gradient(168deg,var(--azul),var(--azul-2) 62%,var(--azul-3));
  color:#B7D5EE;position:relative;overflow:hidden;
}
.video-band::after{
  content:"";position:absolute;left:-190px;top:-230px;width:520px;height:520px;
  border-radius:50%;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 60px rgba(255,255,255,.035);
}
.video-band .wrap{position:relative;z-index:1;padding-top:58px;padding-bottom:58px}
.video-band .eyebrow{color:#7FBCE6}
.video-band h2{color:#fff;font-size:clamp(23px,2.7vw,31px)}
.video-band p{margin-top:14px;font-size:15.2px;color:#B7D5EE;max-width:44ch}

.video-duo{
  display:grid;gap:clamp(26px,3.4vw,46px);align-items:center;justify-content:center;
  grid-template-columns:minmax(280px,52ch) minmax(0,calc(var(--alto) * var(--prop)));
}
.video-duo blockquote{
  margin:20px 0 0;padding-left:16px;border-left:3px solid var(--lima);
  font-size:clamp(16px,1.55vw,18.5px);line-height:1.5;
  color:#EAF4FC;font-style:italic;
}

/* El ancho sale del alto por la proporción. La columna lo limita cuando
   hay dos columnas; el max-width, cuando se apilan en pantalla angosta. */
.video{width:100%;max-width:calc(var(--alto) * var(--prop));margin:0 auto}

.video-tapa{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:var(--azul-3);border-radius:var(--r);overflow:hidden;
  cursor:pointer;box-shadow:var(--shadow-lg);
  /* El contenedor manda: la miniatura de YouTube viene en 4:3 con
     franjas negras, y "cover" las recorta sin tocar el archivo. */
  aspect-ratio:var(--prop);
}
.video-tapa img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s}
.video-tapa:hover img{transform:scale(1.03);filter:brightness(.92)}
.video-tapa:focus-visible{outline:3px solid #fff;outline-offset:3px}

.video-tapa .play{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--azul);
  box-shadow:0 10px 34px -10px rgba(0,20,45,.6);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s;
}
.video-tapa .play svg{margin-left:4px}   /* el triángulo pesa a la izquierda */
.video-tapa:hover .play{transform:scale(1.09);background:#fff}

.video-tapa .aviso{
  position:absolute;left:0;right:0;bottom:0;padding:22px 18px 13px;
  font-size:12.4px;color:#E8F2FA;text-align:right;
  background:linear-gradient(to top,rgba(0,25,50,.72),transparent);
}

.video iframe{width:100%;aspect-ratio:var(--prop);border:0;display:block;
  border-radius:var(--r);box-shadow:var(--shadow-lg);background:#000}

@media(max-width:860px){
  .video-duo{grid-template-columns:1fr;justify-content:stretch}
  .video-band p{max-width:none}
  /* Apilados manda el ancho disponible, no el alto: si no, un video
     vertical se encoge hasta quedar diminuto en el teléfono. */
  .video{max-width:min(100%,380px)}
}

@media(prefers-reduced-motion:reduce){
  .video-tapa img,.video-tapa .play{transition:none}
  .video-tapa:hover img{transform:none}
  .video-tapa:hover .play{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Redes sociales (pie)
   ──────────────────────────────────────────────────────────────────────
   El área táctil es de 38px: los iconos de 18px cumplen el mínimo
   recomendado para tocar con el dedo gracias al relleno, no al tamaño
   del dibujo.
   ══════════════════════════════════════════════════════════════════════ */
.redes{display:flex;gap:9px;margin-top:18px}
.redes a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  transition:transform .18s,opacity .18s;
}
.redes a:hover{transform:translateY(-2px);opacity:.88}
.redes a:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .redes a{transition:none}
  .redes a:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Selector de idioma
   ──────────────────────────────────────────────────────────────────────
   Vive en la barra superior, que es oscura: por eso los colores claros.
   El menú se despliega hacia abajo y se cierra al pulsar fuera o con Esc.
   ══════════════════════════════════════════════════════════════════════ */
.idioma{position:relative;display:inline-flex}
.idioma-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;padding:5px 8px;border-radius:7px;
  color:inherit;font:inherit;font-weight:600;font-size:12.4px;line-height:1;
  transition:background .16s;
}
.idioma-btn:hover{background:rgba(255,255,255,.12)}
.idioma-btn:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.idioma-btn .cv{transition:transform .18s;opacity:.75}
.idioma.on .idioma-btn .cv{transform:rotate(180deg)}
.bandera{border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.18)}

.idioma-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:60;
  min-width:172px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(0,25,55,.34);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.idioma.on .idioma-menu{opacity:1;visibility:visible;transform:none}
.idioma-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:9px 11px;border-radius:8px;
  font:inherit;font-size:14px;color:var(--text-1);
}
.idioma-menu button:hover{background:var(--bg-2)}
.idioma-menu button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}

@media(prefers-reduced-motion:reduce){
  .idioma-btn,.idioma-btn .cv,.idioma-menu{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Aliados · logos en desplazamiento
   ──────────────────────────────────────────────────────────────────────
   La lista se pinta DOS veces y la animación recorre exactamente la
   mitad: al terminar vuelve al principio y el salto cae en un punto
   idéntico, así que no se ve. Es lo que da la sensación de cinta sin fin
   sin tener que calcular nada en JavaScript.

   Cada logo va dentro de una caja del mismo tamaño y se ajusta con
   object-fit. Sin eso, un logo apaisado y uno cuadrado con la misma
   altura pesan muy distinto: el cuadrado se ve pequeño al lado del otro.

   Los colores son los originales. Las guías de marca de estas entidades
   no admiten alterarlos, y un logo en gris deja de ser su logo.

   El desplazamiento se detiene al pasar el ratón y al enfocar con el
   teclado —si no, no habría forma de leerlos— y no arranca siquiera
   cuando el sistema pide menos movimiento.
   ══════════════════════════════════════════════════════════════════════ */
.aliados{overflow:hidden;position:relative;padding:8px 0}
.aliados::before,.aliados::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.aliados::before{left:0;background:linear-gradient(90deg,var(--bg-1),transparent)}
.aliados::after{right:0;background:linear-gradient(270deg,var(--bg-1),transparent)}

.aliados-pista{display:flex;width:max-content;animation:aliados-correr 42s linear infinite}
.aliados:hover .aliados-pista,
.aliados:focus-within .aliados-pista{animation-play-state:paused}

.aliados-grupo{display:flex;align-items:center;gap:clamp(26px,4vw,54px);padding-right:clamp(26px,4vw,54px)}
.aliados-grupo a{
  --caja:56px;
  display:flex;align-items:center;justify-content:center;
  width:150px;height:var(--caja);flex:none;overflow:hidden;
  opacity:.86;transition:opacity .25s,transform .25s;
}
/* El tope va en píxeles y no en 100%: con la caja en grid, un 100% se
   resuelve contra una fila que crece con el contenido y el logo más alto
   se desbordaba. */
.aliados-grupo img{max-width:100%;max-height:var(--caja);width:auto;height:auto;object-fit:contain;display:block}
.aliados-grupo a:hover,.aliados-grupo a:focus-visible{opacity:1;transform:translateY(-2px)}
.aliados-grupo a:focus-visible{outline:2px solid var(--azul);outline-offset:6px;border-radius:6px}

@keyframes aliados-correr{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media(max-width:640px){ .aliados-grupo a{--caja:44px;width:112px} }

@media(prefers-reduced-motion:reduce){
  .aliados-pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .aliados-grupo:last-child{display:none}   /* la copia sólo sirve al bucle */
  .aliados-grupo{flex-wrap:wrap;justify-content:center;row-gap:20px}
  .aliados-grupo a{opacity:1}
}