/* =============================================================================
   TERVAN — CSS de producción · Tema hijo Divi 5 + WPForms
   Origen: tervan.css del diseño aprobado (Claude Design, 23/09/2026). Cambios respecto a la maqueta:
   · Eliminadas las clases de maqueta (.tv-abs, .is-hover, .is-focus, .is-active, .is-sending) y lo no usado.
   · Variantes .tv--t / .tv--m convertidas en @media (max-width:1199px) / (max-width:767px).
   · Animaciones en pausa hasta que tervan.js añade .is-in al bloque .tv-anim (IntersectionObserver).
   · Piezas decorativas dentro de textos editables sin <span> vacíos: se dibujan con pseudo-elementos.
   · Estilos que en la maqueta iban en línea pasan a clases (.tv-legend, .tv-dims, .tv-claim, …).
   · Borde de campos WPForms sobre navy: slate 35 % → 60 % (contraste ≥ 3:1, WCAG 1.4.11).
   Medidas: referencia exacta a 1440 / 834 / 390 (ver /referencia). Layout de filas/columnas: Divi nativo.

   Índice
   00 Tokens            06 Header y menú        12 Cómo trabajamos (escalera)
   01 Base              07 Hero                 13 IDENTIX (cadena, bloque)
   02 Tipografía        08 Capacidades          14 TERVAN (declaración)
   03 Etiquetas         09 El problema          15 Contacto + WPForms
   04 Botones           10 Qué construimos      16 Footer
   05 Fondos de sección 11 Un sistema           17 Movimiento · 18 Reduced motion
   ============================================================================= */

/* ---------- 00 Tokens (equivalen a las variables de diseño de Divi) ---------- */
:root{
  --navy:#0B1320;--blue:#2563EB;--graphite:#334155;--slate:#94A3B8;--mist:#E5E7EB;--off:#F7F8FA;--white:#FFFFFF;
  --signal:#F87171;                       /* solo validación del formulario */
  --line-navy:rgba(148,163,184,.18);      /* filete sobre navy */
  --fd:"Montserrat",system-ui,sans-serif;--ft:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);     /* entradas */
  --ease-s:cubic-bezier(.65,0,.35,1);     /* trazos */
  --m:80px;                               /* margen lateral */
  --hh:88px;                              /* alto del header */
  --tv-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M0 5H14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");  /* flecha 16×10 del diseño (máscara) */
}
@media (max-width:1199px){:root{--m:48px;--hh:72px}}
@media (max-width:767px){:root{--m:20px;--hh:64px}}

/* ---------- 01 Base (clase tv-sec en cada Sección de Divi, incluidas header y footer) ---------- */
.tv-sec{position:relative;overflow:hidden;font-family:var(--ft);color:var(--graphite);-webkit-font-smoothing:antialiased}
.tv-sec *,.tv-sec *::before,.tv-sec *::after{box-sizing:border-box}
.tv-sec :where(h1,h2,h3,h4,p,ul){margin:0;padding:0}
.tv-sec ul{list-style:none}
:where(.tv-sec) a{color:inherit;text-decoration:none}
.tv-sec a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.tv-sec[id]{scroll-margin-top:var(--hh)}
.tv-white{background-color:var(--white)}
.tv-off{background-color:var(--off)}
.tv-dark{background-color:var(--navy);color:var(--mist)}

/* SVG en módulos de Código */
.tv-svg{display:block;max-width:100%;height:auto;overflow:visible}
.s-t{font:600 10.5px var(--ft);letter-spacing:.14em;text-transform:uppercase}
.s-f{font:500 13px var(--ft)}
.s-n{font:700 12.5px var(--fd);letter-spacing:.08em;text-transform:uppercase}

/* Contenedor de piezas decorativas (módulo de Código con clase tv-deco): ocupa la columna sin afectar al flujo */
.tv-deco{position:absolute!important;inset:0;margin:0!important;padding:0!important;pointer-events:none}
.tv-deco .et_pb_code_inner{position:static}

/* ---------- 02 Tipografía ---------- */
.tv-h1{font:700 100px/.9 var(--fd);letter-spacing:-.045em;text-transform:uppercase;color:var(--white)}
.tv-h1--contact{font-size:88px;letter-spacing:-.04em}
.tv-h1--footer{font-size:104px;color:var(--navy)}
.tv-h2{font:700 60px/1 var(--fd);letter-spacing:-.03em;text-transform:uppercase;color:var(--navy)}
.tv-dark .tv-h2{color:var(--white)}
.tv-h3{font:700 26px/1.12 var(--fd);letter-spacing:-.01em;text-transform:uppercase;color:var(--navy)}
.tv-dark .tv-h3{color:var(--white)}
.tv-num{font:600 40px/.9 var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--navy)}
.tv-line{display:block;white-space:nowrap}
.tv-key{color:var(--blue)}
/* Punto final de marca: <span class="tv-dotted">cómo</span> */
.tv-dotted::after{content:"";display:inline-block;width:.15em;height:.15em;background:var(--blue);margin-left:.05em}
.tv-support{font:600 13px/1.5 var(--ft);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.tv-lead{font:400 19px/1.6 var(--ft)}
.tv-body{font:400 16px/1.65 var(--ft)}
.tv-small{font:500 14px/1.5 var(--ft)}
.tv-dark .tv-lead,.tv-dark .tv-body{color:var(--mist)}
.tv-note{font:500 12px/1.5 var(--ft);color:var(--slate)}
.tv-claim{font:600 26px/1.3 var(--fd);letter-spacing:-.01em;text-transform:uppercase;color:var(--mist)}
@media (min-width:1200px){
  .tv-h2--46{font-size:46px}
  .tv-h2--52{font-size:52px}
}
@media (max-width:1199px){
  .tv-h1{font-size:88px}
  .tv-h1--contact{font-size:76px}
  .tv-h1--footer{font-size:60px}
  .tv-h2{font-size:44px}
  .tv-h3{font-size:22px}
  .tv-claim{font-size:24px}
  .tv-support br{display:none}
  /* Saltos de línea solo en desktop (títulos de tarjetas) */
  .tv-lines-d .tv-line{display:inline;white-space:normal}
}
@media (max-width:767px){
  .tv-h1{font-size:44px;letter-spacing:-.04em}
  .tv-h1--contact{font-size:38px;letter-spacing:-.035em}
  .tv-h1--footer{font-size:44px}
  .tv-h2{font-size:30px;letter-spacing:-.025em}
  .tv-h3{font-size:20px}
  .tv-lead{font-size:17px}
  .tv-support{font-size:12px}
  .tv-claim{font-size:20px}
}

/* ---------- 03 Etiquetas (eyebrow) ----------
   Sección:  <div class="tv-eb tv-eb--sec"><span class="tv-eb__n">04</span>El problema</div>  → 04 ──■ EL PROBLEMA
   Con nodo: <div class="tv-eb tv-eb--dot">Formulario de contacto</div>                     → ■ FORMULARIO…
   Simple:   <div class="tv-eb">Concepto</div> */
.tv-eb{display:flex;align-items:center;gap:12px;font:600 12px/16px var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.tv-eb__n{order:-2;font-variant-numeric:tabular-nums;color:var(--navy)}
.tv-eb--sec::before{content:"";order:-1;flex:none;width:40px;height:1px;background:currentColor;opacity:.5}
.tv-eb--sec::after,.tv-eb--dot::before{content:"";order:-1;flex:none;width:5px;height:5px;background:var(--blue)}
.tv-dark .tv-eb{color:var(--slate)}
.tv-dark .tv-eb__n{color:var(--white)}
@media (max-width:767px){
  .tv-eb{flex-wrap:wrap;row-gap:6px}
  .tv-eb--sec::before{width:20px}
}

/* ---------- 04 Botones (módulo Botón de Divi; la clase queda en el <a class="et_pb_button">) ----------
   tv-btn + variante (--primary | --ghost | --line | --nav) + tv-btn--arrow si lleva flecha.
   En Divi: sin estilos personalizados de botón ni icono; todo lo pone esta clase. */
.tv-btn,.et_pb_button.tv-btn,.et_pb_button.tv-btn:hover{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;height:56px;padding:0 22px 0 24px;border:0;border-radius:2px;font:600 13px/16px var(--ft);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.tv-btn:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.tv-btn.tv-btn--primary{background:var(--blue);color:var(--white)}
.tv-btn.tv-btn--primary:hover{background:var(--navy);color:var(--white)}
.tv-dark .tv-btn.tv-btn--primary:hover{background:var(--white);color:var(--navy)}
.tv-btn.tv-btn--ghost{border:1px solid rgba(229,231,235,.4);background:none;color:var(--white)}
.tv-btn.tv-btn--ghost:hover{border:1px solid var(--white);background:none;color:var(--white)}
.tv-btn.tv-btn--line{border:1px solid var(--navy);background:none;color:var(--navy)}
.tv-btn.tv-btn--line:hover{border:1px solid var(--navy);background:var(--navy);color:var(--white)}
.tv-btn.tv-btn--nav,.et_pb_button.tv-btn.tv-btn--nav:hover{height:44px;padding:0 18px}
.tv-btn.tv-btn--nav{background:var(--navy);color:var(--white)}
.tv-btn.tv-btn--nav:hover{background:var(--blue);color:var(--white)}
/* Iconos por defecto de Divi fuera; flecha 16×10 (misma geometría que el SVG del diseño), color = texto */
.et_pb_button.tv-btn::before,.et_pb_button.tv-btn:not(.tv-btn--arrow)::after{content:none;display:none}
.tv-btn.tv-btn--arrow::after,.tv-btn.tv-btn--arrow:hover::after{content:"";display:block;position:static;flex:none;width:16px;height:10px;margin:0;opacity:1;font-size:0;line-height:0;background:currentColor;
  -webkit-mask:var(--tv-arrow) no-repeat 0 0/16px 10px;
          mask:var(--tv-arrow) no-repeat 0 0/16px 10px;
  transition:transform .35s var(--ease)}
.tv-btn.tv-btn--arrow:hover::after{transform:translateX(4px)}
@media (max-width:1199px){.tv-btn.tv-btn--nav::after{display:none}}
@media (max-width:767px){.tv-btn,.et_pb_button.tv-btn{width:100%}}
/* Compatibilidad Divi 5.13 (módulo Botón): Divi añade color de acento (.et_pb_bg_layout_light.et_pb_module.et_pb_button),
   fondo y padding en hover, line-height !important, max-width:max-content y un translateY(-50%) en ::after.
   Mismos valores del diseño con mayor especificidad; no cambia nada respecto a los artboards. */
.et_pb_module.et_pb_button.tv-btn,.et_pb_module.et_pb_button.tv-btn:hover{display:inline-flex;flex-direction:row;padding:0 22px 0 24px;border:0;line-height:16px!important}
.et_pb_module.et_pb_button.tv-btn.tv-btn--nav,.et_pb_module.et_pb_button.tv-btn.tv-btn--nav:hover{padding:0 18px}
.et_pb_module.et_pb_button.tv-btn.tv-btn--primary{background:var(--blue);color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--primary:hover{background:var(--navy);color:var(--white)}
.tv-dark .et_pb_module.et_pb_button.tv-btn.tv-btn--primary:hover{background:var(--white);color:var(--navy)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--ghost{border:1px solid rgba(229,231,235,.4);background:none;color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--ghost:hover{border:1px solid var(--white);background:none;color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--line{border:1px solid var(--navy);background:none;color:var(--navy)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--line:hover{border:1px solid var(--navy);background:var(--navy);color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--nav{background:var(--navy);color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--nav:hover{background:var(--blue);color:var(--white)}
.et_pb_module.et_pb_button.tv-btn.tv-btn--arrow::after{top:auto;transform:none}
.et_pb_module.et_pb_button.tv-btn.tv-btn--arrow:hover::after{transform:translateX(4px)}
@media (max-width:767px){.et_pb_module.et_pb_button.tv-btn{width:100%;max-width:none}}

/* ---------- 05 Fondos de sección: líneas de columna (tv-cols) y resplandor (tv-glow) ---------- */
.tv-cols,.tv-glow{isolation:isolate}
.tv-cols::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(148,163,184,.075) 0 1px,transparent 1px var(--colstep));
  background-position:50% 0;background-size:calc(min(100%,1440px) - var(--m) * 2) 100%;background-repeat:no-repeat;
  --colstep:calc((100% + 24px) / 12)}                 /* 12 columnas + gutter 24 */
.tv-glow::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  left:calc(max(0px,50% - 720px) + var(--gx));top:var(--gy);width:var(--gs);height:var(--gs);
  background:radial-gradient(closest-side,rgba(37,99,235,.26),rgba(37,99,235,.08) 55%,rgba(37,99,235,0))}
#inicio{--gx:840px;--gy:120px;--gs:820px}
#sistema{--gx:660px;--gy:220px;--gs:600px}
#contacto{--gx:760px;--gy:380px;--gs:860px}
@media (max-width:1199px){
  #inicio{--gx:360px;--gy:520px;--gs:640px}
  #sistema{--gx:120px;--gy:560px;--gs:600px}
  #contacto{--gx:200px;--gy:560px;--gs:760px}
}
@media (max-width:767px){
  .tv-cols::before{--colstep:calc((100% + 24px) / 4)}  /* 4 columnas en móvil */
  #inicio{--gx:80px;--gy:560px;--gs:460px}
  #sistema{--gx:120px;--gy:420px;--gs:400px}
  #contacto{--gx:40px;--gy:560px;--gs:520px}
}

/* ---------- 06 Header (Theme Builder) y menú (módulo Menú con clase tv-menu) ---------- */
.tv-logo img,img.tv-logo{display:block;height:24px;width:auto}
.tv-logo--footer img,img.tv-logo--footer{height:26px}
@media (max-width:1199px){.tv-logo img,img.tv-logo,.tv-logo--footer img,img.tv-logo--footer{height:20px}}
@media (max-width:767px){.tv-logo:not(.tv-logo--footer) img,img.tv-logo:not(.tv-logo--footer){height:18px}}

/* Escritorio: 4 enlaces, subrayado azul de izquierda a derecha */
.et_pb_menu.tv-menu .et-menu{display:flex;align-items:center;gap:40px}
.et_pb_menu.tv-menu .et_pb_menu__menu>nav>ul.et-menu{margin:0}   /* Divi 5.13 pone margin 0 -11px a la lista */
.et_pb_menu.tv-menu .et_mobile_nav_menu{margin:-2px 0 0}          /* Divi 5.13 pone margin 0 6px a la hamburguesa y la baja 2 px */
.et_pb_menu.tv-menu .et-menu>li{padding:0;margin:0}
.et_pb_menu.tv-menu .et-menu>li>a{position:relative;padding:8px 0;font:500 14px/1 var(--ft);letter-spacing:0;text-transform:none;color:var(--navy);opacity:1}
.et_pb_menu.tv-menu .et-menu>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.et_pb_menu.tv-menu .et-menu>li>a:hover::after{transform:scaleX(1)}
.et_pb_menu.tv-menu .et-menu>li.tv-menu-cta{display:none}      /* "Hablemos" solo existe como ítem en el menú móvil */

/* Hamburguesa (2 trazos) → X, iconos del diseño */
.et_pb_menu.tv-menu .mobile_menu_bar{display:block;width:44px;height:44px;padding:0}
.et_pb_menu.tv-menu .mobile_menu_bar::before{content:"";display:block;position:static;width:44px;height:44px;font-size:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M12 18.25H40M20 25.75H40' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 0 0/44px 44px}
.et_pb_menu.tv-menu .mobile_nav.opened .mobile_menu_bar::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M15 15L29 29M29 15L15 29' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E")}
@media (max-width:767px){
  .et_pb_menu.tv-menu .mobile_nav:not(.opened) .mobile_menu_bar::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M14 18.25H40M22 25.75H40' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E")}
}

/* El módulo Menú de Divi cambia a hamburguesa a 980 px fijos; el diseño tablet llega hasta 1199. */
@media (min-width:981px) and (max-width:1199px){
  .et_pb_menu.tv-menu .et_pb_menu__menu{display:none}
  .et_pb_menu.tv-menu .et_mobile_nav_menu{display:flex}
}

/* Menú móvil a pantalla completa (≤1199). Composición según referencia/menu-movil-390.html. Sin JS. */
@media (max-width:1199px){
  .et_pb_menu.tv-menu .et_mobile_menu{list-style:none;position:fixed;left:0;right:0;top:var(--hh);bottom:0;height:auto;margin:0;padding:56px var(--m) 40px;border:0;background:var(--white);box-shadow:none;overflow-y:auto;counter-reset:tvnav}
  .et_pb_menu.tv-menu .et_mobile_menu li a{display:flex;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--mist);background:none;opacity:1;text-decoration:none;font:700 28px/1.12 var(--fd);letter-spacing:-.01em;text-transform:uppercase;color:var(--navy)}
  .et_pb_menu.tv-menu .et_mobile_menu li a::before{counter-increment:tvnav;content:counter(tvnav,decimal-leading-zero);font:600 12px/1 var(--ft);letter-spacing:.14em;color:var(--graphite)}
  /* Ítem "Hablemos": ruta decorativa (350×140) + botón primario + lema */
  .et_pb_menu.tv-menu .et_mobile_menu li.tv-menu-cta{margin-top:110.56px;padding-top:180px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='140' viewBox='0 0 350 140' fill='none'%3E%3Cpath d='M0 20 H120 Q132 20 132 32 V88 Q132 100 144 100 H250' stroke='%230B1320' stroke-width='1.5'/%3E%3Cpath d='M250 100 H350' stroke='%232563EB' stroke-width='2'/%3E%3Crect x='129' y='17' width='6' height='6' fill='%230B1320'/%3E%3Crect x='246' y='96' width='8' height='8' fill='%232563EB'/%3E%3C/svg%3E") no-repeat 0 0/350px 140px}
  .et_pb_menu.tv-menu .et_mobile_menu li.tv-menu-cta a{align-items:center;justify-content:space-between;height:56px;padding:0 22px 0 24px;border:0;border-radius:2px;background:var(--blue);color:var(--white);font:600 13px/16px var(--ft);letter-spacing:.12em}
  .et_pb_menu.tv-menu .et_mobile_menu li.tv-menu-cta a::before{content:none}
  .et_pb_menu.tv-menu .et_mobile_menu li.tv-menu-cta a::after{content:"";flex:none;width:16px;height:10px;background:currentColor;-webkit-mask:var(--tv-arrow) no-repeat 0 0/16px 10px;mask:var(--tv-arrow) no-repeat 0 0/16px 10px}
  .et_pb_menu.tv-menu .et_mobile_menu li.tv-menu-cta::after{content:"Encontramos cómo";display:block;margin-top:28px;font:600 11px/1 var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
}

/* ---------- 07 Hero (#inicio) ---------- */
.tv-strip{font:600 11px/1 var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.tv-scroll{display:flex;align-items:center;gap:12px}
.tv-scroll::after{content:"";width:1px;height:24px;background:var(--slate)}
.tv-plx{transition:transform .8s var(--ease)}
@media (max-width:767px){
  #inicio .tv-btn.tv-btn--primary{font-size:12px;letter-spacing:.1em}
  #inicio .tv-btn.tv-btn--ghost{justify-content:center}
}

/* ---------- 08 Capacidades (franja): <p class="tv-caps"><span>Software a medida</span> <span>CRM</span> <span>Automatización</span> <span>Sistemas de gestión</span></p> ---------- */
.tv-caps{display:flex;align-items:center;gap:20px;font:700 28px/1 var(--fd);letter-spacing:-.02em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.tv-caps>span{display:flex;align-items:center;gap:20px}
.tv-caps>span:not(:last-child){flex:1 1 auto}
/* conector: filete slate + nodo navy (5 px) que sobresale 1 px */
.tv-caps>span:not(:last-child)::after{content:"";flex:1 1 0;min-width:32px;height:5px;margin-right:-1px;
  background:linear-gradient(var(--navy),var(--navy)) 100% 0/5px 5px no-repeat,linear-gradient(var(--slate),var(--slate)) 0 2px/100% 1px no-repeat}
@media (max-width:1199px){  /* 2 filas de 2 */
  .tv-caps{flex-wrap:wrap;row-gap:0;font-size:30px}
  .tv-caps::after{content:"";order:1;flex-basis:100%}
  .tv-caps>span:nth-child(n+3){order:2;margin-top:28px}
  .tv-caps>span:nth-child(2){flex:none}
  .tv-caps>span:nth-child(2)::after{content:none}
}
@media (max-width:767px){  /* lista vertical con conectores verticales y nodo azul final */
  .tv-caps{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;font-size:24px}
  .tv-caps::after{content:none}
  .tv-caps>span,.tv-caps>span:nth-child(n){display:block;flex:none;order:0;margin:0}
  .tv-caps>span:not(:last-child)::after{content:"";display:block;min-width:0;width:1px;height:20px;margin:8px 0 8px 4px;background:var(--slate)}
  .tv-caps>span:last-child{display:flex;align-items:center;gap:10px}
  .tv-caps>span:last-child::after{content:"";flex:none;width:8px;height:8px;background:var(--blue)}
}

/* ---------- 09 El problema (#problema) ---------- */
/* Leyenda: <div class="tv-legend"><span class="tv-legend__a">A — Fragmentación</span><span class="tv-legend__b">B — Conexión</span><span class="tv-legend__c">C — Estructura</span></div> */
.tv-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font:600 12px/16px var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.tv-legend>span{display:flex;align-items:center;gap:10px}
.tv-legend>span+span{padding-left:24px}
.tv-legend>span::before{content:"";flex:none;width:8px;height:8px;background:var(--navy)}
.tv-legend>.tv-legend__a::before{background:none;border:1.5px solid var(--slate)}
.tv-legend>.tv-legend__c::before{background:var(--blue)}
/* Barra de avance (módulo de Código): <div class="tv-progress"><i></i><i></i></div> */
.tv-progress{position:relative;height:2px;background:var(--mist);--split:66.5625%}   /* 852 / 1280 */
.tv-progress>i{position:absolute;top:0;height:2px;transform-origin:left}
.tv-progress>i:first-child{left:0;width:var(--split);background:var(--navy);animation:tvGrow 1.2s var(--ease-s) .2s both}
.tv-progress>i:last-child{left:var(--split);right:0;background:var(--blue);animation:tvGrow 1.2s var(--ease-s) 1.8s both}
@media (max-width:1199px){
  .tv-legend{font-size:11px}
  .tv-legend>span::before{content:none}
  .tv-legend>span+span{padding-left:0}
  .tv-progress{background:none;transform-origin:left;animation:tvGrow 1.2s var(--ease-s) .2s both;--split:66.6667%}  /* 492 / 738 */
  .tv-progress>i:first-child,.tv-progress>i:last-child{animation:none}
}
@media (max-width:767px){
  .tv-legend{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.14em}
  .tv-progress{--split:66.5714%}                                                  /* 233 / 350 */
}

/* ---------- 10 Qué construimos (#que-construimos): clase tv-cap en cada columna-tarjeta ---------- */
.tv-cap{position:relative;transition:background .5s var(--ease)}
.tv-cap::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);z-index:1}
.tv-cap:hover{background:var(--off)}
.tv-cap:hover::before{transform:scaleX(1)}
.tv-cap .f-main{transition:stroke .5s var(--ease)}
.tv-cap:hover .f-main{stroke:var(--blue)}
.tv-cap__desc{font:400 16px/1.65 var(--ft);color:var(--graphite);max-width:360px}
@media (max-width:1199px){.tv-num--cap{font-size:32px}}
@media (max-width:767px){
  .tv-num--cap{font:600 12px/16px var(--ft);letter-spacing:.16em;font-variant-numeric:tabular-nums}
  .tv-cap__desc{font-size:15px}
}

/* ---------- 11 Un sistema (#sistema) ---------- */
/* Leyenda (solo desktop): <ul class="tv-dims"><li><span>D.01</span>Operación</li>…</ul> */
.tv-sec .tv-dims{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-navy);line-height:inherit}
.tv-dims li{display:flex;align-items:center;gap:16px;height:44px;padding:0;border-bottom:1px solid var(--line-navy);font:500 14px/1 var(--ft);color:var(--mist)}
.tv-dims li:first-child{color:var(--white)}
.tv-dims li>span{width:36px;font-size:11px;letter-spacing:.12em;color:var(--slate)}
@media (max-width:767px){#sistema .tv-body{font-size:15px}}

/* ---------- 12 Cómo trabajamos (#como-trabajamos) ----------
   Fila Divi (clase tv-stair) de 4 columnas (clase tv-step; la 4.ª además tv-step--end), gutter 24.
   Cada columna: módulo de Código tv-deco con <span class="tv-step__n"></span>
   (la 4.ª: + <span class="tv-step__open"></span><span class="tv-vstep__open"></span>)
   y un módulo de Texto: <div class="tv-num tv-num--step">01</div><h3 class="tv-h3 tv-step__t">Entender</h3><p class="tv-step__d">…</p> */
.tv-stair{position:relative;isolation:isolate;--rise:100px}
/* 4 niveles discontinuos (0, 100, 200, 300 px) */
.tv-stair::before,.tv-stair::after{content:"";display:block;position:absolute;left:0;right:0;width:auto;height:calc(var(--rise) + 1px);z-index:-1;clear:none;visibility:visible;pointer-events:none;border-top:1px dashed var(--mist);border-bottom:1px dashed var(--mist)}
.tv-stair::before{top:0}
.tv-stair::after{top:calc(var(--rise) * 2)}
.tv-step{position:relative;border-top:1.5px solid var(--navy);padding-top:28px}
.tv-stair>.tv-step:nth-child(1){margin-top:calc(var(--rise) * 3);--dl:.1s}
.tv-stair>.tv-step:nth-child(2){margin-top:calc(var(--rise) * 2);--dl:.35s}
.tv-stair>.tv-step:nth-child(3){margin-top:var(--rise);--dl:.6s}
.tv-stair>.tv-step:nth-child(4){margin-top:0;--dl:.85s}
.tv-step__n{position:absolute;left:-3px;top:-3.75px;width:6px;height:6px;background:var(--navy)}
.tv-step+.tv-step::after{content:"";position:absolute;left:-12px;top:-1.5px;width:13.5px;height:calc(var(--rise) / 2 + 1.5px);border-top:1.5px solid var(--navy);border-left:1.5px solid var(--navy);border-top-left-radius:12px}
.tv-step+.tv-step::before{content:"";position:absolute;left:-24px;top:calc(var(--rise) / 2 - 1.5px);width:13.5px;height:calc(var(--rise) / 2 + 1.5px);border-bottom:1.5px solid var(--navy);border-right:1.5px solid var(--navy);border-bottom-right-radius:12px}
.tv-step--end{border-top-color:transparent}
.tv-step--end .tv-step__n{left:-4px;top:-5px;width:8px;height:8px;background:var(--blue);z-index:1}
.tv-step__open{position:absolute;left:0;right:40px;top:-90px;height:90px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue);border-bottom-right-radius:12px}
.tv-step__open::after{content:"";position:absolute;right:-2px;top:-72px;height:72px;border-right:2px dashed var(--blue)}
.tv-vstep__open{display:none;position:absolute;left:-2px;top:100%;height:64px;border-left:2px dashed var(--blue)}
.tv-num--step{font-size:72px}
.tv-step--end .tv-num{color:var(--blue)}
.tv-step__d{font:400 15px/1.65 var(--ft);color:var(--graphite);max-width:280px}
.tv-step--end .tv-step__d{max-width:240px}
@media (max-width:1199px){  /* escalera vertical escalonada: --run desplazamiento, --gap separación */
  .tv-stair{--run:80px;--gap:24px;display:flex;flex-direction:column;margin-left:15px}
  .tv-stair::before,.tv-stair::after{content:none}
  .tv-stair>.tv-step:nth-child(n){width:auto;max-width:none;margin-top:0;border-top:0;border-left:1.5px solid var(--navy);padding:0 0 0 32px;min-height:196px}
  .tv-stair>.tv-step:nth-child(2){margin-left:var(--run)}
  .tv-stair>.tv-step:nth-child(3){margin-left:calc(var(--run) * 2)}
  .tv-stair>.tv-step:nth-child(4){margin-left:calc(var(--run) * 3)}
  .tv-stair>.tv-step+.tv-step{margin-top:var(--gap)}
  .tv-step .tv-step__n,.tv-step--end .tv-step__n{left:-3.75px;top:0}
  .tv-step+.tv-step::before{left:calc(-1 * var(--run) - 1.5px);top:calc(-1 * var(--gap));width:calc(var(--run) / 2 + 1.5px);height:calc(var(--gap) / 2 + 1.5px);border:0;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);border-radius:0 0 0 12px}
  .tv-step+.tv-step::after{left:calc(var(--run) / -2 - 1.5px);top:calc(var(--gap) / -2);width:calc(var(--run) / 2 + 1.5px);height:calc(var(--gap) / 2);border:0;border-top:1.5px solid var(--navy);border-right:1.5px solid var(--navy);border-radius:0 12px 0 0}
  .tv-stair>.tv-step--end:nth-child(n){border-left:2px solid var(--blue)}
  .tv-step--end .tv-step__n{left:-5px}
  .tv-step__open{display:none}
  .tv-vstep__open{display:block}
  .tv-num--step{font-size:56px;margin-top:-16px}
  .tv-step__d,.tv-step--end .tv-step__d{max-width:400px}
}
/* Compatibilidad Divi 5.13: el preset de fila fija ancho y márgenes con !important; la escalera se sangra 15 px (móvil 7 px) respecto al margen */
@media (max-width:1199px){.et_pb_row.tv-stair{align-self:stretch;width:auto!important;max-width:none!important;margin-left:calc(var(--m) + 15px)!important;margin-right:var(--m)!important}}
@media (max-width:767px){.et_pb_row.tv-stair{margin-left:calc(var(--m) + 7px)!important}}
@media (max-width:767px){  /* una sola línea continua, sin desplazamiento */
  .tv-stair{--gap:0px;margin-left:7px}
  .tv-stair>.tv-step:nth-child(n){margin-left:0;min-height:0;padding-bottom:28px}
  .tv-step+.tv-step::before,.tv-step+.tv-step::after{display:none}
  .tv-num--step{font-size:44px}
  .tv-step__t{margin-top:12px}
  .tv-step__d,.tv-step--end .tv-step__d{max-width:280px}
}

/* ---------- 13 IDENTIX (#identix) ---------- */
/* Cadena: fila Divi (clase tv-chain) de 3 columnas: tv-chain__i tv-chain__i--open · tv-chain__i · tv-chain__i tv-chain__i--end
   Texto de cada columna: <div class="tv-eb">Problema</div><p>Gestionar planilla…</p> */
.tv-chain{--cg:24px;--reach:24px}                       /* --reach: el tramo azul cruza el gutter hasta el bloque */
.tv-chain__i{position:relative;border-top:1.5px solid var(--navy);padding-top:28px}
.tv-chain__i::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;background:var(--navy)}
.tv-chain__i::after{content:"";position:absolute;top:-1.5px;right:calc(-1 * var(--cg));width:var(--cg);border-top:1.5px solid var(--navy)}
.tv-chain__i--open::before{background:var(--white);border:1.5px solid var(--navy)}
.tv-chain__i--end{border-top:2px solid var(--blue)}
.tv-chain__i--end::before{background:var(--blue)}
.tv-chain__i--end::after{top:-2px;right:calc(-1 * var(--reach));width:var(--reach);border-top:2px solid var(--blue)}
.tv-chain__i .tv-eb{color:var(--navy)}
.tv-chain__i--end .tv-eb{color:var(--blue)}
.tv-chain__i p{font:400 14px/1.5 var(--ft);color:var(--graphite);margin-top:10px}
/* Bloque de producto (columna/grupo con clase tv-plate). Sombra sólida: nativa de Divi (24px 24px 0 #0B1320; móvil 12px). */
.tv-plate{position:relative;background-color:var(--off);background-image:radial-gradient(rgba(148,163,184,.45) 1px,transparent 1.2px);background-size:24px 24px;border:1px solid var(--mist)}
/* Compatibilidad Divi 5.13: .et_pb_column fija background-repeat:no-repeat, size:cover y position:50% */
.et_pb_column.tv-plate{background-repeat:repeat;background-position:0 0;background-size:24px 24px}
/* Marcas de corte (solo desktop): 4 esquinas, misma geometría que el SVG del diseño (580×600, origen en el borde interior) */
.tv-plate::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1 21V1H21' fill='none' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E") left 15px top 15px/22px 22px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1 1H21V21' fill='none' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E") right 13px top 15px/22px 22px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1 1V21H21' fill='none' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E") left 15px bottom 13px/22px 22px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1 21H21V1' fill='none' stroke='%230B1320' stroke-width='1.5'/%3E%3C/svg%3E") right 13px bottom 13px/22px 22px no-repeat}
/* Lockup IDENTIX sobre caja off-white (módulo Imagen con clase tv-logobox) */
.tv-logobox{display:flex;align-items:center;justify-content:center;width:400px;height:160px;margin-left:auto;margin-right:auto;background:var(--off)}
.tv-logobox img{display:block;width:380px;height:auto}
/* Huecos para datos reales (placeholders punteados) */
.tv-slot{display:inline-flex;align-items:center;height:36px;padding:0 12px;border:1px dashed var(--slate);font:500 13px/1 var(--ft);color:var(--graphite)}
.tv-dark .tv-slot{color:var(--mist);border-color:rgba(148,163,184,.5)}
/* Datos de contacto reales (sustituyen a .tv-slot): texto con subrayado azul en hover, como el menú */
.tv-sec a.tv-link{position:relative;display:inline-block;padding:4px 0;font:500 15px/1.4 var(--ft);color:var(--navy);text-decoration:none;word-break:break-word}
.tv-sec a.tv-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tv-sec a.tv-link:hover::after,.tv-sec a.tv-link:focus-visible::after{transform:scaleX(1)}
.tv-dark a.tv-link{font-size:16px;color:var(--mist)}
.tv-dark a.tv-link:hover{color:var(--white)}
.tv-shots{position:relative;width:355px;height:170px;margin-left:auto;margin-right:auto;border:1px solid var(--graphite);background:var(--navy);overflow:hidden}
.tv-shots p{margin:0}
.tv-shots__i{position:absolute;inset:0;display:block;opacity:0;animation:tv-shots 12s infinite}
.tv-shots__i:nth-of-type(1){animation-delay:-.5s}
.tv-shots__i:nth-of-type(2){animation-delay:3.5s}
.tv-shots__i:nth-of-type(3){animation-delay:7.5s}
.tv-shots img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.tv-shots__i:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@keyframes tv-shots{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tv-shots__i{animation:none}.tv-shots__i:nth-of-type(1){opacity:1}}
/* Funciones clave de IDENTIX bajo el lockup (módulo Texto con <div class="tv-feats">) + enlace a la demo */
.tv-feats{width:400px;margin-left:auto;margin-right:auto;text-align:center}
.tv-sec .tv-feats ul{margin:0;padding:4px 20px;list-style:none;background:var(--white);border:1px solid var(--mist);text-align:left}
.tv-sec .tv-feats li{display:flex;align-items:center;gap:14px;margin:0;padding:13px 0;font:500 15px/1.4 var(--ft);color:var(--navy)}
.tv-sec .tv-feats li+li{border-top:1px solid var(--mist)}
.tv-feats svg{flex:none;width:20px;height:20px;color:var(--blue)}
.tv-sec a.tv-feats__cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:4px 0;font:600 15px/1.4 var(--ft);color:var(--blue)}
.tv-feats__cta::after{content:"";width:16px;height:10px;background:currentColor;-webkit-mask:var(--tv-arrow) no-repeat center/contain;mask:var(--tv-arrow) no-repeat center/contain;transition:transform .35s var(--ease)}
.tv-feats__cta:hover::after,.tv-feats__cta:focus-visible::after{transform:translateX(4px)}
.tv-slotbox{display:flex;align-items:center;justify-content:center;width:400px;height:150px;margin-left:auto;margin-right:auto;border:1px dashed var(--slate);background:var(--white);font:600 11px/1.4 var(--ft);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);text-align:center}
@media (max-width:1199px){
  .tv-chain{--reach:0px}
  .tv-plate::before{content:none}
  .tv-logobox{width:340px;height:140px}
  .tv-logobox img{width:330px}
  .tv-slotbox{height:130px}
  .tv-shots{width:313px;height:150px}
  .tv-feats{width:340px}
}
@media (max-width:767px){
  .tv-chain{--cg:12px}
  .tv-chain__i .tv-eb{font-size:10.5px;letter-spacing:.12em}
  .tv-chain__i p{font-size:13px;line-height:1.45;margin-top:8px}
  .tv-plate,.et_pb_column.tv-plate{background-size:20px 20px}
  .tv-logobox{width:270px;height:112px}
  .tv-logobox img{width:260px}
  .tv-slotbox{width:290px;height:120px}
  .tv-shots{width:250px;height:120px}
  .tv-feats{width:290px}
  .tv-sec .tv-feats ul{padding:2px 16px}
  .tv-sec .tv-feats li{gap:12px;padding:11px 0;font-size:14px}
  .tv-feats svg{width:18px;height:18px}
}

/* ---------- 14 TERVAN (#tervan): declaración tachado → resolución ----------
   Desktop/tablet (4 líneas):
   <div class="tv-stmt"><span class="tv-stmt__l tv-stmt__a tv-strike">No buscamos adaptar</span>
   <span class="tv-stmt__l tv-stmt__a tv-strike">una empresa al software.</span>
   <span class="tv-stmt__l tv-stmt__b tv-stmt__gap">Construimos el software</span>
   <span class="tv-stmt__l tv-stmt__b tv-under"><span class="tv-key">alrededor</span> de la empresa.</span></div>
   Móvil (8 líneas): misma estructura con clase tv-stmt tv-stmt--8 */
.tv-stmt{display:inline-block;position:relative;font:700 72px/1.04 var(--fd);letter-spacing:-.035em;text-transform:uppercase}
.tv-stmt__l{display:block;position:relative;white-space:nowrap}
.tv-stmt__a{color:var(--graphite)}
.tv-stmt__b{color:var(--navy)}
.tv-stmt__gap{margin-top:.667em}
/* El tachado continúa más allá del texto a propósito: no es un tachado tipográfico */
.tv-strike::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--blue);transform-origin:left;animation:tvGrow .9s var(--ease-s) var(--sdl,.3s) both}
.tv-strike:nth-child(2){--sdl:.9s}
.tv-under::after{content:"";position:absolute;left:0;right:0;bottom:-.25em;height:2px;background:var(--blue);transform-origin:right;animation:tvGrow .9s var(--ease-s) var(--sdl,1.9s) both}
.tv-under::before{content:"";position:absolute;left:-.055em;bottom:calc(-.25em - 4px);width:10px;height:10px;background:var(--blue);animation:tvFade .3s linear calc(var(--sdl,1.9s) + .8s) both}
/* Conector tachado → subrayado (en em). 4 líneas: --jt 1.56em / --jh 3.517em · 8 líneas: 3.64em / 5.597em */
.tv-stmt::before{content:"";position:absolute;top:var(--jt,1.56em);height:var(--jh,3.517em);right:-.444em;width:.444em;border:2px solid var(--blue);border-left:0;border-radius:0 .19em .19em 0;animation:tvFade .4s linear 1.4s both}
/* Ruta que sale del nodo resuelto hacia el margen y baja hasta Contacto (la recorta el overflow de la sección) */
.tv-stmt::after{content:"";position:absolute;left:calc(var(--m) / -2);top:calc(100% + .25em - 1.75px);width:calc(var(--m) / 2 - .055em);height:4000px;border-top:1.5px solid var(--navy);border-left:1.5px solid var(--navy);border-top-left-radius:12px;pointer-events:none;animation:tvFade .6s linear 2.9s both}
.tv-stmt--8{--jt:3.64em;--jh:5.597em}
.tv-stmt--8 .tv-strike:nth-child(2){--sdl:.6s}
.tv-stmt--8 .tv-strike:nth-child(3){--sdl:.9s}
.tv-stmt--8 .tv-strike:nth-child(4){--sdl:1.2s}
/* Pilares (columna con clase tv-pillar): <div class="tv-eb">Concepto</div><p class="tv-h3">Encontramos cómo.</p> */
.tv-pillar{border-top:1px solid var(--navy);padding-top:24px}
.tv-pillar .tv-h3{margin-top:16px}
@media (max-width:1199px){
  .tv-stmt{font-size:42px}
  .tv-pillar{padding-top:20px}
  .tv-pillar .tv-h3{margin-top:14px;font-size:20px}
}
@media (max-width:767px){
  .tv-stmt{font-size:30px;letter-spacing:-.025em}
  .tv-pillar{padding-top:14px}
  .tv-pillar .tv-h3{margin-top:10px}
}

/* ---------- 15 Contacto (#contacto) ---------- */
/* Ruta de entrada (módulo de Código tv-deco con <span class="tv-route-in"></span>):
   desktop en la columna izquierda; tablet/móvil dentro del panel con tv-route-in--edge */
.tv-route-in{position:absolute;left:calc(var(--m) / -2);right:-24px;bottom:calc(var(--fp,48px) + var(--bh,60px) / 2 - .75px);height:4000px;border-left:1.5px solid var(--mist);border-bottom:1.5px solid var(--mist);border-bottom-left-radius:12px;pointer-events:none}
.tv-route-in::after{content:"";position:absolute;right:0;bottom:-1.75px;width:38%;height:2px;background:var(--blue)}
.tv-route-in::before{content:"";position:absolute;right:38%;bottom:-4.75px;width:8px;height:8px;margin-right:-4px;background:var(--blue)}
.tv-route-in--edge{right:100%}
/* Desktop: el bloque de referencia es la columna (borde exterior del panel); +1,5px (el borde 1.5px se pinta a 1px) para coincidir con el tramo interior del panel (tv-form::before) */
.tv-route-in:not(.tv-route-in--edge){bottom:calc(var(--fp,48px) + var(--bh,60px) / 2 + .75px)}
/* Desktop: un único trazo azul continuo hasta el botón (evita el escalón de redondeo entre dos piezas con zoom/escalado fraccionario) */
.tv-route-in:not(.tv-route-in--edge){z-index:3}
.tv-route-in:not(.tv-route-in--edge)::after{right:calc(-1px - var(--fp,48px));width:calc(38% + 1px + var(--fp,48px))}
@media (min-width:1200px){.tv-form::before{content:none}}
.tv-route-in--edge::after{width:calc(100% - 12px)}
.tv-route-in--edge::before{right:calc(100% - 12px)}
/* Panel del formulario (columna con clase tv-form) */
.tv-form{--fp:48px;--bh:60px;position:relative;min-height:645px;padding:var(--fp);background:rgba(229,231,235,.03);border:1px solid rgba(229,231,235,.16)}
.tv-form::before{content:"";position:absolute;left:0;bottom:calc(var(--fp) + var(--bh) / 2 - 1px);width:var(--fp);height:2px;background:var(--blue)}
.tv-form::after{content:"";position:absolute;right:12px;top:12px;width:14px;height:14px;border-top:1.5px solid var(--mist);border-right:1.5px solid var(--mist)}
/* Cabecera: <div class="tv-form__head"><div class="tv-eb tv-eb--dot">Formulario de contacto</div>
   <span class="tv-form__req"><b>*</b> Campos obligatorios</span><span class="tv-form__req tv-form__sent">Enviado</span></div> */
.tv-form__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--line-navy)}
.tv-form__req{font:500 12px/16px var(--ft);color:var(--slate)}
.tv-form__req b{color:var(--mist);font-weight:600}         /* auditoría AA: asterisco en mist */
.tv-form__sent{display:none}
.tv-form:has(:is(.wpforms-confirmation-container,.wpforms-confirmation-container-full)) .tv-form__req:not(.tv-form__sent){display:none}
.tv-form:has(:is(.wpforms-confirmation-container,.wpforms-confirmation-container-full)) .tv-form__sent{display:inline}
@media (max-width:1199px){.tv-form{--fp:40px;min-height:627px}}
@media (max-width:767px){.tv-form{--fp:24px;--bh:56px;min-height:787px}}

/* WPForms · marcado moderno, estilos "solo base". Clase del formulario: tv-wpf. Clase de campo: tv-half (media columna). */
.wpforms-container.tv-wpf{position:static;margin:0}
.tv-form .et_pb_module:has(.tv-wpf),.tv-form .et_pb_module:has(.tv-wpf) *:not(.tv-wpf *){position:static}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field{grid-column:1 / -1;padding:0;margin:0;position:relative}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field.tv-half{grid-column:span 1}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0;font:600 11px/16px var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);transition:color .35s var(--ease)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-label::before{content:"";width:5px;height:5px;background:var(--blue);transform:scale(0);transition:transform .35s var(--ease)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-required-label{color:var(--mist);font-weight:600}
.wpforms-container.tv-wpf .wpforms-form :is(input[type=text],input[type=email],input[type=tel],textarea){display:block;width:100%;max-width:none;height:52px;padding:0 16px;margin:0;background:rgba(229,231,235,.04);
  border:1px solid rgba(148,163,184,.6);   /* accesibilidad: 0.35 → 0.6 · 3.2:1 frente al campo, 3.5:1 frente al panel */
  border-radius:2px;box-shadow:none;font:400 16px/1.4 var(--ft);color:var(--white);transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field textarea{height:140px;padding:14px 16px;resize:vertical}
.wpforms-container.tv-wpf .wpforms-form :is(input,textarea)::placeholder{color:var(--slate);opacity:1}
.wpforms-container.tv-wpf .wpforms-form :is(input,textarea):hover{border-color:var(--slate)}
.wpforms-container.tv-wpf .wpforms-form :is(input,textarea):focus{outline:none;border-color:var(--blue);background:rgba(37,99,235,.08);box-shadow:0 0 0 1px var(--blue)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field:focus-within .wpforms-field-label{color:var(--white)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field:focus-within .wpforms-field-label::before{transform:scale(1)}
/* Error / validación */
.wpforms-container.tv-wpf .wpforms-form :is(input,textarea).wpforms-error{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal);background:rgba(248,113,113,.06)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-has-error .wpforms-field-label{color:var(--white)}
.wpforms-container.tv-wpf .wpforms-form :is(em,label).wpforms-error{display:flex;align-items:center;gap:8px;margin-top:10px;padding:0;font:500 13px/1.4 var(--ft);font-style:normal;color:var(--signal)}
.wpforms-container.tv-wpf .wpforms-form :is(em,label).wpforms-error::before{content:"";width:6px;height:6px;border:1.5px solid var(--signal);flex:none}
/* Envío */
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit-container{margin-top:36px;padding:0;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;height:var(--bh,60px);min-width:340px;padding:0 26px 0 28px;border:0;border-radius:2px;background:var(--blue);color:var(--white);font:600 13px/16px var(--ft);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit::before{content:"";order:1;flex:none;width:16px;height:10px;background:currentColor;
  -webkit-mask:var(--tv-arrow) no-repeat 0 0/16px 10px;
          mask:var(--tv-arrow) no-repeat 0 0/16px 10px;
  transition:transform .35s var(--ease)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:hover{background:var(--white);color:var(--navy)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:hover::before{transform:translateX(4px)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit-spinner{display:none!important}
/* Casilla de consentimiento (campo GDPR de WPForms) sobre navy */
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox ul{margin:0;padding:0;list-style:none}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox input[type=checkbox]{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--blue);cursor:pointer}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline{display:inline;margin:0;padding:0;font:400 13px/1.5 var(--ft);letter-spacing:0;text-transform:none;color:var(--slate);cursor:pointer}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline::before{content:none}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox a{color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.wpforms-container.tv-wpf .wpforms-form .wpforms-field-gdpr-checkbox a:hover{color:var(--white)}
/* Enviando… (WPForms desactiva el botón y muestra el texto de procesamiento) */
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:is(:disabled,[aria-busy=true]){cursor:progress;background:var(--blue);color:var(--white)}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:is(:disabled,[aria-busy=true])::before{display:none}
.wpforms-container.tv-wpf .wpforms-form .wpforms-submit:is(:disabled,[aria-busy=true])::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:var(--white);animation:tvSend 1.2s var(--ease-s) infinite}
@keyframes tvSend{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* Confirmación (mensaje HTML de WPForms; ver IMPLEMENTACION.md). La ruta termina en un nodo azul.
   Con estilos "solo base" WPForms usa .wpforms-confirmation-container; con estilos completos, -full. */
.wpforms-container.tv-wpf :is(.wpforms-confirmation-container,.wpforms-confirmation-container-full){position:static;margin:0;padding:0;border:0;background:none;color:var(--mist)}
.tv-confirm{color:var(--mist)}
.tv-confirm::before{content:"";position:absolute;left:var(--fp,48px);bottom:calc(var(--fp,48px) + var(--bh,60px) / 2 - 1px);width:72px;height:2px;background:var(--blue)}
.tv-confirm::after{content:"";position:absolute;left:calc(var(--fp,48px) + 65px);bottom:calc(var(--fp,48px) + var(--bh,60px) / 2 - 7px);width:14px;height:14px;background:var(--blue)}
.tv-confirm .tv-eb{color:var(--white)}
.tv-sec .tv-confirm h3{margin:20px 0 0;font:700 36px/1.05 var(--fd);letter-spacing:-.025em;text-transform:uppercase;color:var(--white)}
.tv-sec .tv-confirm p{margin:18px 0 0;max-width:440px;font:400 17px/1.6 var(--ft);color:var(--mist)}
@media (max-width:767px){
  .wpforms-container.tv-wpf .wpforms-form .wpforms-field-container{grid-template-columns:minmax(0,1fr);gap:20px}
  .wpforms-container.tv-wpf .wpforms-form .wpforms-field.tv-half{grid-column:1 / -1}
  .wpforms-container.tv-wpf .wpforms-form .wpforms-submit-container{margin-top:28px}
  .wpforms-container.tv-wpf .wpforms-form .wpforms-submit{width:100%;min-width:0;padding:0 20px;font-size:12px;letter-spacing:.08em}
  .tv-sec .tv-confirm h3{font-size:26px}
}

/* ---------- 16 Footer (Theme Builder) ---------- */
.tv-sec .tv-fnav{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;font:500 15px/1.4 var(--ft);color:var(--navy)}
.tv-legal{display:flex;align-items:center;justify-content:space-between;font:500 13px/1 var(--ft);color:var(--graphite)}
.tv-sec .tv-legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s var(--ease)}
.tv-sec .tv-legal a:hover{border-bottom-color:var(--blue)}
/* Páginas legales (módulo de Texto con clase tv-doc) */
.tv-doc{max-width:760px;font:400 16px/1.7 var(--ft);color:var(--graphite)}
.tv-sec .tv-doc h2{margin:48px 0 16px;font:700 22px/1.2 var(--fd);letter-spacing:-.01em;text-transform:uppercase;color:var(--navy)}
.tv-sec .tv-doc h2:first-child{margin-top:0}
.tv-sec .tv-doc p{margin:0 0 14px}
.tv-sec .tv-doc ul,.tv-sec .tv-doc ol{margin:0 0 14px;padding-left:22px;list-style:disc}
.tv-sec .tv-doc ol{list-style:decimal}
.tv-sec .tv-doc li{margin:0 0 6px;padding:0}
.tv-sec .tv-doc strong{font-weight:600;color:var(--navy)}
.tv-sec .tv-doc a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.tv-doc{font-size:15px}.tv-sec .tv-doc h2{font-size:19px;margin-top:40px}}
@media (max-width:767px){
  .tv-sec .tv-fnav{gap:8px}
  .tv-legal{font-size:12px}
}

/* ---------- 17 Movimiento ----------
   tervan.js añade .tv-js a <html> y .is-in a cada bloque .tv-anim al entrar en viewport (una sola vez).
   Hasta entonces, toda animación dentro del bloque queda en pausa en su fotograma inicial. */
.tv-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:tvDraw var(--d,1.6s) var(--ease-s) var(--dl,0s) forwards}
.tv-dead{stroke-dasharray:1;stroke-dashoffset:1;animation:tvDraw .7s var(--ease-s) var(--dl,0s) forwards,tvDim .8s var(--ease) calc(var(--dl,0s) + .9s) forwards}
.tv-pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:tvPop .5s var(--ease) var(--dl,0s) forwards}
.tv-up{opacity:0;transform:translateY(22px);animation:tvUp 1s var(--ease) var(--dl,0s) forwards}
.tv-seq{opacity:0;transform:translateY(12px);animation:tvUp .9s var(--ease) var(--dl,0s) forwards}
.tv-grow{transform-origin:left;animation:tvGrow 1.2s var(--ease-s) var(--dl,0s) both}
.tv-dotted--pop::after{opacity:0;animation:tvPop .5s var(--ease) 3.2s forwards}
/* Retardos para módulos de Divi (clase en el módulo) */
.tv-dl-010{--dl:.1s}.tv-dl-020{--dl:.2s}.tv-dl-050{--dl:.5s}.tv-dl-060{--dl:.6s}.tv-dl-075{--dl:.75s}
@keyframes tvDraw{to{stroke-dashoffset:0}}
@keyframes tvDim{to{opacity:.32}}
@keyframes tvPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes tvUp{to{opacity:1;transform:none}}
@keyframes tvGrow{from{transform:scaleX(0)}}
@keyframes tvFade{from{opacity:0}}
.tv-js .tv-anim:not(.is-in),.tv-js .tv-anim:not(.is-in)::before,.tv-js .tv-anim:not(.is-in)::after,
.tv-js .tv-anim:not(.is-in) *,.tv-js .tv-anim:not(.is-in) *::before,.tv-js .tv-anim:not(.is-in) *::after{animation-play-state:paused}
/* Hero: las entradas de texto y el punto solo existen en desktop (tablet y móvil son estáticos en sus artboards) */
@media (max-width:1199px){
  #inicio .tv-up{opacity:1;transform:none;animation:none}
  #inicio .tv-dotted--pop::after{opacity:1;animation:none}
}

/* ---------- 18 prefers-reduced-motion: todo en estado final, sin trazados ---------- */
@media (prefers-reduced-motion:reduce){
  .tv-draw,.tv-seq,.tv-grow,.tv-pop,.tv-up,.tv-progress,.tv-progress>i,.tv-dotted--pop::after,
  .tv-stmt::before,.tv-stmt::after,.tv-strike::after,.tv-under::after,.tv-under::before{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
  .tv-dead{animation:none;stroke-dashoffset:0;opacity:.32}          /* estado final del camino descartado */
  .tv-flow{display:none}                                             /* nodos SMIL en movimiento (Sistema) */
  .tv-plx{transition:none}
  .wpforms-container.tv-wpf .wpforms-form .wpforms-submit::after{animation:none}
}

/* ---------- Escritorio estrecho (1200–1459 px) ----------
   La composición desktop está trazada a 1440 px (filas de 1280 + márgenes de 80). Entre 1200 y 1459 px
   (portátiles de 1280/1366/1440 con barra de desplazamiento) se escala entera con zoom en tramos de 20 px:
   zoom = (inicio del tramo − 17 px de barra) / 1440, así el lienzo efectivo nunca baja de 1440.
   Por debajo de 1200 manda el diseño tablet (punto de corte de Divi ajustado a 1199). */
@media (min-width:1200px){html{zoom:0.8215}}
@media (min-width:1220px){html{zoom:0.8354}}
@media (min-width:1240px){html{zoom:0.8493}}
@media (min-width:1260px){html{zoom:0.8632}}
@media (min-width:1280px){html{zoom:0.8771}}
@media (min-width:1300px){html{zoom:0.8910}}
@media (min-width:1320px){html{zoom:0.9049}}
@media (min-width:1340px){html{zoom:0.9187}}
@media (min-width:1360px){html{zoom:0.9326}}
@media (min-width:1380px){html{zoom:0.9465}}
@media (min-width:1400px){html{zoom:0.9604}}
@media (min-width:1420px){html{zoom:0.9743}}
@media (min-width:1440px){html{zoom:0.9882}}
@media (min-width:1460px){html{zoom:normal}}