/* Virfon · Sistema de diseño v2 (propuestas diseno-a/b/c) — tokens + componentes base.
   Marca: Rojo Virfon #ED174B dominante con blanco; secundarios Magenta #D40E88 (solo detalle/hover) y Gris 80% #333.
   Tipografía: Avenir Next (en Apple ya viene instalada) → Nunito Sans (libre, OFL, Google Fonts) → Arial. */
:root{
  /* Color */
  --vf-red:#ED174B;          /* marca: bloques, precios, acentos, texto grande */
  --vf-red-action:#C8103F;   /* botón con texto chico (blanco sobre esto = 5,6:1 AA) */
  --vf-red-deep:#A50D34;     /* hover / pressed */
  --vf-magenta:#D40E88;      /* solo detalles y hover, nunca bloques */
  --vf-ink:#36363C;          /* gris carbón: texto (11,7:1 sobre --vf-bg) */
  --vf-ink-2:#66666E;        /* texto secundario (5,6:1 sobre --vf-bg; 5,2:1 sobre --vf-surface) */
  --vf-line:#EFEAE6;         /* divisorias suaves, cálidas */
  --vf-line-strong:#DCD5D0;  /* reemplaza las reglas de 2px en tinta */
  --vf-input-border:#CFC8C3; /* bordes de campos */
  --vf-surface:#F8F4F1;      /* fondo alterno cálido */
  --vf-bg:#FFFCFA;           /* fondo de página: blanco cálido */
  --vf-footer:#3A3A40;       /* pie: carbón, no negro */
  --vf-white:#FFFFFF;
  --vf-red-tint:#FFF0F3;     /* tinte de rojo para estados seleccionados */
  /* Tipografía */
  --vf-font:"Avenir Next","Avenir","Nunito Sans",Arial,sans-serif;
  --vf-fw-display:600;       /* h1/h2 y titulares grandes */
  --vf-fw-head:700;          /* h3, nombres de plan, cifras */
  --vf-fw-label:700;         /* etiquetas, botones, resumen FAQ */
  --vf-ls-display:-.02em;
  --vf-fs-xs:14px; --vf-fs-sm:16px; --vf-fs-md:18px; --vf-fs-lg:20px;
  --vf-fs-h3:clamp(20px,2.2vw,24px);
  --vf-fs-h2:clamp(30px,4.6vw,46px);
  --vf-fs-h1:clamp(40px,7.4vw,80px);
  --vf-lh-tight:1.04; --vf-lh-head:1.12; --vf-lh-body:1.55;
  /* Espaciado (base 4) */
  --vf-s1:4px; --vf-s2:8px; --vf-s3:12px; --vf-s4:16px; --vf-s5:24px; --vf-s6:32px; --vf-s7:48px; --vf-s8:64px; --vf-s9:96px; --vf-s10:128px;
  --vf-gutter:clamp(20px,5vw,40px);
  --vf-max:1200px;
  /* Radios: la burbuja del logo manda — esquinas generosas */
  --vf-r-sm:10px; --vf-r-md:16px; --vf-r-lg:28px; --vf-r-pill:999px;
  /* Sombra (una sola) */
  --vf-shadow:0 14px 40px rgba(54,54,60,.08);
  --vf-sec-y:clamp(72px,10vw,120px); /* aire vertical de secciones */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--vf-bg);color:var(--vf-ink);font-family:var(--vf-font);font-size:var(--vf-fs-md);line-height:var(--vf-lh-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2{font-weight:var(--vf-fw-display)}
h1,h2,h3{font-weight:var(--vf-fw-head);line-height:var(--vf-lh-head);letter-spacing:-.02em;text-wrap:balance}
a{color:var(--vf-red-action)}
a:hover{color:var(--vf-magenta)}
:focus-visible{outline:3px solid var(--vf-magenta);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:50}
.wrap{max-width:var(--vf-max);margin:0 auto;padding:0 var(--vf-gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Botones: un primario por pantalla. Alto mínimo 52px (pulgar). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--vf-r-pill);font:var(--vf-fw-label) 17px/1.1 var(--vf-font);letter-spacing:.005em;text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--vf-red-action);color:#fff}
.btn-primary:hover{background:var(--vf-red-deep);color:#fff}
.btn-white{background:#fff;color:var(--vf-red-action)}
.btn-white:hover{background:#fff;color:var(--vf-magenta)}
.btn-ghost{background:transparent;color:var(--vf-ink);border-color:currentColor}
.btn-ghost:hover{color:var(--vf-magenta)}
.btn-block{display:flex;width:100%}
.btn-lg{min-height:60px;font-size:19px;padding:0 36px}
.link-arrow{font-weight:700;text-decoration:none;color:inherit;border-bottom:2px solid currentColor;padding-bottom:2px}
.link-arrow:hover{color:var(--vf-magenta)}

/* Navegación: logo · EN · CTA · menú (EN siempre visible en la barra) */
.site-nav{display:flex;align-items:center;gap:8px;min-height:72px}
.site-nav .logo{margin-right:auto;display:inline-flex;flex-shrink:0}
.site-nav .logo img{height:30px;width:auto}
.site-nav .nav-lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-weight:var(--vf-fw-head);font-size:15px;letter-spacing:.06em;text-decoration:none;color:inherit;border-radius:var(--vf-r-sm)}
.site-nav .nav-cta{min-height:44px;padding:0 18px;font-size:15px;white-space:nowrap}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px;font-size:16px;font-weight:700;order:-1;margin-right:16px}
.site-nav ul a{color:inherit;text-decoration:none}
.site-nav ul a:hover{color:var(--vf-magenta)}
.site-nav .logo{order:-2}
.nav-toggle{display:none}
@media (max-width:900px){
  .site-nav{position:relative}
  .js .site-nav ul{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px;background:#fff;color:var(--vf-ink);border-radius:var(--vf-r-md);box-shadow:var(--vf-shadow);font-size:18px}
  .js .site-nav.open ul{display:flex}
  .js .site-nav ul li+li{border-top:1px solid var(--vf-line)}
  .js .site-nav ul a{display:flex;align-items:center;min-height:52px;padding:0 14px}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--vf-r-sm);background:transparent;color:inherit;cursor:pointer}
  .nav-toggle .i-close,.site-nav.open .nav-toggle .i-open{display:none}
  .site-nav.open .nav-toggle .i-close{display:block}
  .no-js-hide{display:none}
}
@media (max-width:900px){ html:not(.js) .site-nav{flex-wrap:wrap} html:not(.js) .site-nav ul{order:5;width:100%;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px} }
@media (max-width:359px){ .site-nav .nav-cta{display:none} .site-nav .logo img{height:26px} }

/* Formularios — etiqueta arriba, un campo por fila, 17px (iOS no hace zoom) */
.field{display:block;margin-bottom:var(--vf-s4)}
.field>span{display:block;font-weight:700;font-size:16px;margin-bottom:6px}
.field>span small{font-weight:600;color:var(--vf-ink-2);font-size:14px}
.field input{display:block;width:100%;min-height:56px;padding:0 16px;font:600 17px var(--vf-font);color:var(--vf-ink);background:#fff;border:1.5px solid var(--vf-input-border);border-radius:var(--vf-r-md);-webkit-appearance:none;appearance:none}
.field input::placeholder{color:#9A9A9A;font-weight:500}
.field input:focus{outline:none;border-color:var(--vf-red);box-shadow:0 0 0 4px rgba(237,23,75,.15)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:block;width:100%;padding:0;float:none;white-space:normal} /* evita el bug de leyendas palabra-por-línea */
.hint{font-size:var(--vf-fs-xs);color:var(--vf-ink-2);line-height:1.5}

/* Tarjetas */
.card{background:#fff;border:1px solid var(--vf-line);border-radius:var(--vf-r-lg);padding:var(--vf-s6)}
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding-left:30px;margin:10px 0}
.check li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--vf-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* FAQ */
.faq details{border-top:1px solid var(--vf-line)}
.faq details:last-child{border-bottom:1px solid var(--vf-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 0;font-weight:var(--vf-fw-head);font-size:var(--vf-fs-lg);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:28px;font-weight:600;color:var(--vf-red);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--vf-ink-2);max-width:760px}

/* Pie */
.site-footer{background:var(--vf-footer);color:#fff;padding:var(--vf-s8) 0 var(--vf-s7)}
.site-footer .foot-top{display:flex;flex-wrap:wrap;gap:var(--vf-s6);justify-content:space-between;align-items:flex-start;margin-bottom:var(--vf-s6)}
.site-footer .foot-top img{height:30px;width:auto}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:16px;font-weight:600}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{font-size:14px;color:#D6D6D6;border-top:1px solid #505057;padding-top:var(--vf-s5);line-height:1.6}

/* EN: "Free trial - 10 days" cabe en la barra móvil */
@media (max-width:420px){html[lang="en"] .site-nav{gap:4px}html[lang="en"] .site-nav .logo img{height:24px}html[lang="en"] .site-nav .nav-lang{min-width:36px}html[lang="en"] .site-nav .nav-cta{font-size:13.5px;padding:0 12px}}

/* Consentimiento de marketing (consent-2026-10-30-v2): Sí/No obligatorio, nada preseleccionado. Mobile-first. */
.vf-consent{min-width:0;margin:var(--vf-s4) 0;padding:var(--vf-s4);background:var(--vf-surface);border-radius:var(--vf-r-md);color:var(--vf-ink);font-family:var(--vf-font);font-size:14px;line-height:1.5;word-break:normal;overflow-wrap:break-word;hyphens:manual;text-align:left}
.vf-consent p.vf-consent-text{margin:0;font-size:14px;line-height:1.5;color:var(--vf-ink);font-weight:400}
.vf-consent-text strong{display:block;margin-bottom:4px;font-size:16px;font-weight:700;color:var(--vf-ink)}
.vf-consent-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:var(--vf-s2);margin-top:var(--vf-s3)}
.vf-consent label.vf-consent-opt{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;min-height:48px;margin:0;padding:10px 12px;background:#fff;border:1.5px solid var(--vf-input-border);border-radius:var(--vf-r-sm);font-size:15px!important;font-weight:600!important;color:var(--vf-ink);cursor:pointer;white-space:nowrap}
.vf-consent label.vf-consent-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--vf-red-action);cursor:pointer}
.vf-consent label.vf-consent-opt:has(input:checked){border-color:var(--vf-red);background:var(--vf-red-tint)}
.vf-consent label.vf-consent-opt:has(input:focus-visible){box-shadow:0 0 0 4px rgba(237,23,75,.15)}
.vf-consent p.vf-consent-err{margin:var(--vf-s2) 0 0;font-size:14px;font-weight:600;color:var(--vf-red-action)}
.vf-consent-err[hidden]{display:none}
.vf-consent p.vf-consent-links{margin:var(--vf-s3) 0 0;font-size:14px;color:var(--vf-ink-2)}
.vf-consent-links a{color:var(--vf-ink);text-decoration:underline;text-underline-offset:2px}
.vf-consent-links a:hover{color:var(--vf-red-action)}
@media (max-width:360px){.vf-consent{padding:var(--vf-s3)}}
/* Sí más atractivo que No (feedback Javier pt84u); nada preseleccionado, mismo tamaño de toque */
.vf-consent label.vf-consent-yes{background:#FDEEF2;border:1.5px solid var(--vf-red);color:var(--vf-ink);font-weight:600!important}
.vf-consent label.vf-consent-yes span::after{content:"\2665";content:"\2665"/"";margin-left:6px;color:var(--vf-red);font-size:.95em}
.vf-consent label.vf-consent-yes:has(input:checked){background:#FAD7E0;border-color:var(--vf-red)}
.vf-consent label.vf-consent-no{background:#fff;border:1px solid var(--vf-line);color:var(--vf-ink-2);font-weight:400!important}
.vf-consent label.vf-consent-no input{accent-color:var(--vf-ink-2)}
.vf-consent label.vf-consent-no:has(input:checked){background:#fff;border:1.5px solid var(--vf-ink-2);color:var(--vf-ink)}