/* Grupo PLB · demo · propuesta G (20/10): la portada de la B, con la sobriedad de la D.
   Pedido de Vero (audio del 19/10, 17:20): «la B más profesional», íconos menos coloridos, un marco
   más formal y página web, no landing. Por eso todo va en la familia del azul: los colores de cada
   área quedan para la web final si PLB los quiere.
   Celular primero (390 px). Colores y tipos del manual (diseno/marca/sistema-de-marca.md); lo derivado
   está marcado. Cero hex fuera de :root. */

:root{
  /* marca */
  --azul:#022a6a; --azul-2:#016ecf; --azul-noche:#0d1424;
  --degradado-marca:linear-gradient(23deg, var(--azul-noche) 0%, var(--azul-2) 49.4%, var(--azul) 100%);
  /* neutros (derivados del azul): fondo frío, papel y filetes */
  --fondo:#f4f6fa; --fondo-2:#e9eef5; --papel:#ffffff;
  --filete:#d9e0ea; --filete-suave:rgb(2 42 106 / .1);
  --tinta:#16213a; --tinta-2:#4a566b; --sobre-oscuro:#dfe6f2; --sobre-oscuro-2:#c3cde0;
  --azul-suave:#e3ecf8;
  --whatsapp:#25d366;
  --nota:#fff4cc; --nota-tinta:#6b5300;
  --velo-hoja:rgb(13 20 36 / .45);
  --velo-tarjeta:rgb(13 20 36 / .66);
  --velo-paso:linear-gradient(to top, rgb(13 20 36 / .92) 0%, rgb(2 42 106 / .7) 42%, rgb(2 42 106 / .32) 100%);
  --sombra:0 18px 36px -18px rgb(2 42 106 / .32);
  --sombra-marco:0 24px 48px -24px rgb(13 20 36 / .55);
  --sombra-barra:0 1px 0 var(--filete), 0 8px 20px -16px rgb(2 42 106 / .35);
  --halo-blanco:rgb(255 255 255 / .25);
  --sombra-suave:0 12px 24px -16px rgb(2 42 106 / .34);
  --papel-velo:rgb(255 255 255 / .9);
  --filete-oscuro:rgb(255 255 255 / .12);

  /* tipos: letra chica, como la web de Mavenz */
  --fuente-titulos:"Baloo Bhaijaan 2", system-ui, sans-serif;
  --fuente-texto:"Signika", system-ui, sans-serif;
  --t-portada:clamp(1.875rem, 1.479rem + 1.69vw, 3rem);       /* 30 → 48: solo la portada del Inicio */
  --t-pagina:clamp(1.375rem, 1.243rem + .563vw, 1.75rem);     /* 22 → 28: el título de cada página */
  --t-seccion:clamp(1.375rem, 1.243rem + .563vw, 1.75rem);    /* 22 → 28 */
  --t-cita:clamp(1.25rem, 1.162rem + .376vw, 1.5rem);         /* 20 → 24 */
  --t-subtitulo:clamp(1.125rem, 1.081rem + .188vw, 1.25rem);  /* 18 → 20 */
  --t-bajada:clamp(1rem, .956rem + .188vw, 1.125rem);         /* 16 → 18 */
  --t-cuerpo:1rem;
  --t-chico:.875rem;
  --t-legal:.9375rem;

  /* forma de PLB: radio 20 y la esquina de arriba a la derecha achaflanada */
  --chaflan:18px;
  --forma:polygon(0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan), 100% 100%, 0 100%);
  --radio-forma:20px 0 20px 20px;

  --lado:16px;
  --envase:1200px;
  --sec:64px;
  --barra:64px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.2,.7,.2,1);
  --ease-sale:cubic-bezier(.16,.84,.24,1);   /* la de las entradas, como Randisi */
  --alto-indice:61px;
  --dur-ui:220ms;
  interpolate-size:allow-keywords;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + 12px)}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 var(--t-cuerpo)/1.55 var(--fuente-texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.trabado{position:fixed;left:0;right:0;width:100%;overflow:hidden;padding-top:var(--barra);padding-right:var(--compensa,0px)}
body.trabado .barra{position:fixed;left:0;right:var(--compensa,0px);top:0}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--fuente-titulos);font-weight:800;color:var(--azul);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
figure{margin:0}
a{color:var(--azul)}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0;min-width:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--azul);color:var(--papel)}
:focus-visible{outline:2px solid var(--azul-2);outline-offset:3px;border-radius:4px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.envase{width:100%;max-width:calc(var(--envase) + 2 * var(--lado));margin-inline:auto;padding-inline:var(--lado)}
.bajada{font-family:var(--fuente-titulos);font-weight:600;font-size:var(--t-bajada);line-height:1.45;color:var(--tinta-2)}
.falta{background:var(--nota);color:var(--nota-tinta);border-radius:3px;padding:0 4px;font-size:var(--t-legal)}

/* el isotipo en un solo color: trazos en azul y el rombo de acento en el azul medio */
.iso{flex:none;width:40px;height:40px;fill:var(--azul)}
.iso .iso-suave{fill:var(--azul-2)}
/* el rombo de acento cambia de lugar por área, como en el manual (ART a la izquierda, Vida arriba,
   Patrimoniales a la derecha, Salud abajo), pero sin el color del área */
.iso-vida{transform:rotate(90deg)} .iso-patrimoniales{transform:rotate(180deg)} .iso-salud{transform:rotate(270deg)}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  border:0;border-radius:999px;font:600 1rem/1 var(--fuente-texto);text-decoration:none;cursor:pointer;
  transition:transform var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
  -webkit-tap-highlight-color:transparent}
.boton:active{transform:scale(.98);transition-duration:120ms}
.boton-azul{background:var(--azul);color:var(--papel)}
.boton-blanco{background:var(--papel);color:var(--azul)}
.boton-borde{background:none;color:var(--azul);box-shadow:inset 0 0 0 1.5px var(--azul)}
.boton-wa svg{width:20px;height:20px;fill:var(--whatsapp);flex:none}

.enlace-flecha{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--azul);
  font:600 1rem/1 var(--fuente-texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;
  text-decoration-color:var(--filete)}
.enlace-flecha svg{width:18px;height:18px;flex:none;transition:transform var(--dur-ui) var(--ease-ui)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:40;height:var(--barra);background:var(--papel);
  box-shadow:0 1px 0 var(--filete-suave);transition:box-shadow 400ms var(--ease-ui), background-color 400ms var(--ease-ui)}
/* al bajar, la barra se vuelve translúcida y el logo se achica apenas (Randisi, Bazet) */
.barra.con-filete{box-shadow:var(--sombra-barra);background:var(--papel-velo);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
body.trabado .barra{background:var(--papel)}
.barra-envase{height:100%;max-width:calc(var(--envase) + 2 * var(--lado));margin-inline:auto;padding-inline:var(--lado);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.barra-logo{display:flex;align-items:center;min-height:44px}
.barra-logo img{width:150px;height:auto;transform-origin:left center;transition:transform 400ms var(--ease-sale)}
.barra.con-filete .barra-logo img{transform:scale(.93)}
.barra-nav,.barra-cta{display:none}
.barra-menu{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;background:none;border:0;border-radius:12px;color:var(--azul);cursor:pointer}
.barra-menu svg{width:24px;height:24px}

/* ---------- menú del celular ---------- */
.menu{position:fixed;inset:0;z-index:60;background:var(--papel);display:flex;flex-direction:column;
  padding:0 var(--lado) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity 220ms var(--ease-ui), visibility 0s linear 220ms}
.menu.abierto{opacity:1;visibility:visible;transition:opacity 220ms var(--ease-ui), visibility 0s}
.menu-cabeza{height:var(--barra);flex:none;display:flex;align-items:center;justify-content:space-between}
.menu-cabeza img{width:150px;height:auto}
.menu-cerrar{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;background:none;border:0;border-radius:12px;color:var(--azul);cursor:pointer}
.menu-cerrar svg{width:24px;height:24px}
.menu-nav{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--filete)}
.menu-nav a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--filete);color:var(--azul);text-decoration:none;
  font:700 var(--t-seccion)/1.15 var(--fuente-titulos)}
.menu-nav a[aria-current]{color:var(--azul-2)}
.menu-cta{margin-top:auto;width:100%}
.menu-nav a,.menu-cta{opacity:0;transform:translateY(-6px);transition:opacity 260ms var(--ease), transform 260ms var(--ease)}
.menu.abierto .menu-nav a,.menu.abierto .menu-cta{opacity:1;transform:none;transition-delay:calc(80ms + var(--i) * 30ms)}

/* ---------- portada del Inicio ----------
   Celular: la portada entera es azul (como la B) y el marco blanco con los seguros va adentro.
   Escritorio: texto a la izquierda sobre el fondo claro y a la derecha el cuadro azul con la foto,
   el marco y la curva. El cuadro se disuelve en el celular (display: contents). */
.portada{position:relative;isolation:isolate;overflow:clip;background:var(--degradado-marca);color:var(--papel);
  display:grid;grid-template-columns:minmax(var(--lado),1fr) minmax(0,600px) minmax(var(--lado),1fr);padding-top:28px}
.portada > *,.portada-cuadro > *{grid-column:2}
.portada-cuadro{display:contents}
.portada .portada-fondo{grid-column:auto;grid-row:auto}
.portada-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.portada-fondo picture{display:contents}
.portada-foto{width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:.24;mix-blend-mode:luminosity}
.portada-texto{order:1;display:grid;gap:10px;justify-items:start}
.portada h1{color:var(--papel);font-size:var(--t-portada);line-height:1.1;letter-spacing:-.005em;max-width:15ch}
.portada-texto .bajada{color:var(--sobre-oscuro);max-width:36ch}
.portada-acciones{order:3;display:grid;gap:4px;justify-items:start;margin-top:16px}
.portada-acciones .boton{width:100%}
.portada-acciones .enlace-flecha{color:var(--papel);text-decoration-color:var(--sobre-oscuro-2)}
.portada-curva{order:4;grid-column:1/-1!important;width:100%;height:clamp(56px,16vw,200px);margin-top:20px;object-fit:fill}

/* el marco: una sola pieza blanca con las cuatro áreas separadas por filetes */
.marco{order:2;position:relative;margin-top:24px;background:var(--papel);color:var(--tinta);
  border-radius:var(--radio-forma);clip-path:var(--forma);box-shadow:var(--sombra-marco)}
.marco-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--filete)}
.marco-cabeza h2{font-size:var(--t-subtitulo);font-weight:700;line-height:1.2}
.marco-cabeza .enlace-flecha{min-height:32px;font-size:var(--t-chico)}
.areas{display:grid}
.area{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:14px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--filete);transition:background-color var(--dur-ui) var(--ease-ui)}
.area:nth-last-child(1 of .area){border-bottom:0}
.area h3{font-size:var(--t-subtitulo);font-weight:700;line-height:1.2}
.area p{margin-top:2px;color:var(--tinta-2);line-height:1.4}
/* el enlace cubre toda el área (sin JS lleva a Nuestros seguros; con JS abre el desglose) */
.area-enlace{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;color:var(--azul);
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.area-enlace::after{content:"";position:absolute;inset:0}
.area-enlace:focus-visible{outline:none}
.area:has(.area-enlace:focus-visible){outline:2px solid var(--azul-2);outline-offset:-3px}
.area-enlace svg{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-ui)}
.area-mas{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.area:active{background:var(--fondo)}

/* el desglose de un área reemplaza a las cuatro dentro del mismo marco */
.desglose{padding:6px 18px 18px}
.desglose[hidden],.areas[hidden]{display:none}
.desglose-cabeza{display:flex;align-items:center;gap:12px;padding:6px 0 12px;margin-bottom:14px;border-bottom:1px solid var(--filete)}
.desglose-cabeza .iso{width:32px;height:32px}
.desglose-cabeza h3{font-size:var(--t-subtitulo);font-weight:700;line-height:1.2;outline:0}
.volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:auto;padding:0 4px;border:0;background:none;
  color:var(--azul);font:600 var(--t-chico)/1 var(--fuente-texto);cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--filete)}
.volver svg{width:16px;height:16px;transform:rotate(180deg)}
.desglose-intro{max-width:52ch;margin-bottom:14px;color:var(--tinta-2)}
.desglose-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin-top:8px}
.nota-ejemplo{font-size:var(--t-chico);color:var(--tinta-2)}
.seguro-desglose .nota-ejemplo{margin-top:10px}

/* tarjetas de seguros: foto con velo azul noche abajo, donde va el nombre */
.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tarjeta{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  width:100%;height:104px;padding:12px;border:0;border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;
  background:var(--fondo-2);color:var(--papel);-webkit-tap-highlight-color:transparent;
  transition:transform 300ms var(--ease-sale), box-shadow 300ms var(--ease-sale)}
.tarjeta:active{transform:scale(.98);transition-duration:120ms}
.tarjeta img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.tarjeta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, var(--velo-tarjeta) 0%, var(--velo-tarjeta) 46%, transparent 92%)}
.tarjeta-nombre{min-width:0;font:700 1rem/1.15 var(--fuente-titulos);text-wrap:balance}
.tarjeta-flecha{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--papel);color:var(--azul)}
.tarjeta-flecha svg{width:16px;height:16px;transition:transform var(--dur-ui) var(--ease-ui)}
.tarjeta-otros{background:var(--azul-suave);color:var(--azul);box-shadow:inset 0 0 0 1px var(--filete)}
.tarjeta-otros::before{content:none}
.tarjeta-mas{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--azul);color:var(--azul)}
.tarjeta-mas svg{width:16px;height:16px}

/* ---------- secciones ---------- */
.seccion{padding:var(--sec) 0}
.seccion h2,.cierre h2{font-size:var(--t-seccion);line-height:1.15}
.claro{background:var(--papel)}
.pegada{padding-top:0}

.linea{padding-top:48px;padding-bottom:16px}
.linea-envase{display:grid;gap:12px;justify-items:start}
.linea-texto{font:600 var(--t-cita)/1.4 var(--fuente-titulos);color:var(--azul);max-width:34ch}

.dos{display:grid;gap:28px}
.foto-forma{overflow:hidden;border-radius:var(--radio-forma);clip-path:var(--forma);background:var(--fondo-2)}
.foto-forma img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease-sale)}
.texto{display:grid;gap:14px;align-content:start;max-width:60ch}
.envase.texto{max-width:calc(var(--envase) + 2 * var(--lado))}
.envase.texto>*{max-width:60ch}

/* pasos: tarjetas con foto teñida del azul de la marca, como la referencia de Sancor que pasó Vero.
   En el celular se deslizan de costado y la siguiente asoma; en escritorio van las tres en fila. */
.pasos{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--lado));padding:4px var(--lado) 8px;scroll-padding-inline:var(--lado);scrollbar-width:none;overscroll-behavior-x:contain}
.pasos::-webkit-scrollbar{display:none}
.paso{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:360px;padding:22px;
  scroll-snap-align:start;overflow:hidden;border-radius:var(--radio-forma);clip-path:var(--forma);background:var(--azul);color:var(--papel)}
.paso img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-sale)}
.paso::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--velo-paso)}
.paso-num{position:absolute;top:20px;left:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--papel);color:var(--azul);font:800 1.125rem/1 var(--fuente-titulos)}
.paso h3{color:var(--papel);font-size:var(--t-cita);font-weight:700;line-height:1.15}
.paso p{margin-top:6px;color:var(--sobre-oscuro);max-width:30ch}
.titulo-filas{margin-bottom:24px}

.cierre{position:relative;isolation:isolate;background:var(--fondo-2);padding-top:var(--sec);overflow:hidden}
.cierre::before{content:"";position:absolute;z-index:-1;top:-40px;right:-90px;width:300px;aspect-ratio:1;
  background:url(img/marca/isotipo-monocromo.svg) center/contain no-repeat;opacity:.05;transform:rotate(12deg)}
.cierre-texto{display:grid;gap:14px;justify-items:center;text-align:center}
.cierre .bajada{max-width:36ch}
.cierre .boton{margin-top:8px}
.cierre-curva{width:100%;height:clamp(48px,10vw,128px);margin-top:48px;object-fit:fill}

/* ---------- cabecera de las páginas internas ---------- */
.cabecera{padding:32px 0 40px;background:var(--papel);border-bottom:1px solid var(--filete)}
.cabecera h1{font-size:var(--t-pagina);line-height:1.15;max-width:30ch}
.cabecera .texto{gap:12px}
/* el selector de áreas queda fijo debajo de la barra y una píldora azul sigue al área que se lee (Nación, Swiss) */
.indice{position:sticky;top:var(--barra);z-index:35;background:var(--papel-velo);border-bottom:1px solid var(--filete);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.indice-envase{position:relative;display:flex;gap:4px;padding-block:8px;overflow-x:auto;scrollbar-width:none}
.indice-envase::-webkit-scrollbar{display:none}
.indice a{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;
  color:var(--tinta-2);text-decoration:none;font:600 1rem/1 var(--fuente-texto);transition:color 300ms var(--ease-sale)}
.indice a[aria-current]{color:var(--papel)}
.indice .iso{display:none;width:22px;height:22px;transition:fill 300ms var(--ease-sale)}
.indice a[aria-current] .iso{fill:var(--papel)}
.indice a[aria-current] .iso .iso-suave{fill:var(--sobre-oscuro)}
.indice-marca{position:absolute;z-index:0;top:8px;left:0;height:44px;width:var(--ancho,0);border-radius:999px;background:var(--azul);
  transform:translateX(var(--x,0));opacity:0;transition:transform 380ms var(--ease-sale), width 380ms var(--ease-sale), opacity 200ms}
.indice.con-marca .indice-marca{opacity:1}
html:has(.indice){scroll-padding-top:calc(var(--barra) + var(--alto-indice) + 8px)}

/* ---------- Nuestros seguros: un bloque por área ---------- */
.seguro-area{padding:var(--sec) 0}
.seguro-area:nth-of-type(odd){background:var(--papel)}
.seguro-titulo{display:flex;align-items:center;gap:14px}
.seguro-titulo h2{font-size:var(--t-seccion);line-height:1.15}
.seguro-frase{font:700 var(--t-cita)/1.3 var(--fuente-titulos);color:var(--azul)}
.acompana{border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.acompana summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;cursor:pointer;list-style:none;
  font:700 var(--t-cuerpo)/1.2 var(--fuente-titulos);color:var(--azul)}
.acompana summary::-webkit-details-marker{display:none}
.acompana summary svg{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-ui)}
.acompana[open] summary svg{transform:rotate(45deg)}
.acompana ul{display:grid;gap:8px;padding:0 0 16px}
.acompana li{position:relative;padding-left:22px;color:var(--tinta-2)}
.acompana li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--azul-2);transform:rotate(45deg);border-radius:1px}
.seguro-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.seguro-desglose{margin-top:36px}
.seguro-desglose h3{font-size:var(--t-subtitulo);font-weight:700;line-height:1.2;margin-bottom:14px}

/* ---------- Sobre nosotros ---------- */
.valores{display:grid;border-top:1px solid var(--filete)}
.valores > li{padding:20px 0;border-bottom:1px solid var(--filete)}
.valores h3{font-size:var(--t-subtitulo);font-weight:700;line-height:1.2;margin-bottom:6px}
.valores p{color:var(--tinta-2)}
.equipo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.persona-foto{display:grid;place-items:center;aspect-ratio:4/5;background:var(--fondo-2);border-radius:var(--radio-forma);clip-path:var(--forma)}
.persona-foto .iso{width:44px;height:44px;opacity:.35}
.persona p{margin-top:10px}
/* respaldo: una caja blanca con la forma de PLB y los logos en una grilla de filetes, quietos */
.respaldo-caja{display:grid;gap:20px;padding:24px 18px;background:var(--papel);border-radius:var(--radio-forma);clip-path:var(--forma);box-shadow:var(--sombra)}
.respaldo-texto{display:grid;gap:10px;align-content:start}
.companias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:12px;background:var(--filete);
  box-shadow:0 0 0 1px var(--filete)}
.companias li{display:grid;place-items:center;align-content:center;gap:8px;min-height:104px;padding:12px;background:var(--papel);
  color:var(--tinta-2);font:600 var(--t-chico)/1 var(--fuente-texto);letter-spacing:.02em}
.companias .iso{width:30px;height:30px;fill:var(--filete);transition:transform 400ms var(--ease-sale)}
.companias .iso .iso-suave{fill:var(--sobre-oscuro-2)}

/* ---------- Contacto ---------- */
.contacto{padding:32px 0 var(--sec)}
.contacto h1{font-size:var(--t-pagina);line-height:1.15}
.contacto-grilla{display:grid;gap:32px}
.formulario{display:grid;gap:16px;padding:24px 18px;background:var(--papel);border-radius:var(--radio-forma);clip-path:var(--forma);box-shadow:var(--sombra)}
.campo{display:grid;gap:6px;font-weight:600;color:var(--azul)}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--filete);border-radius:10px;
  background:var(--papel);color:var(--tinta);font:400 1rem/1.4 var(--fuente-texto);transition:border-color var(--dur-ui) var(--ease-ui)}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--azul-2);outline-offset:1px;border-color:var(--azul-2)}
.casilla{display:flex;gap:12px;align-items:flex-start;min-height:44px;color:var(--tinta-2);cursor:pointer}
.casilla input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--azul)}
.formulario .boton{width:100%}
.otra-via{display:grid;gap:10px;justify-items:start;padding-top:24px;border-top:1px solid var(--filete)}
.otra-via h2{font-size:var(--t-subtitulo);font-weight:700}
.datos{display:grid;justify-self:stretch;margin:0;border-top:1px solid var(--filete)}
.datos div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--filete)}
.datos dt{font-weight:600;color:var(--azul)}
.datos dd{margin:0}

/* ---------- pie ---------- */
.pie{background:var(--azul-noche);color:var(--sobre-oscuro-2);font-size:var(--t-legal);line-height:1.5;margin-top:-1px}
.pie-envase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-top:40px;padding-bottom:32px}
.pie-marca,.pie-columna:last-child{grid-column:1/-1}
.pie-titulo{margin-bottom:6px;font:700 var(--t-cuerpo)/1.2 var(--fuente-titulos);color:var(--papel)}
.pie-columna ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--sobre-oscuro);text-decoration:none}
.pie-columna .pie-datos{margin-top:6px}
.pie-base{border-top:1px solid var(--filete-oscuro)}
.pie-base .envase{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding-block:8px}
.pie-base a{display:inline-flex;align-items:center;min-height:44px;color:var(--papel)}
.pie-logo{width:150px;height:auto;margin-bottom:16px}
.pie-nombre{font:700 var(--t-subtitulo)/1.25 var(--fuente-titulos);color:var(--papel);margin-bottom:6px}
.pie-nav{display:grid;justify-items:start}
.pie-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--sobre-oscuro);text-decoration:none}
.pie-nav a[aria-current]{color:var(--papel);font-weight:600}
.pie a:focus-visible{outline-color:var(--papel)}
.ssn a{display:inline-block;padding-block:13px;margin-block:-13px}
.ssn{background:var(--fondo-2);color:var(--tinta);padding:18px 0 calc(18px + env(safe-area-inset-bottom))}
.ssn .envase{display:grid;gap:4px}

/* ---------- flotante y hoja de WhatsApp ---------- */
.flota{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--lado) calc(10px + env(safe-area-inset-bottom));
  background:var(--papel);box-shadow:0 -1px 0 var(--filete);transform:translateY(110%);transition:transform 360ms var(--ease)}
.flota.visible{transform:none}
.flota .boton{width:100%}

.hoja-velo{position:fixed;inset:0;z-index:65;background:var(--velo-hoja);opacity:0;pointer-events:none;transition:opacity 260ms var(--ease-ui)}
.hoja-velo.visible{opacity:1;pointer-events:auto}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:88vh;max-height:88dvh;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--papel);border-radius:24px 24px 0 0;box-shadow:var(--sombra);
  transform:translateY(100%);visibility:hidden;transition:transform 280ms var(--ease), visibility 0s linear 280ms;touch-action:none}
.hoja.abierta{transform:none;visibility:visible;transition:transform 280ms var(--ease), visibility 0s}
.hoja.arrastrando{transition:none}
.hoja-cabeza{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px var(--lado) 6px;cursor:grab}
.hoja-asa{position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--filete)}
.hoja h2{font-size:var(--t-cita);line-height:1.2}
.hoja-cerrar{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--azul);cursor:pointer}
.hoja-cerrar svg{width:24px;height:24px}
.hoja-cuerpo{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:grid;gap:16px;align-content:start;
  padding:8px var(--lado) calc(16px + env(safe-area-inset-bottom))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;cursor:pointer;
  background:var(--papel);color:var(--azul);box-shadow:inset 0 0 0 1px var(--filete);font:600 1rem/1 var(--fuente-texto);
  transition:background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui), transform 120ms;
  -webkit-tap-highlight-color:transparent}
.chip:active{transform:scale(.98)}
.chip-rombo{width:9px;height:9px;background:var(--azul-2);transform:rotate(45deg);border-radius:2px;flex:none}
.chip:has(input:checked){background:var(--azul);color:var(--papel);box-shadow:none}
.chip:has(input:checked) .chip-rombo{background:var(--papel)}
.chip:has(input:focus-visible){outline:2px solid var(--azul-2);outline-offset:2px}
.burbuja{display:flex;gap:10px;align-items:flex-start;margin-left:28px;min-height:70px;padding:12px 14px;
  background:var(--fondo-2);color:var(--tinta);border-radius:18px 18px 4px 18px}
.burbuja-rombo{flex:none;width:14px;height:14px;margin-top:4px;background:url(img/marca/rombo-azul.svg) center/contain no-repeat}
.burbuja.cambia p{animation:sube var(--dur-ui) var(--ease) both}
.hoja .boton-wa{width:100%}

/* aviso de la demo: va abajo del botón que lo abrió */
.globo{display:none;padding:14px 16px;border-radius:16px;scroll-margin:16px;margin-top:12px;max-width:520px;
  background:var(--azul-noche);color:var(--papel);text-align:left;box-shadow:var(--sombra)}
.globo.visible{display:block;animation:sube var(--dur-ui) var(--ease) both}
.globo b{display:block;margin-bottom:4px;font-weight:600}
.portada-acciones .globo{background:var(--papel);color:var(--tinta);width:100%}

/* ---------- movimiento: corre una vez y respeta la preferencia ---------- */
@media (prefers-reduced-motion: no-preference){
  /* portada: el texto, después el marco con sus cuatro áreas de a una, la foto que se acerca y la curva que se dibuja */
  .portada-texto,.marco,.portada-acciones{animation:sube 800ms var(--ease-sale) both}
  .marco{animation-delay:140ms}
  .portada-acciones{animation-delay:240ms}
  .areas > .area{animation:sube 700ms var(--ease-sale) both}
  .areas > .area:nth-child(2){animation-delay:300ms} .areas > .area:nth-child(3){animation-delay:370ms}
  .areas > .area:nth-child(4){animation-delay:440ms} .areas > .area:nth-child(5){animation-delay:510ms}
  .portada-foto{animation:acerca 7s var(--ease-sale) both}
  .portada-curva{animation:traza 1.6s var(--ease-sale) 400ms both}
  .vista-entra{animation:sube 300ms var(--ease-sale) both}

  /* apariciones al entrar en pantalla, una vez, escalonadas entre hermanos */
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--ease-sale), transform 900ms var(--ease-sale);transition-delay:var(--d,0ms)}
  .js .reveal.visto{opacity:1;transform:none}
  .js .foto-forma.reveal{transform:none}
  .js .foto-forma.reveal:not(.visto) img{transform:scale(1.1)}
  .js .foto-forma.reveal img{transition:transform 1.6s var(--ease-sale)}
  .js .paso.reveal:not(.visto) img{transform:scale(1.12)}
  .js .paso.reveal img{transition:transform 1.8s var(--ease-sale)}
  /* títulos palabra por palabra */
  .js .con-palabras.reveal{opacity:1;transform:none}
  .palabra{display:inline-block;overflow:clip;padding-block:.14em;margin-block:-.14em;vertical-align:top}
  .js .palabra > span{display:inline-block;transform:translateY(110%);transition:transform 900ms var(--ease-sale);transition-delay:calc(var(--d,0ms) + var(--p) * 50ms)}
  .js .visto .palabra > span,.js .visto.palabra > span,.js .con-palabras.visto .palabra > span{transform:none}
  /* las curvas de los cierres se dibujan de izquierda a derecha */
  .js .cierre-curva.reveal{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease-sale) 200ms}
  .js .cierre-curva.reveal.visto{clip-path:inset(0 0 0 0)}
  /* «¿Cómo te acompañamos?» se abre con altura animada donde el navegador lo permite */
  .acompana::details-content{block-size:0;overflow:clip;transition:block-size 400ms var(--ease-sale), content-visibility 400ms allow-discrete}
  .acompana[open]::details-content{block-size:auto}
}
@keyframes sube{from{opacity:0;transform:translateY(12px)}}
@keyframes acerca{from{transform:scale(1.1)}}
@keyframes traza{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

@media (hover: hover) and (pointer: fine){
  .boton-azul:hover{background:var(--azul-noche);transform:translateY(-1px);box-shadow:var(--sombra-suave)}
  .boton-blanco:hover{box-shadow:0 0 0 4px var(--halo-blanco)}
  .boton-borde:hover{box-shadow:inset 0 0 0 2px var(--azul)}
  .enlace-flecha:hover{text-decoration-color:currentColor}
  .enlace-flecha:hover svg{transform:translateX(3px)}
  .area:hover{background:var(--fondo)}
  .area:hover .area-enlace svg{transform:translateX(3px)}
  .area:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
  .tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave)}
  .tarjeta:hover img{transform:scale(1.05)}
  .foto-forma:hover img{transform:scale(1.04)}
  .companias li{transition:background-color 300ms var(--ease-sale)}
  .companias li:hover{background:var(--fondo)}
  .companias li:hover .iso{transform:rotate(90deg)}
  .paso:hover img{transform:scale(1.05)}
  .barra-nav a:hover::after{transform:none}
  .indice a:not([aria-current]):hover{color:var(--azul)}
  .pie-columna ul a:hover,.pie-nav a:hover{color:var(--papel);text-decoration:underline;text-underline-offset:.3em}
  .tarjeta:hover .tarjeta-flecha svg{transform:translateX(2px)}
  .chip:hover{box-shadow:inset 0 0 0 1px var(--azul-2)}
  .barra-nav a:hover{color:var(--azul)}
  .volver:hover{text-decoration-color:currentColor}
}

/* ---------- tableta ---------- */
@media (min-width: 760px){
  :root{--sec:96px;--lado:24px}
  .portada-acciones{grid-auto-flow:column;align-items:center;justify-content:start;gap:24px}
  .portada-acciones .boton{width:auto}
  .portada-acciones .globo{grid-column:1/-1;grid-row:2}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marco-cabeza{grid-column:1/-1;padding:18px 22px 14px}
  .area{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start;gap:12px;padding:22px 22px 18px;border-bottom:1px solid var(--filete)}
  .area:nth-child(odd of .area){border-right:1px solid var(--filete)}
  .area:nth-last-child(-n+2 of .area){border-bottom:0}
  .area-enlace{width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:end;
    min-height:32px;font:600 var(--t-chico)/1 var(--fuente-texto)}
  .area-mas{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .area-enlace svg{width:16px;height:16px}
  .area:active{background:none}
  .desglose{padding:6px 22px 20px}
  .foto-forma img{aspect-ratio:16/9}
  .equipo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .indice .iso{display:block}
  .indice a{padding:0 18px 0 12px}
  .cierre::before{width:420px;right:-60px}
  .companias{grid-template-columns:repeat(3,minmax(0,1fr))}
  .respaldo-caja{padding:32px 28px}
  .valores{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .formulario{padding:32px 28px}
}

/* ---------- escritorio ---------- */
@media (min-width: 1000px){
  :root{--chaflan:24px;--barra:76px}
  .boton{min-height:48px}
  .barra-logo img{width:168px}
  .barra-nav{display:flex;gap:32px;margin-left:auto}
  .barra-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-2);text-decoration:none;font:400 1rem/1 var(--fuente-texto)}
  .barra-nav a[aria-current]{color:var(--azul);font-weight:600}
  .barra-nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--azul);
    transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease-sale)}
  .barra-nav a[aria-current]::after{transform:none}
  .barra-cta{display:inline-flex;margin-left:8px}
  .barra-menu{display:none}

  .portada{background:var(--fondo);color:var(--tinta);padding:40px 0;column-gap:64px;
    grid-template-columns:minmax(var(--lado),1fr) minmax(0,500px) minmax(0,620px) minmax(var(--lado),1fr);
    grid-template-rows:1fr auto auto 1fr;min-height:clamp(600px, calc(100svh - var(--barra)), 780px)}
  .portada-texto{grid-column:2;grid-row:2;gap:16px}
  .portada h1{color:var(--azul)}
  .portada-texto .bajada{color:var(--tinta-2);max-width:40ch}
  .portada-acciones{grid-column:2;grid-row:3;align-self:start;margin-top:28px}
  .portada-acciones .enlace-flecha{color:var(--azul);text-decoration-color:var(--filete)}
  .portada-acciones .boton-blanco{background:var(--azul);color:var(--papel)}
  .portada-acciones .globo{background:var(--azul-noche);color:var(--papel)}
  .portada-cuadro{display:grid;grid-column:3;grid-row:1/-1;position:relative;isolation:isolate;overflow:hidden;align-content:center;
    min-height:620px;padding:40px 40px 120px;background:var(--degradado-marca);border-radius:var(--radio-forma);clip-path:var(--forma)}
  .portada-cuadro > *{grid-column:1}
  .portada-foto{opacity:.4;object-position:80% 45%}
  .marco{margin-top:0}
  .portada-curva{position:absolute;left:0;right:0;bottom:0;height:120px;margin:0;grid-column:auto!important}

  .linea{padding-top:96px;padding-bottom:24px}
  .linea-envase{justify-items:center;text-align:center}

  .dos{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:80px;align-items:center}
  .dos-al-reves{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .dos-al-reves > :first-child{order:2}
  .foto-forma img{aspect-ratio:4/3}

  .pasos{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-inline:0;padding:0;overflow:visible}
  .paso{min-height:440px;padding:28px}
  .paso-num{top:26px;left:28px}
  .titulo-filas{margin-bottom:32px}

  .cierre-curva{margin-top:72px}

  .cabecera{padding:56px 0 56px}
  .cabecera .dos{align-items:center}

  .seguro-area .dos{align-items:start}
  .seguro-area .foto-forma{position:sticky;top:calc(var(--barra) + var(--alto-indice) + 24px)}
  .seguro-desglose .tarjetas{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .seguro-desglose .tarjeta{height:132px;padding:16px}

  .valores{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;border-bottom:1px solid var(--filete)}
  .valores > li{padding:28px 28px 32px;border-bottom:0}
  .valores > li:first-child{padding-left:0}
  .valores > li + li{border-left:1px solid var(--filete)}
  .respaldo-caja{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:48px;align-items:center;padding:40px}
  .companias{grid-template-columns:repeat(3,minmax(0,1fr))}

  .contacto{padding-top:56px}
  .contacto-grilla{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:80px;align-items:start}
  .contacto-grilla .formulario{grid-column:2;grid-row:1 / span 2}

  .pie-envase{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));align-items:start;column-gap:48px;padding-top:56px;padding-bottom:44px}
  .pie-marca,.pie-columna:last-child{grid-column:auto}
  .pie-marca{max-width:36ch}

  .flota{left:auto;right:24px;bottom:24px;padding:0;background:none;box-shadow:none;transform:translateY(calc(100% + 32px))}
  .flota .boton{width:auto;box-shadow:var(--sombra)}
  .hoja{left:auto;right:24px;bottom:24px;width:420px;border-radius:24px;transform:translateY(calc(100% + 40px))}
  .hoja-asa{display:none}
  .hoja-cabeza{cursor:default}
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine){
  .portada-acciones .boton-blanco:hover{background:var(--azul-noche);box-shadow:none}
}
@media (min-width: 1000px) and (max-width: 1159.98px){
  .portada{column-gap:40px;grid-template-columns:minmax(var(--lado),1fr) minmax(0,420px) minmax(0,560px) minmax(var(--lado),1fr)}
  .portada-cuadro{padding:32px 32px 120px}
}
@media (min-width: 1100px){
  :root{--sec:112px}
}
/* celular acostado: el texto a la izquierda y el marco a la derecha, para que los seguros se vean sin bajar */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 999.98px){
  .portada{padding-top:16px;align-items:start;
    grid-template-columns:minmax(var(--lado),1fr) minmax(0,320px) 24px minmax(0,460px) minmax(var(--lado),1fr)}
  .portada-texto{grid-column:2;grid-row:1}
  .portada-acciones{grid-column:2;grid-row:2;grid-auto-flow:row;justify-items:start}
  .marco{grid-column:4;grid-row:1 / span 2;margin-top:0}
  .portada-curva{grid-row:3}
}