/* ====================================================================
   Tellmebye - paginas legales. Mismos tokens, retícula y cabecera que
   la portada: los bloques de :root, tipografia, botones, cabecera, menu
   y pie son copia literal de v3.html para que no se desincronicen.
   ==================================================================== */
:root{
  /* luz cálida */
  --luz:#FBF9F6;
  --crema:#F2EDE6;--pagina:#FBF9F6;
  --blanco:#FFFFFF;
  --tinta:#16213B;
  --suave:#5B6678;
  --linea:#E4DDD3;
  --linea-fuerte:#C3B9AC;

  /* marca */
  --azul:#00368C;
  --azul-hover:#002868;
  --azul-activo:#001E4E;
  --cian:#00ACE4; --kpi:#007399;
  --foco:#00368C;

  /* oscuro cálido para las bandas */
  --noche:#16130F;

  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s20:20px;--s24:24px;--s32:32px;
  --s40:40px;--s48:48px;--s56:56px;--s64:64px;--s72:72px;--s80:80px;--s96:96px;--s120:120px;

  --f:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
  --ft:'Figtree','Plus Jakarta Sans',system-ui,sans-serif;
  --margen:20px;
  --r:10px;     /* contenedores: tarjetas, fotos, paneles */
  --rb:8px;      /* acciones: botones y campos */

  --sombra:0 1px 2px rgb(22 33 59 / 5%), 0 12px 32px -12px rgb(22 33 59 / 12%);
  --sombra-alta:0 2px 4px rgb(22 33 59 / 6%), 0 28px 64px -28px rgb(22 33 59 / 25%);
  color-scheme:light;
}
@media(min-width:768px){:root{--margen:32px}}
@media(min-width:1024px){:root{--margen:40px;--r:12px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--luz);color:var(--tinta);font-family:var(--f);font-weight:400;font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
p{margin:0}
.cont{width:min(1280px, 100% - 2*var(--margen));margin-inline:auto}
.estrecho{width:min(820px, 100% - 2*var(--margen));margin-inline:auto}

h1,h2,h3{margin:0;font-family:var(--ft);font-weight:800;text-wrap:balance;letter-spacing:-.03em}
h1,h2{font-weight:900;letter-spacing:-.035em}
.frase,.cifra b,.btn,.btn2{font-family:var(--ft)}
h1{font-size:clamp(2.4rem,9vw,2.9rem);line-height:1.04}
h2{font-size:clamp(2rem,5.4vw,2.4rem);line-height:1.08}
h3{font-size:20px;line-height:1.24;letter-spacing:-.025em}
@media(min-width:768px){h1{font-size:clamp(3rem,6vw,3.6rem)}h2{font-size:clamp(2.4rem,4.4vw,3rem)}h3{font-size:22px}}
@media(min-width:1024px){h1{font-size:clamp(3.6rem,4.8vw,4.6rem);line-height:1.02}h2{font-size:clamp(2.8rem,3.4vw,3.4rem)}h3{font-size:24px}}
/* el eyebrow es la etiqueta de la seccion: le toca el azul de marca */
.eyebrow{font-size:14px;font-weight:600;color:var(--azul);letter-spacing:.01em}
.p{font-size:18px;line-height:1.62;color:var(--suave);max-width:50ch}
.p-g{font-size:19px;line-height:1.6;color:var(--suave);max-width:48ch}
.aux{font-size:14px;line-height:1.6;color:var(--suave)}

.saltar{position:absolute;left:-9999px;top:0;background:var(--blanco);color:var(--tinta);padding:var(--s12) var(--s16);border:1px solid var(--linea);border-radius:var(--r);z-index:100;text-decoration:none;font-weight:600}
.saltar:focus{left:var(--margen);top:var(--s8)}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:4px}

/* ---------- botones ---------- */
.btn,.btn2{font:inherit;font-size:16px;font-weight:600;line-height:1.5;display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);text-decoration:none;cursor:pointer;min-height:52px;transition:background 180ms ease-out,color 180ms ease-out,transform 180ms ease-out,box-shadow 180ms ease-out}
.btn{padding:var(--s12) var(--s24);background:var(--azul);color:#fff;border:1px solid transparent;border-radius:var(--rb)}
.btn2{padding:var(--s12) var(--s20);background:transparent;color:var(--azul);border:1px solid var(--linea-fuerte);border-radius:var(--rb)}
/* verde corporativo de WhatsApp, el oscuro de la marca: sobre el verde claro
   el texto blanco se queda en 2,0:1 y no hay quien lo lea */
.btn-wa{gap:var(--s8);background:#075E54;color:#fff;border-color:#075E54}
.btn-wa svg{width:19px;height:19px;flex:none}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--azul-hover);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgb(40 70 140 / 55%)}
  .btn2:hover{border-color:var(--azul);transform:translateY(-1px)}
  .btn-wa:hover{background:#064A42;border-color:#064A42;color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgb(7 94 84 / 60%)}
}
.btn:active{background:var(--azul-activo);transform:translateY(0)}
.btn-claro{background:#fff;color:var(--tinta)}
.btn-claro:hover{background:#fff;color:var(--azul)}
/* Solo el de la portada va en azul claro. No se usa el cian de marca
   (#00ACE4) porque blanco encima da 2,62:1 y un texto de boton necesita 4,5;
   este tono es el mas claro que pasa, con 5,92:1.
   Los otros dos .btn-claro (la prueba de dos meses y "Pedir presupuesto")
   siguen en blanco: sobre fondo azul oscuro es el contraste mas alto posible. */
.port-in .btn-claro{background:#0068A8;color:#fff}
.port-in .btn-claro:hover{background:#00568C;color:#fff}
.btn2-claro{color:#fff;border-color:rgb(255 255 255 / 45%)}
.btn2-claro:hover{border-color:#fff}
.lnk{display:inline-flex;align-items:center;gap:var(--s8);min-height:44px;color:var(--azul);font-weight:600;font-size:16px;text-decoration:none}
.lnk u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.lnk svg{transition:transform 180ms ease-out}
@media(hover:hover){.lnk:hover svg{transform:translateX(3px)}}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--luz) 88%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s, background .3s}
.cab.fija{border-bottom-color:var(--linea)}
.cab-in{display:flex;align-items:center;gap:var(--s24);min-height:68px}
@media(min-width:1024px){.cab-in{min-height:80px}}
.logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;text-decoration:none}
.logo img{width:126px;height:auto;display:block}
@media(min-width:1024px){.logo img{width:150px}}
.nav{display:none}
/* una etiqueta de menu nunca se parte en dos lineas */
.nav a,.acc-btn,.cab .btn{white-space:nowrap}
/* por debajo de 1320 no cabe todo: a 1200 el boton salia a 63px de alto en dos
   lineas, asi que hasta ahi manda el menu de hamburguesa, que si tiene sitio */
@media(min-width:1320px){
  .nav{display:flex;gap:4px}
  .nav a{font-size:15px;font-weight:500;color:var(--suave);text-decoration:none;min-height:44px;padding:0 var(--s12);display:inline-flex;align-items:center;border-radius:var(--rb);transition:background .2s,color .2s}
  .nav a:hover{color:var(--tinta);background:var(--crema)}
}
.cab .btn{display:none}
@media(min-width:1320px){.cab .btn{display:inline-flex;min-height:46px;padding:var(--s8) var(--s20);font-size:15px}}
.acc-wrap{position:relative}
.acc-btn{text-decoration:none;font:inherit;font-size:15px;font-weight:500;min-height:44px;padding:0 var(--s12);display:inline-flex;align-items:center;gap:var(--s8);background:none;border:0;color:var(--tinta);cursor:pointer;border-radius:var(--rb);transition:background .2s}
.acc-btn:hover{background:var(--crema)}
.chev{width:17px;height:17px;transition:transform 180ms ease-out}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.panel{position:absolute;right:0;top:calc(100% + var(--s8));width:300px;max-width:min(400px,calc(100vw - 2*var(--margen)));background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--s12);box-shadow:var(--sombra-alta);opacity:0;transform:translateY(6px);transition:opacity 160ms ease-out,transform 160ms ease-out}
.panel[hidden]{display:none}
.panel.on{opacity:1;transform:none}
.panel .t{font-size:13px;font-weight:600;color:var(--suave);padding:var(--s4) var(--s12) var(--s12)}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.panel a{display:flex;align-items:center;min-height:48px;padding:0 var(--s12);font-size:16px;font-weight:600;color:var(--tinta);text-decoration:none;border-radius:var(--r);transition:background .18s}
.panel a:hover{background:var(--crema)}
.panel .olv{display:flex;align-items:center;min-height:44px;padding:0 var(--s12);margin-top:var(--s4);font-size:14px;color:var(--azul)}
@media(max-width:1199px){.panel{position:fixed;left:var(--margen);right:var(--margen);width:auto;max-width:420px;margin-inline:auto}}
.menu-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--tinta);border-radius:999px}
.menu-btn:hover{background:var(--crema)}
.menu-btn svg{width:21px;height:21px}
.marco-p p{font-size:16px;color:var(--suave);line-height:1.58}

/* ---------- ePaper dentro de la sección de Philips ---------- */
.epaper{margin-top:var(--s56);padding-top:var(--s56);border-top:1px solid var(--linea)}
@media(min-width:1024px){.epaper{margin-top:var(--s80);padding-top:var(--s80)}}
.ep-medidas{display:flex;gap:var(--s8);flex-wrap:wrap;margin-top:var(--s24);padding:0;list-style:none}
.ep-medidas li{font-family:var(--ft);font-size:14px;font-weight:700;color:var(--azul);
  background:var(--crema);border-radius:999px;padding:7px var(--s16);font-variant-numeric:tabular-nums}


/* ---------- infraestructura y API ---------- */
.infra{margin-top:var(--s56);padding-top:var(--s56);border-top:1px solid var(--linea)}
@media(min-width:1024px){.infra{margin-top:var(--s80);padding-top:var(--s80)}}
.sellos{display:flex;align-items:center;gap:var(--s24);flex-wrap:wrap;margin-top:var(--s24)}
.sellos span{font-family:var(--ft);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--suave)}
.api-l{display:flex;gap:var(--s8);flex-wrap:wrap;margin-top:var(--s24);padding:0;list-style:none}
.api-l li{font-family:var(--ft);font-size:14px;font-weight:600;color:var(--tinta);
  background:var(--crema);border-radius:999px;padding:8px var(--s16)}

.visual video,.visual img{border-radius:inherit}


/* ---------- premios ---------- */
.premios{display:grid;gap:var(--s16);margin-top:var(--s40)}
/* un 30% menos de tamaño: las dos caben con holgura y la sección respira */
@media(min-width:768px){.premios{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s20);align-items:start;max-width:88%;margin-inline:auto}}
    linear-gradient(to right, rgb(18 14 10 / 72%) 0%, rgb(18 14 10 / 64%) 40%,
.t-info b{display:block;font-family:var(--ft);font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.t-info span{display:block;margin-top:4px;font-size:14px;color:var(--suave);line-height:1.5}
.t-ver{display:inline-flex;align-items:center;gap:var(--s8);min-height:44px;padding:0 var(--s16);
  margin-top:var(--s16);border-radius:var(--rb);background:var(--crema);color:var(--azul);
  font-size:14.5px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
.t-ver:hover{background:#E6DFD4;transform:translateY(-1px)}
.t-ver svg{width:15px;height:15px;fill:currentColor}


/* ---------- marco digital: el vídeo manda ---------- */
.marco-v{position:relative;margin-top:var(--s40);border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:transparent;box-shadow:var(--sombra);aspect-ratio:16/9}
@media(min-width:1024px){.marco-v{margin-top:var(--s56)}}
/* el vídeo se compone en su propia capa y el overflow del padre no lo recorta:
   hay que redondearlo también a él */
.marco-v video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.marco-v .vctrl{right:var(--s16);bottom:var(--s16)}
.marco-p{display:grid;gap:var(--s24);margin-top:var(--s40)}
@media(min-width:768px){.marco-p{grid-template-columns:repeat(3,1fr);gap:var(--s32)}}
.marco-p div{border-top:2px solid var(--azul);padding-top:var(--s16)}
.marco-p strong{display:block;font-family:var(--ft);font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s8)}
  .masc-gal figure:hover img{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .masc-gal figure{transition:none}
  .masc-gal figure:hover{scale:none}
}
/* dos fotos, una por cada publico que el panel no ensena: la familia en casa
   y el veterinario en la clinica */
.masc-gal{margin-top:var(--s32);max-width:1100px}