/* ═══════════════════════════════════════════════════════════════════════════
   BerstaPOS · diseño 2 (sep-2026)
   ⚠️ Sin Bootstrap ni jQuery. Todo el sitio en este archivo y en app.js.
   ⚠️ El contenido es VISIBLE por defecto: la aparición al hacer scroll solo se
      activa si app.js añade `.js-reveal` a <html>. Sin JS —o para un rastreador—
      la página se lee entera.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --tinta:#0f2a38; --tinta-2:#3b5563; --suave:#64798a;
  --rojo:#e0533d; --marca:#0f7f96; --marca-osc:#0b6475; --verde:#00a99d; --azul:#16a2e0;
  --papel:#f6f8f7; --blanco:#ffffff; --linea:#dde6e4; --crema:#eef6f4;
  --radio:14px; --radio-s:10px;
  --sombra:0 1px 2px rgba(15,42,56,.06),0 8px 24px rgba(15,42,56,.08);
  --sombra-alta:0 2px 4px rgba(15,42,56,.08),0 18px 40px rgba(15,42,56,.14);
  --f-titulo:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-texto:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ancho:1160px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--f-texto);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--marca-osc)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:20px}
.eyebrow{display:inline-block;font:600 12.5px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--marca)}
.lede{font-size:19px;color:var(--tinta-2);max-width:60ch}
.salto{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.salto:focus{left:12px}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;
  font:600 16px/1 var(--f-texto);text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:var(--marca);color:#fff;box-shadow:0 6px 16px rgba(15,127,150,.28)}
.btn-primario:hover{background:var(--marca-osc);color:#fff;box-shadow:0 10px 22px rgba(15,127,150,.34)}
.btn-borde{border-color:var(--linea);color:var(--tinta);background:var(--blanco)}
.btn-borde:hover{border-color:var(--marca);color:var(--marca)}
.btn-claro{background:#fff;color:var(--marca)}
.btn-claro:hover{color:var(--marca-osc);box-shadow:var(--sombra)}
.play img{height:52px;width:auto}

/* ── Cabecera ── */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(246,248,247,.82);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background-color .25s}
.cabecera.con-scroll{border-bottom-color:var(--linea);box-shadow:0 6px 20px rgba(15,42,56,.06);background:rgba(246,248,247,.94)}
.cabecera .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.marca img{height:34px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:6px;list-style:none;padding:0;margin-block:0}
.menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--tinta);text-decoration:none;font-weight:500;font-size:15.5px;transition:background-color .2s,color .2s}
.menu a:hover,.menu a[aria-current="page"]{background:var(--crema);color:var(--marca)}
.cabecera .btn{min-height:42px;padding:10px 18px;font-size:15px}
/* El botón vive dentro del menú: sin esto hereda el hover claro de los enlaces. */
.menu a.btn-primario,.menu a.btn-primario:hover{color:#fff}
.menu a.btn-primario{background:var(--marca)}
.menu a.btn-primario:hover{background:var(--marca-osc)}
@media (max-width:900px){.menu a.btn{justify-content:center;margin-top:6px}}
.menu-boton{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--tinta)}
.menu-boton svg{width:26px;height:26px}
@media (max-width:900px){
  .menu-boton{display:inline-grid;place-items:center}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 18px;
    background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:0 18px 30px rgba(15,42,56,.10);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
  .menu.abierto{opacity:1;transform:none;pointer-events:auto}
  .menu a{padding:14px 12px;font-size:17px}
  .cabecera .accion-web{display:none}
}

/* ── Hero ── */
.hero{position:relative;overflow:hidden;padding-block:56px 72px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 480px at 85% 10%,rgba(0,169,157,.16),transparent 60%),
             radial-gradient(700px 420px at 0% 100%,rgba(22,162,224,.10),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5.2vw,58px);margin-top:14px}
.hero h1 .resalta{color:var(--marca)}
.hero .lede{margin-top:18px}
.hero-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.sellos{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.sello{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:var(--blanco);border:1px solid var(--linea);font-size:14px;font-weight:500;color:var(--tinta-2)}
.sello b{color:var(--tinta);font-variant-numeric:tabular-nums}
.sello svg{width:16px;height:16px;color:var(--verde)}
.sello.pronto{background:transparent;border-style:dashed}
.hero-media{position:relative;justify-self:center}
.hero-media img{width:min(440px,100%);filter:drop-shadow(0 30px 40px rgba(15,42,56,.18));animation:flota 7s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-10px)}}
@media (max-width:900px){.hero{padding-block:32px 48px}.hero .wrap{grid-template-columns:1fr;gap:28px}.hero-media img{width:min(340px,86%)}}

/* ── Secciones ── */
.seccion{padding-block:84px}
.seccion.alterna{background:var(--blanco);border-block:1px solid var(--linea)}
.cabeza{max-width:720px;margin-bottom:40px}
.cabeza.centro{margin-inline:auto;text-align:center}
.cabeza h2{font-size:clamp(28px,3.6vw,42px);margin-top:10px}
.cabeza p{margin-top:12px;color:var(--tinta-2);font-size:18px}
@media (max-width:700px){.seccion{padding-block:60px}}

/* ── Giros (chips) ── */
.giros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0;margin:0}
.giros a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--blanco);border:1px solid var(--linea);
  color:var(--tinta);text-decoration:none;font-weight:500;transition:border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.giros a:hover{border-color:var(--marca);color:var(--marca);transform:translateY(-2px);box-shadow:var(--sombra)}
.giros a span{color:var(--suave);font-size:13px;font-variant-numeric:tabular-nums}
/* ⚠️ SIN ESTO LA PÁGINA SE DESBORDA EN EL CELULAR: una etiqueta larga («Restaurantes,
   cafeterías y comida para llevar») no se partía y ensanchaba todo, cortando el
   título y dejando fuera el botón del menú. Visto en la captura a 400 px. */
.giros li{max-width:100%}
.giros a{max-width:100%;text-align:center;line-height:1.35}
.hero .wrap>*,.funciones>*,.banda>*,.pie-rejilla>*{min-width:0}
.hero h1,.cabeza h2,.pagina-cabeza h1{overflow-wrap:anywhere}

/* ── Funciones con captura ── */
.funciones{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.pestanas{display:grid;gap:8px}
.pestana{all:unset;box-sizing:border-box;display:block;cursor:pointer;padding:16px 18px;border-radius:var(--radio);border:1px solid transparent;transition:background-color .2s,border-color .2s,box-shadow .2s}
.pestana h3{font:600 18px/1.3 var(--f-texto);letter-spacing:0;color:var(--tinta)}
.pestana p{margin-top:6px;color:var(--tinta-2);font-size:15.5px;display:none}
.pestana:hover{background:var(--crema)}
.pestana[aria-selected="true"]{background:var(--blanco);border-color:var(--linea);box-shadow:var(--sombra)}
.pestana[aria-selected="true"] h3{color:var(--marca)}
.pestana[aria-selected="true"] p{display:block}
.pestana:focus-visible{outline:3px solid var(--azul)}
.captura{position:relative;justify-self:center;width:min(380px,100%);aspect-ratio:560/680}
.captura img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.captura img.activa{opacity:1;transform:none}
@media (max-width:900px){.funciones{grid-template-columns:1fr}.captura{order:-1;width:min(300px,80%)}}

/* ── Opiniones ── */
.opiniones{columns:3 280px;column-gap:18px}
.opinion{break-inside:avoid;margin:0 0 18px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 20px 16px;transition:transform .25s var(--ease),box-shadow .25s}
.opinion:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.estrellas{display:flex;gap:2px;color:#f5a524;margin-bottom:10px}
.estrellas svg{width:17px;height:17px}
.opinion blockquote{margin:0;font-size:16.5px;color:var(--tinta)}
.opinion figcaption{margin-top:12px;font-size:14px;color:var(--suave);font-weight:500}
.fuente{text-align:center;margin-top:10px;color:var(--suave);font-size:14.5px}

/* ── Precios: tarjetas con borde de ticket ── */
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media (max-width:1060px){.planes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.planes{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px 22px;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
/* Perforación de ticket entre el precio y la lista: el detalle que solo tiene un punto de venta. */
.plan .perfora{position:relative;height:1px;margin:18px -22px;border-top:2px dashed var(--linea)}
.plan .perfora::before,.plan .perfora::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--papel);border:1px solid var(--linea)}
.plan .perfora::before{left:-11px;clip-path:inset(0 0 0 50%)}
.plan .perfora::after{right:-11px;clip-path:inset(0 50% 0 0)}
.plan.destacado{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca),var(--sombra)}
.plan .etiqueta-destacado{position:absolute;top:-12px;left:22px;background:var(--marca);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.plan h3{font:600 15px/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.plan .usuarios{font-family:var(--f-titulo);font-size:24px;font-weight:700;margin-top:6px}
.precio{display:flex;align-items:baseline;gap:6px;margin-top:14px;font-variant-numeric:tabular-nums}
.precio .cifra{font-family:var(--f-titulo);font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.precio .unidad{color:var(--suave);font-size:15px}
.anual{margin-top:6px;color:var(--suave);font-size:14px;font-variant-numeric:tabular-nums}
.prueba{margin-top:6px;color:var(--verde);font-size:14px;font-weight:600}
.lista{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}
.lista li{display:flex;gap:9px;font-size:15.5px;color:var(--tinta-2)}
.lista li svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--verde)}
.lista li.base{font-weight:600;color:var(--tinta)}
/* El distintivo del plan en la tarjeta de precios (28-sep-2026).
   ⚠️ El disco va con el color del plan al 12 %: funciona sobre fondo claro y
      oscuro porque es el mismo color translúcido, sin tener que definir dos. */
.plan-ico{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;margin:0 0 12px;
  background:color-mix(in srgb, var(--plan) 12%, transparent)}
.plan-ico img{display:block;width:30px;height:30px}
/* ⚠️ El nombre toma el color del plan: es lo que hace que las cuatro tarjetas se
      distingan de un vistazo sin leerlas. */
.plan h3{color:var(--plan)}

/* Precio por usuario adicional, bajo los usuarios incluidos (28-sep-2026).
   ⚠️ Discreto pero legible: es un dato que desbloquea la decisión («sí caben mis
      cuatro empleados»), no una condición que haya que esconder. */
.extra-usuario{margin:-6px 0 14px;font:600 13.5px var(--f-texto);color:var(--plan)}

/* ── Interruptor mensual / anual (28-sep-2026) ── */
.ciclo{display:inline-flex;gap:4px;padding:4px;margin:0 auto 22px;border-radius:999px;
  background:var(--gris-suave,#eef2f6);border:1px solid var(--linea)}
.ciclo{display:flex;width:max-content;margin-left:auto;margin-right:auto}
.ciclo-op{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:9px 20px;border-radius:999px;background:transparent;color:var(--tinta-2);
  font:600 15px var(--f-texto);transition:background .2s,color .2s}
.ciclo-op:hover{color:var(--tinta)}
.ciclo-op.sel{background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra)}
/* ⚠️ EL DESCUENTO SE VE SIN PULSAR: es la razón para cambiar a anual, así que no
      puede aparecer solo DESPUÉS de cambiar. */
.ciclo-op .ahorro{font:700 12px var(--f-texto);padding:2px 8px;border-radius:999px;
  background:var(--verde,#2E7D32);color:#fff;white-space:nowrap}
/* Lo que el plan NO incluye (28-sep-2026, a petición).
   ⚠️ SIN TACHAR: tachado se lee como «esto se quitó» o como una oferta
      caducada. Atenuado dice «aquí no está» sin sugerir que antes sí.
   ⚠️ EQUIS ROJA, NO GUION GRIS (28-sep-2026, a petición). El guion se leía como
      «sin dato» y el renglón pasaba por uno más de la lista. La equis se
      entiende sin leer el texto.
   ⚠️ LA EQUIS MANTIENE SU COLOR Y EL TEXTO NO. El `opacity` va en el texto, no
      en el renglón entero: atenuando también la equis se pierde lo único que
      distingue las dos listas de un vistazo, que es justo lo que se pedía.
   ⚠️ El SVG ocupa el mismo ancho que la palomita para que las dos listas queden
      alineadas; si no, los renglones bailan y cuesta compararlos. */
.lista li.sin{color:var(--suave);opacity:.62}
.lista li.sin svg{color:var(--rojo);opacity:1}
.plan .btn{justify-content:center;width:100%}
.nota-precios{text-align:center;margin-top:26px;color:var(--suave);font-size:15px}

/* ── Preguntas frecuentes ── */
/* ⚠️ SIN max-width EN LOS CONTENEDORES DE SECCIÓN (FAQ, guías, prosa, políticas,
   contacto): todos llegan a los mismos bordes que el topbar (.wrap). Con 760–820 px
   quedaban con márgenes más anchos que la barra de arriba y la página se veía
   desalineada (pedido del 16-sep-2026). Solo se limitan los controles sueltos,
   como el buscador. */
.faq{display:grid;gap:10px}
.faq details{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:border-color .2s,box-shadow .2s;
  interpolate-size:allow-keywords}
.faq details[open]{border-color:#c6d7d4;box-shadow:var(--sombra)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--crema);color:var(--marca);transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary .mas{transform:rotate(45deg);background:var(--marca);color:#fff}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .respuesta{padding:0 20px 18px;color:var(--tinta-2)}

/* ── Banda final ── */
.banda{background:var(--tinta);color:#fff;border-radius:22px;padding:48px 40px;display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.banda::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(0,169,157,.45),transparent 70%)}
.banda h2{font-size:clamp(28px,3.4vw,40px)}
.banda p{margin-top:10px;color:#c9dbe0;font-size:18px}
.banda .acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;position:relative;z-index:1}
@media (max-width:800px){.banda{grid-template-columns:1fr;padding:36px 24px}.banda .acciones{justify-content:flex-start}}

/* ── Pie ── */
.pie{margin-top:84px;background:var(--blanco);border-top:1px solid var(--linea);padding-block:48px 28px;font-size:15px}
.pie-rejilla{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media (max-width:860px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-rejilla{grid-template-columns:1fr}}
.pie h2{font:700 13px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:14px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.pie a{color:var(--tinta-2);text-decoration:none}
.pie a:hover{color:var(--marca);text-decoration:underline}
.pie .marca img{height:32px}
.pie .lema{margin-top:12px;color:var(--suave);max-width:32ch}
.redes{display:flex;gap:8px;margin-top:16px}
.redes a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--linea);color:var(--tinta-2);transition:border-color .2s,color .2s,transform .2s var(--ease)}
.redes a:hover{border-color:var(--marca);color:var(--marca);transform:translateY(-2px)}
.redes svg{width:20px;height:20px}
.pie-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--suave);font-size:14px}

/* ── Páginas interiores ── */
.pagina-cabeza{padding-block:44px 8px}
.migas{font-size:14px;color:var(--suave);display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 14px}
.migas li+li::before{content:"›";margin-right:6px;color:#9fb1b8}
.migas a{color:var(--suave)}
.pagina-cabeza h1{font-size:clamp(32px,4.4vw,50px)}
.pagina-cabeza .lede{margin-top:14px}
.prosa{}
.prosa h2{font-size:clamp(24px,2.8vw,32px);margin:44px 0 16px}
.prosa p+p{margin-top:12px}
.usos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:700px){.usos{grid-template-columns:1fr}}
.usos li{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 16px;transition:transform .25s var(--ease),box-shadow .25s}
.usos li:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.usos b{display:block;font-size:17px;margin-bottom:4px;color:var(--tinta)}
.usos span{color:var(--tinta-2);font-size:15.5px}
.limites{background:#fff8ec;border:1px solid #f2dcb3;border-left:4px solid #c98a1b;border-radius:var(--radio-s);padding:16px 18px;color:#5b4212}
.limites ul{margin:6px 0 0;padding-left:18px}
.dato{margin-top:18px;color:var(--suave);font-size:15px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tarjeta{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;text-decoration:none;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:#c6d7d4;color:inherit}
.tarjeta h2,.tarjeta h3{font:700 20px/1.25 var(--f-titulo);color:var(--tinta)}
.tarjeta p{margin-top:8px;color:var(--tinta-2);font-size:15.5px;flex:1}
.tarjeta .ir{margin-top:14px;color:var(--marca);font-weight:600;font-size:15px;display:inline-flex;gap:6px;align-items:center}
.tarjeta .ir svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.tarjeta:hover .ir svg{transform:translateX(3px)}
.tarjeta small{margin-top:10px;color:var(--suave);font-size:13.5px}

/* ── Artículo de ayuda ── */
.articulo{}
.articulo .contenido{margin-top:24px;font-size:17.5px}
.articulo .contenido img{border-radius:var(--radio-s);margin-block:14px}
/* ⚠️ VIDEOS AL 100% DEL ANCHO CON aspect-ratio: los iframes vienen del panel con
   width="560" height="315" fijos (código de YouTube pegado tal cual). Con solo
   max-width se veían chicos; con width:100% sin aspect-ratio quedaban aplastados a 315 px. */
.articulo .contenido iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radio-s);margin-block:1em}
.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:min(240px,70%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;margin-top:28px}
.galeria button{all:unset;cursor:zoom-in;scroll-snap-align:start;border-radius:var(--radio-s);overflow:hidden;background:var(--blanco);border:1px solid var(--linea);transition:transform .25s var(--ease),box-shadow .25s}
.galeria button:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.galeria button:focus-visible{outline:3px solid var(--azul)}
.galeria img{width:100%;height:auto}
dialog.visor{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh}
dialog.visor::backdrop{background:rgba(10,24,32,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.visor img{max-height:86vh;width:auto;margin-inline:auto;border-radius:12px}
dialog.visor .cerrar{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;font-size:22px;line-height:1}
dialog.visor[open]{animation:aparece .25s var(--ease)}
/* Flechas y contador del visor de capturas (23-sep-2026).
   ⚠️ Van SOBRE la imagen y centradas en vertical: en una captura alta, unas
      flechas al pie quedarían fuera de la vista. El fondo oscuro translúcido
      es para que se vean tanto sobre una captura clara como sobre una oscura. */
dialog.visor .visor-ant,dialog.visor .visor-sig{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(10,24,32,.55);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
dialog.visor .visor-ant{left:8px}
dialog.visor .visor-sig{right:8px}
dialog.visor .visor-ant:hover,dialog.visor .visor-sig:hover{background:rgba(10,24,32,.78)}
/* El contador debajo, centrado: encima taparía justo el detalle que se vino a
   mirar ampliado. */
dialog.visor .visor-cuenta{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(10,24,32,.65);color:#fff;font-size:13px;padding:4px 12px;border-radius:999px}
/* ⚠️ `hidden` tiene que ganar al `display:grid` de arriba o las flechas
      seguirían pintándose en los extremos. */
dialog.visor [hidden]{display:none!important}
@keyframes aparece{from{opacity:0;transform:scale(.97)}}

/* ── Aparición al hacer scroll (solo con JS) ── */
.js-reveal [data-aparece]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js-reveal [data-aparece].visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal [data-aparece]{opacity:1;transform:none}
}

/* ── Formularios (contacto, distribuidores) ── */
.formulario{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;display:grid;gap:16px;box-shadow:var(--sombra)}
.formulario .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.formulario .fila{grid-template-columns:1fr}.formulario{padding:20px}}
.campo{display:grid;gap:6px}
.campo label{font-weight:600;font-size:15px}
.campo .ayuda{font-size:13.5px;color:var(--suave)}
.campo input,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--tinta);background:var(--blanco);border:1.5px solid var(--linea);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 4px rgba(15,127,150,.14)}
.campo input[readonly]{background:#f2f5f6;color:var(--tinta-2)}
.campo input[type=file]{padding:9px}
.formulario .enviar{display:flex;justify-content:flex-end}
.formulario fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}
.formulario legend{font:700 18px/1.3 var(--f-titulo);margin-bottom:6px}
.aviso{border-radius:var(--radio-s);padding:14px 18px;font-size:15px}
.aviso.error{background:#fdecec;border:1px solid #f5c2c2;color:#a12727}
.aviso.info{background:var(--crema);border:1px solid #cfe6e2}
.aviso.ok{background:var(--blanco);border:1px solid var(--linea);text-align:center;padding:36px 24px}
.trampa{position:absolute;left:-9999px}
.legal{}
.legal h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 12px}
.legal p{margin-top:12px;color:var(--tinta-2)}
.ventajas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.ventajas li{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.ventajas b{display:block;font-size:17px;margin-bottom:4px}

/* ── Buscador del centro de ayuda ── */
.buscador{position:relative;max-width:640px;margin:0 0 26px}
.buscador-cuenta{margin-top:8px;padding-left:18px;font-size:14px;color:var(--suave);min-height:1.2em}
.sin-resultados{margin:0 0 20px;color:var(--tinta-2)}
.tarjeta[hidden]{display:none!important}
.salto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ══ Páginas interiores centradas (16-sep-2026) ══
   ⚠️ SE CENTRA LA CABECERA, NO EL TEXTO LARGO. Migas, título, entrada, botones y
      buscador van al centro; artículos, políticas, respuestas y formularios siguen
      alineados a la izquierda dentro de una columna centrada, porque un párrafo
      centrado se lee mal (cada renglón empieza en un sitio distinto).
   ⚠️ La portada no usa .pagina-cabeza, así que no le afecta. */
.pagina-cabeza .wrap{text-align:center;margin-inline:auto}
.pagina-cabeza .migas{justify-content:center}
.pagina-cabeza .lede,.pagina-cabeza .dato{margin-inline:auto;max-width:62ch}
.pagina-cabeza .hero-acciones{justify-content:center}
.buscador{margin-inline:auto}
.buscador-cuenta{text-align:center;padding-left:0}
.sin-resultados{text-align:center}
.prosa,.legal,.articulo{margin-inline:auto}
.prosa h2{text-align:center}
.prosa .usos,.prosa .faq,.prosa .limites{text-align:left}
.prosa .giros{justify-content:center!important}

/* ── Ilustraciones a lápiz de los giros ── */
.tarjeta.con-dibujo{text-align:center;align-items:center}
.tarjeta.con-dibujo p{text-align:center}
.tarjeta .dibujo{width:100%;max-width:260px;height:auto;margin:-6px auto 10px;transition:transform .35s var(--ease)}
.tarjeta.con-dibujo:hover .dibujo{transform:translateY(-4px) rotate(-1.5deg)}
.dibujo-cabeza{width:min(300px,70%);height:auto;margin:6px auto 4px}

/* ── Temas del centro de ayuda: filtros, etiqueta en tarjeta y carrusel ── */
.tema-etiqueta{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin:-6px 0 8px -4px;padding:0 10px 0 2px;border-radius:999px;
  background:var(--crema);color:var(--marca-osc);font-size:13px;font-weight:600;text-decoration:none}
.tema-etiqueta img{width:28px;height:28px}
a.tema-etiqueta{margin:0 0 12px}
a.tema-etiqueta:hover{color:var(--marca)}
.carrusel{margin-top:44px}
.carrusel-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.carrusel-cabeza h2{font-size:24px}
.carrusel-flechas{display:flex;gap:8px}
.carrusel-flechas button{width:42px;height:42px;border-radius:999px;border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);cursor:pointer;
  display:grid;place-items:center;transition:border-color .2s,color .2s,opacity .2s}
.carrusel-flechas button:hover:not(:disabled){border-color:var(--marca);color:var(--marca)}
.carrusel-flechas button:disabled{opacity:.35;cursor:default}
.carrusel-flechas button svg{width:18px;height:18px}
.carrusel-flechas button[data-mover="-1"] svg{transform:scaleX(-1)}
.carrusel-pista{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 32px) / 3));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 18px;margin:0 -2px;scrollbar-width:thin}
.carrusel-pista .tarjeta{scroll-snap-align:start}
.carrusel-pista .tarjeta:hover{transform:translateY(-3px)}
@media (max-width:640px){.carrusel-pista{grid-auto-columns:82%}}
@media (prefers-reduced-motion:reduce){.carrusel-pista{scroll-behavior:auto}}

/* ── «¿No encuentras lo que estás buscando?» ── */
.no-encuentras{margin:40px 0 0;text-align:center;background:var(--crema);border:1px solid var(--linea);border-radius:var(--radio);padding:24px 22px}
.no-encuentras h2{font-size:21px;color:var(--tinta)}
.no-encuentras p{margin:8px 0 0;color:var(--tinta-2);font-size:15.5px}
.no-encuentras strong{color:var(--marca-osc)}


/* Buscador de ayuda: [tema ▾ | texto… 🔍] en una sola barra. */
.buscador-barra{display:flex;align-items:center;gap:4px;background:var(--blanco);border:1.5px solid var(--linea);border-radius:999px;
  padding:5px 16px 5px 5px;box-shadow:var(--sombra);transition:border-color .2s,box-shadow .2s}
.buscador-barra:focus-within{border-color:var(--marca);box-shadow:0 0 0 4px rgba(15,127,150,.14),var(--sombra)}
.buscador-barra select{flex:0 1 auto;min-width:0;max-width:45%;height:44px;margin:0;font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--marca-osc);
  background:var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b6475' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/14px;
  border:0;border-radius:999px;padding:0 32px 0 14px;appearance:none;-webkit-appearance:none;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}
.buscador-barra select:focus-visible{outline:3px solid rgba(15,127,150,.35);outline-offset:1px}
.buscador-barra input{flex:1 1 auto;min-width:0;height:44px;margin:0;font:inherit;font-size:17px;color:var(--tinta);background:transparent;border:0;padding:0 8px 0 10px;outline:none;-webkit-appearance:none;appearance:none}
.buscador-barra svg{flex:none;width:20px;height:20px;color:var(--suave)}
/* ⚠️ EN CELULAR LA BARRA SE PARTE EN DOS FILAS (tema arriba, texto abajo): a 320–375 px,
      con las dos cosas en una fila, el campo quedaba de ~70 px y solo se leía «Busca una».
   ⚠️ input a 16px: con menos, Safari de iPhone hace zoom al enfocar. */
@media (max-width:560px){
  .buscador-barra{flex-wrap:wrap;border-radius:22px;padding:5px 14px 5px 5px;row-gap:2px}
  .buscador-barra select{flex:1 0 100%;max-width:none;font-size:14px;height:42px;margin-right:-9px}
  .buscador-barra input{font-size:16px;padding-left:10px}
  .carrusel-cabeza h2{font-size:20px}
  .carrusel-flechas button{width:38px;height:38px}
}