/*
Theme Name: Owari Web
Theme URI: https://owari.com.co
Author: Owari SAS
Author URI: https://owari.com.co
Description: Tema corporativo de Owari — desarrollo de software a medida. Paleta oscura o clara configurable, acento personalizable e integración con WooCommerce para vender planes de páginas web y tiendas online.
Version: 1.8.0
Requires PHP: 7.4
License: Propietaria
Text Domain: owari-web
*/

/* ── Fuentes autoalojadas ─────────────────────────────────────────────────── */
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'TECWO'; src: url('assets/fonts/TECWO.woff') format('woff'); font-weight: 400 700; font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────────────────────────
   Esta es la paleta OSCURA, la de casa. El Customizer (Owari → Colores) puede
   sustituirla entera por la clara o por una a medida: escribe estos mismos
   nombres en un `:root` en línea, así que ningún componente necesita saber en
   qué tema está. Regla: NUNCA escribir un color a mano en un componente.

   Dos pares que hay que respetar o el tema claro se rompe:
   · `--cy` es el acento para FONDOS y bordes; `--cy-txt` es el acento para
     TEXTO. En oscuro son el mismo; sobre blanco el cian puro no se lee, así que
     la paleta clara oscurece solo el de texto.
   · `--velo` / `--velo-solido` son el fondo translúcido de la cabecera y del
     menú móvil; `--rejilla`, las líneas del fondo decorativo. Antes iban
     escritos a mano en oscuro y no había forma de aclararlos. */
:root{
  --bg:#06121c; --bg2:#0a1d2b; --panel:#0e2434; --panel2:#102b3e;
  --navy:#0a4570; --navy-d:#06304f;
  --cy:#00b5d4; --cy-soft:color-mix(in srgb, var(--cy), white 38%); --cy-deep:color-mix(in srgb, var(--cy), black 22%);
  --cy-txt:var(--cy);
  --text:#eaf4f8; --muted:#90aab9; --faint:#6c8696;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --velo:rgba(6,18,28,.82); --velo-solido:rgba(6,18,28,.98); --rejilla:rgba(255,255,255,.035);
  /* Tipografía de los titulares. Se cambia en Personalizar → Owari — Tipografía.
     El peso y el espaciado van aparte porque TECWO es una display de trazo
     ancho que funciona a peso normal, mientras que Montserrat necesita mucho
     más peso y las letras más juntas para leerse como titular. */
  --fuente-titulo:'TECWO','Montserrat',sans-serif;
  --fuente-titulo-peso:400;
  --fuente-titulo-espaciado:.01em;
  --maxw:1240px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Montserrat',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* ver .page-shell: hidden fuerza overflow-y:auto y crea un scroller */
}
h1,h2,h3{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }
.tecwo{ font-family:var(--fuente-titulo); font-weight:var(--fuente-titulo-peso); letter-spacing:var(--fuente-titulo-espaciado); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.kicker{ font-family:'Montserrat'; font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--cy-txt); }
.eyebrow-line{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow-line::before{ content:""; width:26px; height:2px; background:var(--cy); display:inline-block; }
/* `background:transparent` y `font-family:inherit` NO sobran: en un <a> el fondo
   ya es transparente, pero en un <button> el navegador pone el suyo de sistema
   (`rgb(240,240,240)`) y su propia tipografía. Sin esto, un `.btn-ghost` escrito
   como <button> salía como una píldora blanca con el texto blanco encima —
   1,03 de contraste, invisible. Pasaba en «Cambiar de dominio» (Mi cuenta →
   Licencias), el único `.btn` que no es un enlace.
   Se arregla en la base, no en `.btn-ghost`, para que valga también para
   cualquier variante futura que no declare fondo propio. */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-weight:700; font-size:15px; border-radius:999px; padding:13px 24px; cursor:pointer; background:transparent; border:1.5px solid transparent; transition:.18s; white-space:nowrap; }
.btn-primary{ background:var(--cy); color:#042530; box-shadow:0 8px 30px -8px rgba(0,181,212,.6); }
.btn-primary:hover{ background:var(--cy-soft); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--cy-txt); color:var(--cy-txt); }
.btn-sm{ font-size:13px; padding:10px 18px; }
.arrow{ font-size:1.05em; line-height:1; }

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.logo-h{ display:inline-flex; align-items:center; gap:11px; }
.logo-h .sym{ height:34px; width:auto; }
.logo-h .wm{ height:20px; width:auto; margin-bottom:-2px; }
.logo-h .sym path{ fill:var(--cy); }
.logo-h .wm path{ fill:var(--text); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.site-header{ position:sticky; top:0; z-index:40; background:var(--velo); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.site-header nav{ display:flex; align-items:center; gap:26px; height:74px; }
.nav-links{ display:flex; gap:26px; margin-left:18px; list-style:none; margin-block:0; padding:0; }
.nav-links li{ position:relative; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--muted); transition:.15s; }
.nav-links a:hover{ color:var(--text); }
/* Ítems con submenú: caret + puente invisible para no perder el hover
   al cruzar hacia el desplegable */
.nav-links .menu-item-has-children > a::after{ content:"▾"; font-size:10px; margin-left:6px; color:var(--faint); }
.nav-links .menu-item-has-children:hover::before{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; }
/* Submenú desplegable (panel oscuro de la marca) */
.nav-links .sub-menu{
  position:absolute; top:calc(100% + 14px); left:-14px; min-width:220px; z-index:60;
  display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:8px;
  background:var(--panel); border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s;
}
.nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.nav-links .sub-menu li{ position:relative; }
.nav-links .sub-menu a{ display:block; padding:10px 14px; border-radius:9px; white-space:nowrap; }
.nav-links .sub-menu a:hover{ background:rgba(0,181,212,.1); color:var(--cy-txt); }
/* Tercer nivel: se abre hacia el lado */
.nav-links .sub-menu .sub-menu{ top:-8px; left:calc(100% + 6px); }
.nav-links .sub-menu .menu-item-has-children > a::after{ content:"▸"; }
.nav-links .sub-menu .menu-item-has-children:hover::before{ left:100%; right:auto; top:0; bottom:0; width:10px; height:auto; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.agro-link{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--cy-soft); border:1px solid rgba(0,181,212,.32); background:rgba(0,181,212,.07); padding:8px 14px; border-radius:999px; transition:.15s; white-space:nowrap; }
.agro-link:hover{ border-color:var(--cy-txt); background:rgba(0,181,212,.14); }
.agro-link .dot{ width:6px; height:6px; border-radius:50%; background:var(--cy); box-shadow:0 0 8px var(--cy); }
.cart-link{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line2); border-radius:50%; color:var(--muted); transition:.15s; }
.cart-link:hover{ border-color:var(--cy-txt); color:var(--cy-txt); }
.cart-ic{ width:20px; height:20px; display:block; }
.cart-link .count{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--cy); color:#042530; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* ── Acceso a la cuenta (encabezado) ── */
/* Misma altura que el botón del carrito (42px) para que la barra quede pareja. */
.cuenta-link{
  display:inline-flex; align-items:center; gap:8px; flex:none; height:42px;
  padding:0 17px 0 13px; border:1px solid var(--line2); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--muted); transition:.15s; white-space:nowrap;
}
.cuenta-link:hover{ border-color:var(--cy-txt); color:var(--cy-txt); }
.cuenta-ic{ width:19px; height:19px; flex:none; }
.cuenta-link.con-sesion{ color:var(--cy-soft); border-color:rgba(0,181,212,.35); background:rgba(0,181,212,.07); }
.cuenta-txt{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:1100px){ .cuenta-txt{ display:none; } .cuenta-link{ padding:0; width:42px; height:42px; justify-content:center; border-radius:50%; } }
@media(max-width:920px){ .site-header .cuenta-link{ display:none; } }

/* ── Mini-carrito desplegable ── */
.cart-wrap{ position:relative; }
/* Puente invisible entre el icono y el panel para no perder el hover */
.cart-wrap:hover::before{ content:""; position:absolute; left:-20px; right:-20px; top:100%; height:16px; }
.mini-cart{
  position:absolute; right:0; top:calc(100% + 14px); width:310px; z-index:60;
  background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:16px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s;
}
.cart-wrap:hover .mini-cart, .mini-cart.open{ opacity:1; visibility:visible; transform:none; }
/* Cerrado a propósito con la ✕: tiene que ganarle al `:hover`, porque si no el
   panel sigue visible mientras el cursor no salga y parece que el botón no
   funciona. La marca se retira al sacar el cursor (ver main.js), así que el
   hover vuelve a abrirlo con normalidad. */
.cart-wrap.cerrado .mini-cart{ opacity:0; visibility:hidden; transform:translateY(6px); }
.mc-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mc-items li{ display:flex; align-items:flex-start; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line); }
.mc-items li:first-child{ padding-top:2px; }
.mc-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.mc-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Miniatura del producto (imagen destacada real, ver inc/producto-visual.php) */
.mc-img{ flex:none; width:46px; height:46px; border-radius:9px; overflow:hidden; display:block; border:1px solid var(--line); background:#0b2130; }
.mc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mc-name{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35; }
.mc-qty{ font-size:12px; color:var(--faint); white-space:nowrap; }
/* Cantidad y quitar */
.mc-cant{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line2); border-radius:999px; padding:2px; }
.mc-cant button{
  width:24px; height:24px; border:none; border-radius:50%; background:transparent; cursor:pointer;
  color:var(--text); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  font-family:inherit; transition:.14s;
}
.mc-cant button:hover{ background:var(--cy); color:#042530; }
.mc-n{ min-width:22px; text-align:center; font-size:13px; font-weight:700; color:var(--text); }
.mc-quitar{
  flex:none; width:24px; height:24px; border:none; border-radius:50%; background:transparent;
  color:var(--faint); font-size:12px; cursor:pointer; line-height:1; transition:.14s;
  display:flex; align-items:center; justify-content:center;
}
.mc-quitar:hover{ background:rgba(226,87,76,.15); color:#e2574c; }
/* Mientras se aplica el cambio en el servidor */
.mini-cart.cargando{ pointer-events:none; }
.mini-cart.cargando .mc-items{ opacity:.45; transition:opacity .15s; }
.mc-total{ display:flex; justify-content:space-between; align-items:center; padding:12px 2px 14px; }
.mc-total span{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.mc-total b{ font-size:20px; font-weight:400; color:var(--text); }
.mc-actions{ display:flex; gap:8px; }
.mc-actions .btn{ flex:1; justify-content:center; }
.mc-empty{ margin:2px 2px 12px; font-size:13.5px; color:var(--muted); }
/* Cerrar el panel: visible siempre (también en escritorio). */
.mc-cerrar{
  display:flex; position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border:1px solid var(--line2); border-radius:50%;
  background:var(--panel2); color:var(--muted); font-size:13px; line-height:1;
  cursor:pointer; align-items:center; justify-content:center; transition:.14s;
}
.mc-cerrar:hover{ border-color:var(--cy-txt); color:var(--cy-txt); }
/* Aire para que la ✕ no pise el primer producto */
.mini-cart .mc-items{ margin-top:26px; }
.mini-cart .mc-empty{ margin-top:30px; }
@media(max-width:480px){
  /* que no se salga de la pantalla junto al borde derecho */
  .mini-cart{ width:calc(100vw - 32px); right:-52px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding:96px 0 90px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-grid{ position:absolute; inset:0; background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 75%); }
.glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.glow.a{ width:560px; height:560px; right:-120px; top:-160px; background:radial-gradient(circle,var(--cy) 0%,transparent 60%); }
.glow.b{ width:480px; height:480px; left:-160px; bottom:-200px; background:radial-gradient(circle,var(--navy) 0%,transparent 60%); opacity:.8; }
body.no-glow .glow{ display:none; }
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(44px,6.4vw,92px); line-height:.96; letter-spacing:-.01em; margin:22px 0 0; }
.hero h1 .cy{ color:var(--cy-txt); }
.hero .sub{ font-size:18px; line-height:1.6; color:var(--muted); max-width:520px; margin:24px 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:26px; margin-top:38px; flex-wrap:wrap; }
.hero-meta .m b{ font-family:var(--fuente-titulo); font-size:26px; color:var(--text); font-weight: var(--fuente-titulo-peso); display:block; }
.hero-meta .m span{ font-size:12px; color:var(--faint); letter-spacing:.04em; }
.hero-visual{ position:relative; height:440px; display:flex; align-items:center; justify-content:center; }
.comet{ position:relative; width:290px; }
.comet::before{ content:""; position:absolute; left:18%; top:8%; width:62%; height:62%; border-radius:50%; background:radial-gradient(circle,rgba(0,181,212,.55),transparent 65%); filter:blur(34px); z-index:0; }
.comet-inner{ position:relative; z-index:1; transform:rotate(14deg); }
.comet-inner svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 12px 30px rgba(0,181,212,.45)); }
.comet-inner svg path{ fill:var(--cy); }
@media(prefers-reduced-motion:no-preference){
  .comet{ animation:cometIn 1.1s cubic-bezier(.18,.75,.2,1) both; }
  .comet-inner{ animation:fall 7s ease-in-out 1.25s infinite; }
  @keyframes cometIn{ 0%{ opacity:0; transform:translate(165px,128px); } 100%{ opacity:1; transform:translate(0,0); } }
  @keyframes fall{ 0%,100%{ transform:rotate(14deg) translate(0,0); } 50%{ transform:rotate(14deg) translate(-10px,12px); } }
}

/* ── Secciones ────────────────────────────────────────────────────────────── */
section.band{ position:relative; padding:88px 0; border-top:1px solid var(--line); }
.sec-head{ max-width:680px; margin-bottom:46px; }
.sec-head h2{ font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.01em; margin-top:14px; }
.sec-head p{ color:var(--muted); font-size:16px; line-height:1.6; margin:16px 0 0; }

/* ── Por qué ──────────────────────────────────────────────────────────────── */
.why-list{ display:flex; flex-direction:column; }
.why{ display:grid; grid-template-columns:128px 1fr auto; gap:30px; align-items:center; padding:30px 0; border-top:1px solid var(--line); transition:.2s; }
.why:hover{ background:linear-gradient(90deg,rgba(0,181,212,.05),transparent); }
.why .num{ font-family:var(--fuente-titulo); font-size:74px; line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--cy); font-weight: var(--fuente-titulo-peso); }
.why h3{ font-size:23px; font-weight:700; }
.why p{ color:var(--muted); font-size:15px; line-height:1.55; margin:7px 0 0; max-width:560px; }
.why .tag{ font-size:12px; font-weight:700; color:var(--cy-soft); letter-spacing:.04em; white-space:nowrap; }

/* ── Framework / tecnología ───────────────────────────────────────────────── */
.framework{ background:linear-gradient(160deg,var(--bg2),#06141f); }
.fw-inner{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.fw-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; }
.stat .ic{ width:42px; height:42px; border-radius:11px; background:rgba(0,181,212,.12); display:flex; align-items:center; justify-content:center; color:var(--cy-txt); font-size:20px; margin-bottom:14px; }
.stat b{ font-family:var(--fuente-titulo); font-size:30px; font-weight: var(--fuente-titulo-peso); display:block; }
.stat span{ font-size:13px; color:var(--muted); }
.fw-note{ margin-top:22px; font-size:13px; color:var(--faint); }

/* ── Planes ───────────────────────────────────────────────────────────────── */
.plans-controls{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:34px; }
.svc-tabs{ display:inline-flex; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px; }
.svc-tab{ font-size:14px; font-weight:600; color:var(--muted); padding:9px 18px; border-radius:999px; cursor:pointer; transition:.15s; white-space:nowrap; border:none; background:transparent; font-family:inherit; }
.svc-tab.on{ background:var(--cy); color:#042530; }
.bill-toggle{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.switch{ width:52px; height:28px; border-radius:999px; background:var(--panel2); border:1px solid var(--line2); position:relative; cursor:pointer; transition:.2s; }
.switch .knob{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--cy); transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.4); }
body.annual .switch .knob{ left:26px; }
body.annual .switch{ background:rgba(0,181,212,.2); border-color:var(--cy-txt); }
.bill-toggle .save{ font-size:11px; font-weight:700; color:var(--cy-soft); background:rgba(0,181,212,.12); padding:3px 9px; border-radius:999px; }

.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.plan-grid.plan-bloque{ display:block; }
.plan-grid[hidden]{ display:none !important; }
.grupo-intro{ grid-column:1/-1; color:var(--muted); font-size:15px; line-height:1.6; max-width:720px; margin-bottom:6px; }
.plan-bloque .grupo-intro{ margin-bottom:20px; }
.pcard{ background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:30px 26px; display:flex; flex-direction:column; position:relative; transition:.2s; }
.pcard:hover{ border-color:var(--line2); transform:translateY(-3px); }
.pcard.feat{ border-color:var(--cy-txt); background:linear-gradient(180deg,rgba(0,181,212,.08),var(--panel)); box-shadow:0 24px 60px -30px rgba(0,181,212,.5); }
.pcard .badge{ position:absolute; top:-12px; left:26px; background:var(--cy); color:#042530; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.pcard .tier{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pcard.feat .tier{ color:var(--cy-soft); }
.pcard .impl{ margin:16px 0 4px; }
.pcard .impl .amt{ font-family:var(--fuente-titulo); font-size:40px; font-weight: var(--fuente-titulo-peso); line-height:1; }
.pcard .impl .unit{ font-size:13px; color:var(--faint); margin-top:6px; }
.pcard .saas{ font-size:13px; color:var(--muted); padding:12px 0 16px; border-bottom:1px solid var(--line); }
.pcard .saas .v{ color:var(--text); font-weight:700; }
.pcard ul{ list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.pcard li{ font-size:13.5px; color:var(--muted); line-height:1.45; padding-left:25px; position:relative; }
.pcard li::before{ content:""; position:absolute; left:0; top:6px; width:14px; height:9px; border-left:2px solid var(--cy); border-bottom:2px solid var(--cy); transform:rotate(-45deg); }
.pcard li.head{ padding-left:0; color:var(--faint); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.pcard li.head::before{ display:none; }
body.annual .saas .mo{ display:none; }
body:not(.annual) .saas .yr{ display:none; }

/* Sistemas */
.sys-modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.sys-saas{ background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
/* Columnas dinámicas: --sys-cols la pone la plantilla según la cabecera de la
   tabla del grupo (el media query móvil la anula apilando en 1 columna). */
.sys-row{ display:grid; grid-template-columns:var(--sys-cols, 1.5fr 1fr 1fr); gap:16px; padding:18px 26px; align-items:center; border-top:1px solid var(--line); font-size:14px; }
.sys-row.head{ border-top:none; background:var(--panel2); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.sys-row .nm{ font-weight:700; } .sys-row .nm small{ display:block; color:var(--faint); font-weight:500; font-size:12px; margin-top:2px; }
.sys-row .price{ font-family:var(--fuente-titulo); font-size:18px; }
.sys-note{ margin-top:18px; font-size:13px; color:var(--faint); display:flex; gap:8px; align-items:center; }
.sys-includes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip{ font-size:12.5px; color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:7px 14px; }

/* ── Agro ─────────────────────────────────────────────────────────────────── */
.agro-card{ position:relative; overflow:hidden; border-radius:28px; border:1px solid rgba(0,181,212,.3); background:linear-gradient(135deg,var(--navy-d),#072a16); padding:54px 56px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.agro-card .glow-c{ position:absolute; width:400px; height:400px; right:-60px; top:-120px; background:radial-gradient(circle,rgba(0,181,212,.4),transparent 60%); filter:blur(70px); }
/* Imagen de fondo opcional + degradado encima con opacidad graduable.
   El degradado va como CAPA del mismo background (no como ::before con inset:0)
   porque aquel se limitaba a la caja de padding y dejaba el borde de 1px con la
   imagen desnuda. Como capa, cubre hasta el borde igual que la imagen.
   --agro-img / --agro-overlay / --agro-pos / --agro-alto las pone la plantilla. */
.agro-card.con-fondo{
  background-image:
    linear-gradient(135deg,
      rgb(6 48 79 / var(--agro-overlay,.85)),
      rgb(7 42 22 / var(--agro-overlay,.85))),
    var(--agro-img);
  background-size:cover, cover;
  background-position:center, var(--agro-pos,50% 50%);
  background-repeat:no-repeat, no-repeat;
  /* border-box en AMBAS capas: con el origin por defecto (padding-box) el
     degradado se dimensiona a la caja de padding y el anillo de 1px del borde
     quedaba mostrando la imagen cruda. */
  background-origin:border-box, border-box;
  background-clip:border-box, border-box;
  min-height:var(--agro-alto,0);
}
.agro-card .txt{ position:relative; z-index:2; max-width:620px; }
.agro-card .lab{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--cy-soft); }
.agro-card h3{ font-size:clamp(26px,3vw,38px); margin:12px 0; line-height:1.05; }
.agro-card p{ color:#c5dde6; font-size:15.5px; line-height:1.6; }
.agro-card .cta{ position:relative; z-index:2; }

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.contact{ text-align:center; }
.contact h2{ font-size:clamp(32px,4.4vw,58px); line-height:1; letter-spacing:-.01em; }
.contact p{ color:var(--muted); font-size:17px; margin:18px 0 30px; }
.contact-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.phones{ display:flex; gap:36px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.phones .ph b{ font-family:var(--fuente-titulo); font-size:24px; font-weight: var(--fuente-titulo-peso); display:block; }
.phones .ph span{ font-size:12px; color:var(--faint); letter-spacing:.05em; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer{ border-top:1px solid var(--line); padding:50px 0 40px; }
.foot-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.foot-links{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; font-weight:700; }
.foot-col a, .foot-col span{ display:block; font-size:14px; color:var(--muted); margin-bottom:9px; }
.foot-col a:hover{ color:var(--cy-txt); }
.foot-bottom{ margin-top:42px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--faint); }

/* ── Menú móvil ───────────────────────────────────────────────────────────── */
.menu-btn{ display:none; flex-direction:column; gap:4px; justify-content:center; align-items:center; width:44px; height:44px; border:1px solid var(--line2); border-radius:11px; background:transparent; cursor:pointer; flex:none; }
.menu-btn span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:.22s; }
.menu-btn.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; padding:8px 32px 22px; background:var(--velo-solido); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); position:sticky; top:74px; z-index:39; }
.mobile-menu.open{ display:flex; }
/* Garantía: en escritorio el menú desplegable NO existe, aunque haya quedado
   con la clase `open` de cuando la ventana era angosta. Sin esto, abrirlo en
   móvil y ensanchar la ventana dejaba el panel colgando bajo la barra. */
@media(min-width:921px){ .mobile-menu.open{ display:none; } }
.mobile-menu a{ font-size:16px; font-weight:600; color:var(--text); padding:13px 2px; border-bottom:1px solid var(--line); }
/* Menú de WordPress dentro del panel móvil (ul.mm-links o fallback ul.nav-links) */
.mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mobile-menu ul a{ display:block; }
/* Submenús en móvil: siempre visibles, indentados con línea guía */
.mobile-menu .sub-menu{ margin-left:14px; padding-left:12px; border-left:1px solid var(--line2); }
.mobile-menu .sub-menu a{ font-size:14.5px; font-weight:500; color:var(--muted); }
.mobile-menu .sub-menu a:hover{ color:var(--cy-txt); }
.mobile-menu .mm-agro{ color:var(--cy-soft); }
.mobile-menu a.btn{ border-bottom:none; justify-content:center; margin-top:14px; color:#042530; }

/* ── Página de gracias por producto (gracias.php) ─────────────────────────── */
body.owari-gracias{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px; position:relative; overflow:hidden;
}
.owari-gracias .gracias-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.gracias-card{
  position:relative; z-index:2; max-width:520px; width:100%; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  padding:52px 40px 44px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  animation:graciasIn .7s cubic-bezier(.18,.75,.2,1) both;
}
@keyframes graciasIn{ 0%{ opacity:0; transform:translateY(18px); } 100%{ opacity:1; transform:none; } }
.gracias-card .logo-h{ margin-bottom:34px; }
.gracias-card .check{
  width:76px; height:76px; margin:0 auto 26px; border-radius:50%;
  background:rgba(0,181,212,.1); border:1.5px solid rgba(0,181,212,.35);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px -6px rgba(0,181,212,.45);
}
.gracias-card .check svg{ width:36px; height:36px; }
.gracias-card .check svg path{
  fill:none; stroke:var(--cy); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40; animation:graciasCheck .55s ease-out .45s forwards;
}
@keyframes graciasCheck{ to{ stroke-dashoffset:0; } }
.gracias-card h1{ font-size:clamp(28px,5vw,38px); line-height:1.1; letter-spacing:-.01em; margin:14px 0 0; }
.gracias-card h1 .cy{ color:var(--cy-txt); }
.gracias-card .sub{ font-size:16px; line-height:1.65; color:var(--muted); margin:18px 0 0; }
.gracias-card .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.gracias-card .foot{ margin-top:30px; font-size:12px; color:var(--faint); }
@media(max-width:480px){ .gracias-card{ padding:44px 24px 38px; } }

/* ── Páginas interiores genéricas (page.php, Woo) ─────────────────────────── */
/*  y no : los resplandores decorativos sobresalen
   ~140px por la derecha y en móvil ensanchaban la página, que se podía
   desplazar en horizontal.  recorta SIN crear un contenedor de scroll,
   así que no rompe el  de nada que caiga dentro.
   La portada nunca falló porque  ya recortaba; estas vistas no. */
/* `overflow-x: clip` y no `hidden`: los resplandores decorativos sobresalen
   ~140px por la derecha y en móvil ensanchaban la página, que se podía
   desplazar en horizontal (se veía en Mi cuenta, tienda, carrito y checkout).
   `clip` recorta SIN crear un contenedor de scroll, así que no rompe el
   `position: sticky` de nada que caiga dentro, cosa que `hidden` sí hace.
   La portada nunca falló porque `.hero` ya recortaba; estas vistas no. */
.page-shell{ position:relative; padding:64px 0 88px; min-height:60vh; overflow-x:clip; }
.page-shell .page-title{ font-size:clamp(30px,4vw,52px); margin-bottom:34px; }
.page-content{ color:var(--text); font-size:15.5px; line-height:1.65; }
.page-content a{ color:var(--cy-txt); }
.page-content h2,.page-content h3{ margin:28px 0 12px; }

/* ── Variantes de diseño (d2) de las secciones ────────────────────────────── */
/* Hero d2: centrado */
.hero-centrado-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:820px; }
.hero-centrado .sub{ margin-inline:auto; }
.hero-centrado .hero-cta{ justify-content:center; }
.hero-metricas-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; width:100%; }
.hero-metricas-cards .stat{ text-align:center; }
.hero-metricas-cards .stat b{ font-size:26px; }
/* Por qué d2: tarjetas */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.why-card{ background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:30px 28px; transition:.2s; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.why-card:hover{ border-color:var(--cy-txt); transform:translateY(-3px); }
.why-card .num{ font-size:54px; line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--cy); }
.why-card h3{ font-size:21px; }
.why-card p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0; flex:1; }
/* Tecnología d2: centrado */
.fw-centrado .sec-head p{ margin-inline:auto; }
.fw-stats-fila{ grid-template-columns:repeat(4,1fr); margin-top:34px; }
/* Planes d2: apilado */
.plan-grupo{ font-size:22px; margin:44px 0 18px; display:flex; align-items:center; gap:12px; }
.plan-grupo::after{ content:""; flex:1; height:1px; background:var(--line); }
/* Agro d2: banner centrado */
.agro-card.agro-centrada{ grid-template-columns:1fr; text-align:center; }
.agro-card.agro-centrada .txt{ max-width:640px; margin:0 auto; }
.agro-card.agro-centrada .cta{ margin-top:6px; }
/* Contacto d2: dividido */
.contact-dividido{ text-align:left; }
.contact-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.contact-split h2{ margin-top:14px; }
.contact-split p{ color:var(--muted); font-size:16px; margin:16px 0 0; }
.contact-panel{ background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:32px; display:flex; flex-direction:column; gap:12px; }
.contact-panel .btn{ justify-content:center; }
.contact-panel .phones{ flex-direction:column; gap:16px; margin-top:6px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:920px){
  .hero-inner{ grid-template-columns:1fr; } .hero-visual{ display:none; }
  .fw-inner{ grid-template-columns:1fr; gap:32px; }
  .agro-card{ grid-template-columns:1fr; padding:38px 30px; }
  /* Solo el del header: el fallback dentro del panel móvil también usa
     .nav-links y ese SÍ debe verse */
  .site-header .nav-links{ display:none; }
  .nav-cta-desktop{ display:none; }
  .menu-btn{ display:flex; }
  .plan-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .plan-grid[data-panel="sistema"]{ max-width:none; }
  .sys-modules{ grid-template-columns:1fr; }
  .plans-controls{ justify-content:center; }
  .why-grid{ grid-template-columns:1fr; }
  .fw-stats-fila{ grid-template-columns:repeat(2,1fr); }
  .contact-split{ grid-template-columns:1fr; gap:32px; }
  .hero-metricas-cards{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; margin-top:36px; }
}
@media(max-width:760px){
  .wrap{ padding:0 20px; }
  .mobile-menu{ padding-inline:20px; }
  .why{ grid-template-columns:46px 1fr; gap:14px; } .why .tag{ display:none; }
  .why .num{ font-size:40px; }
  .hero{ padding:54px 0; }
  .hero h1{ font-size:clamp(38px,9vw,62px); }
  .sys-row{ grid-template-columns:1fr; gap:3px; text-align:left; }
  .sys-row.head{ display:none; }
  .sys-row .price{ font-size:16px; }
  .sys-row .nm{ margin-top:8px; }
  .hero-meta{ gap:18px; } .hero-meta .m b{ font-size:22px; }
  .svc-tabs{ flex-wrap:wrap; justify-content:center; }
  .sec-head h2,.contact h2,.fw-inner h2{ font-size:clamp(26px,7vw,38px); }
}
@media(max-width:560px){
  /* Con el carrito en el nav ya no cabe el chip de Agro; sigue disponible
     dentro del menú móvil */
  .site-header .agro-link{ display:none; }
}
@media(max-width:480px){
  .fw-stats{ grid-template-columns:1fr; }
  .agro-card{ padding:28px 20px; }
  .btn{ font-size:14px; padding:12px 20px; }
  .phones{ gap:22px; }
  .hero-meta{ gap:14px 22px; }
}

/* ── Tema claro ───────────────────────────────────────────────────────────────
   La paleta la resuelven los tokens; aquí solo lo que NO se puede expresar con
   una variable. La clase la pone `inc/colores.php` mirando la luminancia del
   fondo, así que también se activa con una paleta a medida clara. */
body.owari-claro{
  /* Decide de qué color pinta el SISTEMA los desplegables nativos, las barras
     de scroll y los controles de fecha. Sin esto salen oscuros sobre blanco. */
  color-scheme:light;
}
/* Los halos de color son de tema oscuro: sobre blanco quedan como manchas. */
body.owari-claro .glow{ opacity:.22; }
body.owari-claro .glow.b{ opacity:.18; }
body.owari-claro .agro-card .glow-c{ opacity:.5; }
/* La sombra de marca se diseñó para brillar sobre fondo oscuro. */
body.owari-claro .btn-primary{ box-shadow:0 6px 18px -8px rgba(0,0,0,.35); }