/* =========================================================
   Web que Vende — hoja de estilos unificada
   Una sola capa: cada selector se define UNA vez.
   Escala tipográfica de 7 pasos · 3 radios · contraste AA.
   ========================================================= */

:root{
  --navy:#0B1B3A;
  --navy-soft:#16294F;
  --ink:#22283A;
  --muted:#5B6478;

  /* Naranja: brillante SOBRE navy (5,46:1). Oscuro cuando lleva texto blanco ENCIMA (4,9:1). */
  --orange:#F2600C;
  --orange-dark:#C94E08;
  --orange-btn:#F2600C;
  --orange-btn-hover:#D8540A;
  --orange-light:#F6945C;

  --bg:#FFFFFF;
  --bg-alt:#F7F7F5;
  --line:#E6E5E1;

  /* Radios: 4 botones y campos · 8 tarjetas · 999px pastillas · 50% círculos */
  --radius-sm:4px;
  --radius:8px;

  --maxw:1120px;
  --alto-cabecera:89px;
  --font-display:'Figtree', sans-serif;
  --font-body:'Figtree', sans-serif;
  --font-mono:'Figtree', sans-serif;

  /* Escala tipográfica — 7 pasos. Nada de texto corrido bajo 15px. */
  --fs-display:clamp(36px, 5.2vw, 72px);
  --fs-h2:clamp(28px, 3.6vw, 36px);
  --fs-h3:24px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-sm:15px;
  --fs-label:13px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy); line-height:1.2; font-weight:700; letter-spacing:-0.01em;}
p{color:var(--muted);}
ul{list-style:none;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:92px 0;}
@media (max-width:720px){ section{padding:64px 0;} }
@media (max-width:560px){ section{padding:56px 0;} }

.label{
  display:block; margin-bottom:14px;
  font-size:var(--fs-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--orange-btn);
}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head h2{font-size:var(--fs-h2); line-height:1.08; margin-bottom:14px;}
.section-head p{font-size:var(--fs-lead); line-height:1.55;}

.skip-link{position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:12px 20px; z-index:200; border-radius:0 0 var(--radius) 0;}
.skip-link:focus{left:0; top:0;}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}

/* ===== HEADER ===== */
/* Sin backdrop-filter: convierte a la cabecera en el marco de los fixed que
   lleva dentro, y el menu del telefono, escondido a la derecha, estiraba la
   pagina hasta casi el doble de ancho. En el celular eso sacaba de la
   pantalla al boton de WhatsApp. El fondo opaco hace el trabajo que hacia el
   desenfoque (ver la regla del modo oscuro, mas abajo). */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,27,58,.94);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-color .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
header.scrolled{background:rgba(11,27,58,.985); box-shadow:0 10px 30px rgba(4,12,30,.18);}
.nav-wrap{max-width:var(--maxw); margin:0 auto; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:var(--fs-body); color:#fff; white-space:nowrap;}
.brand-mark{width:44px; height:44px; object-fit:contain; flex-shrink:0; border-radius:var(--radius-sm);}

/* Logo del encabezado: la versión de letras blancas del logo nuevo, con el
   fondo navy recortado para que se funda con la cabecera. */
.brand-logo{display:block; height:64px; width:auto;}
@media (max-width:720px){
  :root{--alto-cabecera:77px;}
  .brand-logo{height:52px;}
}



nav.primary-nav{position:relative; display:flex; align-items:center; gap:4px;}
nav.primary-nav a{
  font-size:var(--fs-sm); font-weight:600;
  padding:11px 12px; position:relative; transition:color .15s ease; white-space:nowrap;
}
nav.primary-nav > a, nav.primary-nav .nav-dropdown > a{color:#CBD3E3;}
nav.primary-nav > a:hover, nav.primary-nav .nav-dropdown > a:hover{color:#fff;}
nav.primary-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .15s ease;
}
nav.primary-nav a.active{color:#fff; font-weight:600;}
nav.primary-nav a.active::after{transform:scaleX(1);}
/* El subrayado tambien se dibuja al pasar por encima, no solo al llegar a la
   seccion. Sin esto el menu no daba ninguna señal de que el elemento se puede
   pulsar hasta despues de haberlo pulsado. Va acotado a los enlaces de primer
   nivel: dentro del desplegable las opciones son bloques y ahi el subrayado
   quedaria cruzado. Tambien en foco, para quien navega con el teclado. */
nav.primary-nav > a:hover::after,
nav.primary-nav > a:focus-visible::after,
nav.primary-nav .nav-dropdown > a:hover::after,
nav.primary-nav .nav-dropdown > a:focus-visible::after{transform:scaleX(1);}
.nav-cta{
  color:#fff !important; background:var(--orange-btn); border:1px solid var(--orange-btn);
  font-weight:600 !important; border-radius:var(--radius-sm); padding:11px 18px !important; margin-left:8px;
  box-shadow:0 5px 16px rgba(242,96,12,.26);
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--orange-btn-hover) !important; border-color:var(--orange-btn-hover); color:#fff !important;}

/* Objetivo táctil mínimo 44px */
.menu-toggle{display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.menu-toggle span{display:block; width:20px; height:2px; background:#fff; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-dropdown{position:relative;}
.nav-dropdown-main{display:flex; align-items:center; gap:6px;}
.nav-chevron{font-size:var(--fs-label); transition:transform .25s ease;}
.nav-dropdown:hover .nav-chevron, .nav-dropdown:focus-within .nav-chevron{transform:rotate(180deg);}
.nav-dropdown-panel{
  position:absolute; left:0; top:calc(100% + 14px); width:540px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 48px rgba(11,27,58,.18);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.25,.46,.45,.94), visibility .3s;
}
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
nav.primary-nav .nav-dropdown-panel a{display:block; padding:13px 14px; color:var(--navy); border-radius:var(--radius); white-space:normal;}
nav.primary-nav .nav-dropdown-panel a:hover{background:var(--bg-alt); color:var(--navy);}
nav.primary-nav .nav-dropdown-panel a::after{display:none;}
.nav-dropdown-panel strong{display:block; font-size:var(--fs-sm); margin-bottom:2px;}
.nav-dropdown-panel small{display:block; color:var(--muted); font-size:var(--fs-sm); line-height:1.4; font-weight:500;}
.nav-overlay{display:none;}

@media (max-width:1040px){
  body.menu-open{overflow:hidden;}
  .menu-toggle{display:flex; position:relative; z-index:176;}
  nav.primary-nav{
    position:fixed; top:0; right:0; left:auto; width:min(88vw,380px); height:100vh; max-height:none; overflow-y:auto;
    padding:82px 24px 34px; background:var(--navy); border-left:1px solid #2B3C5E; z-index:170;
    flex-direction:column; align-items:stretch; gap:0;
    transform:translateX(100%); opacity:1; pointer-events:none; transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  nav.primary-nav.open{transform:translateX(0); pointer-events:auto;}
  nav.primary-nav a{padding:15px 4px; border-bottom:1px solid #2D3D5D;}
  nav.primary-nav a::after{display:none;}
  nav.primary-nav > a, nav.primary-nav .nav-dropdown > a{color:#D7DDEA; border-color:#2D3D5D;}
  .nav-cta{margin:14px 0 0 !important; text-align:center; justify-content:center;}
  .nav-overlay{display:block; position:fixed; inset:0; z-index:160; background:rgba(2,8,38,.58); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s;}
  .nav-overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
  .nav-dropdown{width:100%; border-bottom:1px solid #2D3D5D; padding-bottom:10px;}
  .nav-dropdown-panel{position:static; width:100%; grid-template-columns:1fr; margin-top:4px; padding:6px; background:rgba(255,255,255,.04); border-color:#314262; box-shadow:none; opacity:1; visibility:visible; pointer-events:auto; transform:none;}
  nav.primary-nav .nav-dropdown-panel a{color:#fff; border:0; padding:12px 12px;}
  nav.primary-nav .nav-dropdown-panel a:hover{background:rgba(255,255,255,.07); color:#fff;}
  .nav-dropdown-panel small{color:#CDD6E7;}
}

/* ===== BOTONES ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm);
  padding:14px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent; cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.46,.45,.94), box-shadow .28s cubic-bezier(.25,.46,.45,.94), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange-btn); color:#fff; box-shadow:0 6px 18px rgba(242,96,12,.22);}
.btn-primary:hover{background:var(--orange-btn-hover); box-shadow:0 9px 24px rgba(184,58,10,.26);}
.btn-outline{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-block{width:100%; justify-content:center;}

/* Enlace de texto para acciones secundarias */
.link-action{
  display:inline-flex; align-items:center; gap:6px; padding:12px 2px;
  font-size:var(--fs-sm); font-weight:600; color:var(--orange-light);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  transition:color .15s ease;
}
.link-action:hover{color:#fff; text-decoration-thickness:2px;}

/* ===== HERO ===== */
.hero{
position:relative; overflow:hidden; padding:112px 0 120px;
background:var(--navy) url("/images/inicio-fondo.webp?v=24a2b9fb") center 28% / cover no-repeat;
}
@media (max-width:900px){ .hero{background-image:url("/images/inicio-fondo-movil.webp?v=c35ddd9b"); background-position:42% center;} }

/* La portada llena la primera pantalla. Con 621 px de alto asomaba la franja
   clara de la seccion siguiente antes de hacer scroll, y ese corte se leia
   como un error. El minimo solo actua cuando la ventana da: en pantallas
   bajas manda el relleno de siempre y nada se comprime */
@media (min-width:901px){
  .hero{
    min-height:calc(100vh - var(--alto-cabecera));
    min-height:calc(100dvh - var(--alto-cabecera));
    display:grid; align-content:center;
  }
}
/* Velo navy parejo: una sola atmósfera, sin partir la portada en dos mitades */
.hero::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:rgba(11,27,58,.82);
}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto 40%; height:620px;
  background:radial-gradient(circle,rgba(242,96,12,.13),rgba(242,96,12,0) 62%); pointer-events:none;
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,560px); align-items:center;}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:20px;}
.hero h1{color:#fff; font-size:var(--fs-display); line-height:1.03; letter-spacing:-.025em; margin-bottom:20px;}
.hero p.lead{color:#DCE3F0; font-size:var(--fs-lead); line-height:1.6; max-width:520px; margin-bottom:28px;}
/* En pantallas anchas el titular crece a 62 px, asi que la columna se ensancha
   para que no parta en demasiadas lineas, y la bajada lo acompana */
@media (min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,820px);}
  .hero p.lead{font-size:22px; max-width:640px;}
}
.hero .label{color:var(--orange-light);}
.hero .btn-outline{border-color:#fff; color:#fff;}
.hero .btn-outline:hover{background:#fff; color:var(--navy);}

/* ===== NOSOTROS ===== */
/* La imagen vertical acompaña la altura del relato y se alinea con su inicio. */
/* De arriba abajo: la frase encabeza y el relato va debajo. En dos columnas
   quedaba media seccion vacia. El ancho del texto se limita porque a 1120 px
   una linea justificada pasa de 130 caracteres y deja de leerse. */
.story-wrap{max-width:740px; margin-left:auto; margin-right:auto;}
.story-wrap .label{text-align:center;}
.story-quote{max-width:700px; margin-left:auto; margin-right:auto; text-align:center;}
/* Las dos socias. Un retrato real con nombre y carrera hace mas por la
   confianza que cualquier foto de banco, y de paso resuelve que la imagen
   anterior se veia generada: esta no lo va a parecer nunca. */
.socias{margin-top:56px; padding-top:38px; border-top:1px solid var(--line); overflow-x:clip;}
.socias .plans-band-label{max-width:820px; text-align:center; color:var(--orange-btn);}
/* Mismo cuerpo e interlineado que las biografias de abajo: los tres parrafos
   de esta seccion se leen como uno solo, y con dos tamanos distintos la
   presentacion parecia el titulo de las fichas en vez de su hermana. */
.socias-intro{font-size:var(--fs-sm); line-height:1.6; max-width:740px; margin:0 auto 32px; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
.socias-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; max-width:820px; margin:0 auto; position:relative;}
/* Dos araucarias al 6%: se leen como sur sin competir con las caras. Van en
   vectores porque a este tamaño una foto se pixelaria, y pesan 2 KB. */
.socias-grid::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-60px; right:-60px; top:-10px; height:380px;
  background:url("/images/araucarias.svg") center bottom / 100% 100% no-repeat;
}
.socia{position:relative; z-index:1;}
/* La foto se muestra a 165 px, no a los 433 de la columna: achicarla es lo
   que hace que la compresion de WhatsApp deje de verse, y de paso el par de
   retratos deja de pesar mas que el texto que los presenta. */
.socia-foto{position:relative; margin:0 auto 18px; max-width:165px;}
/* El retrato va recortado en forma organica, con una mancha naranja y un
   trazo detras. Las tres formas estan dibujadas desplazadas entre si: la
   mancha asoma arriba, por la izquierda y abajo a la derecha, y se esconde
   detras del retrato en el resto. Concentricas se leerian como un marco, que
   es justo lo que no son. La segunda socia lleva el conjunto reflejado para
   que el par se vea parejo. */
.socias-defs{position:absolute; width:0; height:0; overflow:hidden;}
.socia-deco{position:absolute; z-index:0; left:-14%; right:-14%; top:-10%; bottom:-4%; width:auto; height:auto; overflow:visible; pointer-events:none;}
.socia-deco--espejo{transform:scaleX(-1);}
.socia-mancha{fill:var(--orange); opacity:.85;}
/* El trazo va en el naranja claro de la marca. Se distingue de la mancha por
   ser mas palido, no por ser de otro color, y sobre el navy es lo que mejor
   se lee de la escala. */
.socia-trazo{fill:none; stroke:var(--orange-light); stroke-width:1.4;}
.socia-foto img{position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; clip-path:url(#recorte-socia);}
.socia h3{font-size:var(--fs-h3); font-style:italic; font-weight:600; letter-spacing:0; margin-bottom:6px; text-align:center;}
.socia-cargo{font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--orange-btn); margin-bottom:14px; text-align:center;}
.socia-bio{font-size:var(--fs-sm); line-height:1.6; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
@media (max-width:700px){ .socias-grid{grid-template-columns:1fr; gap:40px; max-width:420px;} }
@media (max-width:700px){ .socias-grid::before{display:none;} }
.story-quote{font-family:var(--font-display); font-size:clamp(21px,2.3vw,var(--fs-h3)); color:var(--navy); font-weight:700; line-height:1.4; margin-bottom:22px;}
/* Justificado con guionado. Sin partir palabras, un texto justificado en
   castellano abre huecos entre palabras que se leen como ríos blancos; el
   idioma sale del lang="es-CL" de la página */
.story-copy p{font-size:var(--fs-lead); line-height:1.7; margin-bottom:0; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
/* En una columna angosta el justificado abre zanjas entre palabras, asi
   que por debajo de 700 px los parrafos vuelven a alinearse a la izquierda */
@media (max-width:700px){ .socias-intro, .socia-bio, .story-copy p{text-align:left;} }

/* ===== BENEFICIOS ===== */
/* Tres columnas: seis beneficios de texto corto se abarcan de una mirada
   en 3x2, y la reja baja de 678 a 515 px de alto */
.benefits-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
@media (max-width:1000px){ .benefits-list{grid-template-columns:1fr 1fr;} }
@media (max-width:680px){ .benefits-list{grid-template-columns:1fr;} }
.benefit-item{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:27px 26px; background:#fff; transition:transform .34s cubic-bezier(.25,.46,.45,.94), box-shadow .34s cubic-bezier(.25,.46,.45,.94), border-color .34s ease;}
/* Cada beneficio lleva su propio dibujo. Antes los seis compartían un mismo
   ✓, que no decía nada aquí y le restaba sentido al ✓ de los planes */
.benefit-icono{display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border:1.5px solid var(--orange); border-radius:50%; color:var(--orange-btn);}
.benefit-icono svg{width:20px; height:20px; display:block;}
.benefit-item:hover{transform:translateY(-3px); border-color:#D6D3CE; box-shadow:0 16px 38px rgba(11,27,58,.08);}
.benefit-item h3{font-size:var(--fs-lead); margin-bottom:10px;}
.benefit-item p{font-size:var(--fs-body);}

/* ===== IA PARA TU NEGOCIO ===== */
.ai-section{background:var(--navy); position:relative; overflow:hidden;}
.ai-section .section-head{position:relative; max-width:720px;}
.ai-section .label{color:var(--orange-light);}
.ai-section h2{color:#fff;}
/* Justificado con guionado: es la unica entrada de seccion alineada a la
   izquierda con texto largo, y el borde derecho quedaba muy desigual. El
   idioma para partir palabras sale del lang de la pagina */
.ai-section .section-head p{color:#C7CFE1; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}

/* ===== PLANES ===== */
/* Estos rótulos no son un antetítulo como .label: no llevan un h2 debajo,
   ellos SON el título de su banda. Iban a tamaño de rótulo haciendo trabajo de
   titular, así que se les da tamaño de titular.
   El interletrado baja de .14em a .09em: el aire que hace legible una mayúscula
   pequeña separa de más en cuanto la letra crece. */
.plans-band-label{
  display:block; max-width:1080px; margin:0 auto 20px;
  font-size:clamp(19px, 2.3vw, 26px); font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; line-height:1.25; color:var(--muted);
  text-shadow:0 0 30px rgba(242,96,12,.42);
}
/* El rótulo titula la banda que viene debajo, así que se separa de la
   anterior y se mantiene cerca de la suya. Antes quedaba pegado al borde
   de las tarjetas de arriba: cero píxeles de aire */
.plans-grid + .plans-band-label{margin-top:66px; margin-bottom:24px;}
.plans-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; max-width:1080px; margin:0 auto;}
@media (max-width:820px){.plans-grid{grid-template-columns:1fr; max-width:620px;}}
.plan-card{
  position:relative;
  padding:34px 30px; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .34s cubic-bezier(.25,.46,.45,.94), box-shadow .34s cubic-bezier(.25,.46,.45,.94), border-color .34s ease;
}
.plan-card:hover{transform:translateY(-3px); box-shadow:0 18px 44px rgba(11,27,58,.1); border-color:#D2D0CB;}
.plan-card.featured{background:var(--navy); border-color:var(--navy);}
.plan-card.featured:hover{border-color:var(--navy); box-shadow:0 20px 48px rgba(11,27,58,.24);}
.plan-card.featured h3, .plan-card.featured .amount{color:#fff;}
.plan-card.featured p.plan-sub{color:#CDD6E7;}
.plan-badge{
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--orange-btn); margin-bottom:14px;
}
.plan-card.featured .plan-badge{color:var(--orange-light);}
.plan-card h3{font-size:var(--fs-h3); margin-bottom:6px;}
.plan-sub{font-size:var(--fs-sm); margin-bottom:18px;}
.amount{font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; color:var(--navy); margin-bottom:22px; line-height:1.1;}
.amount small{font-size:var(--fs-sm); font-weight:500; color:var(--muted); font-family:var(--font-body);}
.plan-card.featured .amount small{color:#CDD6E7;}
.plan-for{font-size:var(--fs-sm); margin-bottom:14px;}
.plan-for strong{color:var(--navy);}
.plan-card.featured .plan-for{color:#DCE3F0;}
.plan-card.featured .plan-for strong{color:#fff;}
.plan-result{font-size:var(--fs-sm); color:var(--navy); background:rgba(242,96,12,.08); border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:20px;}
.plan-card.featured .plan-result{color:#E8ECF5; background:rgba(255,255,255,.07);}

/* El producto dentro de su tarjeta: la portada del e-book y el feed de las
   plantillas. Pequenas a proposito: son las unicas tarjetas con imagen y no
   deben desequilibrar la comparacion */
.plan-foto{max-width:148px; margin:0 auto 22px;}
.plan-foto img{display:block; width:100%; height:auto; border-radius:var(--radius-sm); box-shadow:0 10px 26px rgba(11,27,58,.14);}

/* Precio de lanzamiento: el precio normal tachado delante del de oferta, en
   una pastilla como la referencia que mando ella, pasada a los colores del
   sitio. El tachado es el precio que se cobra al terminar la oferta, y la
   linea de abajo dice hasta cuando dura: una oferta tiene que decirlo. Pasada
   la fecha de data-oferta-hasta, el script del final de cada pagina deja
   solo el precio normal. */
.amount.oferta{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; column-gap:12px;
  align-self:flex-start; max-width:100%;
  padding:9px 22px 10px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.05);
}
.amount.oferta .amount-oferta{color:var(--orange);}
.amount-antes{font-size:.5em; font-weight:600; color:#9AA6C0; text-decoration:line-through; text-decoration-thickness:2px;}
/* "Desde" va chico: a tamano de precio ensanchaba la pastilla hasta partirla */
.amount-desde{font-size:.5em; font-weight:600; color:#DCE3F0;}
@media (max-width:560px){ .amount.oferta{padding:8px 16px 9px; column-gap:9px;} }
.oferta-plazo{font-size:13px; font-weight:600; line-height:1.5; color:#CDD6E7; margin:0 0 22px 6px;}
.oferta-plazo strong{color:var(--orange-light); text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:800;}
/* En los niveles y en la tabla el tachado va chico, al lado del precio */
.plan-tier-price s, .comparativa s{color:#9AA6C0; font-weight:500; margin-right:4px;}

/* Lista de prestaciones incluidas en cada plan */
.plan-list{display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex-grow:1;}
.plan-list li{font-size:var(--fs-sm); color:var(--ink); padding-left:24px; position:relative; line-height:1.45;}
.plan-list li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--orange-btn); font-weight:700;}
.plan-card.featured .plan-list li{color:#E4E9F3;}
.plan-card.featured .plan-list li::before{color:var(--orange-light);}

/* Tres columnas para la banda de servicios; una sola en pantallas medianas,
   porque a tres los niveles quedan demasiado estrechos para leerse */
.plans-grid.tres{grid-template-columns:repeat(3, 1fr);}
@media (max-width:1000px){.plans-grid.tres{grid-template-columns:1fr; max-width:620px;}}

/* Niveles de un servicio: nombre y precio en una línea, detalle debajo.
   La barra lateral marca cuál es el nivel recomendado sin gritar */
.plan-tiers{display:flex; flex-direction:column; gap:16px; margin-bottom:28px; flex-grow:1;}
.plan-tier{border-left:2px solid var(--line); padding-left:14px;}
.plan-tier.destacado{border-left-color:var(--orange-btn);}
.plan-tier-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px;}
.plan-tier-head strong{font-size:var(--fs-sm); color:var(--navy);}
.plan-tier-price{font-size:var(--fs-sm); font-weight:600; color:var(--orange-btn); white-space:nowrap;}
.plan-tier-desc{display:block; font-size:var(--fs-sm); color:var(--muted); line-height:1.45;}
.plan-card.featured .plan-tier{border-left-color:rgba(255,255,255,.18);}
.plan-card.featured .plan-tier.destacado{border-left-color:var(--orange-light);}
.plan-card.featured .plan-tier-head strong{color:#fff;}
.plan-card.featured .plan-tier-price{color:var(--orange-light);}
.plan-card.featured .plan-tier-desc{color:#DCE3F0;}

/* Cierre de la sección: para quien no sabe cuál elegir */
.services-band{max-width:1080px; margin:44px auto 0; padding-top:34px; border-top:1px solid var(--line);}
.orientacion{text-align:center; max-width:620px; margin:0 auto;}
.orientacion h3{font-size:var(--fs-h3); margin-bottom:8px;}
.orientacion p{font-size:var(--fs-body); margin-bottom:22px;}
.plan-note{text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:28px;}

/* ===== EBOOK ===== */

/* ===== PROCESO ===== */
/* Los cuatro pasos sí van en orden, así que se dibujan como un recorrido.
   La línea cruza la fila por detrás de las tarjetas: como son blancas y
   opacas, solo asoma en los huecos, y ahí es donde se lee como conector.
   El truco evita meter en el html elementos que solo sirven de adorno. */
.process-list{display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; position:relative;}
.process-list::before{
  content:""; position:absolute; z-index:0;
  top:48px; height:2px; background:var(--orange-btn); opacity:.35;
  left:46px; right:calc((100% - 90px) / 4 - 46px);
}
@media (max-width:900px){
  .process-list{grid-template-columns:1fr 1fr; gap:22px;}
  .process-list::before{display:none;}
  .process-step::after{display:none;}
}
@media (max-width:560px){ .process-list{grid-template-columns:1fr;} }
.process-step{position:relative; z-index:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; transition:transform .34s cubic-bezier(.25,.46,.45,.94), box-shadow .34s cubic-bezier(.25,.46,.45,.94);}
.process-step:hover{transform:translateY(-3px); box-shadow:0 15px 34px rgba(11,27,58,.08);}
/* La punta de flecha en el hueco entre tarjetas: dos bordes de un cuadrado
   girado 45 grados. Marca la direccion sin necesidad de otra imagen */
.process-step::after{
  content:""; position:absolute; z-index:2;
  top:42.3px; left:calc(100% + 9px); width:11px; height:11px;
  border-top:2.5px solid var(--orange-btn); border-right:2.5px solid var(--orange-btn);
  transform:rotate(45deg);
}
.process-step:last-child::after{display:none;}
/* La flecha pertenece a la fila, no a la tarjeta: al pasar el cursor la
   tarjeta sube y la flecha debe quedarse en su sitio */
.process-step:hover::after{transform:rotate(45deg) translate(2px,-2px);}
/* El numero pasa a ser una ficha sobre la linea: es lo que convierte cuatro
   tarjetas sueltas en un recorrido con principio y final */
.process-num{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:var(--fs-lead); font-weight:500;
  color:#fff; background:var(--orange-btn); border-radius:50%;
  box-shadow:0 0 0 6px rgba(242,96,12,.10);
}
.process-step h3{font-size:var(--fs-lead); margin-bottom:8px;}
.process-step p{font-size:var(--fs-sm);}

/* ===== BLOG ===== */
.blog-intro{display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:44px;}
.blog-intro .section-head{margin-bottom:0;}
.blog-intro-note{max-width:340px; font-size:var(--fs-sm); color:var(--muted); padding:14px 16px; background:var(--bg-alt); border-radius:var(--radius-sm);}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;}
.blog-card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; display:flex; flex-direction:column; min-height:100%; transition:transform .34s cubic-bezier(.25,.46,.45,.94), box-shadow .34s cubic-bezier(.25,.46,.45,.94), border-color .34s ease;}
.blog-card:hover{transform:translateY(-3px); box-shadow:0 18px 44px rgba(11,27,58,.1); border-color:#D2D0CB;}
.blog-card-top{min-height:9px; background:var(--navy);}
.blog-card:nth-child(2) .blog-card-top{background:var(--orange);}
.blog-card:nth-child(3) .blog-card-top{background:linear-gradient(90deg,var(--navy) 0 55%,var(--orange) 55%);}
.blog-card-image{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--line);}
.blog-card-body{padding:27px 25px 25px; display:flex; flex-direction:column; flex:1;}
.blog-meta{font-family:var(--font-mono); font-size:var(--fs-label); color:var(--orange-btn); margin-bottom:16px; text-transform:uppercase; letter-spacing:.03em;}
.blog-card h3{font-size:var(--fs-h3); margin-bottom:12px; line-height:1.25;}
.blog-excerpt{font-size:var(--fs-body); margin-bottom:20px;}
.blog-card details{border:0; margin-top:auto;}
.blog-card details:first-child{border-top:0;}
.blog-card summary{border-top:1px solid var(--line); padding:17px 0 0; font-size:var(--fs-sm); color:var(--orange-btn); justify-content:flex-start;}
.blog-card summary::after{margin-left:auto;}
.blog-article{padding-top:20px;}
.blog-article p{font-size:var(--fs-body); margin-bottom:14px;}
.blog-article h4{font-size:var(--fs-body); margin:18px 0 8px;}
.blog-article ul{display:flex; flex-direction:column; gap:9px; margin:0 0 16px;}
.blog-article li{font-size:var(--fs-sm); color:var(--muted); padding-left:22px; position:relative; line-height:1.45;}
.blog-article li::before{content:"✓"; position:absolute; left:0; color:var(--orange-btn); font-weight:700;}
.blog-tip{background:var(--bg-alt); border-radius:var(--radius-sm); padding:14px 16px; margin-top:16px; font-size:var(--fs-sm) !important; color:var(--navy) !important;}
@media (max-width:940px){.blog-grid{grid-template-columns:1fr;}.blog-card{min-height:auto;}.blog-intro{align-items:flex-start; flex-direction:column;}}

/* ===== EJEMPLOS ===== */
.examples-note{font-size:var(--fs-body); color:var(--muted); margin-bottom:32px; padding:14px 16px; background:var(--bg-alt); border-radius:var(--radius-sm);}
.examples-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
@media (max-width:900px){ .examples-grid{grid-template-columns:1fr;} }
.example-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.example-thumb{
  aspect-ratio:16/10; background:var(--bg-alt); display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:var(--fs-sm); text-align:center; padding:20px;
}
.example-card-body{padding:16px 18px; border-top:1px solid var(--line);}
.example-card-body h4{font-size:var(--fs-body); margin-bottom:3px;}
.example-card-body p{font-size:var(--fs-sm);}

/* ===== FAQ ===== */
.faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column;}
details{border-bottom:1px solid var(--line);}
details:first-child{border-top:1px solid var(--line);}
summary{list-style:none; cursor:pointer; padding:22px 4px; font-weight:600; font-size:var(--fs-lead); color:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-size:22px; color:var(--orange-btn); flex-shrink:0; transition:transform .2s ease; font-weight:400;}
details[open] summary::after{transform:rotate(45deg);}
.faq-answer{padding:0 4px 22px; font-size:var(--fs-body); color:var(--muted); max-width:600px;}

/* ===== CONTACTO ===== */
.contact-wrap{display:grid; grid-template-columns:1fr; gap:34px; justify-items:stretch; background:var(--navy); border-radius:var(--radius); padding:48px; box-shadow:0 24px 64px rgba(11,27,58,.16);}
.contact-lead{max-width:640px;}
.contact-lead h2{color:#fff; font-size:var(--fs-h2); margin-bottom:14px;}
/* La entrada del contacto es la ultima invitacion de la pagina: se le da
   el cuerpo de una bajada y se destaca en blanco la frase que responde al
   miedo de escribir sin saber que pedir */
.contact-lead > p{color:#DCE3F0; font-size:var(--fs-lead); line-height:1.6; margin-bottom:26px;}
.contact-lead > p strong{color:#fff; font-weight:700;}
.contact-lead .label{color:var(--orange-light);}
/* Cada canal lleva su color de marca en un disco tenue: da color sin romper la paleta */
.canal-icono{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  transition:transform .34s cubic-bezier(.25,.46,.45,.94);
}
.canal-icono svg{width:26px; height:26px; display:block;}
.canal-correo{background:rgba(246,148,92,.15); color:var(--orange-light);}
.canal-wsp{background:rgba(37,211,102,.15); color:#25D366;}
.canal-ig{background:rgba(242,96,154,.15); color:#F2609A;}
.canal-fb{background:rgba(74,151,247,.15); color:#4A97F7;}
/* El azul oficial de LinkedIn, #0A66C2, da 2,63:1 sobre el panel y no llega
   al minimo de 3:1. Este da 4,90:1 y ademas se separa del azul de Facebook,
   que aclarado quedaba casi identico */
.canal-in{background:rgba(53,168,208,.15); color:#35A8D0;}
.channel:hover .canal-icono{transform:scale(1.08);}

/* El formulario reusa las clases dx- de la guia de diagnostico, que ya son la
   forma de la casa para pedir datos. */
.contact-form{margin-bottom:6px;}

/* Cuatro canales en dos filas de dos. El numero de columnas sigue al de
   canales: con tres iban en una fila, con cuatro un 3+1 dejaria uno solo */
.contact-alt{display:grid; grid-template-columns:repeat(2, 1fr); gap:0 28px;}
/* El correo abre la lista a lo ancho: es el unico que no es una app, y con
   cinco canales en dos columnas alguno tenia que quedar solo de todos modos */
.channel-correo{grid-column:1 / -1;}
.channel-correo > div{word-break:break-word;}
@media (max-width:860px){ .contact-alt{grid-template-columns:1fr;} }
.channel{
  display:flex; align-items:center; gap:16px; padding:18px 2px;
  border-top:1px solid #334464; font-weight:600; font-size:var(--fs-body); color:#fff;
}
.contact-alt .channel{border-bottom:1px solid #334464;}
.channel > div{flex-grow:1; min-width:0;}
.channel small{display:block; font-weight:400; color:#CDD6E7; font-size:var(--fs-sm); margin-top:2px;}
.channel span.arrow{color:var(--orange-light); font-size:var(--fs-lead);}

/* ===== FOOTER ===== */
footer{background:var(--navy); padding:44px 0 26px;}
.footer-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px; padding-bottom:28px; border-bottom:1px solid #28365C; margin-bottom:22px;}
.footer-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-body); color:#fff;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{font-size:var(--fs-sm); color:#DCE3F0; font-weight:500; padding:10px 0;}
.footer-links a:hover{color:var(--orange-light);}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:var(--fs-sm); color:#CDD6E7;}
.footer-bottom a{color:#CBD3E3; display:inline-block; padding:10px 0;}

/* ===== WHATSAPP FLOTANTE ===== */
/* El unico boton flotante que queda: circular, verde y abajo a la derecha en
   cualquier pantalla.
   Antes eran dos. La pastilla naranja de "consultoria gratuita" era la llamada
   principal en escritorio y WhatsApp solo salia en el telefono, en la esquina
   contraria para no apretarse con ella. Al quedar uno solo, las dos reglas que
   los repartian sobran: va donde se espera un boton flotante y punto.
   Va como lo muestran los demas sitios, que es como se reconoce: el verde de
   WhatsApp entero y el icono en blanco, sin disco. Es el unico lugar del sitio
   con un color de fuera de la paleta, y se conserva porque ese verde se
   reconoce antes de leer nada. El verde oscuro de antes se perdia contra el
   fondo azul, y el icono, de 20 px dentro de un disco blanco, no alcanzaba a
   leerse como WhatsApp. El halo claro lo despega del fondo sin agrandarlo mas. */
.flota-wsp{
  display:grid; place-items:center;
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:62px; height:62px; border-radius:50%; background:#25D366;
  box-shadow:0 0 0 5px rgba(37,211,102,.18), 0 12px 30px rgba(0,0,0,.5);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.flota-wsp:hover{transform:translateY(-2px) scale(1.05); background:#1FBE5B; box-shadow:0 0 0 7px rgba(37,211,102,.24), 0 16px 36px rgba(0,0,0,.55);}
.flota-wsp:active{transform:scale(.94); background:#1FBE5B;}
/* Con el menu del telefono abierto quedaria encima del panel. */
body.menu-open .flota-wsp{visibility:hidden;}
.flota-icono{display:grid; place-items:center; color:#fff;}
.flota-icono svg{width:36px; height:36px; display:block; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:560px){
  .flota-wsp{
    right:14px; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    width:58px; height:58px;
  }
  .flota-icono svg{width:33px; height:33px;}
}

/* ===== AVISO DE VENTA RECIENTE ===== */
/* Tarjeta que asoma abajo a la izquierda contando que alguien acaba de comprar.
   Va a la izquierda porque la derecha ya es de WhatsApp, y una capa mas abajo
   que ese boton (140 contra 150): si algun dia llegan a cruzarse, el que tiene
   que quedar arriba es el que sirve para escribir.
   Los nombres, las ciudades y el momento en que aparece van en el script del
   final de index.html. */
.aviso-venta{
  position:fixed; left:22px; bottom:22px; z-index:140;
  width:min(340px, calc(100vw - 44px));
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(11,27,58,.18);
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.25,.46,.45,.94), visibility .45s;
}
.aviso-venta.a-la-vista{opacity:1; visibility:visible; transform:translateY(0);}

/* El cuerpo completo es el enlace: a quien le llama la atencion el aviso lo que
   quiere es ver el producto, no buscar un "ver mas" de dos palabras. */
.aviso-cuerpo{display:flex; align-items:center; gap:12px; padding:13px 40px 13px 13px;}
.aviso-cuerpo, .aviso-cuerpo:hover, .aviso-cuerpo:hover .aviso-que{text-decoration:none;}

/* La inicial reemplaza a la foto: la persona del aviso no tiene cara que
   mostrar, y una foto de banco de imagenes se nota al tiro. */
.aviso-inicial{
  flex:none; display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%; background:var(--navy); color:#fff;
  font-size:18px; font-weight:700; line-height:1;
}
.aviso-texto{min-width:0;}
.aviso-que{display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink); line-height:1.35;}
.aviso-donde{display:block; margin-top:2px; font-size:var(--fs-label); color:var(--muted); line-height:1.4;}

.aviso-cerrar{
  position:absolute; top:7px; right:7px;
  display:grid; place-items:center; width:26px; height:26px;
  border:0; border-radius:50%; background:none;
  color:var(--muted); font-size:17px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.aviso-cerrar:hover{background:var(--bg-alt); color:var(--ink);}

@media (max-width:560px){
  /* En el telefono no caben la tarjeta y el boton de WhatsApp en la misma
     linea, asi que la tarjeta se pone encima y toma el ancho completo. Queda
     sobre el boton (18 + 58 px) con aire para su halo. */
  .aviso-venta{
    left:14px; right:14px; width:auto;
    bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== REVELADO AL HACER SCROLL ===== */
.reveal{opacity:0; transform:translateY(14px);}
.reveal.is-visible{opacity:1; transform:translateY(0); animation:aparecer .9s cubic-bezier(.25,.46,.45,.94);}
@keyframes aparecer{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

@media (max-width:860px){.contact-wrap{padding:30px 24px;}.hero{padding:76px 0 86px;}}
@media (max-width:560px){.contact-wrap{padding:24px 18px;}.plan-card{padding:28px 22px;}}

/* ===== ENLACE DE LA TARJETA DE BLOG ===== */
.blog-leer{
display:inline-flex; align-items:center; gap:6px; margin-top:auto;
padding:17px 0 0; border-top:1px solid var(--line);
font-size:var(--fs-sm); font-weight:600; color:var(--orange-btn);
}
.blog-leer::after{content:"›"; font-size:var(--fs-lead); line-height:1;}
.blog-leer:hover{color:var(--orange-btn-hover);}

/* ===== PÁGINA DE ARTÍCULO ===== */
.entrada{padding:56px 0 92px;}
@media (max-width:720px){ .entrada{padding:40px 0 64px;} }
.entrada-cab{max-width:760px;}
.entrada-volver{display:inline-block; margin-bottom:26px; padding:6px 0; font-size:var(--fs-sm); font-weight:600; color:var(--orange-btn);}
.entrada-volver:hover{color:var(--orange-btn-hover);}
.entrada-cab h1{font-size:var(--fs-h2); line-height:1.1; margin:10px 0 16px;}
.entrada-cab .lead{font-size:var(--fs-lead); line-height:1.55; color:var(--muted);}
.entrada-foto{max-width:960px; margin-top:40px;}
.entrada-foto img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius);}
.entrada-cuerpo{max-width:680px; margin-top:44px;}
.entrada-cuerpo p{font-size:var(--fs-body); line-height:1.7; margin-bottom:18px;}
.entrada-cuerpo h4{font-size:var(--fs-lead); margin:32px 0 12px;}
.entrada-cuerpo li{font-size:var(--fs-body); line-height:1.6;}
.entrada-cierre{max-width:680px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:16px;}
.entrada-cierre p{flex-basis:100%; font-size:var(--fs-body); color:var(--muted); margin:0 0 6px;}


/* ==========================================================================
   MODO OSCURO
   Lienzo azul marino parejo, tarjetas opacas y botones pastilla.
   Va como capa que pisa a la hoja clara de arriba; por eso el !important.
   ========================================================================== */

/* El lienzo es #0B1B3A desde el 11-09-2026: lo pidio ella, un azul oscuro que
   se vea azul. Antes era #040C20, casi negro. Las tarjetas subieron el mismo
   tono para seguir apenas mas claras que el fondo. Ese mismo dia pidio que
   no estuviera «difuminado»: se quitaron las manchas de luz naranja y azul
   (tres circulos desenfocados, fijos detras de todo) y el fondo quedo parejo. */
:root{
  --navy:#0B1B3A;
  --navy-soft:#0E1E42;
  --ink:#E9EDF7;
  --muted:#D3DBEA;
  --line:#1C2E58;
  --bg:transparent;
  --bg-alt:rgba(255,255,255,.035);
}

html{background:#0B1B3A;}
body{background:transparent; color:var(--ink);}

/* El header NO entra aqui: su position:sticky y su z-index:100 sostienen el
   menu del telefono, que va fixed dentro de el. Pisarlos con relative lo hacia
   irse con el scroll y el menu se abria fuera de la pantalla. */
main, footer, section{position:relative; z-index:1;}

/* Tarjetas opacas. Translucidas dejaban pasar la red de puntos, y el texto
   blanco se lavaba justo donde cruzaba una linea. */
.benefit-item, .plan-card, .process-step, .blog-card, .nav-dropdown-panel,
.faq-list details, .contact-wrap, .plan-tier, .ai-callout, .aviso-venta{
  background:#0E1F40 !important;
  border-color:rgba(255,255,255,.12) !important;
}
/* Al pasar el puntero los recuadros se oscurecen, un poco por debajo del
   fondo: lo pidio ella el 11-09-2026. Antes se aclaraban. */
.plan-card:hover, .benefit-item:hover, .blog-card:hover{background:#081630 !important; border-color:rgba(255,255,255,.2) !important;}
.process-step:hover, .hermano:hover, .dx-area-card:hover{background:#081630 !important;}
.plan-card .plan-sub, .plan-card .plan-for, .plan-card .amount small,
.benefit-item p, .process-step p, .blog-card p{color:#DCE3F0 !important;}

/* Aviso de venta reciente. Toma el fondo opaco de las tarjetas de arriba; lo
   que no sirve en oscuro es lo otro: la sombra clara desaparece contra el azul
   y la inicial en navy quedaba del mismo color que la tarjeta que la sostiene.
   Pasa a naranjo, que es con lo que este sitio manda al ojo a un punto. */
.aviso-venta{box-shadow:0 18px 42px rgba(0,0,0,.55);}
.aviso-inicial{background:#F2600C; color:#0B1B3A;}

h1,h2,h3,h4{color:#fff;}
p, li, summary, .faq-answer, .plan-tier-desc, .socia-bio, .story-copy p{color:var(--ink);}
.label, .plans-band-label, .socia-cargo, .blog-meta{color:var(--orange) !important;}
.story-quote, .amount, .plan-tier-price{color:#fff !important;}
.section-head p, .plan-for, .plan-sub{color:var(--muted) !important;}
.socias-intro{color:var(--ink) !important;}

.ai-section{background:transparent !important;}

.btn{
  border-radius:999px !important;
  text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px !important; font-weight:800 !important;
  padding:15px 32px !important;
}
.btn-primary, .nav-cta{
  background:#F2600C !important; color:#0B1B3A !important; border-color:#F2600C !important;
  box-shadow:0 0 0 1px rgba(246,148,92,.45), 0 6px 20px rgba(242,96,12,.40), 0 0 38px rgba(242,96,12,.45) !important;
}
.btn-primary, .nav-cta{
  transition:background .18s ease, box-shadow .22s ease, transform .18s ease !important;
}
.btn-primary:hover, .nav-cta:hover{
  background:#F4732A !important; color:#0B1B3A !important; border-color:#F6945C !important;
  transform:translateY(-3px) scale(1.035) !important;
  box-shadow:0 0 0 2px rgba(255,200,165,.8), 0 12px 34px rgba(242,96,12,.6), 0 0 90px rgba(242,96,12,.85) !important;
}
.btn-primary:active, .nav-cta:active{transform:translateY(-1px) scale(1.01) !important;}
.btn-outline{border-color:rgba(255,255,255,.35) !important; color:#fff !important; background:transparent !important;}
.btn-outline:hover{background:#fff !important; color:#0B1B3A !important;}

/* Opaca: sin el desenfoque de atras, las letras que pasan por debajo se leian
   a traves de ella, incluso al 98%. Opaca se ve igual que antes. */
header{background:#0B1B3A !important; border-bottom:1px solid rgba(255,255,255,.07);}
.hero::after{background:linear-gradient(180deg, rgba(11,27,58,.72) 0%, rgba(11,27,58,.88) 100%) !important;}
footer{background:transparent; border-top:1px solid rgba(255,255,255,.08);}

/* La red de conexiones: fija a la ventana. Estirarla hasta el pie serian mas
   de doce mil pixeles de lienzo; fija cuesta siempre una pantalla. */
#red{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease;}
#red.dentro{opacity:1;}
@media (prefers-reduced-motion:reduce){ #red{transition:none;} }

/* El cursor propio, solo donde hay raton: en una pantalla tactil esconder el
   puntero no tiene sentido y ademas :hover no existe. */
/* Escondidos por defecto. Sin esto, en un telefono quedan sin estilo y la
   flecha aparece dibujada a tamaño natural al final del documento. */
#aro, #punto{display:none;}

@media (pointer:fine){
  *{cursor:none !important;}
  #punto{
    display:block;
    position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%;
    background:var(--orange); z-index:999999; pointer-events:none;
    transform:translate(-50%,-50%); will-change:transform;
  }
  #aro{
    position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(242,96,12,.55); z-index:999998; pointer-events:none;
    transform:translate(-50%,-50%); will-change:transform;
    display:grid; place-items:center;
    transition:width .2s ease, height .2s ease, background .2s ease, border-color .2s ease;
  }
  /* La flecha de siempre, la del puntero del sistema. Una que apunte a la
     derecha se lee como "ir hacia alla" y confunde sobre un enlace. Va
     desplazada porque su punta esta arriba a la izquierda, no al centro. */
  #aro svg{width:17px; height:17px; opacity:0; transform:scale(.6) translate(-1px,-1px); transition:opacity .18s ease, transform .18s ease; color:#0B1B3A;}
  #aro.sobre{width:54px; height:54px; background:var(--orange); border-color:var(--orange);}
  #aro.sobre svg{opacity:1; transform:scale(1) translate(-1px,-1px);}
}
@media (prefers-reduced-motion:reduce){ #aro{transition:none;} }

/* --- Texto que quedaba del color del fondo -------------------------------
   --navy pasó de significar "texto oscuro" a significar "el fondo", así que
   toda regla que lo usaba de color de letra quedó invisible. Son estas. */
.plan-for strong, .plan-tier-head strong{color:#fff !important;}

/* El recuadro de Resultado conserva su tinte naranjo: va DENTRO de una tarjeta
   opaca, así que la red de puntos no lo cruza y no hace falta taparlo. */
.plan-result{
  color:#E8ECF5 !important;
  background:rgba(242,96,12,.12) !important;
  border:1px solid rgba(242,96,12,.24) !important;
}
.plan-result strong{color:#FFB185 !important;}
.blog-tip{color:#E8ECF5 !important; background:rgba(255,255,255,.05) !important;}


/* El naranjo oscuro esta pensado para llevar texto blanco encima, no para ser
   texto: sobre el fondo oscuro da 3,85:1 y el minimo legible es 4,5. Todo lo
   que lo usaba de color de letra pasa al naranjo claro, que da 6,24:1.
   Se excluye el icono del boton flotante, que va en blanco sobre su verde. */
.plan-badge, .plan-list li::before, .blog-card summary, .blog-article li::before,
summary::after, .blog-leer, .entrada-volver, .benefit-icono{color:var(--orange) !important;}




/* ==========================================================================
   DIAGNÓSTICO DIGITAL — guía interactiva de /guias/diagnostico-digital/
   Todo lleva el prefijo .dx- y vive solo en esa página. Va al final de la
   hoja para quedar por encima de la capa oscura sin necesitar !important.
   ========================================================================== */

[hidden]{display:none !important;}

/* Tarjeta de la portada: en vez de una foto lleva un dibujo del resultado, que
   es lo que la guía entrega. Ocupa el mismo alto que las imágenes vecinas. */
.blog-card-visual{
  aspect-ratio:16/10; display:grid; place-items:center; padding:18px;
  background:radial-gradient(115% 135% at 12% 0%, #14295E 0%, #08132C 60%, #050D22 100%);
  border-bottom:1px solid var(--line);
}
.blog-card-visual svg{width:100%; height:100%; display:block;}

/* --- Portada -------------------------------------------------------------- */
.dx-portada{padding:34px 0 0;}
.dx-hero{
  position:relative; overflow:hidden;
  margin-top:22px; padding:56px 54px 52px;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:radial-gradient(118% 132% at 10% -12%, #14295E 0%, #08132C 56%, #050D22 100%);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:44px; align-items:center;
}
.dx-hero h1{
  font-size:clamp(32px, 4.3vw, 54px); line-height:1.05; letter-spacing:-.025em;
  margin-bottom:20px; color:#fff;
}
.dx-hero h1 em{color:var(--orange); font-style:italic;}
.dx-hero-bajada{font-size:var(--fs-lead); line-height:1.6; color:#C7D0E4; max-width:560px; margin-bottom:30px;}
.dx-hero-acciones{margin-bottom:28px;}
.dx-hero-visual svg{width:100%; height:auto; display:block;}

/* Rótulos del esquema. La segunda línea nombra las herramientas concretas de
   cada pieza; en pantallas chicas quedaría en 6px, así que se esconde y el
   nombre baja para seguir centrado en su caja. */
.dx-esquema-nombre{font-family:var(--font-display); font-size:16px; font-weight:600; fill:#E9EDF7;}
.dx-esquema-sub{font-family:var(--font-body); font-size:11px; fill:#D3DBEA;}
@media (max-width:620px){
  .dx-esquema-sub{display:none;}
  .dx-esquema-rotulo{transform:translateY(7px);}
}

.dx-fichas{display:flex; flex-wrap:wrap; gap:10px;}
.dx-fichas li{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:#DCE3F0; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
}

@media (max-width:940px){
  .dx-hero{grid-template-columns:1fr; gap:36px; padding:44px 32px 40px;}
  .dx-hero-visual{max-width:400px; margin:0 auto; width:100%;}
}
@media (max-width:560px){
  .dx-portada{padding-top:24px;}
  .dx-hero{padding:34px 22px 32px; margin-top:16px;}
  .dx-hero-bajada{font-size:var(--fs-body); margin-bottom:24px;}
}

/* --- Historia ------------------------------------------------------------- */
.dx-columna{max-width:700px;}
.dx-columna h2{font-size:var(--fs-h2); line-height:1.1; margin-bottom:22px;}
.dx-columna p{font-size:var(--fs-lead); line-height:1.7; margin-bottom:18px; color:var(--ink);}
.dx-columna p strong{color:#fff;}
.dx-cita{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(20px,2.3vw,25px) !important; line-height:1.45 !important; color:#fff !important;
  border-left:3px solid var(--orange); padding:6px 0 6px 22px; margin:30px 0 26px !important;
}

/* --- Las tres áreas ------------------------------------------------------- */
.dx-areas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .dx-areas-grid{grid-template-columns:1fr; max-width:620px;} }
.dx-area-card{
  background:#0E1F40; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:30px 28px;
  transition:transform .34s cubic-bezier(.25,.46,.45,.94), box-shadow .34s cubic-bezier(.25,.46,.45,.94), border-color .34s ease;
}
.dx-area-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.2); box-shadow:0 18px 44px rgba(0,0,0,.32);}
/* Un acento en vez de un número: las tres áreas se miran en paralelo, no una
   después de otra, y numerarlas insinuaba un orden que no existe. */
.dx-area-card::before{
  content:""; display:block; width:28px; height:3px; border-radius:2px;
  background:var(--orange); margin-bottom:20px;
}
.dx-area-card h3{font-size:var(--fs-h3); margin-bottom:10px;}
.dx-area-card p{font-size:var(--fs-sm); line-height:1.6; color:#DCE3F0;}

/* --- Paneles y formulario ------------------------------------------------- */
.dx-panel{
  background:#0E1F40; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:44px 42px;
}
.dx-panel h2{font-size:var(--fs-h2); line-height:1.12; margin-bottom:12px;}
.dx-panel h3{font-size:var(--fs-h3); margin-bottom:24px;}
.dx-panel-form{max-width:760px; margin:0 auto;}
.dx-panel-bajada{font-size:var(--fs-body); line-height:1.6; color:#DCE3F0; margin-bottom:32px;}
@media (max-width:560px){ .dx-panel{padding:30px 20px;} }

.dx-campos{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.dx-campo-ancho{grid-column:1 / -1;}
@media (max-width:640px){ .dx-campos{grid-template-columns:1fr;} }

.dx-campo label{
  display:block; margin-bottom:8px;
  font-size:var(--fs-sm); font-weight:600; color:#fff;
}
.dx-req{color:var(--orange);}
.dx-opcional{font-weight:400; color:var(--muted);}
.dx-campo input, .dx-campo textarea, .dx-campo select{
  width:100%; padding:14px 16px;
  font-family:inherit; font-size:var(--fs-body); color:var(--ink);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
  transition:border-color .2s ease, background .2s ease;
  /* El sitio esconde el cursor y pinta uno propio. En un campo de texto eso
     deja a ciegas justo donde hace falta apuntar bien. */
  cursor:text !important;
}
.dx-campo textarea{resize:vertical; min-height:118px; line-height:1.55;}
/* La flecha propia reemplaza a la del sistema, que en este fondo oscuro se
   dibuja negra sobre negro en Windows. */
.dx-campo select{
  appearance:none; cursor:pointer !important; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 17px) 24px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.dx-campo select option{background:#0E1E42; color:var(--ink);}
.dx-campo input::placeholder, .dx-campo textarea::placeholder{color:#6B7A9B;}
.dx-campo input:hover, .dx-campo textarea:hover, .dx-campo select:hover{border-color:rgba(255,255,255,.3);}
.dx-campo input:focus, .dx-campo textarea:focus, .dx-campo select:focus{outline:none; border-color:var(--orange); background:rgba(255,255,255,.07); box-shadow:0 0 0 3px rgba(242,96,12,.22);}
.dx-campo.con-error input, .dx-campo.con-error textarea, .dx-campo.con-error select{border-color:#FF8A72;}
.dx-error{font-size:var(--fs-sm); color:#FFB3A3; margin-top:7px; min-height:0;}
.dx-error:empty{display:none;}

/* Trampa para robots: fuera de la pantalla, no display:none — algunos
   programas saltan lo que está oculto del todo. */
.dx-trampa{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

.dx-consentimiento{margin-top:26px;}
.dx-check{display:flex; align-items:flex-start; gap:12px; cursor:pointer;}
.dx-check input{
  flex-shrink:0; width:20px; height:20px; margin-top:2px;
  accent-color:var(--orange); cursor:pointer;
}
.dx-check span{font-size:var(--fs-sm); line-height:1.55; color:var(--ink);}
.dx-consentimiento.con-error .dx-check span{color:#FFD3C9;}

.dx-form-pie{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px;}
/* Los botones del sitio no parten línea y llevan 32px de aire a cada lado. En
   una pantalla de 360, "Guardar y comenzar diagnóstico" medía más que la
   pantalla entera y empujaba la página hacia el lado. */
.dx-form-pie .btn,
.dx-checklist-pie .btn,
.dx-servicio-accion .btn{max-width:100%; white-space:normal; text-align:center; line-height:1.3;}
.dx-aviso{font-size:var(--fs-sm); line-height:1.5; color:var(--muted); margin:0;}
.dx-aviso:empty{display:none;}
.dx-aviso-error{color:#FFB3A3;}
.dx-aviso-ok{color:#7FE0A8;}
.dx-nota{font-size:var(--fs-sm); line-height:1.55; color:var(--muted); margin-top:20px;}
.dx-nota-alerta{color:#FFB3A3;}

.dx-enlace{
  background:none; border:0; padding:0;
  font:inherit; font-size:inherit; font-weight:600;
  color:var(--orange); text-decoration:underline; text-underline-offset:3px;
}
.dx-enlace:hover{color:var(--orange-light);}

.dx-retomar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  max-width:760px; margin:0 auto; padding:16px 20px;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
}
.dx-retomar p{font-size:var(--fs-sm); color:var(--ink); margin:0;}
.dx-retomar strong{color:#fff;}

/* --- Checklist ------------------------------------------------------------ */
.dx-avance{
  position:sticky; top:var(--alto-cabecera); z-index:20;
  display:flex; align-items:center; gap:20px;
  margin-bottom:40px; padding:16px 22px;
  border:1px solid rgba(255,255,255,.13); border-radius:var(--radius);
  background:rgba(14,31,64,.96); backdrop-filter:blur(8px);
}
.dx-avance-texto{display:flex; align-items:baseline; gap:7px; white-space:nowrap;}
.dx-avance-texto strong{font-family:var(--font-mono); font-size:var(--fs-body); color:#fff;}
.dx-avance-texto span{font-size:var(--fs-sm); color:var(--muted);}
.dx-avance-pista{flex:1; height:7px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden;}
.dx-avance-pista > span{display:block; height:100%; width:0; border-radius:999px; background:var(--orange); transition:width .35s ease;}
@media (max-width:560px){
  .dx-avance{gap:12px; padding:13px 16px; margin-bottom:30px;}
  .dx-avance-texto span{display:none;}
}

.dx-bloque{margin-bottom:58px;}
/* Sin el círculo numerado: chocaba con la numeración real de las preguntas y
   con la barra de avance, que ya dice en cuál de las quince vas. */
.dx-bloque-cab{
  padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.12);
}
.dx-bloque-cab h3{font-size:var(--fs-h3); margin-bottom:5px;}
.dx-bloque-cab p{font-size:var(--fs-sm); color:var(--muted);}

.dx-pregunta{
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  background:#0E1F40; padding:24px 26px; margin-bottom:14px;
  transition:border-color .25s ease;
}
/* La pregunta va en un <p> con aria-labelledby, no en un <legend>: el navegador
   dibuja la leyenda ENCIMA del borde del recuadro, no dentro, y el texto se
   salía de la tarjeta. Un grupo con etiqueta asociada se lee igual de bien. */
.dx-pregunta-texto{
  display:block; margin:0 0 18px;
  font-size:var(--fs-body); line-height:1.5; color:var(--ink);
}
.dx-pregunta-num{
  display:inline-block; min-width:26px; margin-right:9px;
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--orange);
}
.dx-pregunta.sin-responder{border-color:#FF8A72; box-shadow:0 0 0 3px rgba(242,96,12,.14);}

.dx-opciones{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.dx-opcion{
  position:relative; display:grid; place-items:center;
  padding:13px 8px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  text-align:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.dx-opcion input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer;}
.dx-opcion:hover{border-color:rgba(255,255,255,.4); background:rgba(0,0,0,.22);}
.dx-opcion:focus-within{outline:2px solid var(--orange); outline-offset:2px;}
/* La clase la pone el script; :has() hace lo mismo por si acaso, pero no en
   todos los navegadores todavía. */
.dx-opcion.esta-marcada,
.dx-opcion:has(input:checked){background:var(--orange); border-color:var(--orange); color:#0B1B3A; font-weight:700;}
.dx-opcion.esta-marcada:hover,
.dx-opcion:has(input:checked):hover{background:var(--orange-light); border-color:var(--orange-light);}

/* Contexto del negocio, al final del checklist. Se separa con un borde para
   que se lea como un paso distinto y no como una pregunta número 16. */
.dx-contexto{
  border:0; border-top:1px solid rgba(255,255,255,.12); margin:0; padding:34px 0 4px;
}
.dx-contexto legend{
  padding:0 0 22px; font-family:var(--font-display); font-size:var(--fs-h3);
  font-weight:700; line-height:1.25; color:#fff;
}
@media (max-width:560px){ .dx-contexto{padding-top:28px;} }

.dx-checklist-pie{display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding-top:6px;}
.dx-validacion{font-size:var(--fs-sm); color:#FFB3A3; margin:0;}
.dx-validacion:empty{display:none;}

/* --- Resultado ------------------------------------------------------------ */
.dx-marcador{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:44px; align-items:center;
  padding:46px 44px; margin-bottom:26px;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:radial-gradient(118% 140% at 8% -10%, #14295E 0%, #08132C 58%, #050D22 100%);
}
.dx-marcador-aro{position:relative; width:190px; height:190px;}
.dx-marcador-aro svg{width:100%; height:100%; display:block;}
.dx-marcador-aro circle{transition:stroke-dashoffset 1s cubic-bezier(.25,.46,.45,.94);}
.dx-marcador-cifra{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.dx-marcador-cifra strong{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:56px; line-height:1; color:#fff; letter-spacing:-.03em;
}
.dx-marcador-cifra span{display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--muted);}
.dx-marcador-copy h2{font-size:var(--fs-h2); line-height:1.1; margin-bottom:14px; outline:none;}
.dx-marcador-copy p{font-size:var(--fs-lead); line-height:1.65; color:#C7D0E4;}
@media (max-width:820px){
  .dx-marcador{grid-template-columns:1fr; gap:30px; justify-items:center; text-align:center; padding:34px 22px;}
  .dx-marcador-aro{width:160px; height:160px;}
  .dx-marcador-cifra strong{font-size:48px;}
}

/* Puntos de fuga: las tres respuestas más bajas del checklist, de peor a menos
   peor. El color separa un "No" de un "A medias": no es lo mismo no tenerlo que
   tenerlo a medias, y pintarlas igual haría que las tres se leyeran igual de
   graves. */
.dx-fugas{
  background:#0E1F40; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:38px 40px; margin-bottom:26px;
}
.dx-fugas h3{font-size:var(--fs-h3); line-height:1.2; margin-bottom:10px;}
.dx-fugas-bajada{font-size:var(--fs-sm); line-height:1.6; color:#DCE3F0; margin-bottom:22px;}
.dx-fugas-lista{display:flex; flex-direction:column;}
.dx-fugas-lista:empty{display:none;}
.dx-fuga{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 16px;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.09);
}
.dx-fuga:last-child{padding-bottom:0;}
.dx-fuga-luz{
  grid-column:1; grid-row:1; align-self:start;
  width:10px; height:10px; border-radius:50%; margin-top:9px; background:#FF6B5A;
}
.dx-fuga.es-parcial .dx-fuga-luz{background:#E8A33D;}
.dx-fuga b{
  grid-column:2; grid-row:1;
  font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.3; color:#fff;
}
.dx-fuga p{grid-column:2; grid-row:2; font-size:var(--fs-sm); line-height:1.65; color:#DCE3F0;}
.dx-fuga-nivel{
  grid-column:3; grid-row:1; padding-top:4px;
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#FF6B5A; white-space:nowrap;
}
.dx-fuga.es-parcial .dx-fuga-nivel{color:#E8A33D;}
/* Sin fugas no hay lista debajo, así que el margen del párrafo dejaría un
   hueco al final de la tarjeta. */
.dx-fugas.sin-fugas .dx-fugas-bajada{color:#5FD69B; margin-bottom:0;}
@media (max-width:640px){
  .dx-fugas{padding:28px 20px;}
  .dx-fuga{grid-template-columns:auto minmax(0,1fr);}
  .dx-fuga-nivel{grid-column:2; grid-row:3; padding-top:0; margin-top:10px;}
}

.dx-barras{display:flex; flex-direction:column; gap:20px;}
.dx-barra{display:grid; grid-template-columns:210px minmax(0,1fr) 58px; gap:20px; align-items:center;}
.dx-barra-nombre b{display:block; font-size:var(--fs-body); color:#fff; font-weight:700;}
.dx-barra-nombre small{display:block; margin-top:2px; font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.dx-barra-nombre small:empty{display:none;}
.dx-barra-pista{height:12px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden;}
.dx-barra-pista > span{display:block; height:100%; width:0; border-radius:999px; background:#4E6DAF; transition:width .9s cubic-bezier(.25,.46,.45,.94);}
.dx-barra-valor{font-family:var(--font-mono); font-size:var(--fs-body); color:#fff; text-align:right;}
.dx-barra.es-oportunidad .dx-barra-pista > span{background:var(--orange);}
.dx-barra.es-oportunidad .dx-barra-nombre small{color:var(--orange);}
.dx-barra.es-fuerte .dx-barra-pista > span{background:#5FD69B;}
.dx-barra.es-fuerte .dx-barra-nombre small{color:#5FD69B;}
@media (max-width:700px){
  .dx-barra{grid-template-columns:1fr auto; gap:6px 14px;}
  .dx-barra-nombre{grid-column:1;}
  .dx-barra-valor{grid-column:2; align-self:center;}
  .dx-barra-pista{grid-column:1 / -1;}
}

.dx-lectura{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px;}
@media (max-width:820px){ .dx-lectura{grid-template-columns:1fr;} }
.dx-lectura-card{
  background:#0E1F40; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:32px 30px;
}
.dx-lectura-oportunidad{border-left:3px solid var(--orange);}
.dx-lectura-rotulo{
  display:block; margin-bottom:14px;
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted);
}
.dx-lectura-oportunidad .dx-lectura-rotulo{color:var(--orange);}
.dx-lectura-card h3{font-size:var(--fs-lead); line-height:1.3; margin-bottom:10px;}
.dx-lectura-card p{font-size:var(--fs-sm); line-height:1.65; color:#DCE3F0;}

.dx-plan{margin-top:62px;}
.dx-plan .section-head{margin-bottom:34px;}
.dx-semanas{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:1000px){ .dx-semanas{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .dx-semanas{grid-template-columns:1fr;} }
.dx-semana{
  background:#0E1F40; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:26px 24px; position:relative;
}
.dx-semana::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  border-radius:var(--radius) var(--radius) 0 0; background:var(--orange); opacity:.85;
}
.dx-semana span{
  display:block; margin-bottom:12px;
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange);
}
.dx-semana b{display:block; font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.25; color:#fff; margin-bottom:9px;}
.dx-semana p{font-size:var(--fs-sm); line-height:1.6; color:#DCE3F0;}

.dx-servicio{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:44px; align-items:center;
  margin-top:62px; padding:44px 42px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  background:radial-gradient(120% 150% at 92% 0%, #243A70 0%, #11244A 60%, #0D1E40 100%);
}
.dx-servicio h2{font-size:var(--fs-h2); line-height:1.12; margin-bottom:12px;}
.dx-servicio-copy p{font-size:var(--fs-body); line-height:1.65; color:#C7D0E4; margin-bottom:16px;}
.dx-enlace-servicio{font-size:var(--fs-sm); font-weight:700; color:var(--orange); text-decoration:underline; text-underline-offset:4px;}
.dx-enlace-servicio:hover{color:var(--orange-light);}
.dx-servicio-accion{text-align:center;}
.dx-servicio-accion .btn{width:100%; justify-content:center;}
.dx-servicio-accion .dx-nota{margin-top:14px;}
@media (max-width:820px){
  .dx-servicio{grid-template-columns:1fr; gap:28px; padding:32px 22px;}
  .dx-servicio-accion{text-align:left;}
}

@media (max-width:600px){
  .dx-form-pie .btn,
  .dx-checklist-pie .btn,
  .dx-hero-acciones .btn{width:100%; justify-content:center; padding-left:18px !important; padding-right:18px !important;}
  .dx-form-pie, .dx-checklist-pie{gap:14px;}
}


/* Barra de aviso editable desde /admin.
   Va antes de la cabecera sticky: se ve al entrar y se va al bajar,
   dejando el menu pegado arriba como siempre. */
.barra-aviso{
  background:var(--orange-btn);
  color:#fff;
  text-align:center;
  font-weight:600;
  font-size:15px;
  line-height:1.4;
  padding:10px 20px;
}
.barra-aviso[hidden]{display:none;}


/* ==========================================================================
   PAGINA DE SERVICIO   /servicios/<nombre>/
   Cada servicio de la banda "Potencia tu negocio" tiene su propia pagina.
   Reutiliza casi todo lo del articulo de blog: aca solo va lo que no existia.
   ========================================================================== */

/* Un bloque ancho dentro del articulo: la grilla de niveles y el recorrido del
   mes necesitan los 1080px de la portada, no los 680 de la columna de lectura. */
/* En la pagina de servicio todo arranca en la misma vertical: el titulo, los
   parrafos, los rotulos de banda y las preguntas.

   En el articulo de blog cada bloque es un .container con su propio ancho
   maximo, y .container los centra: la columna de lectura de 680 quedaba a
   190px de donde empezaba una banda de tarjetas de 1080. Aca el contenedor
   vuelve a medir lo de siempre y el limite pasa a sus hijos, que es como se
   arma la portada: el bloque ocupa el ancho de la pagina y el texto se corta
   solo por la derecha. */
.entrada.servicio .entrada-cab,
.entrada.servicio .entrada-cuerpo{max-width:var(--maxw);}
.entrada.servicio .entrada-cab > *{max-width:760px;}
.entrada.servicio .entrada-cuerpo > *{max-width:680px;}
.entrada.servicio .faq-list{margin-left:0; margin-right:auto;}

.servicio-bloque{margin-top:56px;}

/* La foto del producto, cuando el servicio es una cosa que se ve: el e-book.
   Chica a proposito y pegada a la izquierda, como el resto de la pagina. A
   tamano completo competia con el precio, que es lo que hay que leer primero. */
.servicio-foto{margin-top:40px;}
.servicio-foto img{
  width:100%; max-width:300px; height:auto;
  border-radius:var(--radius); box-shadow:0 18px 44px rgba(0,0,0,.42);
}

/* Cuando el bloque no lleva tarjetas sino una lista para leer, se estrecha
   hasta el ancho de la columna de texto: asi el rotulo y la lista arrancan
   en la misma linea vertical que los parrafos de arriba. */
.servicio-bloque.angosto > *{max-width:680px; margin-left:0; margin-right:auto;}

/* El precio del encabezado. .amount viene de las tarjetas, donde va dentro de
   una caja angosta; aca respira mas y el pie se baja a su propia linea en el
   telefono, que es donde "pago unico - IVA incluido" partia en dos. */
.entrada-cab .amount{margin-bottom:26px;}
.entrada-cab .amount.oferta{margin-bottom:10px;}
.entrada-cab .oferta-plazo{margin-bottom:26px;}
@media (max-width:520px){ .entrada-cab .amount small{display:block; margin-top:4px;} }

/* Las etapas de un servicio: van numeradas porque el orden es parte de lo que
   se compra. El numero se dibuja con contador, asi agregar o quitar una etapa
   no obliga a renumerar a mano. Sin cajas: son una lista, no seis tarjetas. */
.etapas{
  counter-reset:etapa; list-style:none;
  margin:0; padding:0;
}
.etapa{
  position:relative; padding:22px 0 22px 58px;
  border-top:1px solid var(--line);
}
.etapa:last-child{border-bottom:1px solid var(--line);}
.etapa::before{
  counter-increment:etapa; content:"→";
  position:absolute; left:0; top:20px;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--orange); color:var(--orange);
  font-family:var(--font-display); font-weight:700; font-size:15px;
  display:grid; place-items:center;
}
.etapa h5{font-size:var(--fs-body); font-weight:700; color:#fff; margin:0 0 5px;}
.etapa p{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin:0;}

/* En un servicio por niveles, cada sesion tiene que decir a cual pertenece: sin
   esa marca la lista entera se lee como si viniera incluida en el precio mas
   bajo, y el cliente se entera al cotizar. Va en naranjo claro sobre el mismo
   naranjo de la marca, separado por claridad y no por otro color. */
.etapa-nivel{
  display:inline-block; margin-left:10px; vertical-align:2px;
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  color:var(--orange-light); border:1px solid rgba(246,148,92,.4);
  border-radius:999px; padding:3px 9px;
}
@media (max-width:520px){
  .etapa-nivel{display:block; margin:6px 0 0; width:max-content;}
}

/* Los otros dos servicios, al pie. Quien llego buscando uno casi siempre esta
   eligiendo entre varios: dejarlo sin salida obliga a volver al menu. */
.servicios-hermanos{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
  max-width:680px; margin:44px auto 0;
}
@media (max-width:720px){ .servicios-hermanos{grid-template-columns:1fr;} }
.hermano{
  display:block; padding:20px 22px;
  background:#0E1F40; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);
  transition:border-color .25s ease, transform .25s ease;
}
.hermano:hover{border-color:rgba(255,255,255,.28); transform:translateY(-2px);}
.hermano strong{display:block; font-size:var(--fs-body); color:#fff; margin-bottom:4px;}
.hermano small{display:block; font-size:var(--fs-sm); color:var(--muted); line-height:1.45;}

/* El enlace a la pagina del servicio, bajo el boton de cada tarjeta de la
   portada. Va separado del boton por una linea: son dos cosas distintas
   -escribir ahora, o leer antes de escribir- y pegados se leen como una sola. */
.plan-detalle{
  display:block; margin-top:16px; padding-top:15px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center; font-size:var(--fs-sm); font-weight:600;
  color:var(--orange);
}
.plan-detalle::after{content:" \203A"; }
.plan-detalle:hover{color:var(--orange-light);}

/* Toda la tarjeta lleva a la pagina del servicio, no solo el renglon de
   abajo. En vez de un segundo enlace o un manejador de clic, se estira el
   que ya esta: una capa transparente suya cubre la tarjeta completa.

   Asi sigue habiendo UN enlace de verdad -se abre en pestana nueva con el
   boton del medio, se copia con boton derecho, se recorre con el teclado- y
   el puntero propio del sitio reacciona en toda la superficie, porque el
   evento lo recibe el enlace y no el pseudoelemento.

   El enlace NO puede llevar position: si lo llevara, el inset:0 se mediria
   contra el propio renglon y no contra la tarjeta. */
.plan-detalle::before{
  content:""; position:absolute; inset:0;
  border-radius:var(--radius);
}
/* El boton de WhatsApp va por encima de esa capa: es el otro destino de la
   tarjeta y tiene que seguir escribiendo, no navegar. */
.plan-card .btn{position:relative; z-index:1;}

/* Listas que enumeran lo que el servicio NO hace. Heredaban el visto de las
   listas de prestaciones, y un visto delante de "no incluye la pagina web"
   dice lo contrario de la frase. El aspa va en gris: informa, no alarma.
   Lleva !important porque el modo oscuro pinta de naranjo todos los ::before
   de .blog-article y esa regla tambien lo lleva. */
.lista-no li::before{content:"×" !important; color:var(--muted) !important; font-weight:700;}

/* Tabla comparativa: solo las filas donde los dos planes se diferencian.
   Repetir lo que comparten llenaria la tabla de vistos identicos y esconderia
   justo lo que se viene a mirar; lo comun va en una linea debajo. */
.comparativa-caja{overflow-x:auto;}
/* El ancho minimo es el que cabe en un telefono chico: la tabla se comprime
   en vez de obligar a arrastrarla de lado. El overflow de la caja queda de
   red de seguridad para pantallas mas angostas todavia. */
.comparativa{width:100%; min-width:300px; border-collapse:collapse; text-align:left;}
.comparativa th, .comparativa td{padding:13px 16px 13px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.comparativa thead th{
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--orange); padding-top:0;
}
/* La primera columna nombra la fila: va apagada para que los ojos bajen por
   las respuestas, que es donde esta la decision. */
.comparativa tbody td:first-child{font-size:var(--fs-sm); color:var(--muted); width:42%;}
.comparativa tbody td{font-size:var(--fs-sm); color:var(--ink);}
.comparativa td.si{color:var(--orange); font-weight:700;}
.comparativa td.no{color:var(--muted);}
.comparativa tbody tr:last-child td{border-bottom:none; font-weight:700; color:#fff;}
.comparativa-pie{margin-top:16px; font-size:var(--fs-sm); line-height:1.6; color:var(--muted); max-width:680px;}



/* ===== VISTAS DE FEED =====
   La comparacion de arriba de la pagina, entre un perfil sin linea grafica y
   uno ordenado: es la forma mas corta de explicar para que sirve el pack.
   Los tonos viven en variables propias (--f-*) y no en la paleta del sitio.
   Es una muestra del producto, igual que la foto del e-book: teñirla de naranjo
   seria mentir sobre como se ve lo que se esta comprando. */
.feed-vista{
  --f-clara:#EFE8E0; --f-tinta:#3A342E; --f-foto:#D8CEC3; --f-linea:#DDD8D1;
  max-width:400px; margin:0 auto;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.feed-perfil{display:flex; align-items:center; gap:11px; padding:12px 14px; background:#fff;}
.feed-avatar{flex:none; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--f-clara), var(--f-foto));}
.feed-nombre strong{display:block; font-size:12.5px; font-weight:700; color:#22283A; line-height:1.3;}
.feed-nombre small{display:block; font-size:11px; color:#8A867E; line-height:1.3;}

/* 2px de separacion: es la rejilla de Instagram. Con mas se pierde el efecto de
   bloque, que es justo lo que se viene a mirar. */
.feed-grilla{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--f-linea);}
.feed-pieza{
  aspect-ratio:1; margin:0; padding:10px 9px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  background:var(--f-clara); color:var(--f-tinta);
}

/* --- La comparacion --- */
.feed-comparacion{display:grid; grid-template-columns:repeat(2,1fr); gap:34px; max-width:880px; margin:0 auto;}
@media (max-width:760px){ .feed-comparacion{grid-template-columns:1fr; gap:46px;} }
.feed-caso h4{text-align:center; margin:0 0 16px; font-size:var(--fs-lead); color:#fff;}
/* Aqui ya no hay dibujos: a la izquierda va la captura de un perfil de verdad,
   cortada en sus nueve publicaciones, y a la derecha nueve plantillas del pack.
   Las piezas pasan a 3:4 porque asi recorta hoy Instagram la grilla del perfil:
   la captura ya viene en esa proporcion, y una plantilla de 1080x1350 pierde
   solo un filo a cada lado, el mismo que pierde en el telefono. La separacion
   va en blanco, como en la aplicacion. */
.feed-comparacion .feed-pieza{aspect-ratio:3/4;}
.feed-comparacion .feed-grilla{background:#fff;}

.feed-pie{max-width:820px; margin:24px auto 0; font-size:var(--fs-sm); line-height:1.55; color:var(--muted); text-align:center;}

/* --- Una plantilla de cerca, en dos colores ---
   El feed de mas arriba se ve de lejos y no deja leer nada. Esta es la unica
   parte de la pagina donde se alcanza a ver una plantilla por dentro, y de paso
   contesta la pregunta que mas se repite: "¿de verdad puedo dejarlas con mis
   colores?". Dos veces la misma plantilla, exportada tal cual: con su paleta, y
   con la paleta y la foto cambiadas.
   La cabecera sigue una referencia que trajo ella (rotulo, titulo con la segunda
   mitad en cursiva y una ampolleta, bajada), armada con el .section-head de la
   portada. La ampolleta va dibujada en naranjo y no como emoji: el emoji es
   amarillo, un color que el sitio no usa. */
.modelo-cab{margin:0 auto 40px; text-align:center;}
.modelo-idea{
  display:inline-block; width:.8em; height:.8em; margin-left:.25em; vertical-align:-.06em;
  fill:none; stroke:var(--orange); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.modelo-par{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:900px; margin:0 auto;}
@media (max-width:700px){ .modelo-par{grid-template-columns:1fr; gap:36px; max-width:360px;} }
.modelo-etiqueta{
  display:block; width:-moz-fit-content; width:fit-content; margin:0 auto 14px;
  padding:8px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.26);
  font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff;
}
/* La pieza es la imagen misma, en 4:5 como se publica: ya trae su diseño, asi
   que la caja solo pone el redondeo y la sombra de las demas tarjetas. */
.modelo-pieza{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius); box-shadow:0 18px 44px rgba(0,0,0,.45);
}

/* Las dos listas de la comparacion llevan el mismo visto y la misma aspa que el
   resto del sitio, pero escritas aparte: la regla general vive bajo
   .blog-article, y esa clase aqui no se puede usar porque su "ul{display:flex}"
   le gana a la grilla del feed y la deja en una sola columna.
   El ">" es lo que separa estas dos listas de la grilla, que tambien es un ul
   pero va anidada mas adentro. */
.feed-caso > ul{display:flex; flex-direction:column; gap:9px; max-width:400px; margin:20px auto 0;}
.feed-caso > ul > li{position:relative; padding-left:22px; font-size:var(--fs-sm); line-height:1.45; color:var(--muted);}
.feed-caso > ul > li::before{content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700;}
.feed-caso > ul.lista-no > li::before{content:"×"; color:var(--muted);}

/* Piezas con archivo propio: la imagen tapa el dibujo. El "cover" recorta por
   el centro sin deformar, asi que da lo mismo el tamaño con que salga de Canva:
   un cuadrado, un 1080x1350 o una captura, siempre llena el recuadro.
   En el feed la imagen va como <img> y no de fondo, para que sellar.mjs le
   ponga version igual que a las demas: si se cambia una foto sin cambiarle el
   nombre, el navegador de quien ya visito la pagina seguiria mostrando la vieja. */
.feed-pieza.con-foto{display:block; padding:0;}
.feed-pieza.con-foto > img{display:block; width:100%; height:100%; object-fit:cover;}

/* ===== TIRA DE VENTAJAS =====
   Seis respuestas que se dan solas y que no merecen un parrafo cada una: si
   sirve con Canva gratis, en que aparato se edita, cuantas plantillas son.
   Van en tira y no en tarjetas grandes porque se leen de una pasada, antes de
   entrar a leer nada. El circulo del icono es el mismo de los beneficios de la
   portada: no hay razon para inventar otro. */
.ventajas{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:0 auto;}
@media (max-width:900px){ .ventajas{grid-template-columns:1fr 1fr; max-width:680px;} }
@media (max-width:560px){ .ventajas{grid-template-columns:1fr; max-width:400px;} }
.ventaja{
  display:flex; align-items:center; gap:14px;
  padding:17px 19px; border-radius:var(--radius);
  background:#0E1F40; border:1px solid rgba(255,255,255,.12);
}
.ventaja-icono{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border:1.5px solid var(--orange); border-radius:50%; color:var(--orange);
}
.ventaja-icono svg{width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.ventaja-texto{font-size:var(--fs-sm); font-weight:600; line-height:1.4; color:#fff;}

/* ==========================================================================
   GALERÍA DE PLANTILLAS
   Una tarjeta por colección: nueve plantillas en 3×3, como se ven seguidas en
   un perfil de Instagram, y el nombre de la colección abajo. El HTML lo
   escribe galeria-plantillas.mjs.
   ========================================================================== */
.galeria-cab{margin-left:auto; margin-right:auto; text-align:center;}
.galeria-cinta{display:flex; flex-wrap:wrap; justify-content:center; gap:30px 22px;}
.galeria-coleccion{flex:0 1 330px; margin:0; text-align:center;}
.galeria-tarjeta{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px; background:#fff; border-radius:12px; box-shadow:0 20px 44px rgba(0,0,0,.45);}
.galeria-tarjeta li{aspect-ratio:4/5; overflow:hidden; background:#EDEBE6;}
.galeria-tarjeta li:nth-child(1){border-top-left-radius:8px;}
.galeria-tarjeta li:nth-child(3){border-top-right-radius:8px;}
.galeria-tarjeta li:nth-child(7){border-bottom-left-radius:8px;}
.galeria-tarjeta li:nth-child(9){border-bottom-right-radius:8px;}
.galeria-tarjeta img{display:block; width:100%; height:100%; object-fit:cover;}
.galeria-coleccion figcaption{display:inline-block; margin-top:14px; padding:6px 16px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em;}
.galeria-desliza{display:none;}
@media (max-width:980px){ .galeria-coleccion{flex-basis:calc(50% - 11px);} }
@media (max-width:560px){
  .galeria-cinta{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin:0 -28px; padding:4px 28px 18px; scrollbar-width:none;}
  .galeria-cinta::-webkit-scrollbar{display:none;}
  .galeria-coleccion{flex:0 0 82%; scroll-snap-align:center;}
  .galeria-desliza{display:block; text-align:center; font-size:var(--fs-sm); margin-top:4px;}
}

/* ==========================================================================
   CARRITO
   El sitio vende dos productos digitales que se pagan solos: el e-book y el
   pack de plantillas. El carrito existe sobre todo para que quien quiere los
   dos los pida en un mensaje y pague una vez, no para hacer una tienda.
   Las piezas las arma carrito.js; aqui van los colores y el lugar.
   ========================================================================== */

/* El boton de la cabecera aparece recien cuando hay algo adentro. Un carrito
   vacio colgando del menu en las doce paginas es ruido, y ademas promete una
   tienda que no es lo que este sitio es. */
.carrito-boton[hidden], [data-agregar][hidden]{display:none !important;}

.carrito-boton{
  position:relative; flex-shrink:0;
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  color:#fff; cursor:pointer; margin-left:auto;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.carrito-boton:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); transform:translateY(-1px);}
.carrito-boton svg{width:21px; height:21px; display:block;}

/* La cuenta va en naranjo con el numero en azul, igual que la inicial del aviso
   de venta: es el color con que este sitio manda el ojo a un punto. */
.carrito-cuenta{
  position:absolute; top:-5px; right:-5px;
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center;
  background:#F2600C; color:#0B1B3A;
  border-radius:999px; font-size:11px; font-weight:800; line-height:1;
}

.carrito-fondo{
  position:fixed; inset:0; z-index:185; background:rgba(2,8,38,.62);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s;
}
.carrito-fondo.abierto{opacity:1; visibility:visible; pointer-events:auto;}

.carrito-panel{
  position:fixed; top:0; right:0; z-index:190;
  width:min(92vw, 420px); height:100dvh;
  display:flex; flex-direction:column;
  background:#0E1F40; border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-24px 0 60px rgba(2,8,30,.55);
  transform:translateX(100%); visibility:hidden;
  transition:transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
}
.carrito-panel.abierto{transform:none; visibility:visible;}

body.carrito-abierto{overflow:hidden;}
/* Igual que con el menu del telefono: el boton verde quedaria encima del panel. */
body.carrito-abierto .flota-wsp{visibility:hidden;}

.carrito-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid rgba(255,255,255,.12);
}
.carrito-cab h2{margin:0; font-size:21px; color:#fff;}
.carrito-cerrar{
  width:44px; height:44px; flex-shrink:0; margin-right:-10px;
  background:none; border:none; color:#D3DBEA;
  font-size:30px; line-height:1; cursor:pointer; transition:color .18s ease;
}
.carrito-cerrar:hover{color:#fff;}

.carrito-cuerpo{flex:1; overflow-y:auto; padding:4px 22px 18px;}
.carrito-lista{list-style:none; margin:0; padding:0;}
.carrito-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:start;
  padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.carrito-item:last-child{border-bottom:none;}
.carrito-foto{width:56px; height:56px; object-fit:cover; border-radius:var(--radius-sm); background:#0B1B3A;}
.carrito-datos{display:flex; flex-direction:column; gap:3px; min-width:0;}
.carrito-nombre{color:#fff; font-weight:600; line-height:1.3; text-decoration:none;}
.carrito-nombre:hover{color:var(--orange);}
.carrito-detalle{color:#B9C4DA; font-size:13px;}
.carrito-quitar{
  align-self:flex-start; margin-top:5px; padding:0;
  background:none; border:none; font-family:inherit; font-size:13px;
  color:#9AA6C0; text-decoration:underline; cursor:pointer; transition:color .18s ease;
}
.carrito-quitar:hover{color:var(--orange);}
.carrito-precio{color:#fff; font-weight:700; white-space:nowrap;}

.carrito-vacio{color:#D3DBEA; margin:24px 0 16px;}
.carrito-sugerencias{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.carrito-sugerencias a{
  display:block; padding:15px 17px;
  background:#0B1B3A; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  color:#E9EDF7; text-decoration:none; line-height:1.4;
  transition:background .18s ease, border-color .18s ease;
}
/* Se oscurecen al pasar el puntero, como el resto de los recuadros del sitio. */
.carrito-sugerencias a:hover{background:#081630; border-color:rgba(255,255,255,.22); color:#fff;}

.carrito-pie{
  padding:18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,.12); background:#0B1B3A;
}
.carrito-pie:empty{display:none;}
.carrito-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px;}
.carrito-total span{color:#D3DBEA; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;}
.carrito-total strong{color:#fff; font-family:var(--font-display); font-size:27px; line-height:1;}
.carrito-nota{color:#B9C4DA; font-size:13px; line-height:1.5; margin:14px 0 0;}
/* La segunda via va como enlace y no como boton: si las dos fueran boton, la
   decision de pagar se convierte en una eleccion entre dos cosas parecidas. */
.carrito-otra-via{
  display:block; margin-top:12px; text-align:center; color:#B9C4DA;
  font-size:13.5px; text-decoration:underline; text-underline-offset:3px;
}
.carrito-otra-via:hover{color:#fff;}
.carrito-color{display:block; color:#E9EDF7; font-size:14px; font-weight:600; margin:0 0 12px;}
.carrito-color select{display:block; width:100%; margin-top:6px; padding:11px 12px; border-radius:8px; border:1px solid #2C4275; background:#0E1E42; color:#fff; font:inherit; font-size:15px;}
.carrito-color select:focus-visible{outline:3px solid #F2600C; outline-offset:2px;}
.carrito-sello{margin:14px 0 0; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#B9C4DA; font-size:12.5px; line-height:1.45;}
.carrito-sello-titulo{display:flex; align-items:center; gap:8px; margin:0 0 8px; color:#fff; font-size:14px; font-weight:700;}
.carrito-sello-titulo svg{flex:none; color:#7FD6A4;}
.carrito-sello ul{margin:0; padding:0 0 0 18px;}
.carrito-sello li{margin:0 0 4px;}
.carrito-nota[role="alert"]{color:#FFB4A0; margin:0 0 12px;}
button.btn-block[data-pagar][disabled]{opacity:.6; cursor:default;}

/* En el telefono el carrito va junto al boton de las tres rayas, que es donde
   la mano ya esta. En el computador va al final de todo, despues de "Solicitar
   asesoria": puesto antes queda separando el logo del menu, como si fuera una
   opcion mas de navegacion. */
@media (max-width:1040px){
  .carrito-boton{margin-left:auto; margin-right:6px;}
}
@media (min-width:1041px){
  .carrito-boton{order:3; margin-left:14px;}
  /* El menu se va a la derecha con el carrito. Sin esto los tres elementos se
     reparten el ancho y el menu termina flotando en el medio de la cabecera. */
  nav.primary-nav{margin-left:auto;}
}

/* Cada colección se compra por separado, así que la tarjeta de la galería dejó
   de ser solo una muestra: lleva cuántas plantillas trae, cuánto vale y su
   propio botón. El precio sale de la cantidad, y eso lo calcula
   galeria-plantillas.mjs, no esta hoja. */
.galeria-cuantas{margin:9px 0 0; color:#B9C4DA; font-size:var(--fs-sm);}
.galeria-precio{
  margin:3px 0 13px;
  font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.1; color:#fff;
}
.galeria-precio .amount-antes{font-size:.62em;}
.galeria-precio.oferta .amount-oferta{color:var(--orange);}
/* Un poco más angosto que un botón suelto: dentro de la tarjeta, con el relleno
   de 32 px se comía el ancho y la palabra «carrito» se iba a la segunda línea. */
.galeria-coleccion [data-agregar]{width:100%; padding:13px 18px !important;}


/* ==========================================================================
   REGALOS Y VALOR SUELTO
   Dos piezas de los servicios por niveles. Responden la misma pregunta: por
   que conviene tomarlo completo en vez de ir comprando las partes.
   Van al final del archivo, despues del modo oscuro, para no pelear con sus
   !important: el sitio se pinta siempre en azul, no hay hoja clara que valga.
   ========================================================================== */

/* Los regalos no entran en la lista de vistos de la tarjeta: ahi se leerian
   como una prestacion mas y dejarian de parecer un extra. Caja aparte, un
   tono mas clara que las tarjetas y con el borde naranjo de la marca. Plana,
   sin degradado: el fondo de este sitio va parejo. */
.regalos{
  background:#14264A;
  border:1px solid rgba(242,96,12,.5);
  border-radius:var(--radius);
  padding:30px 28px 26px;
  max-width:1080px; margin:0 auto;
}
.regalos-cinta{
  display:inline-block; margin-bottom:16px;
  background:var(--orange); color:#0B1B3A;
  font-size:var(--fs-label); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border-radius:999px; padding:6px 14px;
}
.regalos h4{font-size:var(--fs-h3); color:#fff; margin:0 0 8px;}
.regalos-bajada{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin:0 0 26px; max-width:680px;}
.regalos-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
@media (max-width:1060px){.regalos-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:620px){.regalos-grid{grid-template-columns:1fr; gap:24px;}}
.regalo{border-top:2px solid rgba(246,148,92,.45); padding-top:14px;}
.regalo h5{font-size:var(--fs-body); font-weight:700; color:#fff; margin:0 0 6px; line-height:1.35;}
.regalo p{font-size:var(--fs-sm); line-height:1.55; color:var(--muted); margin:0 0 12px;}
.regalo .regalo-valor{font-size:var(--fs-sm); font-weight:700; color:var(--orange-light); margin:0;}
.regalo-valor s{color:#9AA6C0; font-weight:500; margin-right:6px;}

/* Lo que valdria suelto. Lista y no tabla: en el telefono una tabla de dos
   columnas con montos se comprime hasta partir los numeros en dos lineas, y
   el numero que se viene a mirar es justamente el ultimo. */
.valor-par{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; max-width:1080px; margin:0 auto;}
@media (max-width:900px){.valor-par{grid-template-columns:1fr; max-width:620px;}}
.valor-caja{
  display:flex; flex-direction:column;
  background:#0E1F40; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:26px 24px;
}
.valor-caja.destacada{border-color:rgba(242,96,12,.55);}
.valor-nivel{font-size:var(--fs-h3); font-weight:700; color:#fff; margin:0 0 4px;}
.valor-nivel-sub{font-size:var(--fs-sm); color:var(--muted); margin:0 0 20px;}
.valor-lista{list-style:none; margin:0 0 20px; padding:0; flex-grow:1;}
.valor-lista li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.45; color:var(--ink);
}
.valor-lista li b{color:#fff; font-weight:600; white-space:nowrap;}
.valor-lista li.regalo-fila span::before{
  content:"REGALO"; display:inline-block; margin-right:8px;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:#0B1B3A; background:var(--orange-light);
  border-radius:999px; padding:2px 7px;
}
.valor-lista li.regalo-fila b{color:var(--orange-light);}
.valor-suma{display:flex; justify-content:space-between; gap:16px; font-size:var(--fs-sm); color:var(--muted); margin:0 0 10px;}
.valor-suma b{color:var(--ink); font-weight:600; white-space:nowrap;}
.valor-pagas{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:var(--fs-body); font-weight:700; color:#fff; margin:0 0 14px;}
.valor-pagas b{font-family:var(--font-display); font-size:30px; color:var(--orange); white-space:nowrap;}
/* La cifra del ahorro va en una banda, no en una pastilla: con la forma de
   los botones de esta pagina invitaba a hacerle clic y no lleva a ninguna
   parte. Versalitas y espaciado para que se lea como rotulo. */
.valor-ahorro{
  display:block; text-align:center;
  background:var(--orange); color:#0B1B3A;
  border-radius:var(--radius-sm); padding:12px;
  font-size:var(--fs-label); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}

/* El aviso de los regalos dentro de la tarjeta: una linea, justo bajo el
   entregable, para que quien no baje hasta el bloque de regalos sepa igual
   que estan. */
.plan-regalo{
  font-size:var(--fs-sm); font-weight:700; line-height:1.5;
  color:var(--orange-light) !important; margin:0 0 20px;
}


/* ==========================================================================
   EL DESPLEGABLE DE SERVICIOS, EN OSCURO
   El panel se diseño cuando la hoja era clara: fondo blanco y texto en navy.
   El modo oscuro le cambio el fondo a #0E1F40 junto con las tarjetas, pero no
   el texto, y ese navy quedaba del mismo color que el panel que lo sostiene.
   ========================================================================== */
nav.primary-nav .nav-dropdown-panel a{color:#fff;}
nav.primary-nav .nav-dropdown-panel a:hover{color:#fff; background:rgba(255,255,255,.07);}
.nav-dropdown-panel strong{color:#fff;}
.nav-dropdown-panel small{color:#CDD6E7;}
/* La sombra clara del diseño original no se ve contra el azul: se oscurece. */
.nav-dropdown-panel{box-shadow:0 18px 48px rgba(2,8,38,.55);}
/* En el cajon del telefono el panel va sin borde propio ni sombra: ahi es una
   sublista del menu, no una ventana flotante. */
@media (max-width:1040px){
  .nav-dropdown-panel{box-shadow:none; border:0 !important; background:rgba(255,255,255,.05) !important;}
  /* En el cajon la lista ya viene abierta: una flecha de «desplegar» al lado
     de algo desplegado promete un toque que no hace nada. */
  .nav-chevron{display:none;}
}


/* Tres niveles en la comparacion de valor. Mismo corte que .plans-grid.tres:
   pasado ese ancho las columnas dejan de caber sin partir los montos. */
.valor-par.tres{grid-template-columns:repeat(3, 1fr);}
.valor-par.tres .valor-pagas{font-size:var(--fs-sm);}
.valor-par.tres .valor-pagas b{font-size:25px;}
@media (max-width:1000px){.valor-par.tres{grid-template-columns:1fr; max-width:620px;}}


/* Un solo nivel en la comparacion de valor: la caja se queda del ancho de una
   columna en vez de estirarse de lado a lado, que dejaba los montos perdidos a
   media pantalla. */
.valor-par.uno{grid-template-columns:1fr; max-width:620px;}


/* ==========================================================================
   BENEFICIOS EN UNA PANTALLA
   Una tarjeta por servicio, con lo que cambia en una linea de antes y una de
   ahora. La tabla de cinco filas que habia hablaba solo de la IA y ocupaba
   dos pantallas; esta cubre los seis productos y cabe en una. Cada tarjeta
   lleva a su servicio: quien se reconoce en un «antes» ya sabe donde ir.
   ========================================================================== */
.benef{padding-block:72px}
.benef-cab{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  column-gap:64px; align-items:end; margin-bottom:36px;
}
.benef-titulo .label{margin-bottom:12px}
.benef-titulo h2{font-size:var(--fs-h2); line-height:1.08; margin:0 0 12px}
.benef-titulo p{font-size:var(--fs-body); line-height:1.55; color:var(--muted); margin:0; max-width:520px}
/* Las cifras en fila, a la derecha del titulo. Chicas a proposito: son la
   prueba de lo que se promete a la izquierda, no el titular. */
.benef-cifras{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.benef-cifras li{display:grid; grid-template-columns:56px 1fr; align-items:center; gap:14px}
.benef-cifras b{
  font-family:var(--font-display); font-weight:800; font-size:44px; line-height:1;
  color:var(--orange); letter-spacing:-.03em; text-align:right;
}
.benef-cifras span{font-size:var(--fs-sm); line-height:1.4; color:#DCE3F0}

.benef-grilla{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.benef-tarjeta{
  display:flex; flex-direction:column; gap:6px;
  padding:20px 22px; border-radius:var(--radius);
  background:#0E1F40; border:1px solid rgba(255,255,255,.12);
  color:inherit; text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.benef-tarjeta:hover, .benef-tarjeta:focus-visible{background:#081630; border-color:rgba(242,96,12,.55)}
.benef-servicio{
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange-light);
}
.benef-servicio span{font-size:20px; line-height:1; transition:transform .2s ease}
.benef-tarjeta:hover .benef-servicio span{transform:translateX(3px)}
.benef-tarjeta h3{font-size:19px; line-height:1.25; color:#fff; margin:2px 0 6px}
.benef-antes, .benef-ahora{
  display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start;
  margin:0; font-size:var(--fs-sm); line-height:1.4;
}
.benef-antes{color:#9AA6C0}
.benef-ahora{color:#fff; font-weight:600}
.benef-antes svg, .benef-ahora svg{
  width:16px; height:16px; margin-top:2px; fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.benef-antes svg{stroke:#6B7894}
.benef-ahora svg{stroke:var(--orange)}

@media (max-width:980px){
  .benef-cab{grid-template-columns:1fr; row-gap:26px}
  .benef-grilla{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .benef{padding-block:56px}
  .benef-grilla{grid-template-columns:1fr}
}


/* ==========================================================================
   LAS PAGINAS DE SERVICIO, A TODO EL ANCHO
   La columna de lectura se cortaba en 680px contra la izquierda y la mitad
   derecha del contenedor quedaba vacia. El largo del renglon no se toca: sobre
   unos 75 caracteres cuesta volver al comienzo de la linea siguiente. Lo que
   cambia es la distribucion: los titulos pasan a una columna propia a la
   izquierda y el texto corre a su derecha, y el precio del encabezado se va a
   una caja al lado del titulo. Bajo 900px todo vuelve a una columna.
   ========================================================================== */
@media (min-width:900px){
  .entrada.servicio{--col-titulos:240px; --col-hueco:56px}

  .entrada.servicio .entrada-cab{
    display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
    column-gap:56px; align-items:center;
  }
  .entrada.servicio .entrada-cab > *{max-width:none}
  .entrada-compra{
    background:#0E1F40; border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius); padding:26px 26px 24px;
  }
  /* El margen de arriba del precio venia escrito en la etiqueta, para cuando
     iba debajo del parrafo. Dentro de la caja sobra. */
  .entrada-compra .amount{margin-top:0 !important}
  .entrada-compra .hero-actions{flex-direction:column; align-items:stretch; gap:14px}
  .entrada-compra .hero-actions .btn{justify-content:center}
  .entrada-compra .hero-actions .link-action{align-self:center}

  .entrada.servicio .entrada-cuerpo,
  .entrada.servicio .servicio-bloque.angosto{
    display:grid; grid-template-columns:var(--col-titulos) minmax(0,720px);
    column-gap:var(--col-hueco); align-items:start;
  }
  .entrada.servicio .entrada-cuerpo > *,
  .entrada.servicio .servicio-bloque.angosto > *{grid-column:2; max-width:none; margin-left:0}
  /* Un titulo y el primer bloque que le sigue quedan en la misma fila: la
     rejilla los pone juntos porque el titulo va en la columna 1 y lo que
     sigue en la 2. Los margenes no se colapsan dentro de una rejilla, asi que
     los dos arrancan con el mismo. */
  .entrada.servicio .entrada-cuerpo > h4,
  .entrada.servicio .servicio-bloque.angosto > .plans-band-label{grid-column:1; margin:0}
  .entrada.servicio .entrada-cuerpo > h4:not(:first-child),
  .entrada.servicio .entrada-cuerpo > h4:not(:first-child) + *{margin-top:38px}
  .entrada.servicio .entrada-cuerpo > h4{position:sticky; top:calc(var(--alto-cabecera) + 16px)}
  .entrada.servicio .entrada-cuerpo .faq-list{margin:0}
  .entrada.servicio .servicio-bloque.angosto > .plans-band-label{font-size:var(--fs-lead); line-height:1.3}
}


/* El regalo de las plantillas dentro del cajon del carrito: aparece solo si
   adentro hay una coleccion o el pack, y mientras el regalo este vigente. */
.carrito-regalo{
  margin:14px 0 0; padding:12px 14px; border-radius:var(--radius);
  font-size:var(--fs-sm); line-height:1.45; color:#fff;
  background:rgba(242,96,12,.12); border:1px solid rgba(242,96,12,.45);
}
.carrito-regalo strong{color:var(--orange-light)}


/* Proceso: bajo cada paso, lo que hace ahi cada servicio. Separado por una
   linea y en letra mas chica: el paso es el titular y los servicios son el
   detalle para quien ya sabe cual le interesa. */
#proceso{padding-block:52px}
#proceso .section-head{margin-bottom:24px}
#proceso .process-step{padding:20px 20px 18px}
#proceso .section-head p{font-size:var(--fs-body); color:var(--muted)}
.proceso-servicios{
  list-style:none; margin:12px 0 0; padding:12px 0 0;
  border-top:1px solid rgba(255,255,255,.12); display:grid; gap:8px;
}
.proceso-servicios li{font-size:14px; line-height:1.4; color:#DCE3F0}
.proceso-servicios li::before{content:none !important}
.proceso-servicios span{
  display:block; margin-bottom:2px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--orange-light);
}


/* La version de despues del 31 de octubre queda oculta hasta que carrito.js la
   muestra. El !important es contra el display propio de .valor-suma o
   .valor-ahorro, que si no le ganaria al hidden. */
[data-regalo-despues][hidden]{display:none !important}


/* ==========================================================================
   REDISEÑO 24-09-2026
   Lleva a las páginas interiores el lenguaje de la portada nueva: tipografía
   Bricolage Grotesque con acento en Instrument Serif itálica, cabecera flotante
   en pastilla, etiquetas en monoespaciada y tarjetas más redondeadas.
   Va al final: pisa a las capas de arriba sin tocar sus reglas.
   ========================================================================== */

@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font-display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --radius:18px;
  --alto-cabecera:88px;
}

/* --- Titulares: Bricolage apretada, con la palabra clave en serif itálica --- */
h1,h2,h3{font-family:var(--font-display); letter-spacing:-.032em; text-wrap:balance;}
h1{line-height:1.02; letter-spacing:-.04em;}
h2{line-height:1.06;}
h1 em, h2 em, h3 em, .accent-serif{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:-.015em; color:#FF7A2F; padding-right:.06em;
}
h1 em, h2 em{font-size:1.06em;}
p{text-wrap:pretty;}

/* --- Etiquetas: monoespaciada con punto naranjo, como en la portada --- */
.label, .plans-band-label{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-weight:500; font-size:.75rem; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase;
}
.label::before, .plans-band-label::before{
  content:""; flex:none; width:.45rem; height:.45rem; border-radius:50%;
  background:#F2600C; box-shadow:0 0 0 4px rgba(242,96,12,.18);
}

/* --- Cabecera flotante en pastilla ------------------------------------------
   Sin backdrop-filter, como pide el comentario de arriba: lo desenfocado
   convierte a la cabecera en el marco del menú fixed del teléfono. */
header#site-header{
  background:transparent !important; border-bottom:0 !important; box-shadow:none !important;
  padding:12px 16px 0; pointer-events:none;
}
header#site-header .nav-wrap{
  pointer-events:auto; max-width:1320px; padding:8px 10px 8px 18px;
  border-radius:999px; background:rgba(8,20,48,.94);
  border:1px solid rgba(186,205,255,.16); box-shadow:0 16px 40px -22px rgba(0,0,0,.75);
  transition:background-color .35s ease;
}
header#site-header.scrolled .nav-wrap{background:rgba(6,15,38,.985);}
header#site-header .brand-logo{height:50px;}
nav.primary-nav a{font-size:.93rem;}
nav.primary-nav > a, nav.primary-nav .nav-dropdown > a{border-radius:999px; color:rgba(255,255,255,.74);}
nav.primary-nav > a:hover, nav.primary-nav .nav-dropdown > a:hover, nav.primary-nav a.active{color:#fff;}
nav.primary-nav > a::after, nav.primary-nav .nav-dropdown > a::after{
  left:50%; right:auto; bottom:.28rem; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; transform:scale(0); transition:transform .25s ease;
}
nav.primary-nav > a:hover::after, nav.primary-nav > a.active::after,
nav.primary-nav .nav-dropdown > a:hover::after{transform:scale(1);}
.nav-cta{padding:12px 20px !important; margin-left:6px;}

/* El desplegable de servicios: tarjeta navy en vez de panel blanco */
.nav-dropdown-panel{
  background:#0B1B3A !important; border:1px solid rgba(186,205,255,.18) !important;
  border-radius:24px !important; box-shadow:0 30px 60px -20px rgba(0,0,0,.8) !important;
}
nav.primary-nav .nav-dropdown-panel a{color:#fff; border-radius:16px;}
nav.primary-nav .nav-dropdown-panel a:hover{background:rgba(255,255,255,.07); color:#fff;}
.nav-dropdown-panel small{color:#BAC5DE;}

@media (max-width:1040px){
  header#site-header{padding:10px 12px 0;}
  header#site-header .nav-wrap{padding:6px 8px 6px 14px;}
  header#site-header .brand-logo{height:44px;}
  .menu-toggle{border-radius:50%; background:rgba(255,255,255,.08);}
  nav.primary-nav{border-radius:28px 0 0 28px;}
  nav.primary-nav > a, nav.primary-nav .nav-dropdown > a{border-radius:0;}
}

/* --- Tarjetas y botones -------------------------------------------------- */
.plan-card, .benefit-item, .process-step, .blog-card, .contact-wrap, .plan-tier, .ai-callout,
.hermano, .dx-area-card, .faq-list details, .regalo-valor, .valor-caja{border-radius:22px !important;}
.plan-result, .blog-tip{border-radius:16px !important;}
.btn{font-family:var(--font-body); letter-spacing:.08em;}
.link-action{font-weight:650;}

/* --- Pie -------------------------------------------------------------------- */
footer{border-radius:36px 36px 0 0; margin-top:24px;}
.footer-brand{font-family:var(--font-display);}
.footer-links a{font-weight:550;}

/* La marca es el nombre en texto (ya no hay dibujo) */
.brand-word { font: 800 1.6rem/1 var(--font-display); letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.brand-word b { color: #FF7A2F; font-weight: 800; }
.brand-word i { color: #8593B3; font-style: normal; font-weight: 600; }
.footer-brand .brand-word { font-size: 1.5rem; }
@media (max-width: 720px) { .brand-word { font-size: 1.35rem; } }

/* Pie minimalista en columnas (Compañía / Soluciones / Ayuda) */
.footer-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; padding:8px 0 34px; margin-bottom:24px; border-bottom:1px solid #28365C;}
.footer-col h3{font-family:var(--font-display); font-size:var(--fs-lead); font-weight:700; color:#fff; margin:0 0 14px; line-height:1.2;}
.footer-col ul{list-style:none; display:grid; gap:2px;}
.footer-col a{font-size:var(--fs-sm); color:#DCE3F0; font-weight:500; display:inline-block; padding:6px 0;}
.footer-col a:hover{color:var(--orange-light);}
.footer-redes{display:flex; gap:10px; margin-top:16px;}
.footer-redes a{display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid #3A4A72; color:#fff;}
.footer-redes a:hover{background:var(--orange); border-color:var(--orange); color:var(--navy);}
.footer-redes svg{width:18px; height:18px;}
@media (max-width:720px){.footer-cols{grid-template-columns:1fr 1fr;} .footer-col:last-child{grid-column:1 / -1;}}
.footer-brand .brand-logo{height:56px;}