/* Guía "La fórmula de una web premium que convierte".
   Hoja compartida por /guia-web-premium/ (ES) y /premium-website-guide/ (EN).
   Externa y same-origin, así que la CSP (style-src 'self') la permite. */
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SG Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:105%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:109.75%;ascent-override:88.27%;descent-override:21.98%;line-gap-override:0%}

/* Colores tomados de la infografía original:
   azul de acento #0568FE (números, íconos, botones), marino #071A3D (texto
   del título), marino de la franja final #0B2550, tinte de íconos #E3F0FF.
   --blue-ink es el mismo azul un paso más oscuro, para texto pequeño sobre
   fondos claros; --blue-head es el tono mínimo que pasa 4.5:1 sobre --bg
   (el #0568FE queda en 4.46:1). --blue-on-navy es el azul del titular sobre
   el hero marino (5.47:1 sobre --navy-band). */
:root{
  --navy:#071A3D; --navy-band:#0B2550; --band-muted:#C9D8F2; --band-line:#29467A;
  --blue:#0568FE; --blue-head:#0564F6; --blue-on-navy:#5A9CFF; --blue-ink:#0556D6; --blue-soft:#9CC6FF;
  --bg:#F5F8FC; --card:#FFFFFF; --line:#DCE5F2; --tint:#E3F0FF;
  --text:#1B2A44; --muted:#4A5872;
  --tag-blue-bg:#DCEEFF; --tag-blue-fg:#0B3F8F;
  --tag-green-bg:#D7F5EA; --tag-green-fg:#0B5B43;
  --tag-amber-bg:#FCEFD0; --tag-amber-fg:#6E4300;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --gut:16px; --wrap:1200px; --dock:0px;
  --display:'Space Grotesk','SG Fallback',system-ui,sans-serif;
  --ui:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (min-width:600px){:root{--gut:28px}}
@media (min-width:1024px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(5,104,254,.15);scroll-padding-bottom:var(--dock)}
a,button{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;padding-bottom:var(--dock)}
svg{display:block;flex:none}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-ink);text-underline-offset:3px}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.skip{position:absolute;left:var(--gut);top:-999px;z-index:30;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Barra superior: logo, idioma, imprimir ---------- */
.topbar{padding-block:14px;background:var(--card)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{width:150px;height:auto}
@media (min-width:600px){.brand img{width:178px}}
.tools{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.lang a{display:grid;place-items:center;min-width:44px;min-height:38px;padding:0 10px;border-radius:999px;font:600 .8125rem/1 var(--ui);letter-spacing:.02em;color:var(--muted);text-decoration:none;transition:background-color .2s,color .2s}
.lang a:hover{color:var(--navy)}
.lang a[aria-current="page"]{background:var(--navy);color:#fff}
.print-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--navy);font:600 .875rem/1 var(--ui);cursor:pointer;transition:border-color .2s,background-color .2s}
.print-btn:hover{border-color:var(--blue);background:var(--tint)}
.print-btn[hidden]{display:none}
@media (max-width:719px){.print-btn{padding:0 12px}.print-btn .long{display:none}}
@media (min-width:720px){.print-btn .short{display:none}}

/* ---------- Franja naranja "Lee esta guía" / "Read this guide" sobre el hero.
   Marino sobre #DE7633: 4.8:1. ---------- */
.banner{background:#DE7633;color:var(--navy-band);text-align:center;font:700 clamp(1.5rem,5.6vw,3.25rem)/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase;padding:14px var(--gut)}

/* ---------- Hero: título a la izquierda, computadora y teléfono a la derecha.
   Mismo marino que la franja del cierre, para que el texto inicial resalte. ---------- */
.hero{padding-block:28px 40px;background:var(--navy-band);color:#fff}
.hero h1{color:#fff}
.hero :focus-visible{outline-color:var(--blue-soft)}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero h1{font-weight:700;letter-spacing:-.035em;line-height:.95;text-transform:uppercase;font-size:clamp(1.9rem,8.4vw,3.4rem)}
.hero h1 .l{display:block}
.hero h1 .xl{display:block;color:var(--blue-on-navy);font-size:clamp(2.35rem,11.2vw,5rem);letter-spacing:-.045em;line-height:.9;margin-block:.06em .08em}
.hero h1.long .xl{font-size:clamp(1.95rem,8.9vw,4rem)}
.bajada{font-family:var(--display);font-weight:600;font-size:clamp(1.125rem,2.2vw,1.35rem);line-height:1.35;color:#fff;margin-top:22px;max-width:40ch}
.entrada{color:var(--band-muted);font-size:1.0625rem;line-height:1.65;margin-top:14px;max-width:60ch}
.hero-media{justify-self:center;width:100%;max-width:520px}
/* Computadora y teléfono recortados (PNG con transparencia en webp), sin
   recuadro: la sombra sigue la silueta de los aparatos. */
.hero-media img{width:100%;filter:drop-shadow(0 22px 34px rgba(0,0,0,.4))}
@media (min-width:960px){
  .hero{padding-block:48px 64px}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}
  .hero-media{max-width:none}
}

/* ---------- Rejilla principal ---------- */
.layout{display:grid;gap:40px;padding-block:48px 56px}
@media (min-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"pasos paneles" "tienda paneles";column-gap:40px;row-gap:32px}
  .pasos{grid-area:pasos}
  .paneles{grid-area:paneles}
  .tienda{grid-area:tienda;align-self:start}
}
.layout h2[id],.paginas h2[id],.cierre h2[id]{scroll-margin-top:16px}
.section-title{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-bottom:20px}

/* ---------- Los 12 pasos: lista ordenada real ---------- */
.steps{list-style:none;counter-reset:paso;position:relative;display:grid;gap:12px}
.steps::before{content:"";position:absolute;left:21px;top:28px;bottom:28px;width:2px;background:var(--blue);opacity:.35}
.step{counter-increment:paso;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;scroll-margin-top:16px}
.step::before{content:counter(paso);position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font:700 1.125rem/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 0 0 5px var(--bg);margin-top:10px}
.step-card{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 60px 16px 16px}
.step-card>div{min-width:0}
.ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--blue)}
.step h3{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:4px}
.step p{color:var(--muted);font-size:.9375rem;line-height:1.55}
/* Botón + de cada paso: <details> nativo, funciona sin JavaScript y el texto
   detallado siempre está en el HTML (Google y la IA lo leen igual). */
.more summary{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--blue-ink);cursor:pointer;list-style:none;transition:background-color .2s,color .2s}
.more summary::-webkit-details-marker{display:none}
.more summary::before,.more summary::after{content:"";position:absolute;width:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s}
.more summary::after{transform:rotate(90deg)}
.more[open] summary::after{transform:rotate(0deg)}
.more summary:hover,.more[open] summary{background:var(--blue);color:#fff}
.more > p{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);color:var(--text)}
@media (max-width:399px){.step-card .ico{display:none}}

/* ---------- Paneles laterales (sin numerar) ---------- */
.paneles{display:grid;gap:20px;align-content:start}
.panel,.tienda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.panel-head{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px 14px;margin-bottom:18px}
.panel-head .ico-solid{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff}
.panel-head h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.panel-head .tag{grid-column:2;justify-self:start}
.tag{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--tag-blue-bg);color:var(--tag-blue-fg);font-size:.8125rem;font-weight:600;line-height:1.35}
.tag-green{background:var(--tag-green-bg);color:var(--tag-green-fg)}
.tag-amber{background:var(--tag-amber-bg);color:var(--tag-amber-fg)}

.checks{list-style:none;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;font-size:.9375rem;line-height:1.5;color:var(--text)}
.checks li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:var(--tint)}
.checks li::after{content:"";position:absolute;left:7px;top:calc(.15em + 5px);width:5px;height:9px;border:solid var(--blue-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checks strong{color:var(--navy);font-weight:600}
/* Activos: casillas vacías, porque es una lista para ir marcando (también al imprimir) */
.boxes li::before{border-radius:5px;background:var(--card);border:2px solid var(--blue-ink);width:18px;height:18px}
.boxes li::after{content:none}
@media (min-width:560px){.two-col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}

.terms{display:grid;gap:16px}
@media (min-width:560px){.terms{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
.term dt{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;color:var(--navy);font-size:1rem;line-height:1.3}
.term .ico{width:40px;height:40px}
.term dd{margin:4px 0 0 52px}
.term dfn{font-style:normal}
.term dd{color:var(--muted);font-size:.9375rem;line-height:1.5}

.tienda{border-color:#BFE9D8}
.tienda .panel-head .ico-solid{background:var(--tag-green-fg)}
.tienda .checks li::after{border-color:var(--tag-green-fg)}
.tienda .checks li::before{background:var(--tag-green-bg)}

/* ---------- Páginas que puede tener la web ---------- */
.paginas{padding-bottom:64px}
.paginas .intro,.bloque .intro{color:var(--muted);font-size:1.0625rem;line-height:1.65;max-width:70ch;margin:-6px 0 28px}
.bloque .intro+.intro{margin-top:-14px}
.paginas h3,.bloque h3{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.pages{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.pages+h3{margin-top:32px}

/* ---------- Tecnología, velocidad y paquete ---------- */
.bloque{padding-bottom:64px}
.layout h2[id],.bloque h2[id]{scroll-margin-top:16px}
.speed{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.speed{grid-template-columns:minmax(0,1fr) 240px;gap:56px}}
.speed .checks{margin-bottom:20px}
.psi-link a{font-weight:600}
.gauge{position:relative;justify-self:center;display:grid;justify-items:center;text-align:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;max-width:240px}
.gauge svg{width:160px;height:160px}
.gauge-num{position:absolute;top:24px;left:0;right:0;height:160px;display:grid;place-items:center;font:700 2.75rem/1 var(--display);color:#0B6B3A;letter-spacing:-.03em}
.gauge-label{font-size:.875rem;line-height:1.4;color:var(--muted)}
.pkg{display:grid;gap:16px}
@media (min-width:760px){.pkg{grid-template-columns:1fr 1fr}}
.pkg-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.pkg-in{border-top:4px solid var(--blue)}
.pkg-out{border-top:4px solid #DE7633}
.checks.plus li::before{background:var(--tag-amber-bg)}
.checks.plus li::after{content:"+";border:0;transform:none;left:0;top:.15em;width:20px;height:20px;display:grid;place-items:center;font:700 .9375rem/20px var(--ui);color:var(--tag-amber-fg);text-align:center}
.pkg-note{margin-top:16px;color:var(--muted)}
.pages li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.pages.core li{border-left:4px solid var(--blue)}
.pages strong{display:block;font-family:var(--display);font-weight:700;color:var(--navy);font-size:1rem;line-height:1.3;margin-bottom:3px}
.pages span{display:block;color:var(--muted);font-size:.9375rem;line-height:1.5}

/* ---------- Cierre y acción ---------- */
.cierre{background:var(--navy-band);color:#fff;padding-block:48px 56px}
.cierre h2{color:#fff}
.meta{display:grid;gap:14px;padding-bottom:36px;border-bottom:1px solid var(--band-line)}
.meta h2{font-size:1.125rem;font-weight:600;color:var(--blue-soft);letter-spacing:0}
.meta p{font-size:clamp(1.125rem,2.2vw,1.375rem);line-height:1.5;max-width:52ch}
.meta .remate{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.4vw,2.6rem);letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.accion{padding-top:36px;display:grid;gap:18px}
.accion h2{font-size:clamp(1.4rem,3vw,1.75rem);letter-spacing:-.02em}
.accion p{color:var(--band-muted);max-width:60ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;font:600 1rem/1.2 var(--ui);text-decoration:none;text-align:center;transition:background-color .2s,border-color .2s,color .2s}
.btn-primary{background:var(--blue);color:#fff;border:2px solid var(--blue)}
.btn-primary:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
.btn-secondary{background:transparent;color:#fff;border:2px solid var(--band-muted)}
.btn-secondary:hover{background:#fff;color:var(--navy);border-color:#fff}
.cierre :focus-visible{outline-color:var(--blue-soft)}
@media (max-width:479px){.accion .btn{width:100%}}
@media (min-width:900px){
  .cierre .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
  .meta{border-bottom:0;padding-bottom:0;border-right:1px solid var(--band-line);padding-right:56px}
  .accion{padding-top:0;align-content:start}
}

.pie{padding-block:24px;font-size:.875rem;color:var(--muted)}
.pie .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.pie a{display:inline-block;padding-block:10px;color:var(--muted)}
.pie a:hover{color:var(--navy)}

/* ---------- Botones fijos abajo, solo en celular y tablet ---------- */
.dock{display:none}
@media (max-width:959px){
  :root{--dock:calc(76px + env(safe-area-inset-bottom))}
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(7,26,61,.08)}
  .dock .btn{min-height:52px;padding:0 10px;gap:8px;font-size:.9375rem;border-radius:12px}
  .dock .btn-secondary{color:var(--navy);border-color:var(--navy);background:var(--card)}
  .dock .btn-secondary:hover{background:var(--navy);color:#fff}
}
@media (max-width:419px){.dock .btn{font-size:.875rem}.dock .btn svg{display:none}}

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

/* ---------- Impresión / guardar como PDF ---------- */
@media print{
  @page{margin:14mm 12mm}
  :root{--bg:#fff;--dock:0px}
  body{background:#fff;font-size:10.5pt;line-height:1.45;padding-bottom:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.print-btn,.lang,.dock,.pie nav,.hero-media,.banner{display:none!important}
  .topbar{padding-block:0 8pt;border:0}
  .hero{padding-block:4pt 12pt;background:none;color:var(--navy)}
  .hero h1,.bajada{color:var(--navy)}
  .hero h1 .xl{color:var(--blue-head)}
  .entrada{color:var(--muted)}
  .hero-grid{display:block}
  .hero h1{font-size:26pt}
  .hero h1 .xl{font-size:38pt}
  .hero h1.long .xl{font-size:32pt}
  .bajada{margin-top:10pt;max-width:none}
  .entrada{margin-top:6pt}
  .layout{display:block;padding:0}
  .pasos,.paneles,.tienda{margin-bottom:14pt}
  .section-title{font-size:15pt;margin-bottom:8pt}
  .steps{gap:6pt}
  .steps::before{display:none}
  .step{break-inside:avoid;grid-template-columns:26pt minmax(0,1fr);gap:8pt}
  .step::before{width:24pt;height:24pt;font-size:11pt;box-shadow:none;margin-top:4pt}
  .step-card{padding:6pt 10pt;border-radius:8pt}
  .step-card .ico{display:none}
  .step h3{font-size:11.5pt;margin-bottom:1pt}
  .step-card{padding-right:10pt}
  .more summary{display:none}
  .more > p{margin-top:4pt;padding-top:4pt}
  .more::details-content{content-visibility:visible;display:block}
  .bloque{padding-bottom:12pt}
  .pages.tech{grid-template-columns:repeat(2,minmax(0,1fr));gap:6pt}
  .pages.tech li{padding:6pt 10pt;break-inside:avoid}
  .gauge,.psi-link{display:none}
  .pkg{grid-template-columns:1fr 1fr;gap:8pt}
  .pkg-col{padding:10pt 12pt;break-inside:avoid}
  .step p,.checks li,.term dd,.pages span{font-size:10pt}
  .paneles{display:block}
  .panel,.tienda{break-inside:avoid;padding:10pt 12pt;margin-bottom:10pt;border-radius:10pt}
  .panel-head{margin-bottom:8pt;grid-template-columns:minmax(0,1fr)}
  .panel-head .tag{grid-column:1}
  .panel-head .ico-solid,.term .ico{display:none}
  .term dd{margin-left:0}
  .paginas{padding-bottom:12pt}
  .pages{grid-template-columns:repeat(2,minmax(0,1fr));gap:6pt}
  .pages li{padding:6pt 10pt;break-inside:avoid;border-radius:8pt}
  .cierre{background:#fff;color:var(--navy);padding-block:12pt 0;border-top:2pt solid var(--navy);break-inside:avoid}
  .cierre h2,.meta p{color:var(--navy)}
  .meta h2{color:var(--blue-ink)}
  .meta{border:0!important;padding:0!important}
  .accion{padding-top:12pt}
  .accion p{color:var(--muted)}
  .btn{border:0!important;background:none!important;color:var(--navy)!important;min-height:0;padding:0;gap:0;justify-content:flex-start;width:auto}
  .btn svg{display:none}
  .btns{display:grid;gap:4pt}
  .btn-cal::after{content:": cal.com/samberner";font-weight:400}
  .btn-brief::after{content:": askberner.com/brief/";font-weight:400}
  .pie{padding-block:10pt 0}
  .pie a{padding:0;color:var(--muted)}
}