/* Pure Science Peptides · hoja de estilos del sitio
   Colores y tipografía tomados del manual de identidad. */

:root{
  --deep:#060E23; --navy:#0A1B3D; --blue:#1E5FD0; --cyan:#2FA8F2; --cyan-b:#3AE7F8;
  --paper:#FFFFFF; --mist:#F4F8FD; --mist-2:#EDF3FA; --line:#DCE5F1;
  --ink:#0C1B33; --soft:#5A6E8C; --dim:#8FA3BF;
  --ok:#15803D; --ok-bg:#ECFDF3; --low:#C2410C; --low-bg:#FFF4ED;
  --d:"Montserrat",system-ui,sans-serif;
  --b:"Barlow",system-ui,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ancho:1240px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{ background:var(--paper); color:var(--ink); font-family:var(--b); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased }
img{ max-width:100% }
a{ color:inherit; text-decoration:none }
.wrap{ max-width:var(--ancho); margin:0 auto; padding:0 28px }

.eyebrow{ font-family:var(--m); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--blue) }
.dark .eyebrow{ color:var(--cyan) }
h1,h2,h3{ font-family:var(--d); letter-spacing:-.02em; line-height:1.08; text-wrap:balance }
h1{ font-weight:800; font-size:clamp(32px,5vw,52px) }
h2{ font-weight:800; font-size:clamp(26px,3.6vw,38px) }
h3{ font-weight:700; font-size:20px; letter-spacing:-.01em }
.thin{ font-weight:200; color:var(--soft) }
.dark .thin{ color:#8FB8E8 }

/* ───────── botones ───────── */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--d); font-weight:600;
  font-size:13.5px; letter-spacing:.04em; padding:13px 22px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:all .22s var(--ease) }
.btn-p{ background:var(--blue); color:#fff }
.btn-p:hover{ background:var(--cyan); color:var(--deep) }
.btn-g{ background:transparent; border-color:var(--line); color:var(--ink) }
.btn-g:hover{ border-color:var(--blue); color:var(--blue) }
.dark .btn-g, .hero .btn-g{ border-color:rgba(160,196,240,.32); color:#EAF1FB }
.dark .btn-g:hover, .hero .btn-g:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(47,168,242,.08) }

/* ───────── encabezado ───────── */
header.top{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
.top-in{ max-width:var(--ancho); margin:0 auto; padding:0 28px; height:72px;
  display:flex; align-items:center; gap:30px }
.marca{ flex:none; width:200px; height:52px; display:block;
  background:url(../img/logo/compacto-navy.svg) no-repeat left center/contain }
nav.menu{ display:flex; gap:26px; font-size:15px; font-weight:500; color:var(--soft) }
nav.menu a{ position:relative; padding:4px 0; transition:color .2s var(--ease) }
nav.menu a:hover{ color:var(--ink) }
nav.menu a.on{ color:var(--ink); font-weight:600 }
nav.menu a.on::after{ content:""; position:absolute; left:0; right:0; bottom:-26px; height:2px; background:var(--blue) }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:14px }
.lang{ display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; font-family:var(--m); font-size:11px }
.lang button{ background:none; border:none; padding:7px 10px; cursor:pointer; color:var(--soft); letter-spacing:.1em }
.lang button.on{ background:var(--navy); color:#fff }
.burger{ display:none; background:none; border:1px solid var(--line); border-radius:7px; padding:9px 11px; cursor:pointer }

/* ───────── portada ───────── */
.hero{ background:var(--deep); color:#EAF1FB; position:relative; overflow:hidden }
.hero::after{ content:""; position:absolute; right:-120px; top:-160px; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,168,242,.22),rgba(47,168,242,0) 66%); pointer-events:none }
.hero-in{ max-width:var(--ancho); margin:0 auto; padding:76px 28px 70px; position:relative; z-index:1 }
.hero h1{ margin:16px 0 14px; max-width:17ch }
.hero h1 em{ font-style:normal; font-weight:200; color:#8FB8E8; display:block }
.hero p.lead{ color:#B9CBE4; max-width:54ch; font-size:17px }
.buscador{ margin-top:26px; display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.07);
  border:1px solid rgba(160,196,240,.28); border-radius:10px; padding:13px 17px; max-width:520px;
  transition:border-color .2s var(--ease) }
.buscador:focus-within{ border-color:var(--cyan) }
.buscador input{ flex:1; background:none; border:none; outline:none; color:#EAF1FB; font-family:var(--b); font-size:15.5px }
.buscador input::placeholder{ color:#7C93B4 }
.buscador .n{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; color:#6E88AC;
  border:1px solid rgba(160,196,240,.3); border-radius:5px; padding:4px 8px; white-space:nowrap }

/* ───────── franja de confianza ───────── */
.confianza{ background:var(--navy); color:#C9DCF5; border-top:1px solid rgba(160,196,240,.14) }
.confianza-in{ max-width:var(--ancho); margin:0 auto; padding:18px 28px; display:flex; flex-wrap:wrap;
  gap:14px 40px; font-family:var(--m); font-size:11px; letter-spacing:.16em; text-transform:uppercase }
.confianza span{ display:flex; align-items:center; gap:9px }
.confianza i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); display:block; flex:none }

/* ───────── secciones ───────── */
section.bloque{ padding:64px 0 }
section.bloque.mist{ background:var(--mist) }
.tit{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap }
.tit p{ color:var(--soft); max-width:52ch; margin-top:8px }

/* categorías */
.cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px }
.cat{ background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--blue);
  border-radius:11px; padding:20px 20px 18px; cursor:pointer; transition:all .3s var(--ease) }
.cat:hover{ transform:translateY(-4px); border-top-color:var(--cyan); box-shadow:0 14px 30px rgba(10,27,61,.10) }
.cat b{ display:block; font-family:var(--d); font-weight:700; font-size:17px; margin-bottom:5px }
.cat span{ font-family:var(--m); font-size:11px; letter-spacing:.12em; color:var(--soft) }

/* ───────── tarjetas de producto ───────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  display:flex; flex-direction:column; transition:all .3s var(--ease) }
.card:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(10,27,61,.12); border-color:#C9DCF5 }
.card .shot{ background:var(--mist-2); height:230px; display:flex; align-items:center; justify-content:center;
  position:relative; border-bottom:1px solid var(--line) }
.card .shot img{ height:190px; mix-blend-mode:multiply; transition:transform .4s var(--ease) }
.card:hover .shot img{ transform:scale(1.05) }
.tag{ position:absolute; top:12px; left:12px; font-family:var(--m); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); background:#fff; border:1px solid #C9DCF5; border-radius:5px; padding:4px 7px }
.stock{ position:absolute; top:12px; right:12px; font-family:var(--m); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; border-radius:5px; padding:4px 7px }
.stock.ok{ color:var(--ok); background:var(--ok-bg); border:1px solid #BBF7D0 }
.stock.no{ color:var(--low); background:var(--low-bg); border:1px solid #FFD9C2 }
.card .info{ padding:17px 18px 19px; display:flex; flex-direction:column; gap:8px; flex:1 }
.card .info h3{ font-size:18px }
.dosis{ align-self:flex-start; border:1.5px solid var(--blue); border-radius:7px; padding:3px 11px;
  font-family:var(--d); font-weight:600; font-size:12.5px; color:var(--blue) }
.card .info p{ font-size:13.5px; color:var(--soft); line-height:1.45 }
.precio{ margin-top:auto; display:flex; align-items:baseline; gap:8px; padding-top:10px }
.precio b{ font-family:var(--d); font-weight:800; font-size:22px; letter-spacing:-.02em }
.precio span{ font-family:var(--m); font-size:10.5px; letter-spacing:.12em; color:var(--soft) }

/* filtros */
.filtros{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:26px }
.chip{ font-size:14px; font-weight:500; color:var(--soft); border:1px solid var(--line); border-radius:99px;
  padding:8px 16px; background:var(--paper); cursor:pointer; transition:all .2s var(--ease) }
.chip:hover{ border-color:var(--blue); color:var(--ink) }
.chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600 }
.conteo{ margin-left:auto; font-family:var(--m); font-size:11.5px; color:var(--soft); letter-spacing:.1em }
.busca-cat{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px;
  padding:11px 15px; margin-bottom:18px; background:var(--paper) }
.busca-cat input{ flex:1; border:none; outline:none; font-family:var(--b); font-size:15px; color:var(--ink) }

/* ───────── ficha ───────── */
.ficha{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:52px; align-items:start; padding:44px 0 0 }
.ficha .figura{ background:var(--mist-2); border:1px solid var(--line); border-radius:15px; padding:26px;
  display:flex; flex-direction:column; align-items:center; gap:18px; position:relative }
.ficha .figura img{ height:360px; mix-blend-mode:multiply }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; width:100%; border-top:1px solid var(--line); padding-top:16px }
.specs span{ display:flex; align-items:center; gap:8px; font-family:var(--m); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft) }
.specs i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none }
.migas{ font-family:var(--m); font-size:11.5px; letter-spacing:.1em; color:var(--soft); padding-top:24px }
.migas a:hover{ color:var(--blue) }
.ficha h1{ font-size:clamp(30px,4.4vw,44px); margin-bottom:14px }
.pres{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 }
.pres button{ font-family:var(--d); font-weight:600; font-size:14px; border:1.5px solid var(--line);
  background:var(--paper); border-radius:9px; padding:11px 18px; cursor:pointer; color:var(--soft);
  transition:all .2s var(--ease); text-align:left }
.pres button:hover{ border-color:var(--blue) }
.pres button.on{ border-color:var(--blue); color:var(--blue); background:#F5F9FF }
.pres button small{ display:block; font-family:var(--m); font-size:10px; letter-spacing:.1em; opacity:.8; margin-top:3px }
.precio-grande{ display:flex; align-items:baseline; gap:12px; margin:6px 0 20px }
.precio-grande b{ font-family:var(--d); font-weight:800; font-size:40px; letter-spacing:-.025em; color:var(--blue) }
.precio-grande span{ font-family:var(--m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
.acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px }
.aviso{ font-family:var(--m); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft) }
.beneficios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:34px;
  border-top:1px solid var(--line); padding-top:26px }
.ben{ display:flex; flex-direction:column; gap:6px }
.ben .n{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--cyan); display:flex;
  align-items:center; justify-content:center; font-family:var(--m); font-size:10px; color:var(--blue) }
.ben b{ font-family:var(--d); font-weight:700; font-size:14.5px }
.compo{ border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-top:22px; max-width:440px }
.compo .ch{ background:var(--mist); padding:9px 15px; font-family:var(--m); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft); border-bottom:1px solid var(--line) }
.compo .row{ display:flex; justify-content:space-between; padding:9px 15px; font-size:14px; border-bottom:1px solid var(--mist-2) }
.compo .row:last-child{ border-bottom:none }
.compo .row b{ font-family:var(--d); font-weight:600; color:var(--blue); font-size:13.5px }

/* ───────── pie ───────── */
footer.pie{ background:var(--deep); color:#B9CBE4; margin-top:70px; padding:56px 0 0 }
.pie-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px }
.pie-logo{ width:230px; aspect-ratio:630/292; background:url(../img/logo/logo-blanco.svg) no-repeat left center/contain }
footer.pie h4{ font-family:var(--m); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px }
footer.pie li{ list-style:none; margin-bottom:9px; font-size:14.5px }
footer.pie a:hover{ color:#fff }
.legal{ border-top:1px solid rgba(160,196,240,.16); padding:18px 0 26px; display:flex; flex-wrap:wrap;
  gap:12px 30px; font-family:var(--m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6E88AC }

/* ───────── acceso ───────── */
.gate[hidden]{ display:none !important }
.gate{ position:fixed; inset:0; z-index:200; background:rgba(6,14,35,.93); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px }
.gate-box{ background:var(--paper); border-radius:16px; max-width:480px; padding:38px 36px 32px; text-align:center }
.gate-box .iso{ width:64px; height:36px; margin:0 auto 18px; background:url(../img/logo/isotipo-navy.svg) no-repeat center/contain }
.gate-box h2{ font-size:24px; margin-bottom:12px }
.gate-box p{ color:var(--soft); font-size:15px; margin-bottom:24px }
.gate-box .btn{ width:100% ; justify-content:center }
.gate-box .salir{ display:block; margin-top:14px; font-size:13.5px; color:var(--soft) }

/* wsp flotante */
.wsp{ position:fixed; right:22px; bottom:22px; z-index:70; background:var(--blue); color:#fff;
  border-radius:99px; padding:14px 22px; font-family:var(--d); font-weight:600; font-size:13.5px;
  box-shadow:0 12px 30px rgba(30,95,208,.35); transition:all .25s var(--ease) }
.wsp:hover{ background:var(--cyan); color:var(--deep); transform:translateY(-2px) }

/* ───────── responsivo ───────── */
@media (max-width:900px){
  nav.menu, .lang{ display:none }
  .burger{ display:block }

  /* menú desplegable */
  nav.menu.abierto{ display:flex; flex-direction:column; gap:0;
    position:absolute; top:72px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(10,27,61,.10); padding:8px 0 }
  nav.menu.abierto a{ padding:15px 28px; font-size:16.5px; border-bottom:1px solid var(--mist-2) }
  nav.menu.abierto a:last-child{ border-bottom:none }
  nav.menu.abierto a.on::after{ display:none }
  nav.menu.abierto a.on{ color:var(--blue) }

  .ficha{ grid-template-columns:1fr; gap:30px }
  .ficha .figura img{ height:280px }
  .pie-grid{ grid-template-columns:1fr 1fr; gap:30px }
  .dos{ grid-template-columns:1fr; gap:30px }
}

@media (max-width:700px){
  /* el botón del encabezado sobra: ya está el flotante */
  .top-right .btn-p{ display:none }
  .top-in{ height:64px; gap:14px }
  nav.menu.abierto{ top:64px }
  .marca .txt{ font-size:11px; letter-spacing:.22em }

  .wrap,.top-in,.hero-in,.confianza-in{ padding-left:18px; padding-right:18px }
  .hero-in{ padding-top:44px; padding-bottom:44px }
  section.bloque{ padding:44px 0 }
  .tit{ margin-bottom:20px }
  .tit .btn{ order:2; width:100%; justify-content:center; margin-top:4px }

  /* categorías: dos columnas compactas, no tarjetones */
  .cats{ grid-template-columns:1fr 1fr; gap:10px }
  .cat{ padding:14px 14px 13px; border-radius:10px }
  .cat b{ font-size:14.5px; margin-bottom:3px; line-height:1.25 }
  .cat span{ font-size:10px }

  /* filtros: una sola fila que se desliza */
  .filtros{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    margin:0 -18px 18px; padding:0 18px 4px; scrollbar-width:none }
  .filtros::-webkit-scrollbar{ display:none }
  .chip{ flex:none; scroll-snap-align:start; font-size:13.5px; padding:9px 15px }
  .conteo{ display:none }
  .busca-cat{ padding:13px 15px; margin-bottom:14px }
  .busca-cat input{ font-size:16px }        /* 16px evita el zoom automático de iOS */
  .buscador input{ font-size:16px }

  .grid{ grid-template-columns:1fr 1fr; gap:12px }
  .card .shot{ height:170px } .card .shot img{ height:128px }
  .card .tag{ display:none }                 /* la leyenda ya va en la ficha y en el pie */
  .card .stock{ top:9px; right:9px; left:auto; font-size:8.5px; padding:3px 7px }
  .card .info{ padding:12px 13px 14px; gap:6px } .card .info h3{ font-size:15px }
  .card .info p{ display:none }
  .precio b{ font-size:18px }
  .dosis{ font-size:11px; padding:2px 9px }

  .pie-grid{ grid-template-columns:1fr; gap:26px }
  .beneficios{ grid-template-columns:1fr 1fr; gap:16px }
  .pasos{ grid-template-columns:1fr 1fr; gap:18px }
  .specs{ grid-template-columns:1fr 1fr }

  /* el flotante deja de tapar el texto */
  .wsp{ right:14px; bottom:14px; padding:13px 20px; font-size:13px }
  footer.pie{ padding-bottom:70px }
}

@media (max-width:420px){
  .grid{ grid-template-columns:1fr }
  .card .shot{ height:210px } .card .shot img{ height:175px }
  .card .info p{ display:block }
  .beneficios, .pasos{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

/* ───────── páginas de contenido ───────── */
.texto{ max-width:68ch }
.texto h2{ font-size:24px; margin-bottom:12px }
.texto p{ color:var(--soft); font-size:16.5px; margin-bottom:14px }
.texto p b{ color:var(--ink); font-weight:600 }

.dos{ display:grid; grid-template-columns:1.25fr .95fr; gap:52px; align-items:start }
.panel{ background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:28px 28px 26px }
.panel h3{ font-size:20px }
.panel label{ display:block; font-family:var(--d); font-weight:600; font-size:13.5px; margin-bottom:13px }
.panel input, .panel textarea{ width:100%; margin-top:6px; font-family:var(--b); font-size:15px;
  color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font-weight:400; transition:border-color .2s var(--ease), box-shadow .2s var(--ease) }
.panel input:focus, .panel textarea:focus{ outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,95,208,.12) }
.panel textarea{ resize:vertical; line-height:1.5 }

.lista{ list-style:none; display:grid; gap:11px }
.lista li{ position:relative; padding-left:24px; color:var(--soft); font-size:16px; line-height:1.5 }
.lista li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--cyan) }
.lista li b{ color:var(--ink); font-weight:600 }

.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px }
.paso{ position:relative; padding-top:20px; border-top:1px solid var(--line) }
.paso .n{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--blue); display:block; margin-bottom:9px }
.paso b{ display:block; font-family:var(--d); font-weight:700; font-size:18px; margin-bottom:6px }
.paso p{ color:var(--soft); font-size:14.5px; line-height:1.45 }

.datos{ display:grid; gap:20px }
.datos dt{ font-family:var(--m); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft) }
.datos dd{ font-family:var(--d); font-weight:600; font-size:18px; margin-top:4px }
.datos dd a:hover{ color:var(--blue) }

.faq details{ border-bottom:1px solid var(--line); padding:18px 0 }
.faq summary{ font-family:var(--d); font-weight:600; font-size:17.5px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:18px; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--m); font-size:20px; color:var(--blue); flex:none }
.faq details[open] summary::after{ content:"–" }
.faq details p{ color:var(--soft); font-size:16px; margin-top:11px; max-width:70ch }

@media (max-width:900px){ .dos{ grid-template-columns:1fr; gap:30px } }
.stock.poco{ color:#B45309; background:#FFFBEB; border:1px solid #FDE68A }
.agotado{ background:var(--low-bg); border:1px solid #FFD9C2; color:var(--low); border-radius:9px;
  padding:12px 15px; font-size:14.5px; margin-bottom:14px; max-width:52ch }

/* ═════════ portada: hero con producto ═════════ */
.portada-hero::after{ display:none }
.portada-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  /* la textura vive solo detrás del texto: así la imagen de producto,
     que trae fondo plano, no deja ver su rectángulo */
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 34%, transparent 56%);
  mask-image:linear-gradient(to right, #000 0%, #000 34%, transparent 56%);
  background-image:
    radial-gradient(circle at 12% 22%, rgba(47,168,242,.10), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='86' viewBox='0 0 150 86'%3E%3Cg fill='none' stroke='%232FA8F2' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M8 70 33 24 58 70 83 24 108 70 133 24'/%3E%3Ccircle cx='8' cy='70' r='3'/%3E%3Ccircle cx='58' cy='70' r='3'/%3E%3Ccircle cx='108' cy='70' r='3'/%3E%3Ccircle cx='33' cy='24' r='4'/%3E%3Ccircle cx='83' cy='24' r='4'/%3E%3Ccircle cx='133' cy='24' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-dos{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px; align-items:center }
.hero-texto{ position:relative; z-index:2 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px }
.hero-frecuente{ margin-top:20px; font-family:var(--m); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#6E88AC }
.hero-frecuente a{ color:#B9CBE4; border-bottom:1px solid rgba(160,196,240,.3);
  margin-left:12px; padding-bottom:2px; transition:color .2s var(--ease), border-color .2s var(--ease) }
.hero-frecuente a:hover{ color:var(--cyan); border-color:var(--cyan) }

.hero-arte{ position:relative; display:flex; align-items:center; justify-content:center }
.hero-arte .viales{ width:auto; max-width:100%; height:auto; max-height:440px; display:block }
.sello{ position:absolute; z-index:3; font-family:var(--m); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#EAF1FB; background:rgba(10,27,61,.82);
  border:1px solid rgba(160,196,240,.28); backdrop-filter:blur(6px);
  border-radius:99px; padding:8px 15px; white-space:nowrap }
.sello.s1{ top:22px; right:0 } .sello.s2{ top:44%; left:-14px } .sello.s3{ bottom:56px; right:22px }

/* ═════════ objetivos: el vial manda, no la caja ═════════ */
.objetivos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px }
.objetivo{ display:flex; align-items:center; gap:16px; padding:12px 18px 12px 12px;
  border-radius:14px; background:var(--paper); border:1px solid var(--line);
  transition:all .3s var(--ease) }
.objetivo:hover{ background:var(--navy); border-color:var(--navy); transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(10,27,61,.18) }
.obj-vial{ width:54px; height:74px; flex:none; border-radius:9px; background:var(--mist-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:background .3s var(--ease) }
.obj-vial img{ height:64px; mix-blend-mode:multiply }
.objetivo:hover .obj-vial{ background:#fff }
.obj-txt{ flex:1; min-width:0 }
.obj-txt b{ display:block; font-family:var(--d); font-weight:700; font-size:16.5px;
  letter-spacing:-.01em; line-height:1.2; transition:color .3s var(--ease) }
.obj-txt span{ font-family:var(--m); font-size:10.5px; letter-spacing:.12em; color:var(--soft) }
.objetivo:hover .obj-txt b{ color:#fff }
.objetivo:hover .obj-txt span{ color:#8FB8E8 }
.obj-flecha{ font-size:17px; color:var(--line); flex:none; transition:all .3s var(--ease) }
.objetivo:hover .obj-flecha{ color:var(--cyan); transform:translateX(3px) }

/* iconos de la franja de confianza */
.confianza svg{ width:19px; height:19px; flex:none; color:var(--cyan) }
.confianza span{ gap:11px }

@media (max-width:900px){
  .hero-dos{ grid-template-columns:1fr; gap:26px }
  .hero-arte{ order:-1 }
  .hero-arte .viales{ max-height:280px; margin:0 auto }
  .sello{ font-size:9px; padding:6px 11px }
  .sello.s1{ top:4px; right:4px } .sello.s2{ top:42%; left:4px } .sello.s3{ bottom:18px; right:10px }
}
@media (max-width:700px){
  .marca{ width:150px; height:38px }
  .objetivos{ grid-template-columns:1fr; gap:9px }
  .objetivo{ padding:10px 14px 10px 10px; gap:13px }
  .obj-vial{ width:46px; height:62px } .obj-vial img{ height:54px }
  .obj-txt b{ font-size:15px }
  .hero-frecuente a{ margin-left:8px }
}