/* cartadigital.app — landing · estilos
   Identidad: azul corporativo (#235CA7 → #3E86D6) sobre blanco, tinta azul oscura.
   El azul sale del propio logo (assets/img/logo.png).

   CÓMO SE TOCA ESTA HOJA
   Está escrita por capas: lo básico arriba y, al final, una «capa PRO» que
   unifica el sistema visual. Esa forma de crecer se ha cobrado tres fallos
   —iconos descoloridos, una pista de enlace en gris y los móviles solapados
   apilándose—, y los tres eran lo mismo: una regla nueva al final pisando a
   otra de arriba sin querer. Para que no vuelva a pasar:

   1. Cada componente se define en UN solo sitio. Si al cambiar algo hace falta
      buscarlo en dos, es que hay que fundirlos antes de tocar nada.
   2. Antes de añadir una regla al final, comprobar quién más apunta a ese
      elemento (`grep`). Dos clases (`.card .ico`) le ganan a una (`.ico-pro`),
      esté donde esté en el fichero.
   3. Ojo con las clases compartidas: `.ico-pro` lo usan tanto «Por qué Carta
      digital» como «Novedades». Lo que solo valga para una, va con su
      contenedor delante (`.card-pro .ico-pro`), nunca en la regla general. */

:root {
  --brand: #235CA7;
  --brand-2: #3E86D6;
  --brand-soft: #E9F1FA;
  --ink: #0E2138;
  --text: #3A3D52;
  --muted: #7A7F94;
  --bg: #ffffff;
  --surface: #F7F8FB;
  --surface-warm: #F1F6FC;
  --line: #ECEEF3;
  --green: #17B26A;
  --star: #FFB020;
  /* Paleta sacada de las propias cartas demo: la hosteleria tira a ambar,
     rojo teja y tierras, no a azul corporativo. El azul sigue siendo la
     marca; estos son los acentos que hacen que algo se pulse o se mire. */
  --accion: #F7AD00;        /* ambar (demo-5) — botones de accion */
  --accion-oscuro: #DE9B00;
  --apetito: #E04033;       /* rojo teja (demo-5) — etiquetas y precios */
  --exito: #00AE53;         /* verde (demo-1) — lo que incluye, confirmaciones */
  --tierra: #3f302c;        /* marron (demo-6) — textos sobre foto */
  /* Sobre ambar el texto va OSCURO: el blanco sobre amarillo no llega al
     contraste minimo y se lee mal, sobre todo al sol en la terraza. */
  --sobre-accion: #1B1300;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --shadow-md: 0 8px 30px rgba(15,23,42,.10);
  --shadow-brand: 0 12px 30px rgba(35,92,167,.28);
  --maxw: 1280px;
  /* Una sola pila de titulares. Iba escrito "Sora" a secas en media docena de
     sitios y, cuando Google Fonts tarda o no carga, "Sora" a secas cae al
     serif por defecto del navegador: la web salía con dos tipografías. */
  --fuente-titulo: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.6;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--fuente-titulo); color: var(--ink); line-height: 1.2; font-weight: 600; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: 84px 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 16px 36px rgba(35,92,167,.36); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #d8dbe6; }
.btn-white { background: #fff; color: var(--brand); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 2px 16px rgba(15,23,42,.05); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.nav .logo { height: 70px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { color: var(--text); font-weight: 500; font-size: 15px; transition: color .15s; }
.nav-links a:hover { color: var(--brand); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* Hero */
.hero { padding: 64px 0 72px; background:
  radial-gradient(1200px 500px at 85% -10%, #FFEDE3 0%, rgba(233,241,250,0) 60%),
  radial-gradient(900px 400px at 0% 0%, #F1F6FC 0%, rgba(241,246,252,0) 55%); }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; margin-bottom: 22px; }
.hero h1 { font-size: 52px; letter-spacing: -.5px; margin-bottom: 18px; }
.hero h1 .hl { color: var(--brand); }
.hero p.lead { font-size: 19px; color: var(--muted); max-width: 540px; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.hero-actions .play { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.hero-actions .play .ico { width: 42px; height: 42px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--brand); }
.hero-metrics { display: flex; gap: 34px; }
.hero-metrics .m strong { font-family: var(--fuente-titulo); font-size: 26px; color: var(--ink); display: block; }
.hero-metrics .m span { font-size: 13.5px; color: var(--muted); }

/* Phone mockup */
.phone-wrap { position: relative; display: grid; place-items: center; }
.phone { width: 300px; height: 600px; background: #0d0f1c; border-radius: 42px; padding: 12px;
  box-shadow: 0 40px 80px rgba(15,23,42,.28); position: relative; }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px; background: #0d0f1c; border-radius: 0 0 14px 14px; z-index: 3; }
.phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; }
.ps-cover { height: 150px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); position: relative; }
.ps-cover .ps-logo { position: absolute; bottom: -26px; left: 20px; width: 56px; height: 56px; border-radius: 16px;
  background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; font-size: 26px; }
.ps-body { padding: 38px 18px 18px; overflow: hidden; }
.ps-title { font-family: var(--fuente-titulo); font-weight: 700; color: var(--ink); font-size: 17px; }
.ps-sub { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.ps-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ps-tabs span { font-size: 11px; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.ps-tabs span.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ps-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ps-item .thumb { width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg,#FFE3D3,#FFD0BB); }
.ps-item .thumb.b { background: linear-gradient(135deg,#DDF3E6,#BFead0); }
.ps-item .thumb.c { background: linear-gradient(135deg,#E7E9FF,#D2d7ff); }
.ps-item h5 { font-size: 13px; color: var(--ink); font-family: var(--fuente-titulo); font-weight: 600; }
.ps-item p { font-size: 10.5px; color: var(--muted); }
.ps-item .price { margin-left: auto; font-weight: 700; color: var(--brand); font-size: 13px; }
.float-qr { position: absolute; right: -18px; bottom: 40px; width: 108px; height: 108px; background: #fff;
  border-radius: 20px; box-shadow: var(--shadow-md); display: grid; place-items: center; padding: 14px; }
.float-qr svg { width: 100%; }

/* Section headings */
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.sec-head .tag { color: var(--brand); font-weight: 700; letter-spacing: 1.5px; font-size: 13px; text-transform: uppercase; }
.sec-head h2 { font-size: 38px; letter-spacing: -.4px; margin: 12px 0; }
.sec-head p { color: var(--muted); font-size: 17px; }

/* Pillars */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .ico { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--brand-soft); color: var(--brand); }
.card .ico svg { width: 26px; height: 26px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--muted); }

/* Benefits band */
.benefits { background: var(--surface-warm); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.benefit { text-align: center; padding: 8px; }
.benefit .big { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 16px; display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-sm); color: var(--brand); }
.benefit .big svg { width: 30px; height: 30px; }
.benefit h3 { font-size: 19px; margin-bottom: 6px; }
.benefit p { color: var(--muted); font-size: 15px; }

/* Features grid */
.grid-6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feature { display: flex; gap: 16px; }
.feature .ico { width: auto; height: auto; border-radius: 0; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg,var(--brand-2),var(--brand)); color: #fff; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 16.5px; margin-bottom: 4px; }
.feature p { font-size: 14px; color: var(--muted); }

/* Advantages (list) */
.adv { background: var(--surface); }
.adv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px 40px; max-width: 900px; margin: 0 auto; }
.adv-item { display: flex; gap: 14px; align-items: flex-start; }
.adv-item .check { width: 26px; height: 26px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; flex: none; margin-top: 2px; }
.adv-item .check svg { width: 15px; height: 15px; }
.adv-item h4 { font-size: 16px; margin-bottom: 2px; }
.adv-item p { font-size: 14px; color: var(--muted); }

/* Use cases */
.uses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.use { border-radius: var(--radius); padding: 26px; color: #fff; min-height: 150px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm); }
.use h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.use p { font-size: 14px; opacity: .92; }
.use .u-ico { position: absolute; right: 18px; bottom: 14px; opacity: .28; }
.use .u-ico svg { width: 64px; height: 64px; }

/* Testimonials */
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tst { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.stars { color: var(--star); font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.tst p { font-size: 15px; color: var(--text); margin-bottom: 16px; }
.tst .who { display: flex; align-items: center; gap: 12px; }
.tst .who .av { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg,var(--brand-2),var(--brand));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--fuente-titulo); }
.tst .who strong { display: block; color: var(--ink); font-size: 14.5px; }
.tst .who span { font-size: 12.5px; color: var(--muted); }

/* FAQ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 20px;
  font-weight: 600; color: var(--ink); font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  font-family: var(--fuente-titulo); }
.faq-q .pm { color: var(--brand); font-size: 22px; transition: transform .2s; flex: none; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 20px 18px; color: var(--muted); font-size: 15px; }

/* CTA band */
.cta-band { background: linear-gradient(135deg,#0E2138, #1B3D63); color: #fff; text-align: center; border-radius: 0; }
.cta-band h2 { color: #fff; font-size: 36px; margin-bottom: 14px; }
.cta-band p { color: #C7CAD9; font-size: 18px; max-width: 560px; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { background: #0F1120; color: #A9AEC2; padding: 64px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer .logo { height: 60px; margin-bottom: 16px; }
.foot-about p { font-size: 14px; max-width: 300px; }
.foot-social { display: flex; gap: 10px; margin-top: 16px; }
.foot-social a { width: 38px; height: 38px; border-radius: 10px; background: #1B1E33; display: grid; place-items: center; color: #C7CAD9; transition: background .2s; }
.foot-social a:hover { background: var(--brand); color: #fff; }
.foot-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; font-family: var(--fuente-titulo); }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { font-size: 14px; transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid #22263c; padding-top: 22px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: 13px; }
.foot-bottom a { color: #A9AEC2; }
.foot-bottom a:hover { color: #fff; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Video modal */
.video-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.video-modal.open { display: flex; }
.video-backdrop { position: absolute; inset: 0; background: rgba(12,14,28,.75); backdrop-filter: blur(4px); animation: fade .2s ease; }
.video-box { position: relative; width: 100%; max-width: 900px; z-index: 2; animation: pop .25s ease; }
.video-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .9; }
.video-close:hover { opacity: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Cookie banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff;
  border-top: 1px solid var(--line); box-shadow: 0 -6px 30px rgba(15,23,42,.10);
  transform: translateY(120%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cookie-banner.show { transform: none; }
.cookie-inner { display: flex; align-items: center; gap: 20px; padding: 16px 22px; }
.cookie-text { font-size: 13.5px; color: var(--text); margin: 0; }
.cookie-text a { color: var(--brand); font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; margin-left: auto; flex: none; }
.cookie-btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 720px) {
  .cookie-inner { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .cookie-actions { margin-left: 0; justify-content: center; }
}

/* Responsive */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-6, .uses-grid, .tst-grid { grid-template-columns: repeat(2,1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .phone-wrap { order: -1; }
  .hero h1 { font-size: 42px; }
}
@media (max-width: 720px) {
  section { padding: 60px 0; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .mobile-open .nav-links { display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column;
    background: #fff; padding: 16px 22px; gap: 4px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .mobile-open .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .grid-3, .grid-4, .grid-6, .uses-grid, .tst-grid, .adv-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .sec-head h2, .cta-band h2 { font-size: 28px; }
  .hero-metrics { gap: 22px; }
}

/* ============================================================
   CARRUSEL DE CARTAS REALES (#ejemplos)
   Son capturas de cartas publicadas de verdad, no maquetas: es lo
   que más convence a un hostelero que duda. Se desplaza con scroll
   nativo + scroll-snap, sin librerías ni dependencias.
   ============================================================ */
.showcase { background: var(--surface-warm); }
.sec-sub { max-width: 640px; margin: 10px auto 0; color: var(--muted); }

.shots {
  /* Cuántas tarjetas se ven a la vez. El carril mide EXACTAMENTE eso, así que
     ninguna queda cortada por la mitad: al resto se llega desplazando, con las
     flechas de abajo. El `min(100%, …)` es la red de seguridad del móvil: el
     carril nunca puede pasarse del ancho de la pantalla (si se pasa, el móvil
     reduce la escala de la página entera). */
  --tarjetas-a-la-vez: 3;
  --ancho-tarjeta: 318px;
  --hueco: 22px;
  display: flex;
  gap: var(--hueco);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 34px 4px 12px;
  scrollbar-width: none;
  max-width: min(100%, calc(var(--tarjetas-a-la-vez) * var(--ancho-tarjeta)
                 + (var(--tarjetas-a-la-vez) - 1) * var(--hueco) + 8px));
  margin-inline: auto;
}
.shots::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 var(--ancho-tarjeta);
  scroll-snap-align: center;
  text-align: center;
}
.shot-marco {
  position: relative;
  border-radius: 26px;
  /* Marco de teléfono: da contexto de que se ve en el móvil del cliente. El
     borde va aquí y no en la imagen porque la carta viva se incrusta dentro,
     y tiene que quedar recortada por el mismo radio. */
  border: 8px solid #12213a;
  background: #12213a;
  box-shadow: var(--sombra-3);
  overflow: hidden;
  transition: transform .25s ease;
}
.shot img { width: 100%; height: auto; display: block; border-radius: 18px; }
.shot:hover .shot-marco { transform: translateY(-8px) scale(1.02); }
.shot-pie { display: block; margin-top: 14px; line-height: 1.35; }
.shot-pie strong { display: block; color: var(--ink); font-size: 15px; font-family: var(--fuente-titulo); }
/* `:not(.shot-ir)` a propósito: la pista de «Ver la carta» también es un
   <span> hijo, y esta regla, con dos clases, le ganaba y la dejaba gris. */
/* `:not(.shot-ir)` a propósito: la pista de «Ver la carta» también es un
   <span> hijo, y esta regla, con dos clases, le ganaba y la dejaba gris.
   Y en bloque, porque siendo los dos en línea la pista se pegaba al final
   del subtítulo cuando este era corto («Desayunos y meriendasVer la carta»)
   y caía debajo cuando era largo: cada tarjeta de una manera. */
.shot-pie > span:not(.shot-ir) { display: block; color: var(--muted); font-size: 13px; }
/* La pista se ve SIEMPRE, no al pasar el ratón: en un móvil no hay ratón, y una
   tarjeta que no se anuncia como enlace no se pulsa. */
.shot-ir {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--brand);
  transition: color .18s ease, gap .18s var(--suave);
}
.shot-ir::after { content: "↗"; font-size: 13px; }
.shot:hover .shot-ir, .shot:focus-visible .shot-ir { color: var(--accion-oscuro); gap: 8px; }

.shots-nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.shots-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, color .18s ease;
}
.shots-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 980px) { .shots { --tarjetas-a-la-vez: 2; } }
@media (max-width: 680px) {
  .shots { --tarjetas-a-la-vez: 1; --ancho-tarjeta: min(318px, 78vw); --hueco: 16px; }
}

/* Submenú de sectores: cada uno tiene su propia página, y desde el menú se llega
   sin pasar por la home. En móvil se despliega en vertical, sin hover. */
.nav-links .has-sub { position: relative; }
.nav-links .caret { font-size: 10px; opacity: .7; margin-left: 2px; }
.subnav {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 8px; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav li a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.subnav li a:hover { background: var(--brand-soft); color: var(--brand); }

@media (max-width: 900px) {
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0;
  }
}

/* ============================================================
   HERO CON FOTO
   Foto real de fondo con velo oscuro: el texto tiene que leerse
   SIEMPRE, aunque la foto sea clara. Encima, un movil con una carta
   publicada de verdad, no una maqueta dibujada.
   ============================================================ */
.hero-foto { position: relative; overflow: hidden; color: #fff; padding-block: 92px 84px; }
.hero-bg {
  position: absolute; inset: 0;
  background: url('../img/hero-fondo.jpg?v=c68bdb02') center/cover no-repeat;
  /* El velo no es decoracion: sin el, sobre una foto clara el texto blanco desaparece. */
  filter: brightness(.42) saturate(1.05);
  transform: scale(1.04);
}
.hero-foto .container { position: relative; z-index: 2; }
.hero-foto .eyebrow { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); }
.hero-foto h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
/* Azul brillante a secas: sobre foto oscura destaca mas que cualquier recuadro. */
.hero-foto h1 .hl {
  background: none;
  color: #4FA8FF;
  padding: 0;
  text-shadow: 0 0 26px rgba(79,168,255,.55), 0 2px 18px rgba(0,0,0,.45);
}
.hero-foto p.lead { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); max-width: 560px; }
.hero-foto .play { color: #fff; }
.hero-foto .hero-metrics { border-top: 1px solid rgba(255,255,255,.22); }
.hero-foto .hero-metrics strong { color: #fff; }
.hero-foto .hero-metrics span { color: rgba(255,255,255,.75); }

/* Boton principal: flota sobre la foto y se levanta al pasar el raton. */
.hero-foto .btn-primary {
  box-shadow: 0 10px 24px rgba(35,92,167,.45), 0 2px 6px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-foto .btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 38px rgba(62,134,214,.6), 0 4px 10px rgba(0,0,0,.3);
  background: var(--brand-2);
}
.hero-foto .btn-primary:active { transform: translateY(-1px) scale(1.01); }

/* ---- Movil ---- */
/* En columna: el enlace de «pantalla completa» va DEBAJO del móvil, no a su
   lado, que es donde lo dejaba el flex en fila. */
.hero-mockup { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* El marco del móvil, en un solo sitio. Estuvo definido dos veces —una versión
   antigua aquí y otra rehecha 50 líneas más abajo— y esa duplicación es la que
   me llevó a colar un `.movil { position: relative }` al final de la hoja que
   pisaba al `.movil-sol { position: absolute }` de los móviles solapados. Si
   hay que cambiar el marco, se cambia AQUÍ. */
.movil {
  position: relative;
  width: 100%; max-width: 300px;
  padding: 12px 11px;                 /* el grosor de la carcasa */
  background: linear-gradient(155deg, #3a3f47 0%, #0c0e12 34%, #0c0e12 66%, #3a3f47 100%);
  border-radius: 42px;
  box-shadow: 0 34px 66px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.10);
  /* Flota: sombra amplia por debajo y un balanceo lento, para que no parezca pegado. */
  animation: flotar 6s ease-in-out infinite;
  transition: transform .3s ease;
}
.movil:hover { transform: scale(1.045); animation-play-state: paused; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .movil { animation: none; } }

.movil-marco {
  position: relative; overflow: hidden;
  border: 0; border-radius: 30px; background: #000;
}
.movil-marco img { width: 100%; height: auto; display: block; border-radius: 30px; }
/* Isla superior, como la de un móvil actual. */
.movil-altavoz {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 14px; background: #000; z-index: 3;
}
/* Botones laterales, pegados AL borde de la carcasa, no flotando fuera. */
.movil-btn { position: absolute; background: #22262d; border-radius: 4px; z-index: 1; }
.movil-volumen { left: -2px; top: 118px; width: 3px; height: 46px; box-shadow: 0 60px 0 #22262d; }
.movil-encendido { right: -2px; top: 150px; width: 3px; height: 66px; }

@media (max-width: 900px) {
  .hero-foto { padding-block: 64px 56px; text-align: center; }
  .hero-foto .lead { margin-inline: auto; }
  .hero-mockup { margin-top: 34px; }
  .movil { max-width: 250px; padding: 10px 9px; border-radius: 36px; }
  .movil-altavoz { width: 72px; height: 18px; }
}

/* ------------------------------------------------------------------
   El carril del carrusel NO puede desbordar la pantalla.
   Cuando un elemento se sale del ancho del viewport, el movil reduce
   la escala de TODA la pagina para que quepa: se ve pequeña, deformada
   y descolocada. El scroll tiene que quedarse dentro del carril.
   ------------------------------------------------------------------ */
   (El ancho del carril y el de la tarjeta se definen arriba, en `.shots`, para
   no tener el mismo componente repartido en dos sitios.) */
.showcase .container { overflow: hidden; }
html, body { max-width: 100%; overflow-x: hidden; }


/* ------------------------------------------------------------------
   Cabecera: el logo medía 70 px dentro de una barra de 74, así que al
   competir por el sitio con el botón se comprimía y salía deformado.
   Se le fija altura holgada, se le prohíbe encoger y se contiene la
   proporción; el botón, más discreto, que aquí es secundario.
   ------------------------------------------------------------------ */
.nav { height: 78px; }
.nav .logo { height: 48px; width: auto; flex: 0 0 auto; object-fit: contain; }
.nav-cta .btn { padding: 10px 18px; font-size: 14.5px; white-space: nowrap; }

@media (max-width: 900px) {
  .nav { height: 66px; }
  .nav .logo { height: 38px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 14px; }

  /* En el móvil el botón del hero manda: centrado y sin ocupar toda la línea. */
  .hero-foto .hero-actions {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .hero-foto .hero-actions .btn-lg {
    width: auto; padding: 13px 26px; font-size: 15.5px;
  }
}

/* ============================================================
   «POR QUÉ CARTA DIGITAL» — tarjetas con más presencia
   El icono pasa de trazo suelto a pastilla con degradado, la caja
   se levanta al pasar el ratón y un número marca el orden de lectura.
   ============================================================ */
/* Solo color, sin subrayado: en un titular grande el trazo de fondo ensuciaba. */
.ventajas-pro .txt-hl { color: var(--brand); }

/* La tarjeta, en un solo sitio: estuvo partida en dos tandas —la original y unos
   «ajustes pedidos» más abajo— y había que leer las dos para saber qué medía. */
.card-pro {
  position: relative;
  /* Caja blanca con un filo fino, y el contenido a la IZQUIERDA. Antes era un
     rectángulo azul pálido con todo centrado: relleno pastel + icono centrado
     + título centrado + texto centrado es la receta exacta de las plantillas
     generadas, y con cuatro seguidas se lee el patrón antes que el contenido.
     Alineado a la izquierda se lee como un texto escrito, no como una ficha. */
  background: #fff;
  border: 1px solid #DDE5F0;
  border-radius: 16px;
  padding: 28px 26px 26px;
  text-align: left;
  overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
/* Franja de color que aparece al pasar el ratón: da vida sin recargar la tarjeta. */
.card-pro::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.card-pro:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: #C7D6EA;
}
.card-pro:hover::before { transform: scaleX(1); }

.card-pro .num {
  display: none;                      /* se quitaron los números de orden */
  position: absolute; top: 18px; right: 22px;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 30px;
  color: var(--brand); opacity: .10; letter-spacing: -.02em;
  transition: opacity .26s ease;
}
.card-pro:hover .num { opacity: .2; }

/* Tamaño BASE del icono. Ojo: `.ico-pro` no es solo de estas tarjetas —lo usan
   también las de Novedades, donde va pegado a la izquierda—, así que aquí no
   puede entrar ningún margen horizontal. El icono grande y centrado es cosa de
   `.card-pro`, y va en su propia regla, abajo. */
/* El icono, SIN baldosa. La baldosa redondeada con degradado detrás de cada
   icono es la firma visual de las plantillas generadas: en cuanto se repite
   cuatro veces, la sección deja de parecer diseñada. Aquí el icono va suelto,
   del color de la marca y con el trazo fino, como una viñeta al margen. */
.ico-pro {
  display: flex; align-items: center; justify-content: flex-start;
  width: auto; height: auto; border-radius: 0;
  margin-bottom: 14px;
  background: none;
  color: var(--brand);
  box-shadow: none;
  transition: transform .26s ease;
}
.ico-pro svg { width: 30px; height: 30px; }
.card-pro .ico-pro { width: auto; height: auto; border-radius: 0; margin: 0 0 14px; }
.card-pro .ico-pro svg { width: 32px; height: 32px; }
/* CUIDADO al tocar esto. La regla general `.card .ico` son dos clases y `.ico-pro`
   una sola, así que le ganaba y devolvía al icono el azul plano de fondo: durante
   un tiempo la sección salió con los iconos descoloridos. Va con las dos clases
   juntas para que mande el degradado, y no depende del orden en la hoja. */
.card .ico.ico-pro {
  background: none;
  color: var(--brand);
  box-shadow: none;
}
.card-pro:hover .ico-pro { transform: none; }

/* Icono y título en la MISMA línea, y el texto debajo ocupando el ancho. Con
   el icono encima, solo, quedaba un hueco muerto entre los dos y volvía a
   parecer una ficha de plantilla. El texto va debajo del título, no debajo del
   icono: el icono se queda en su propia columna, como una viñeta al margen, y
   título y texto forman un bloque. Así se lee como una entrada de lista. */
.card-pro { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; }
.card-pro .ico-pro { grid-column: 1; grid-row: 1; margin: 0; }
.card-pro h3 { grid-column: 2; grid-row: 1; font-size: 19px; color: var(--ink); margin: 0; }
.card-pro p { grid-column: 2; grid-row: 2; margin-top: 9px; }
.card-pro p { color: #46506B; line-height: 1.6; }
/* Lo importante de cada frase, en negrita y en color de marca. */
.card-pro p strong { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .card-pro, .card-pro .ico-pro { transition: none; }
  .card-pro:hover { transform: none; }
}


/* ============================================================
   ACENTO DE ACCIÓN (ámbar)
   El azul presenta; el ámbar hace clic. Un botón azul sobre una
   página azul se pierde: este destaca sobre foto y sobre blanco.
   ============================================================ */
.btn-primary,
.hero-foto .btn-primary,
.btn-light {
  background: var(--accion);
  color: var(--sobre-accion);
  border: 0;
}
.btn-primary:hover,
.hero-foto .btn-primary:hover {
  background: var(--accion-oscuro);
  color: var(--sobre-accion);
}
.hero-foto .btn-primary {
  box-shadow: 0 10px 24px rgba(247,173,0,.42), 0 2px 6px rgba(0,0,0,.25);
}
.hero-foto .btn-primary:hover {
  box-shadow: 0 18px 38px rgba(247,173,0,.55), 0 4px 10px rgba(0,0,0,.3);
}

/* Etiquetilla de seccion: rojo teja, que llama sin gritar. Lleva `.sec-head`
   delante porque la regla general de esa hoja es mas especifica y ganaba. */
.sec-head .tag, .tag {
  background: rgba(224,64,51,.10);
  color: var(--apetito);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Lo que incluye cada plan, en verde: es un "sí", no un adorno. */
.price-features li::before,
.adv li::before { color: var(--exito); }

/* ============================================================
   NOVEDADES — «pide y paga» y vídeo en los platos
   Dos tarjetas asimétricas: la de la izquierda pesa más porque es
   la que ya funciona; la segunda anuncia lo que llega.
   ============================================================ */
.novedades { background: var(--surface-warm); }
.nov-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: start;
}
.nov {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px 28px;
  transition: transform .26s ease, box-shadow .26s ease;
}
.nov:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(15,23,42,.13); }
.nov-destacada { border-color: rgba(247,173,0,.5); box-shadow: 0 10px 30px rgba(247,173,0,.12); }

/* La chapa de estado: verde para lo que ya se puede usar, ámbar para lo que llega. */
.nov-estado {
  position: absolute; top: 20px; right: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 5px 12px; border-radius: 999px;
}
.nov-ya { background: rgba(0,174,83,.12); color: var(--exito); }
.nov-pronto { background: rgba(247,173,0,.18); color: #8A6000; }

.nov h3 { font-size: 21px; color: var(--ink); margin-bottom: 10px; }
.nov p { color: var(--text); line-height: 1.62; }
.nov p strong { color: var(--ink); font-weight: 600; }
.nov .ico-pro { width: auto; height: auto; border-radius: 0; margin-bottom: 14px; }
.nov .ico-pro svg { width: 30px; height: 30px; }
.nov-destacada .ico-pro { background: none; color: var(--accion-oscuro, #B8811A); box-shadow: none; }

.nov-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.nov-lista li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--text); }
.nov-lista li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--exito); font-weight: 700;
}
.nov-nota { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .nov-grid { grid-template-columns: 1fr; }
  .nov { padding: 28px 22px 24px; }
  .nov-estado { position: static; display: inline-block; margin-bottom: 14px; }
}

/* ============================================================
   UNIFICACIÓN DE TARJETAS
   La página llevaba tres estilos de caja distintos y se veía
   descosida. Ahora «Funciones» y «Ventajas» comparten el mismo
   lenguaje que «Por qué Carta digital»: fondo suave, icono en
   pastilla y la caja que se levanta al pasar el ratón.
   Cada sección lleva su acento, para que se distingan sin gritar.
   ============================================================ */

/* --- Funciones: acento ámbar --- */
#funciones .feature {
  background: linear-gradient(180deg, #FFFBF2 0%, #FFF6E6 100%);
  border: 1px solid #F3E3C4;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
#funciones .feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  border-color: transparent;
}
#funciones .feature .ico {
  flex: 0 0 auto;
  width: auto; height: auto; border-radius: 0;
  display: grid; place-items: center;
  background: none;
  color: var(--accion-oscuro, #B8811A);
  box-shadow: none;
  margin: 0;
  transition: transform .26s ease;
}
#funciones .feature .ico svg { width: 26px; height: 26px; }
#funciones .feature:hover .ico { transform: rotate(-5deg) scale(1.07); }
#funciones .feature h3 { font-size: 17px; color: var(--ink); margin-bottom: 5px; }
#funciones .feature p { color: #46506B; line-height: 1.55; }

/* --- Ventajas: acento verde, que son «síes» --- */
.adv .adv-item {
  background: linear-gradient(180deg, #F3FBF6 0%, #EAF7F0 100%);
  border: 1px solid #D5EEE0;
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.adv .adv-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  border-color: transparent;
}
.adv .adv-item .check {
  flex: 0 0 auto;
  width: auto; height: auto; border-radius: 0;
  display: grid; place-items: center;
  background: none;
  color: var(--exito);
  box-shadow: none;
  transition: transform .26s ease;
}
.adv .adv-item .check svg { width: 22px; height: 22px; }
.adv .adv-item:hover .check { transform: scale(1.08); }
.adv .adv-item h4 { font-size: 16.5px; color: var(--ink); margin-bottom: 4px; }
.adv .adv-item p { color: #46506B; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  #funciones .feature, .adv .adv-item,
  #funciones .feature .ico, .adv .adv-item .check { transition: none; }
  #funciones .feature:hover, .adv .adv-item:hover { transform: none; }
}

/* ============================================================
   «POR QUÉ CARTA DIGITAL» — dos columnas
   Izquierda: el texto y, debajo, las cuatro cajas en 2×2.
   Derecha: dos móviles pequeños, contenidos DENTRO de la sección.
   Antes los móviles eran tan grandes que tapaban el texto.
   ============================================================ */
.vent-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px 44px; align-items: center; }
/* Al meter el texto como tercer hijo, la rejilla de dos columnas lo mandaba a su
   propia celda y descolocaba todo. Se asigna cada bloque a mano: texto y cajas
   apilados en la izquierda, los moviles ocupando la derecha entera. */
.vent-intro  { grid-column: 1; grid-row: 1; align-self: end; }
.vent-cajas  { grid-column: 1; grid-row: 2; }
.vent-visual { grid-column: 2; grid-row: 1 / span 2; }

.vent-intro { margin-bottom: 22px; }
.vent-intro h3 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.vent-intro p { color: var(--text); line-height: 1.62; max-width: 560px; }
.vent-intro p strong { color: var(--ink); font-weight: 600; }

/* Cajas más contenidas: el icono baja y el texto se aprieta. */
.vent-cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vent-cajas .card-pro { padding: 22px 18px 20px; }
.vent-cajas .card-pro .ico-pro { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 13px; }
.vent-cajas .card-pro .ico-pro svg { width: 26px; height: 26px; }
.vent-cajas .card-pro h3 { font-size: 16.5px; margin-bottom: 6px; }
.vent-cajas .card-pro p { font-size: 14.2px; line-height: 1.5; }

/* Móviles pequeños y encajados: la altura la marca el propio bloque. */
.solapadas { position: relative; height: 664px; max-width: 430px; margin: 0 auto; }
.movil-sol { position: absolute; animation: none; transition: transform .3s ease; }
.movil-sol .movil-marco img { width: 100%; height: auto; display: block; }
.sol-fondo  { top: 14px;  left: 0;  width: 62%; transform: rotate(-5deg); z-index: 1; }
.sol-frente { bottom: 0;  right: 0; width: 62%; transform: rotate(5deg);  z-index: 2; }
.solapadas:hover .sol-fondo  { transform: rotate(-7deg) translateY(-7px); }
.solapadas:hover .sol-frente { transform: rotate(7deg)  translateY(-7px); }
/* Marco más fino, que a este tamaño el grosor del hero queda basto. */
.movil-sol { padding: 7px 6px; border-radius: 26px; }
.movil-sol .movil-marco { border-radius: 20px; }
.movil-sol .movil-marco img { border-radius: 20px; }
.movil-sol .movil-altavoz { width: 44px; height: 11px; top: 6px; border-radius: 8px; }
.movil-sol .movil-btn { display: none; }

@media (max-width: 1080px) {
  .vent-layout { grid-template-columns: 1fr; gap: 28px; }
  .vent-intro, .vent-cajas, .vent-visual { grid-column: 1; grid-row: auto; }
  .solapadas { height: 600px; }
}
@media (max-width: 640px) {
  .vent-cajas { grid-template-columns: 1fr; }
  .solapadas { height: 456px; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .movil-sol { transition: none; }
  .solapadas:hover .sol-fondo, .solapadas:hover .sol-frente { transform: rotate(0); }
}

/* --- El patrón de dos columnas, aplicado también a Funciones y Ventajas --- */
#funciones .fun-cajas,
.adv .adv-cajas {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
#funciones .fun-cajas .feature { padding: 18px 16px; gap: 13px; }
#funciones .fun-cajas .feature .ico { width: auto; height: auto; border-radius: 0; }
#funciones .fun-cajas .feature .ico svg { width: 22px; height: 22px; }
#funciones .fun-cajas .feature h3 { font-size: 15.5px; }
#funciones .fun-cajas .feature p { font-size: 13.6px; line-height: 1.48; }

.adv .adv-cajas .adv-item { padding: 17px 15px; gap: 12px; }
.adv .adv-cajas .adv-item .check { width: 38px; height: 38px; border-radius: 12px; }
.adv .adv-cajas .adv-item .check svg { width: 19px; height: 19px; }
.adv .adv-cajas .adv-item h4 { font-size: 15px; }
.adv .adv-cajas .adv-item p { font-size: 13.4px; line-height: 1.48; }

/* En Ventajas la imagen va a la IZQUIERDA: alternar el lado evita que tres
   secciones seguidas se lean como la misma plantilla repetida. */
.vent-invertida .vent-intro  { grid-column: 2; }
.vent-invertida .adv-cajas   { grid-column: 2; }
.vent-invertida .vent-visual { grid-column: 1; grid-row: 1 / span 2; }

@media (max-width: 1080px) {
  #funciones .fun-cajas, .adv .adv-cajas,
  .vent-invertida .vent-intro, .vent-invertida .adv-cajas, .vent-invertida .vent-visual {
    grid-column: 1; grid-row: auto;
  }
}
@media (max-width: 640px) {
  #funciones .fun-cajas, .adv .adv-cajas { grid-template-columns: 1fr; }
}


/* ============================================================
   COLLAGE DE PLATOS (sección «Ventajas»)
   Aquí había un mosaico de 3×3, pero de las nueve fotos solo dos
   eran distintas: la misma imagen aparecía cuatro y cinco veces, y
   la repetición cantaba. Ahora cada foto se usa UNA vez, en grande,
   con el QR delante, que es de lo que va el producto.
   ============================================================ */
.collage {
  position: relative;
  max-width: min(520px, 100%);
  margin: 0 auto;
  padding-bottom: 34px;
}
.collage-foto {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15,23,42,.16);
  transition: transform .3s var(--suave, ease);
}
.collage-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 16px;
}
.collage-atras   { width: 74%; aspect-ratio: 16 / 10; transform: rotate(-3deg); }
.collage-delante { width: 76%; aspect-ratio: 16 / 10; margin: -14% 0 0 auto; transform: rotate(2.5deg); }
.collage:hover .collage-atras   { transform: rotate(-4.5deg) translateY(-6px); }
.collage:hover .collage-delante { transform: rotate(3.5deg) translateY(-6px); }

/* El QR, delante de las fotos: es la pieza que une el plato con la carta. */
.collage-qr {
  position: absolute; left: 2%; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border: 1px solid #E4ECF7;
  border-radius: 18px;
  padding: 11px 16px 11px 12px;
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}
.collage-qr .qr {
  width: 42px; height: 42px; flex: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.collage-qr .qr span { background: var(--ink); border-radius: 2px; }
/* Tres celdas claras: sin ellas parece un cuadrado negro, no un QR. */
.collage-qr .qr span:nth-child(2),
.collage-qr .qr span:nth-child(4),
.collage-qr .qr span:nth-child(9) { background: #DCE4F0; }
.collage-qr b { display: block; color: var(--ink); font-size: 14px; font-family: var(--fuente-titulo); }
.collage-qr small { color: var(--muted); font-size: 12.5px; }

@media (max-width: 640px) {
  .collage { max-width: min(330px, 100%); }
  .collage-qr { left: 0; padding: 9px 13px 9px 10px; }
  .collage-qr .qr { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .collage-foto { transition: none; }
  .collage:hover .collage-atras   { transform: rotate(-3deg); }
  .collage:hover .collage-delante { transform: rotate(2.5deg); }
}


/* ============================================================
   ETIQUETA UE DEL VINO
   Página informativa: la función todavía no existe, así que aquí
   se informa y se recoge interés, no se vende. La botella está
   dibujada con CSS — no hace falta cargar ninguna imagen para
   ilustrar una idea tan simple.
   ============================================================ */
.vino { background: linear-gradient(180deg, #FBF7F3 0%, #F6EFE7 100%); }
.vino-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
.vino-texto h2 { margin-bottom: 14px; }
.vino .txt-hl { color: #8C2D3B; }
.vino-texto .lead { color: var(--text); margin-bottom: 20px; max-width: 620px; }

.vino-lista { list-style: none; padding: 0; margin: 0 0 24px; }
.vino-lista li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: var(--text); line-height: 1.6;
}
.vino-lista li::before {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: #8C2D3B;
}
.vino-lista strong { color: var(--ink); }

.vino-aviso {
  background: #fff; border: 1px solid #EADFD4; border-radius: var(--radius);
  padding: 20px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.vino-aviso p { color: var(--text); flex: 1; min-width: 260px; line-height: 1.55; }
.vino-aviso strong { color: var(--ink); }
.vino-nota { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* --- Botella dibujada --- */
.vino-visual { display: flex; justify-content: center; }
.botella { width: 168px; }
.botella-cuello {
  width: 42px; height: 78px; margin: 0 auto;
  background: linear-gradient(100deg, #1E4034 0%, #2F6650 45%, #16302A 100%);
  border-radius: 9px 9px 3px 3px;
}
.botella-cuerpo {
  height: 260px; padding-top: 34px;
  background: linear-gradient(100deg, #1E4034 0%, #2F6650 45%, #16302A 100%);
  border-radius: 22px 22px 14px 14px;
  box-shadow: 0 24px 46px rgba(30,64,52,.34);
}
.botella-etiqueta {
  background: #FBF6EE; margin: 0 12px; padding: 14px 12px 12px;
  border-radius: 6px; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(140,45,59,.18);
}
.et-linea { display: block; height: 7px; border-radius: 4px; background: #D8CCBC; margin: 0 auto 7px; width: 78%; }
.et-titulo { height: 10px; width: 62%; background: #8C2D3B; }
.et-linea.corta { width: 46%; }
.et-qr {
  width: 52px; height: 52px; margin: 12px auto 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.et-qr span { background: #22303F; border-radius: 2px; }
/* Tres celdas claras: sin ellas parece un cuadrado negro, no un QR. */
.et-qr span:nth-child(2), .et-qr span:nth-child(4), .et-qr span:nth-child(9) { background: #FBF6EE; }
.et-pie { display: block; font-size: 8.5px; color: #7A6A58; letter-spacing: .2px; }

@media (max-width: 900px) {
  .vino-layout { grid-template-columns: 1fr; gap: 32px; }
  .vino-visual { order: -1; }
  .botella { width: 140px; }
  .botella-cuerpo { height: 220px; }
}


/* --- Página de la etiqueta del vino --- */
.hero-vino {
  background: linear-gradient(135deg, #2A1520 0%, #5C1F2E 55%, #8C2D3B 100%);
  color: #fff; padding-block: 84px 72px; text-align: center;
}
.hero-vino .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.hero-vino h1 { color: #fff; }
.hero-vino h1 .hl { color: #F7AD00; }
.hero-vino p.lead { color: rgba(255,255,255,.9); max-width: 680px; margin-inline: auto; }

.clave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.clave {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px 26px;
  transition: transform .26s ease, box-shadow .26s ease;
}
.clave:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(15,23,42,.13); }
.clave-num {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(145deg, #8C2D3B, #B8455A); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 19px;
}
.clave h3 { font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.clave p { color: var(--text); line-height: 1.6; }
.clave p strong { color: var(--ink); font-weight: 600; }

.faq-lista { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--ink); font-size: 16.5px;
  list-style: none; position: relative; padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: -2px;
  font-size: 22px; color: #8C2D3B; font-weight: 700;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin-top: 12px; color: var(--text); line-height: 1.62; }

.cta-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 900px) {
  .clave-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   CAPA PRO — sistema visual único
   ============================================================
   La página había crecido a capas y cada sección se defendía sola:
   tres radios de esquina, cuatro sombras y unos títulos que en el
   móvil se quedaban del tamaño del cuerpo de texto. Esta capa pone
   un único sistema encima: tokens de sombra y radio, tipografía
   fluida, un degradado de marca para lo resaltado y un mismo gesto
   de tarjeta (se levanta y la sombra se tiñe del color de su
   sección). El lenguaje viene del panel del SaaS: fondos lavados
   con degradados muy suaves, cajas amplias y poco borde.
   ============================================================ */

:root {
  --grad-marca:  linear-gradient(140deg, #4B93E0 0%, #235CA7 100%);
  --grad-accion: linear-gradient(140deg, #FFC93D 0%, #F7AD00 100%);
  --grad-exito:  linear-gradient(140deg, #2ECB7C 0%, #00AE53 100%);
  /* El degradado del titular no puede aclararse tanto que el final se lea peor
     que el principio: se queda en azules con contraste suficiente sobre blanco. */
  --grad-texto:  linear-gradient(96deg, #1D4E8E 0%, #235CA7 48%, #3E86D6 100%);

  --radio-card: 28px;
  --sombra-1: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
  --sombra-2: 0 12px 32px rgba(15,23,42,.10);
  --sombra-3: 0 26px 60px rgba(15,23,42,.15);
  --glow-marca:  0 16px 36px rgba(35,92,167,.28);
  --glow-accion: 0 12px 28px rgba(247,173,0,.34);
  --glow-exito:  0 12px 26px rgba(0,174,83,.26);

  --suave: cubic-bezier(.2,.7,.3,1);
  /* Un solo valor manda el aire entre secciones, y crece con la pantalla. */
  --seccion-y: clamp(58px, 6.4vw, 104px);
}

/* --- Ritmo y tipografía fluida ------------------------------
   Con tamaños fijos + media queries el titular saltaba de 52 px a
   34 px de golpe. Con clamp() escala con la pantalla y no hay
   ningún ancho intermedio en el que se vea mal. */
section { padding: var(--seccion-y) 0; }
.container { padding-inline: clamp(18px, 4vw, 32px); }

.hero h1        { font-size: clamp(36px, 5.2vw, 62px); letter-spacing: -.028em; line-height: 1.05; }
.hero p.lead    { font-size: clamp(17px, 1.5vw, 21px); }
.sec-head h2    { font-size: clamp(30px, 3.9vw, 52px); letter-spacing: -.028em; }
.sec-head p     { font-size: clamp(16px, 1.3vw, 19px); }
.sec-head       { margin-bottom: clamp(34px, 4vw, 56px); }
.cta-band h2    { font-size: clamp(28px, 3.2vw, 40px); }

/* Lo resaltado, en color plano y con un trazo debajo. Llevaba un degradado
   recortado sobre el texto: es el recurso que usan todas las plantillas
   generadas y se nota a la primera. El subrayado hace el mismo trabajo —parar
   el ojo en la palabra— y parece hecho a mano, que es de lo que se trata. */
.sec-head .txt-hl,
.vent-intro .txt-hl,
.hero:not(.hero-foto):not(.hero-vino) h1 .hl {
  color: var(--brand);
  background: linear-gradient(var(--accion), var(--accion)) 0 88% / 100% .14em no-repeat;
  padding-bottom: .06em;
}
/* Sobre la foto del hero el degradado tiene que ser claro, y la sombra
   deja de ser text-shadow (se vería A TRAVÉS del texto recortado). */
.hero-foto h1 .hl {
  background: linear-gradient(96deg, #8ACDFF 0%, #4FA8FF 48%, #A6DBFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(79,168,255,.45));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .sec-head .txt-hl, .vent-intro .txt-hl, .hero h1 .hl {
    color: var(--brand); -webkit-text-fill-color: var(--brand);
  }
  .hero-foto h1 .hl { color: #4FA8FF; -webkit-text-fill-color: #4FA8FF; }
}

/* --- Foco visible -------------------------------------------
   Sin esto, quien navega con el teclado no sabe dónde está. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(62,134,214,.55);
  outline-offset: 3px;
}

/* --- Botones ------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 30px;
  transition: transform .18s var(--suave), box-shadow .26s ease, background .22s ease, color .18s ease, border-color .18s ease;
}
.btn-lg { padding: 19px 40px; font-size: 17.5px; }

.btn-primary,
.hero-foto .btn-primary { background: var(--grad-accion); color: var(--sobre-accion); box-shadow: var(--glow-accion); }
.btn-primary:hover,
.hero-foto .btn-primary:hover {
  background: var(--grad-accion);
  color: var(--sobre-accion);
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(247,173,0,.46);
}
.hero-foto .btn-primary { box-shadow: 0 14px 32px rgba(247,173,0,.42), 0 2px 6px rgba(0,0,0,.28); }
/* Brillo que cruza el botón al pasar el ratón. Es puro adorno, así que
   va en ::after y no estorba al texto. */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 47%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .65s var(--suave);
}
.btn-primary:hover::after { transform: translateX(130%); }

.btn-ghost {
  background: rgba(255,255,255,.9);
  border-color: #DCE3EE;
  box-shadow: var(--sombra-1);
}
.btn-ghost:hover { border-color: var(--brand-2); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sombra-2); }

/* --- Cabecera ----------------------------------------------- */
.site-header { background: rgba(255,255,255,.74); backdrop-filter: saturate(180%) blur(16px); }
.site-header.scrolled { background: rgba(255,255,255,.94); box-shadow: 0 6px 26px rgba(15,23,42,.07); }
.nav-links { gap: 2px; }
.nav-links > li > a {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav-links > li > a:hover { background: var(--brand-soft); color: var(--brand); }
/* Solo cuando el submenú es flotante: en el móvil se despliega en vertical
   dentro del menú y no debe llevar ni caja ni sombra. */
@media (min-width: 721px) {
  .subnav { border-radius: 16px; box-shadow: var(--sombra-2); padding: 7px; }
  .subnav li a { padding: 10px 13px; border-radius: 11px; }
}

/* El menú del móvil colgaba de una altura fija de 74 px mientras la
   barra medía 66: quedaba una franja transparente por la que se veía
   la página al pasar por debajo. */
.mobile-open .nav-links { top: 100%; border-radius: 0 0 18px 18px; }

/* --- Hero ---------------------------------------------------- */
.hero-foto { padding-block: clamp(58px, 7vw, 100px) clamp(50px, 6vw, 88px); }
/* Menos oscurecido global y más velo dirigido: la foto se ve (que para
   eso es de comida) y el texto sigue leyéndose sobre su lado. */
.hero-bg { filter: brightness(.55) saturate(1.08); }
.hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,15,28,.88) 0%, rgba(7,15,28,.66) 40%, rgba(7,15,28,.22) 72%, rgba(7,15,28,.46) 100%),
    radial-gradient(80% 60% at 50% 118%, rgba(7,15,28,.6), transparent 72%);
}
.hero-foto .eyebrow {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Las cifras, en pastillas de cristal: sueltas sobre la foto se perdían. */
.hero-foto .hero-metrics { border-top: 0; gap: 10px; flex-wrap: wrap; }
.hero-foto .hero-metrics .m {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 18px;
}
.hero-foto .hero-metrics .m strong { font-size: clamp(20px, 1.9vw, 26px); }
.hero-foto .hero-metrics .m span { font-size: 12.5px; }

/* Reflejo sobre la pantalla del móvil: le da cuerpo de cristal. */
.movil-marco::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(142deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 46%);
}

/* --- Etiqueta de sección ------------------------------------ */
.sec-head .tag, .vino-texto .tag, .tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(224,64,51,.18);
  font-size: 12.5px; letter-spacing: .1em; padding: 6px 14px;
}
.sec-head .tag::before, .vino-texto .tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* --- Fondos de sección --------------------------------------
   Degradados muy diluidos en lugar de planos: cada bloque tiene su
   propia luz y la página deja de parecer una lista de cajas. */
.benefits, .adv, .showcase, .novedades, .vino { position: relative; overflow: hidden; }
.benefits::before, .adv::before, .showcase::before, .novedades::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.benefits > .container, .adv > .container, .showcase > .container, .novedades > .container {
  position: relative; z-index: 1;
}

/* Fondos PLANOS en las secciones claras. Llevaban manchas radiales de color
   —naranja arriba, azul a un lado, verde al otro— y ese resplandor flotando es
   otra firma de las plantillas generadas: se repetía en cuatro secciones
   seguidas y le daba a toda la página el mismo aire irreal. Un color liso y una
   línea arriba separan los bloques sin llamar la atención sobre sí mismos. */
.benefits { background: #F4F8FD; border-top: 1px solid #E3EBF5; }
.adv { background: #F5FAF7; border-top: 1px solid #E2EFE8; }
/* El carrusel va sobre OSCURO, y es a propósito: son capturas de pantallas
   claras: sobre un fondo claro se diluían, y sobre tinta saltan a la vista.
   De paso corta la página, que era clara de arriba abajo. */
.showcase { background: linear-gradient(165deg, #091624 0%, #12304F 55%, #1B4674 100%); }
.showcase::before {
  background:
    radial-gradient(820px 420px at 50% -14%, rgba(79,168,255,.30), transparent 66%),
    radial-gradient(620px 340px at 4% 98%, rgba(247,173,0,.22), transparent 64%),
    radial-gradient(560px 320px at 96% 90%, rgba(124,58,237,.20), transparent 64%);
}
.showcase .sec-head h2 { color: #fff; }
.showcase .sec-head p, .showcase .sec-sub { color: rgba(255,255,255,.76); }
.showcase .sec-head .tag {
  background: rgba(255,255,255,.12); color: #FFD98A;
  border-color: rgba(255,255,255,.22);
}
.showcase .shot-pie strong { color: #fff; }
.showcase .shot-pie > span:not(.shot-ir) { color: rgba(255,255,255,.66); }
.showcase .shot-ir { color: #8ACDFF; }
.showcase .shot:hover .shot-ir, .showcase .shot:focus-visible .shot-ir { color: var(--accion); }
/* La captura, con marco claro, directamente sobre el fondo. Llevaba una sombra
   de 80 px de difuminado y con siete tarjetas seguidas las sombras se juntaban
   en una sola mancha que el `overflow: hidden` del contenedor recortaba en
   recto: parecía una caja azul más oscura detrás del carrusel. Queda el filo
   de 1 px, que separa la captura del fondo sin manchar nada. */
.showcase .shot-marco {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.showcase .shots-btn {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}
.showcase .shots-btn:hover { background: var(--accion); color: var(--sobre-accion); border-color: transparent; }
.novedades { background: #FFFBF3; border-top: 1px solid #F2E6D2; }

/* --- Tarjetas: un solo gesto -------------------------------- */
.card, .card-pro, .tst, .nov, .clave, .faq-item,
#funciones .feature, .adv .adv-item { border-radius: var(--radio-card); }

.card-pro, .tst, .nov, .clave, #funciones .feature, .adv .adv-item {
  box-shadow: var(--sombra-1);
}
.card-pro:hover        { box-shadow: var(--glow-marca), var(--sombra-2); }
#funciones .feature:hover { box-shadow: var(--glow-accion), var(--sombra-2); }
.adv .adv-item:hover   { box-shadow: var(--glow-exito), var(--sombra-2); }
.nov:hover, .clave:hover { box-shadow: var(--sombra-3); }
.tst:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.tst { transition: transform .26s var(--suave), box-shadow .26s ease; }


/* Pasos de «Cómo funciona»: eran texto suelto sobre el fondo; ahora son
   tarjetas del mismo idioma que el resto. */
.benefits .benefit {
  background: rgba(255,255,255,.72);
  border: 1px solid #E3EBF7;
  border-radius: var(--radio-card);
  padding: 32px 24px 28px;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
}
.benefits .benefit:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--glow-marca), var(--sombra-2);
}
.benefits .benefit .big {
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--grad-marca); color: #fff;
  box-shadow: var(--glow-marca);
  transition: transform .26s var(--suave);
}
.benefits .benefit:hover .big { transform: translateY(-3px) rotate(-4deg) scale(1.05); }
.benefits .benefit .big svg { width: 32px; height: 32px; }
.benefit h3 { font-size: 19.5px; }

/* Al invertir la sección de Ventajas se giraban las columnas pero no su
   anchura: el texto se quedaba en la estrecha y las cajas salían con los
   títulos partidos en dos líneas.
   Va con min-width a propósito: sin el ancho mínimo esta regla, al estar más
   abajo en la hoja, le ganaba a la de una sola columna del móvil y dejaba las
   tarjetas en media pantalla. */
@media (min-width: 1081px) {
  .vent-invertida { grid-template-columns: .8fr 1.2fr; }
}

/* --- Sectores ------------------------------------------------
   Eran seis bloques de degradado a todo color —azul, morado, cian, verde,
   rojo, turquesa— y salía un arcoíris que no se parecía a nada del resto de
   la página. El color de cada sector se queda, pero reducido al icono: la
   tarjeta vuelve al mismo idioma que las demás. */
.use {
  display: block;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 26px 24px 24px;
  min-height: 0;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
}
/* Halo del color del sector, muy diluido, en la esquina de la que nace el icono. */
.use::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 0% 0%, var(--sector-halo), transparent 72%);
}
.use > * { position: relative; z-index: 1; }
.use:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 40px var(--sector-sombra), var(--sombra-2);
}
.use .u-ico {
  position: static; opacity: 1;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px;
  margin-bottom: 16px;
  background: var(--sector-grad); color: #fff;
  box-shadow: 0 10px 22px var(--sector-sombra);
  transition: transform .26s var(--suave);
}
.use .u-ico svg { width: 26px; height: 26px; }
.use:hover .u-ico { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
.use h3 { font-size: 18.5px; color: var(--ink); margin-bottom: 7px; }
.use p { font-size: 14.5px; color: var(--muted); opacity: 1; }
/* La flecha dice que la tarjeta lleva a algún sitio. */
.use::before {
  content: "→";
  position: absolute; right: 22px; bottom: 20px; z-index: 1;
  font-size: 18px; color: var(--sector-color);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .26s ease, transform .26s var(--suave);
}
.use:hover::before, .use:focus-visible::before { opacity: 1; transform: none; }

/* Los seis acentos salen de la paleta de las cartas —ámbar, teja, azul, verde,
   granate del vino y marrón tierra—, no de una rueda de color cualquiera. Aquí
   vivían un violeta, un cian y un turquesa que no pintaban nada en esta marca.
   Sobre el ámbar el icono va en tinta oscura, como los botones: el blanco
   sobre amarillo no llega al contraste mínimo. */
.use .u-ico { color: var(--sector-tinta, #fff); }
.use.u1 { --sector-color: #A97400; --sector-grad: var(--grad-accion);                      --sector-halo: rgba(247,173,0,.14); --sector-sombra: rgba(247,173,0,.30); --sector-tinta: var(--sobre-accion); background: #fff; }
.use.u2 { --sector-color: #B33127; --sector-grad: linear-gradient(140deg,#E8552D,#C22B22); --sector-halo: rgba(224,64,51,.11);  --sector-sombra: rgba(224,64,51,.26); background: #fff; }
.use.u3 { --sector-color: #235CA7; --sector-grad: var(--grad-marca);                       --sector-halo: rgba(35,92,167,.10);  --sector-sombra: rgba(35,92,167,.26); background: #fff; }
.use.u4 { --sector-color: #00964A; --sector-grad: var(--grad-exito);                       --sector-halo: rgba(0,174,83,.11);   --sector-sombra: rgba(0,174,83,.24);  background: #fff; }
.use.u5 { --sector-color: #8C2D3B; --sector-grad: linear-gradient(140deg,#B8455A,#8C2D3B); --sector-halo: rgba(140,45,59,.11);  --sector-sombra: rgba(140,45,59,.26); background: #fff; }
.use.u6 { --sector-color: #5A463F; --sector-grad: linear-gradient(140deg,#6F5850,#3F302C); --sector-halo: rgba(63,48,44,.10);   --sector-sombra: rgba(63,48,44,.26);  background: #fff; }

/* --- Testimonios --------------------------------------------- */
.tst { position: relative; padding-top: 30px; }
.tst::before {
  content: "\201C";
  position: absolute; top: 6px; right: 22px;
  font-family: var(--fuente-titulo); font-size: 62px; line-height: 1;
  color: var(--brand); opacity: .12;
}
.tst .who .av { box-shadow: var(--glow-marca); }

/* --- Carrusel de cartas -------------------------------------- */
/* Aquí se probó un desvanecido en los bordes con mask-image y hubo que
   quitarlo: en un carril con scroll el degradado no se mide sobre lo que se
   ve, sino sobre el ancho de las siete tarjetas, y velaba la primera y la
   última enteras. El corte limpio del contenedor y las flechas ya cuentan
   que el carril sigue. */
.shots { padding-block: 30px 16px; }
.shots-btn {
  width: 48px; height: 48px;
  box-shadow: var(--sombra-1);
  transition: background .18s ease, color .18s ease, transform .18s var(--suave), box-shadow .2s ease;
}
.shots-btn:hover {
  background: var(--accion); color: var(--sobre-accion); border-color: transparent;
  transform: translateY(-2px); box-shadow: var(--glow-accion);
}

/* --- Precios -------------------------------------------------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 30px 26px 26px;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); }
.plan h3 { font-size: 20px; }
.plan > p { margin: 6px 0 16px; color: var(--muted); font-size: 14.5px; }
.plan-precio {
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 40px;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.1;
}
.plan-precio span { font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.plan-lista { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; color: var(--text); }
.plan-lista li { position: relative; padding-left: 27px; }
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad-exito);
  /* La palomita, dibujada con el propio fondo: sin SVG ni fuente de iconos. */
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' stroke='none' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' stroke='none' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan-lista li::after {
  content: ""; position: absolute; left: 4.5px; top: 8.5px;
  width: 8px; height: 4.5px;
  border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; justify-content: center; }

/* El plan recomendado: marco de color, más elevación y un poco más alto
   que los otros dos. Que se vea cuál queremos que se elija. */
.plan-destacado {
  position: relative;
  border: 0;
  padding: 34px 28px 30px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-marca) border-box;
  border: 2px solid transparent;
  box-shadow: var(--glow-marca), var(--sombra-2);
}
.plan-destacado:hover { box-shadow: 0 22px 48px rgba(35,92,167,.34), var(--sombra-3); }
.plan-etiqueta {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad-accion); color: var(--sobre-accion);
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--glow-accion);
}

/* Los precios se enseñan sin IVA porque quien contrata es un profesional, pero eso HAY QUE DECIRLO:
   un «5,95 €» a secas es un precio incompleto. Va debajo de los tres planes, en gris y pequeño pero
   legible —no en un asterisco ni en el pie—, y con el importe con IVA hecho, que es lo que el
   hostelero quiere saber de verdad. */
.planes-nota {
  max-width: 900px; margin: 22px auto 0;
  font-size: 13.5px; color: var(--muted); text-align: center;
}

@media (max-width: 900px) { .planes { grid-template-columns: 1fr; max-width: 460px; } }

/* --- FAQ ------------------------------------------------------ */
.faq-item { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.faq-item:hover { border-color: #D3DFEE; box-shadow: var(--sombra-1); }
.faq-item.open { border-color: transparent; box-shadow: var(--sombra-2); }
.faq-q { padding: 19px 22px; }
.faq-q .pm {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: var(--brand-soft);
  font-size: 18px; line-height: 1;
}
.faq-item.open .faq-q .pm { background: var(--brand); color: #fff; }

/* --- Franja de CTA -------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0B1B2E 0%, #16385C 55%, #1E4A79 100%);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 320px at 12% 0%, rgba(247,173,0,.22), transparent 62%),
    radial-gradient(700px 360px at 90% 100%, rgba(79,168,255,.24), transparent 64%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band .btn-white {
  background: var(--grad-accion); color: var(--sobre-accion);
  box-shadow: var(--glow-accion);
}
.cta-band .btn-white:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(247,173,0,.5); }

/* --- Pie ------------------------------------------------------ */
/* Las cuatro columnas eran fijas también en el móvil: la de Contacto se
   salía de la pantalla y el navegador la recortaba. */
.foot-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 36px; }
.site-footer { background: #0B0E1A; }
.foot-social a { border-radius: 12px; transition: background .2s ease, transform .18s var(--suave), color .2s ease; }
.foot-social a:hover { transform: translateY(-2px); }
.foot-col a:hover { color: #fff; }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .foot-about { grid-column: 1 / -1; }
}
/* Dos columnas aguantan hasta los 380 px: en una sola, el pie se convierte
   en una tira larguísima de enlaces sueltos. */
@media (max-width: 380px) {
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .foot-bottom { flex-direction: column; }
}

/* --- Banner de cookies ---------------------------------------- */
.cookie-banner { border-top: 0; box-shadow: 0 -10px 40px rgba(15,23,42,.14); }
.cookie-inner { max-width: var(--maxw); }

/* --- Aparición escalonada ------------------------------------- */
/* Las tarjetas de una misma rejilla entran una detrás de otra, no todas
   a la vez: cuesta lo mismo y se lee mucho mejor. */
.reveal { transition: opacity .6s var(--suave), transform .6s var(--suave); }
.grid-3 > .reveal:nth-child(2), .vent-cajas > .reveal:nth-child(2),
.fun-cajas > .reveal:nth-child(2), .adv-cajas > .reveal:nth-child(2),
.uses-grid > .reveal:nth-child(2), .tst-grid > .reveal:nth-child(2) { transition-delay: .08s; }
.grid-3 > .reveal:nth-child(3), .vent-cajas > .reveal:nth-child(3),
.fun-cajas > .reveal:nth-child(3), .adv-cajas > .reveal:nth-child(3),
.uses-grid > .reveal:nth-child(3), .tst-grid > .reveal:nth-child(3) { transition-delay: .16s; }
.vent-cajas > .reveal:nth-child(4), .fun-cajas > .reveal:nth-child(4),
.adv-cajas > .reveal:nth-child(4), .uses-grid > .reveal:nth-child(4) { transition-delay: .24s; }
.fun-cajas > .reveal:nth-child(5), .adv-cajas > .reveal:nth-child(5),
.uses-grid > .reveal:nth-child(5) { transition-delay: .32s; }
.fun-cajas > .reveal:nth-child(6), .adv-cajas > .reveal:nth-child(6),
.uses-grid > .reveal:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transition-delay: 0s !important; }
  .btn, .use, .tst, .benefits .benefit, .shots-btn { transition: none; }
  .btn-primary::after { display: none; }
  .use:hover, .tst:hover, .benefits .benefit:hover, .shots-btn:hover { transform: none; }
}

/* Los iconos de trazo venían con stroke-width 2 sobre una caja de 24: dentro de
   la pastilla de color, en blanco, se empastaban y parecían manchas. */
.benefits .benefit .big svg,
#funciones .feature .ico svg { stroke-width: 1.7; }

/* La captura de la carta se cortaba a mitad de un plato, como si la imagen
   estuviera mal recortada. Con el degradado se lee como lo que es: una pantalla
   que sigue hacia abajo. */
.hero-mockup .movil-marco::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 78%, #fff 100%);
  pointer-events: none;
}

/* ============================================================
   PÁGINAS DE SECTOR
   Las seis páginas de sector usaban `.hero-sector`, `.feat-grid` y
   `.feat`, y ninguna de las tres tenía una sola regla en esta hoja:
   se veían como un hero sin fondo y una lista de titulares sueltos
   uno debajo de otro, a todo el ancho. Aquí entran en el mismo
   sistema que el resto de la web.
   ============================================================ */
.hero-sector {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 6.5vw, 92px) clamp(52px, 6vw, 88px);
  background: linear-gradient(180deg, #F7FAFF 0%, #EDF4FC 100%);
  text-align: center;
}
.hero-sector::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 340px at 12% -10%, rgba(247,173,0,.16), transparent 62%),
    radial-gradient(760px 380px at 92% 4%, rgba(62,134,214,.20), transparent 64%);
}
.hero-sector .container { position: relative; z-index: 1; }
.hero-sector h1 { max-width: 21ch; margin-inline: auto; }
.hero-sector p.lead { margin-inline: auto; color: var(--text); }
.hero-sector .hero-actions { justify-content: center; margin-bottom: 0; }

/* Rejilla de lo que se lleva el sector: mismas tarjetas que en la home. */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat {
  position: relative;
  background: linear-gradient(180deg, #F6FAFE 0%, #EFF5FC 100%);
  border: 1px solid #DEE9F6;
  border-radius: var(--radio-card);
  padding: 26px 24px 24px;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
}
.feat:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--glow-marca), var(--sombra-2);
}
/* Una marca de color en lugar de un icono: no hay un icono honesto para
   «sabes qué se mira», y seis dibujos genéricos ensucian más que ayudan. */
.feat::before {
  content: ""; display: block;
  width: 38px; height: 5px; border-radius: 999px;
  background: var(--grad-accion);
  margin-bottom: 16px;
}
.feat h3 { font-size: 17.5px; color: var(--ink); margin-bottom: 7px; }
.feat p { font-size: 14.5px; color: #46506B; line-height: 1.55; }

@media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feat-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .feat { transition: none; }
  .feat:hover { transform: none; }
}

/* La cabecera del vino va sobre granate: el degradado azul de los demás
   titulares se leía mal ahí. El suyo es ámbar, que es el color que ya usaba. */
.hero-vino h1 .hl {
  background: linear-gradient(96deg, #FFD35C 0%, #F7AD00 55%, #FFC53D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-vino h1 .hl { color: #F7AD00; -webkit-text-fill-color: #F7AD00; }
}
.hero-vino { padding-block: clamp(58px, 6.6vw, 92px) clamp(52px, 6vw, 84px); }

/* ============================================================
   MENÚ DEL MÓVIL
   El desplegable de sectores se ponía en vertical a partir de 900 px,
   pero la barra no pasa a menú de hamburguesa hasta los 720: entre esos
   dos anchos los siete sectores se desplegaban dentro de la barra
   horizontal. Ahora los dos cambios ocurren en el mismo punto.
   ============================================================ */
@media (max-width: 900px) and (min-width: 721px) {
  .subnav {
    position: absolute; top: 100%; left: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    box-shadow: var(--sombra-2); border: 1px solid var(--line);
    padding: 7px; min-width: 232px;
  }
  .has-sub:hover .subnav, .has-sub:focus-within .subnav {
    opacity: 1; visibility: visible; transform: none;
  }
}

@media (max-width: 720px) {
  .mobile-open .nav-links {
    top: 100%;
    padding: 10px 18px 16px;
    gap: 0;
    align-items: stretch;
    text-align: left;
    /* Con los siete sectores desplegados el menú no cabe de una vez:
       que haga scroll él, no la página de detrás. */
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-open .nav-links > li { width: 100%; }
  .mobile-open .nav-links > li > a {
    display: block; width: 100%;
    padding: 13px 12px;
    border-radius: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .mobile-open .nav-links > li:last-child > a { border-bottom: 0; }
  /* Los sectores, sangrados y algo más pequeños: se ve que cuelgan de «Sectores». */
  .mobile-open .subnav {
    padding: 2px 0 6px 14px;
    margin-left: 12px;
    border-left: 2px solid var(--brand-soft);
  }
  .mobile-open .subnav li a {
    padding: 9px 10px;
    font-size: 14.5px;
    color: var(--muted);
    border-bottom: 0;
  }
  .mobile-open .subnav li a:hover { color: var(--brand); }
}

/* En pantallas estrechas el hero se centra, así que el velo también deja de
   ser lateral: si no, el texto queda sobre la mitad clara de la foto. */
@media (max-width: 900px) {
  .hero-foto::before {
    background:
      linear-gradient(180deg, rgba(7,15,28,.84) 0%, rgba(7,15,28,.62) 42%, rgba(7,15,28,.46) 68%, rgba(7,15,28,.66) 100%);
  }
}
@media (max-width: 620px) {
  /* Tres pastillas en fila: apiladas, las cifras ocupaban media pantalla de alto. */
  .hero-foto .hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-foto .hero-metrics .m { padding: 11px 8px; text-align: center; }
  .hero-foto .hero-metrics .m span { font-size: 11.5px; line-height: 1.3; display: block; }
}

/* ============================================================
   CADA MOCKUP LLEVA A SU CARTA
   Los doce móviles de la home enseñaban cartas reales pero no iban a
   ninguna parte. Ahora cada uno abre su demo en una pestaña nueva —en la
   misma se perdería al visitante—, y el mockup entero es el enlace, no
   solo el pie.
   La pista de «Ver la carta» del carrusel se ve SIEMPRE, no al pasar el
   ratón: en un móvil no hay ratón, y una tarjeta que no se anuncia como
   enlace no se pulsa.
   ============================================================ */
.shot, .mockup-enlace { color: inherit; text-decoration: none; }
.shot { display: block; }

/* La chapa sobre el móvil. En el hero se ve siempre, que es la carta que
   invita a mirar; en los cuatro móviles pequeños solo al apuntarlos, porque
   cuatro chapas a la vez es ruido. */
.mockup-enlace { display: block; }
/* El móvil del hero es el producto: se le da tamaño de verdad, y un halo
   detrás para que no quede pegado a la foto. */
.hero-mockup { position: relative; }
.hero-mockup::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -12% -18%;
  background:
    radial-gradient(closest-side, rgba(247,173,0,.30), transparent 70%),
    radial-gradient(closest-side at 70% 70%, rgba(79,168,255,.28), transparent 72%);
  filter: blur(6px);
}
.hero-mockup .mockup-enlace { position: relative; z-index: 1; width: 100%; max-width: 372px; }
.hero-mockup .movil { max-width: 372px; }
/* Aquí NO va un `.movil { position: relative }`: `.movil` ya lo es desde su
   propio bloque, y repetirlo aquí abajo pisaba al `.movil-sol { position:
   absolute }` de los móviles solapados, que se apilaban y se salían de la
   sección. La chapa se ancla igual, porque el contenedor ya está posicionado. */
.mockup-ir {
  position: absolute; left: 50%; bottom: 16px; z-index: 4;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--grad-accion); color: var(--sobre-accion);
  font-family: var(--fuente-titulo); font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--glow-accion);
  transition: transform .22s var(--suave), opacity .22s ease;
}
.mockup-ir::after { content: "↗"; }
.mockup-enlace:hover .mockup-ir { transform: translateX(-50%) translateY(-3px); }

.movil-sol .mockup-ir {
  bottom: 10px; padding: 6px 11px; font-size: 11px;
  opacity: 0; transform: translateX(-50%) translateY(6px);
}
.mockup-enlace:hover .movil-sol .mockup-ir,
.mockup-enlace:focus-visible .movil-sol .mockup-ir {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* El foco tiene que verse sobre la foto del hero y sobre el fondo claro del
   carrusel, así que va con doble anillo. */
.shot:focus-visible, .mockup-enlace:focus-visible {
  outline: 3px solid var(--accion);
  outline-offset: 6px;
  border-radius: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .shot-ir, .mockup-ir { transition: none; }
  .mockup-enlace:hover .mockup-ir { transform: translateX(-50%); }
}

/* ============================================================
   ESTILO «TU CARTA DIGITAL»
   El tono de esta marca: foto a sangre con velo de color fuerte, el borde de
   las secciones cortado en diagonal, antetítulo en mayúsculas del color de
   acción, cifras enormes y botones en mayúsculas con letra espaciada.
   El color va aparte: esta marca es azul, y el ámbar ya hace de naranja de
   acción. Si hay que unificarlo, se cambia en los tokens y baja solo.
   ============================================================ */

/* --- El corte en diagonal ------------------------------------
   Es lo que más se reconoce de la referencia: la sección no termina en una
   línea recta, sino en una cuña. Se pinta con el color de la sección que
   viene detrás, así el encuentro no deja costura. */
.hero-foto, .cta-band { position: relative; }
.hero-foto::after, .cta-band::after {
  content: ""; position: absolute; left: -2px; right: -2px; z-index: 3;
  height: clamp(44px, 5.5vw, 104px);
  pointer-events: none;
}
.hero-foto::after {
  bottom: -1px;
  background: #fff;                                   /* «Por qué Carta digital» es blanca */
  clip-path: polygon(0 100%, 100% 0, 100% 101%);
}
.cta-band::after {
  top: -1px;
  background: #EEF7F2;                                /* el final de la sección de FAQ */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* --- Antetítulo del hero: mayúsculas, ámbar, espaciado ------- */
/* También en los heroes de sector: allí seguía siendo una pastilla azul. */
.hero .eyebrow {
  background: none; border: 0; box-shadow: none;
  padding: 0; margin-bottom: 14px;
  color: var(--accion);
  font-family: var(--fuente-titulo);
  font-size: clamp(13px, 1.1vw, 15px); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}

/* --- Las cifras, del tamaño de un titular -------------------- */
.hero-foto .hero-metrics { gap: clamp(24px, 3.5vw, 56px); margin-top: 6px; }
.hero-foto .hero-metrics .m {
  background: none; border: 0; backdrop-filter: none;
  padding: 0; border-radius: 0;
}
.hero-foto .hero-metrics .m strong {
  color: var(--accion);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05; letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.hero-foto .hero-metrics .m span {
  font-size: clamp(13px, 1.05vw, 15.5px);
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* --- Botones en mayúsculas ----------------------------------- */
.btn-primary, .cta-band .btn-white {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14.5px;
}
.btn-primary.btn-lg, .cta-band .btn-white.btn-lg { font-size: 16px; }

/* --- La franja final, con foto a sangre ----------------------
   En la referencia las bandas de llamada son una foto con un velo de color
   encima, no un degradado plano. Se reutiliza la del hero encuadrada por
   abajo, que es otra parte de la imagen y no canta que sea la misma. */
.cta-band {
  background:
    linear-gradient(120deg, rgba(9,22,36,.94) 0%, rgba(18,48,79,.86) 45%, rgba(27,70,116,.80) 100%),
    url('../img/hero-fondo.jpg?v=c68bdb02') center 70% / cover no-repeat;
  padding-block: clamp(84px, 9vw, 148px);
}
.cta-band::before {
  background:
    radial-gradient(700px 360px at 12% 8%, rgba(247,173,0,.30), transparent 62%),
    radial-gradient(760px 400px at 90% 96%, rgba(79,168,255,.28), transparent 64%);
}
.cta-band h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -.028em; }
.cta-band p { font-size: clamp(16.5px, 1.35vw, 19.5px); color: rgba(255,255,255,.86); }

@media (max-width: 640px) {
  /* En el móvil la cuña se come demasiado alto y deja el texto pegado. */
  .hero-foto::after, .cta-band::after { height: 34px; }
}

/* --- El antetítulo, como en la referencia --------------------
   Allí no es una pastilla: es texto en mayúsculas, muy espaciado y del color
   de acento de la sección. Da más empaque y pesa menos que el recuadro. */
.sec-head .tag, .vino-texto .tag, .tag {
  background: none; border: 0; box-shadow: none;
  padding: 0; margin-bottom: 4px;
  color: var(--brand);
  font-family: var(--fuente-titulo);
  font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}
.sec-head .tag::before, .vino-texto .tag::before { display: none; }
/* Sobre oscuro y sobre foto, el acento pasa a ámbar; en la sección del vino,
   al granate que ya usa esa página. */
.showcase .sec-head .tag { color: var(--accion); }
.vino .tag, .vino-texto .tag { color: #8C2D3B; }
.sec-head { display: grid; gap: 10px; justify-items: center; }
.sec-head h2, .sec-head p { margin: 0; }
.vino-texto .tag { display: inline-block; margin-bottom: 12px; }

/* --- FAQ: la pregunta abierta, en degradado ------------------
   En la referencia el desplegable abierto se tiñe entero de color con el
   texto en blanco. Se ve de un vistazo cuál está abierto. */
.faq-item.open .faq-q {
  background: linear-gradient(100deg, var(--brand) 0%, #3E86D6 100%);
  color: #fff;
}
.faq-item.open .faq-q .pm { background: rgba(255,255,255,.22); color: #fff; }
.faq-item.open { border-color: transparent; box-shadow: var(--sombra-2); }
.faq-a p { padding-top: 16px; }

/* ============================================================
   PÁGINAS DE SECTOR, VERSIÓN LARGA
   Sus páginas de sector no son un hero y una rejilla: son un hero con
   móvil, cuatro tarjetas, tres bloques alternos de imagen y texto, una
   franja de prueba a media página y una rejilla final de funciones. Estas
   son las piezas que faltaban.
   ============================================================ */

/* --- Hero de sector: ahora con móvil ------------------------- */
.hero-sector { text-align: left; }
.hero-sector .container { position: relative; z-index: 1; }
.sector-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero-sector .eyebrow { color: var(--brand); }
.hero-sector h1 { max-width: none; margin-inline: 0; }
.hero-sector p.lead { margin-inline: 0; max-width: 46ch; }
.hero-sector .hero-actions { justify-content: flex-start; }
.sector-visual { display: flex; justify-content: center; }
.sector-visual .movil { max-width: 300px; }

/* --- Bloques alternos de imagen y texto ---------------------- */
.bloque { padding: var(--seccion-y) 0; }
.bloque .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* En los pares la imagen se va a la izquierda: alternar evita que tres
   bloques seguidos se lean como la misma plantilla repetida. */
.bloque:nth-of-type(even) .bloque-visual { order: -1; }
.bloque-texto .tag { display: block; margin-bottom: 10px; }
.bloque-texto h2 { font-size: clamp(26px, 2.9vw, 38px); letter-spacing: -.025em; margin-bottom: 14px; }
.bloque-texto p { color: var(--text); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.62; }
.bloque-texto p strong { color: var(--ink); font-weight: 600; }
.bloque-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.bloque-lista li { position: relative; padding-left: 34px; color: var(--text); line-height: 1.55; }
.bloque-lista li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-exito);
}
.bloque-lista li::after {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 9px; height: 5px;
  border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.bloque-visual { display: flex; justify-content: center; }
.bloque-visual .movil { max-width: 280px; }
.bloque-fondo { background: linear-gradient(180deg, #F8FBFF 0%, #EFF5FC 100%); }

/* --- Franja de prueba, a media página ------------------------ */
.franja-prueba {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 7vw, 108px);
  background:
    linear-gradient(115deg, rgba(9,22,36,.93) 0%, rgba(18,48,79,.85) 50%, rgba(27,70,116,.78) 100%),
    url('../img/hero-fondo.jpg?v=c68bdb02') center 35% / cover no-repeat;
  text-align: center;
}
.franja-prueba .container { position: relative; z-index: 1; }
.franja-prueba .tag { color: var(--accion); }
.franja-prueba h2 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 12px; }
.franja-prueba p { color: rgba(255,255,255,.86); max-width: 620px; margin: 0 auto 26px; font-size: clamp(16px,1.3vw,18.5px); }

@media (max-width: 900px) {
  .sector-grid, .bloque .container { grid-template-columns: 1fr; }
  .hero-sector { text-align: center; }
  .hero-sector p.lead { margin-inline: auto; }
  .hero-sector .hero-actions { justify-content: center; }
  .bloque:nth-of-type(even) .bloque-visual { order: 0; }
  .bloque-texto .tag { text-align: center; }
  .bloque-texto { text-align: center; }
  .bloque-lista li { text-align: left; }
  .bloque-lista { max-width: 420px; margin-inline: auto; }
}

/* La franja de esta página va en granate, no en la foto del restaurante: es
   otra marca de producto y otro tono. */
.franja-vino {
  background: linear-gradient(135deg, #2A1520 0%, #5C1F2E 55%, #8C2D3B 100%);
}
.franja-vino::before {
  background:
    radial-gradient(680px 360px at 10% 6%, rgba(247,173,0,.26), transparent 62%),
    radial-gradient(700px 380px at 92% 94%, rgba(184,69,90,.40), transparent 64%);
}
.hero-vino { text-align: left; }
.hero-vino .eyebrow { color: var(--accion); }
.hero-vino p.lead { margin-inline: 0; }
.hero-vino .botella { width: 190px; }
.vino-claves .clave-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .vino-claves .clave-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .hero-vino { text-align: center; }
  .hero-vino p.lead { margin-inline: auto; }
  .hero-vino .sector-visual { margin-top: 28px; }
}
@media (max-width: 560px) { .vino-claves .clave-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EL MÓVIL DEL HERO, CON LA CARTA VIVA DENTRO
   La carta pública permite ser incrustada desde este dominio —lo fija ella
   misma con `frame-ancestors 'self' https://cartadigital.app https://*...`,
   que se puso para la vista previa del editor—, así que se puede enseñar de
   verdad en vez de una foto.
   No se carga sola: primero la captura y una chapa que invita a tocarla. Es
   una aplicación entera; cargarla con la portada retrasaría lo primero que
   ve el visitante, y en el móvil un iframe de media pantalla se queda con el
   dedo de quien solo quería seguir bajando.
   ============================================================ */
.movil-vivo .movil-marco { position: relative; }

/* La invitación: un velo por abajo para que la chapa se lea sobre cualquier
   carta, sin tapar el diseño que precisamente queremos enseñar. */
.movil-activar {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 26px;
  border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(9,22,36,0) 42%, rgba(9,22,36,.30) 66%, rgba(9,22,36,.78) 100%);
  transition: background .24s ease;
}
.movil-activar-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--grad-accion); color: var(--sobre-accion);
  font-family: var(--fuente-titulo); font-size: 13.5px; font-weight: 700;
  box-shadow: var(--glow-accion);
  transition: transform .22s var(--suave);
}
.movil-activar-pill::before { content: "👆"; font-size: 15px; }
.movil-activar:hover .movil-activar-pill { transform: translateY(-3px); }
.movil-activar:focus-visible { outline: 3px solid var(--accion); outline-offset: -6px; }

/* Ya activa: el iframe tapa la captura y la chapa desaparece. */
.movil-iframe {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  border: 0; background: #fff;
}
.movil-vivo.viva .movil-activar { display: none; }
/* Mientras carga, un latido para que se vea que está pasando algo. */
.movil-vivo.cargando .movil-marco::after {
  content: ""; position: absolute; inset: 0; z-index: 7;
  background: linear-gradient(100deg, #F4F8FD 30%, #FFFFFF 50%, #F4F8FD 70%);
  animation: latido 1.1s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: .85; } 50% { opacity: .5; } }

/* La salida. Sin esto, en el móvil el iframe se queda con el scroll y no hay
   manera de seguir bajando por la página. */
/* Abajo y centrado, no en una esquina. Arriba a la derecha caía justo encima
   de la flecha de «volver» de la propia carta y se pulsaba una por otra. La
   franja de abajo es la única que ninguna carta usa: el menú y el filtro van
   arriba a la izquierda, y las flechas del carrusel de eventos, a los lados. */
.movil-cerrar {
  position: absolute; z-index: 8;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border-radius: 999px;
  border: 0; cursor: pointer;
  background: rgba(9,22,36,.82); color: #fff;
  font-family: var(--fuente-titulo); font-size: 13px; font-weight: 600; line-height: 1;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.movil-cerrar::before { content: "✕"; font-size: 13px; }
.movil-cerrar:hover { background: rgba(9,22,36,.95); }

.movil-abrir {
  display: block; margin-top: 16px; text-align: center;
  color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 600;
}
.movil-abrir::after { content: " ↗"; }
.movil-abrir:hover { color: var(--accion); }

@media (prefers-reduced-motion: reduce) {
  .movil-activar-pill { transition: none; }
  .movil-vivo.cargando .movil-marco::after { animation: none; }
}

/* --- La tarjeta del carrusel, activable ----------------------
   Deja de ser un enlace entero: dentro de un <a> no puede ir un <button>, y
   ahora la tarjeta tiene dos acciones distintas —probarla aquí o abrirla
   entera—, que además se entienden mejor separadas. */
.shot { cursor: default; }
.shot .movil-activar { padding-bottom: 18px; }
.shot .movil-activar-pill { padding: 9px 15px; font-size: 12.5px; }
.shot .movil-cerrar { height: 30px; padding: 0 13px; font-size: 12px; bottom: 10px; }
.shot-ir { cursor: pointer; }
.shot:hover .shot-marco { transform: translateY(-8px) scale(1.02); }
/* Con la carta viva dentro, la tarjeta se queda quieta: si sigue moviéndose al
   pasar el ratón, se hace imposible tocar nada dentro. */
.shot.viva:hover .shot-marco { transform: none; }

/* --- Volver arriba -------------------------------------------
   Solo el círculo con la flecha: la página es larga y en el móvil volver a la
   cabecera a base de dedo se hace eterno. Aparece a partir de 700 px de
   scroll, que es cuando el header ya no se ve.

   Mientras está el aviso de cookies —fijo y a todo el ancho de abajo— el botón
   se sube por encima en vez de esconderse: quien no haya aceptado las cookies
   en ese navegador tiene el aviso puesto TODA la visita, y escondiéndolo no
   llegaba a verlo nunca. La altura del aviso la mide el JS y la deja en
   `--alto-aviso`. El botón va DESPUÉS del banner en el HTML porque el selector
   necesita que sea hermano posterior. */
.volver-arriba {
  position: fixed; z-index: 80;
  right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--grad-accion, var(--accion)); color: var(--sobre-accion, #23180A);
  box-shadow: 0 10px 26px rgba(15,23,42,.28);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s var(--suave, ease), visibility .22s, box-shadow .2s ease;
}
.volver-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.volver-arriba:hover { box-shadow: var(--glow-accion, 0 14px 30px rgba(15,23,42,.34)); }
.volver-arriba svg { width: 22px; height: 22px; }
.cookie-banner.show ~ .volver-arriba { bottom: calc(var(--alto-aviso, 0px) + clamp(16px, 3vw, 28px) + 12px); }
@media (prefers-reduced-motion: reduce) { .volver-arriba { transition: none; } }

/* Cabecera de sección alineada a la izquierda. Nueve secciones seguidas con
   etiqueta centrada + titular centrado + subtítulo centrado se leen como una
   plantilla antes que como contenido: el ojo pilla el patrón y desconecta.
   Alternando tres se rompe la cadencia sin tocar una palabra del texto. */
/* `justify-items: start` es la clave, no el `text-align`: `.sec-head` es una
   rejilla con `justify-items: center` (mas arriba), asi que centraba cada hijo
   por su cuenta y la cabecera salia ESCALONADA — la etiqueta en un sitio, el
   titular en otro y el texto en un tercero. */
.sec-head-izq { text-align: left; margin-left: 0; max-width: 660px; justify-items: start; }
.sec-head-izq .tag { display: inline-block; }
@media (max-width: 720px) { .sec-head-izq { text-align: center; margin-inline: auto; justify-items: center; } }

/* --- Capturas del panel --------------------------------------
   En «Todo incluido» ya no hay móviles: esa sección va de con QUÉ se trabaja,
   y la carta ya se ve en el hero y en el carrusel. Cuatro capturas del panel
   de verdad, cada una con marco de ventana —la barra gris con los tres
   puntitos—, que es lo que hace que se lea «esto es el programa» y no «otra
   foto de relleno». */
.capturas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.captura {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.captura-marco {
  display: block; position: relative;
  border: 1px solid #D7E0EC; border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* La barra de ventana, con sus tres botones, dibujada en CSS. */
.captura-barra {
  display: block; height: 20px; background: #EEF2F7; border-bottom: 1px solid #E1E8F1;
}
.captura-barra::before {
  content: ""; position: absolute; top: 7px; left: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: #E06C60;
  box-shadow: 10px 0 0 #E8B341, 20px 0 0 #74C08A;
}
/* Se enseña la ESQUINA de arriba a la izquierda, que es donde está el título y
   las primeras filas: recortada por el centro no se entendería ninguna. */
.captura img { display: block; width: 100%; height: 168px; object-fit: cover; object-position: left top; }
.captura-pie { display: block; margin-top: 9px; font-size: 13.5px; color: var(--muted); }
.captura:hover .captura-marco, .captura:focus-visible .captura-marco {
  transform: translateY(-3px); border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
}
.captura:hover .captura-pie { color: var(--ink); }
.capturas-pista { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* El visor. Ocupa la pantalla entera y la imagen va completa, sin recortar:
   es lo que se viene a ver. */
.visor {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(6px, 2vw, 20px); padding: clamp(12px, 3vw, 34px);
  background: rgba(7,15,28,.92);
}
.visor[hidden] { display: none; }
.visor-marco { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.visor-marco img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.5);
  background: #fff;
}
.visor-pie { color: rgba(255,255,255,.82); font-size: 14px; text-align: center; max-width: 60ch; }
.visor-cerrar {
  position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px);
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
}
.visor-flecha {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1;
}
.visor-cerrar:hover, .visor-flecha:hover { background: rgba(255,255,255,.28); }
.visor-puntos {
  position: absolute; left: 0; right: 0; bottom: clamp(10px, 2.4vw, 22px);
  display: flex; justify-content: center; gap: 8px;
}
.visor-puntos button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.34);
}
.visor-puntos button[aria-current="true"] { background: var(--accion); }
body.visor-abierto { overflow: hidden; }

@media (max-width: 720px) {
  .capturas { gap: 11px; }
  .captura img { height: 128px; }
  /* En el móvil las flechas se van abajo, con los puntos: a los lados no caben
     sin comerse la imagen. */
  .visor { grid-template-columns: 1fr; justify-items: center; }
  .visor-flecha { position: absolute; bottom: clamp(30px, 8vw, 52px); }
  .visor-antes { left: 16px; }
  .visor-luego { right: 16px; }
  .visor-marco img { max-height: 62vh; }
}

/* --- Fondos de foto en los bloques que no llevan imagen ------
   Los bloques con mockup o captura ya tienen peso visual propio. Los que son
   solo texto —«Cómo funciona» y los testimonios— se quedaban planos entre
   medias. Se les pone fondo, con los dos tratamientos que ya usa la página:
   la foto velada de la cabecera, y la banda oscura de la franja final.

   La foto es la misma del hero a propósito: es la única de tamaño suficiente
   que tenemos (1230×820; las de `platos/` son de 507 px y se pixelarían). Va
   encuadrada por abajo, al revés que en la cabecera, para que no se reconozca
   como la misma toma. Si algún día hay fotos propias del local, aquí es donde
   entran. */
#como {
  position: relative; overflow: hidden;
  background: #0B1B2E;
  border-top: 0;
}
#como::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/hero-fondo.jpg?v=c68bdb02') center bottom / cover no-repeat;
  /* Sin el velo, el texto blanco desaparece sobre las partes claras de la foto. */
  filter: brightness(.34) saturate(1.05);
}
#como > .container { position: relative; z-index: 1; }
#como .sec-head h2, #como .benefit h3 { color: #fff; }
#como .sec-head p, #como .benefit p { color: rgba(255,255,255,.78); }
#como .sec-head .tag { color: #FFD98A; }
#como .sec-head .txt-hl { color: #8ACDFF; background: none; }
/* El icono del paso, en un círculo claro translúcido: sobre la foto, el relleno
   pálido de antes se perdía. */
#como .benefit .big {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none;
}

/* Los testimonios, con la banda oscura de la franja final: sin foto, que dos
   fotos veladas seguidas en la misma página cansan. */
#testimonios, .testimonios {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0B1B2E 0%, #16385C 55%, #1E4A79 100%);
}
/* Foto de plato de fondo, no el degradado a secas: con el degradado se veia
   igual que la franja final y parecian el mismo bloque repetido. La foto es de
   507 px —pequena para ocupar el ancho— asi que va DESENFOCADA y oscura: a ese
   tratamiento no se le nota la resolucion, y de paso no compite con el texto.
   El `scale` es para que el desenfoque no deje los bordes transparentes. */
#testimonios::before, .testimonios::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/platos/plato-2.jpg?v=d5ae24b7') center/cover no-repeat;
  filter: brightness(.5) saturate(1.15) blur(2px);
  transform: scale(1.05);
}
/* Y encima el azul de la casa, para que la foto no se lleve la seccion a otro
   sitio: sigue siendo la banda oscura de la marca, ahora con textura. */
#testimonios::after, .testimonios::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* Mas oscuro ARRIBA, que es donde cae el titular en blanco: sobre el
       amarillo del arroz se quedaba justo de contraste. De la mitad para abajo
       se abre y se ve la foto, que es de lo que se trataba. */
    linear-gradient(180deg, rgba(9,22,36,.62) 0%, rgba(9,22,36,.28) 42%, rgba(9,22,36,.22) 100%),
    linear-gradient(135deg, rgba(11,27,46,.34) 0%, rgba(22,56,92,.26) 55%, rgba(30,74,121,.24) 100%),
    radial-gradient(620px 320px at 12% 0%, rgba(247,173,0,.14), transparent 62%);
}
#testimonios > .container, .testimonios > .container { position: relative; z-index: 1; }
#testimonios .sec-head h2, .testimonios .sec-head h2 { color: #fff; }
#testimonios .sec-head p, .testimonios .sec-head p { color: rgba(255,255,255,.78); }
#testimonios .sec-head .tag, .testimonios .sec-head .tag { color: #FFD98A; }
/* Las tarjetas de los pasos llevaban un panel blanco translúcido heredado de
   las tarjetas claras: sobre la foto se veían turbias, como un cristal sucio.
   Panel oscuro y filo claro, que es lo que se lee bien encima de una imagen. */
#como .benefit {
  background: rgba(9,22,36,.58);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: none;
  backdrop-filter: blur(3px);
}
/* Y un velo extra arriba, que es donde cae el titular: la foto tiene platos
   claros justo ahí y el blanco se comía con ellos. */
#como::after {
  filter: brightness(.3) saturate(1.05);
}

/* Las preguntas, en dos columnas. En una sola quedaban diez cajas anchas y
   bajas una detrás de otra, y con la cabecera a la izquierda encima el bloque
   se veía descolgado. En rejilla, cada pregunta es una celda: al desplegarse
   crece solo la suya y no empuja a la de al lado (`align-items: start`).
   Por debajo de 860 px vuelve a una columna, que en el móvil dos no caben. */
#faq .faq-wrap {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  align-items: start;
}
#faq .faq-item { margin-bottom: 0; }
@media (max-width: 860px) {
  #faq .faq-wrap { grid-template-columns: 1fr; }
}

/* --- Fondo en los dos bloques planos de los sectores ---------
   Las seis páginas de sector tenían dos bloques seguidos sin nada: la franja de
   «Pruébala» y «Lo que te llevas». Aquí NO va foto a propósito: las únicas que
   hay en el repo son de comida, y detrás de «Centros de estética» o
   «Fisioterapia» contradicen la página. Si algún día hay una foto por sector,
   este es el sitio.

   La marca `.funciones-sector` existe porque el `#funciones` de la home lleva
   las capturas del panel y va en claro: sin ella, este fondo se lo comería. */
.franja-prueba {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0B1B2E 0%, #16385C 55%, #1E4A79 100%);
}
.franja-prueba::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 320px at 10% 0%, rgba(247,173,0,.20), transparent 62%),
    radial-gradient(700px 360px at 92% 100%, rgba(79,168,255,.22), transparent 64%);
}
.franja-prueba > .container { position: relative; z-index: 1; }
.franja-prueba h2 { color: #fff; }
.franja-prueba p { color: rgba(255,255,255,.80); }
.franja-prueba .tag { color: #FFD98A; }

/* El de abajo, en claro con un tinte y filos: dos bandas oscuras seguidas
   pesarían demasiado, y este bloque es de leer. */
.funciones-sector {
  background: linear-gradient(180deg, #F7FBFF 0%, #EFF5FC 100%);
  border-top: 1px solid #E3EBF5;
  border-bottom: 1px solid #E3EBF5;
}