/* ==========================================================================
   Link007 — hoja de estilos principal
   --------------------------------------------------------------------------
   Orden del archivo:
     1. Tokens              6. Secciones de la portada
     2. Base                7. Contenido editorial (.prose)
     3. Tipografia          8. Blog y comentarios
     4. Componentes         9. Utilidades de WordPress
     5. Navegacion         10. Revelado al scroll y reduced motion

   Regla del proyecto: ningun componente se estiliza dentro de una media query
   de tema. Todos leen tokens, y los tokens se redefinen en tres capas para que
   el interruptor manual gane sobre la preferencia del sistema.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --line:#d2d2d7;
  --accent:#0071e3;
  --card-shadow:0 12px 32px rgba(0,0,0,.08);
  --nav-bg:rgba(255,255,255,.72);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:1120px;
  --gutter:22px;
  --pad-y:clamp(80px,11vw,168px);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000;
    --bg-alt:#141416;
    --text:#f5f5f7;
    --text-2:#a1a1a6;
    --text-3:#86868b;
    --line:#2a2a2e;
    --accent:#0a84ff;
    --card-shadow:0 12px 32px rgba(0,0,0,.4);
    --nav-bg:rgba(0,0,0,.72);
  }
}

:root[data-theme="dark"]{
  --bg:#000000;
  --bg-alt:#141416;
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#86868b;
  --line:#2a2a2e;
  --accent:#0a84ff;
  --card-shadow:0 12px 32px rgba(0,0,0,.4);
  --nav-bg:rgba(0,0,0,.72);
}

:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --line:#d2d2d7;
  --accent:#0071e3;
  --card-shadow:0 12px 32px rgba(0,0,0,.08);
  --nav-bg:rgba(255,255,255,.72);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video,iframe{max-width:100%;}
img{height:auto;}
a{color:inherit;}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;
  font-size:.875rem;font-weight:600;text-decoration:none;
}
.skip:focus{left:0;}

.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.screen-reader-text:focus{
  position:static!important;
  width:auto;height:auto;
  clip:auto;clip-path:none;
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
.display{
  margin:0;
  font-size:clamp(2.75rem,7vw,6rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.04;
  text-wrap:balance;
}
.display--interior{font-size:clamp(2.5rem,5.5vw,4.5rem);}

.h2{
  margin:0;
  font-size:clamp(2rem,4.5vw,3.75rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.07;
  text-wrap:balance;
}
.h3{
  margin:0;
  font-size:1.3125rem;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.25;
}
.h3 a{text-decoration:none;}
.h3 a:hover{color:var(--accent);}

.lead{
  margin:0;
  font-size:clamp(1.125rem,1.6vw,1.4375rem);
  line-height:1.45;
  color:var(--text-2);
  max-width:36ch;
  text-wrap:pretty;
}
.body{margin:0;color:var(--text-2);max-width:60ch;}
.legal{font-size:.8125rem;line-height:1.5;color:var(--text-3);letter-spacing:0;}

.eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 20px;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;
  border-radius:980px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:1rem;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background-color .2s var(--ease),filter .2s var(--ease);
}
.btn--primary{background:var(--accent);color:#fff;}
.btn--primary:hover{filter:brightness(1.08);transform:scale(1.02);}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent);}
.btn--ghost:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);transform:scale(1.02);}

.tlink{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--accent);text-decoration:none;
  font-size:1rem;
}
.tlink::after{content:"\203A";transition:transform .2s var(--ease);}
.tlink:hover::after{transform:translateX(3px);}

.actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;}

.punto{
  width:6px;height:6px;border-radius:50%;
  background:#2fbf5f;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#2fbf5f 22%,transparent);
}

.marca{
  display:inline-flex;align-items:center;gap:9px;
  font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;color:var(--text);
  margin-right:auto;
}
.marca__signo{width:25px;height:25px;flex:none;color:var(--accent);stroke-width:1.7;}
.custom-logo-link{margin-right:auto;display:inline-flex;align-items:center;}
.custom-logo{max-height:38px;width:auto;}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:transparent;border:none;border-radius:10px;
  color:var(--text-2);cursor:pointer;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.iconbtn:hover{color:var(--text);background:var(--bg-alt);}
.iconbtn svg{width:21px;height:21px;display:block;stroke-width:1.6;}

.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .2s var(--ease);
}
.wa:hover{transform:scale(1.06);}
.wa svg{width:26px;height:26px;stroke-width:1.5;}

/* ==========================================================================
   5. NAVEGACION
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
/* La barra es mas alta y con letra mas grande que el original de Apple (que usa
   12 px en 44 px de alto). Decision del cliente: prioriza legibilidad sobre
   discrecion. */
.nav__inner{display:flex;align-items:center;gap:24px;height:64px;}

.nav__desktop{display:block;}
.nav__links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav__links a{
  font-size:.9375rem;font-weight:450;
  color:var(--text-2);text-decoration:none;
  transition:color .2s var(--ease);
  white-space:nowrap;
}
.nav__links a:hover,
.nav__links .current-menu-item > a{color:var(--text);}

.nav__end{display:flex;align-items:center;gap:14px;}
.nav__cta{
  padding:9px 20px;border-radius:980px;
  background:var(--accent);color:#fff;
  font-size:.9375rem;font-weight:500;text-decoration:none;
  transition:filter .2s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{filter:brightness(1.08);}

.tema__sol,.tema__luna{display:flex;}
.tema__luna{display:none;}
:root[data-theme="dark"] .tema__sol{display:none;}
:root[data-theme="dark"] .tema__luna{display:flex;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .tema__sol{display:none;}
  :root:not([data-theme]) .tema__luna{display:flex;}
}

.nav__burger{display:none;}

.nav__panel{display:none;border-top:1px solid var(--line);padding:12px var(--gutter) 24px;}
.nav__panel.is-open{display:block;}
.nav__panel-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.nav__panel-lista a{
  display:block;padding:16px 0;
  border-bottom:1px solid var(--line);
  color:var(--text);text-decoration:none;font-size:1.1875rem;
}

/* Con la letra mas grande el menu necesita mas ancho antes de plegarse:
   por eso el corte pasa de 900 a 1040 px. */
@media (max-width:1040px){
  .nav__desktop{display:none;}
  .nav__cta{display:none;}
  .nav__burger{display:inline-flex;}
}

/* ==========================================================================
   6. SECCIONES DE LA PORTADA
   ========================================================================== */
.sec{padding-block:var(--pad-y);}
.sec--alt{background:var(--bg-alt);}
.sec--media{padding-block:0 var(--pad-y);}
.sec--ancho{padding-block:0;}

/* Seccion siempre oscura, pase lo que pase con el tema.
   En modo claro se recorta sola contra el blanco. En modo oscuro el fondo de
   la pagina tambien es negro, asi que sin estas lineas finas se fundiria con
   las secciones vecinas y se perderia el ritmo de bandas. */
.sec--dark{
  background:#000;
  --bg:#000000;
  --bg-alt:#141416;
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#86868b;
  --line:#2a2a2e;
  --accent:#0a84ff;
  color:#f5f5f7;
  border-block:1px solid #2a2a2e;
}

.sec__head{max-width:46ch;margin-bottom:64px;}
.sec__head .lead{margin-top:20px;max-width:48ch;}
.sec__buscador{margin-top:28px;}

/* --- Hero --- */
.hero{
  position:relative;
  padding-block:clamp(96px,15vw,180px) clamp(80px,11vw,150px);
  text-align:center;
  overflow:hidden;
}
.hero--interior{
  padding-block:clamp(72px,10vw,128px) clamp(56px,7vw,96px);
  text-align:left;
}
.hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%);
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.4;
  mask-image:radial-gradient(62% 55% at 50% 22%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(62% 55% at 50% 22%,#000 0%,transparent 78%);
}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;}
.hero--interior .hero__inner{align-items:flex-start;}
.hero .display{max-width:15ch;}
.hero .lead{max-width:42ch;}
.hero .actions{justify-content:center;margin-top:6px;}
.hero--interior .actions{justify-content:flex-start;}
.hero--interior .eyebrow{margin-bottom:0;}
.hero__nota{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--text-3);margin:10px 0 0;
}

/* --- Cifras --- */
.trust{border-block:1px solid var(--line);padding-block:clamp(48px,6vw,72px);}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;}
.trust__item{display:flex;flex-direction:column;gap:8px;text-align:center;}
.trust__n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2.25rem,4vw,3.25rem);
  font-weight:600;letter-spacing:-.02em;line-height:1;
}
.trust__l{font-size:.875rem;color:var(--text-3);letter-spacing:0;}
@media (max-width:720px){.trust__grid{grid-template-columns:repeat(2,1fr);}}

/* --- Tarjetas --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.cards{grid-template-columns:1fr;}}

.card{
  display:flex;flex-direction:column;gap:14px;
  padding:32px;border-radius:20px;
  background:var(--bg);border:1px solid var(--line);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);}

/* En una seccion de fondo plano la tarjeta se invierte, o quedaria del mismo
   color que el fondo y solo se veria su borde. */
.sec:not(.sec--alt):not(.sec--dark) .card,
.sec:not(.sec--alt):not(.sec--dark) .sol{background:var(--bg-alt);}
.card__icon{width:34px;height:34px;color:var(--accent);stroke-width:1.5;}
.card .body{font-size:1rem;}
.card .tlink{margin-top:auto;padding-top:8px;font-size:.9375rem;}

.card--post{padding:0;overflow:hidden;gap:0;}
.card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt);}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__cuerpo{display:flex;flex-direction:column;gap:12px;padding:28px;flex:1;}
.card__cuerpo .tlink{margin-top:auto;padding-top:8px;font-size:.9375rem;}

/* --- Rendimiento --- */
.perf__top{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:end;margin-bottom:72px;
}
.perf__intro{max-width:44ch;}
@media (max-width:860px){.perf__top{grid-template-columns:1fr;gap:28px;align-items:start;}}

.perf__diagram{
  border:1px solid var(--line);border-radius:24px;
  padding:clamp(20px,4vw,40px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  overflow-x:auto;
}
.perf__diagram svg{display:block;min-width:560px;width:100%;height:auto;}

.perf__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px;}
@media (max-width:640px){.perf__stats{grid-template-columns:1fr;gap:28px;}}
.perf__stat{display:flex;flex-direction:column;gap:6px;padding-top:22px;border-top:1px solid var(--line);}
.perf__stat b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.75rem;font-weight:600;letter-spacing:-.02em;
}
.perf__stat span{font-size:.9375rem;color:var(--text-2);}

.pulse{animation:l007-travel 2.4s var(--ease) infinite;}
@keyframes l007-travel{
  0%,6%{transform:translateX(0);opacity:0;}
  12%{opacity:1;}
  46%,58%{transform:translateX(180px);opacity:1;}
  92%{transform:translateX(0);opacity:1;}
  100%{transform:translateX(0);opacity:0;}
}

/* --- Planes --- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}

/* Con uno o dos planes se centra la rejilla en vez de dejarlos pegados a la
   izquierda ocupando un tercio del ancho. La clase la pone section-planes.php
   segun cuantos planes tengan nombre en el Customizer. */
.plans--uno{grid-template-columns:minmax(0,540px);justify-content:center;}
.plans--dos{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;}

/* Un plan solo se lee mejor con las caracteristicas en dos columnas. */
.plans--uno .plan{padding:44px 40px;}
.plans--uno .plan__price b{font-size:3rem;}
@media (min-width:640px){
  .plans--uno .plan__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;}
}

@media (max-width:900px){
  .plans,.plans--uno,.plans--dos{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
}

.plan{
  display:flex;flex-direction:column;gap:22px;
  padding:36px 32px;border-radius:20px;
  background:var(--bg);border:1px solid var(--line);
}
.plan--featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.plan__tag{
  align-self:flex-start;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
  padding:5px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.plan__price{display:flex;align-items:baseline;gap:6px;margin:0;}
.plan__price b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:2.375rem;font-weight:600;letter-spacing:-.03em;line-height:1;
}
.plan__price span{font-size:.9375rem;color:var(--text-3);}
.plan__specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.plan__specs li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--text-2);}
.plan__specs svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--accent);}
.plan .btn{width:100%;margin-top:auto;}
.plans__note{margin:32px 0 0;text-align:center;}

/* --- Soluciones ---
   Tarjetas mas grandes que las de servicios: aqui hay que convencer, no
   solo enumerar. Dos columnas para que quepa el problema y lo que incluye. */
.sols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:860px){.sols{grid-template-columns:1fr;}}

.sol{
  display:flex;flex-direction:column;gap:16px;
  padding:40px 36px;border-radius:20px;
  background:var(--bg);border:1px solid var(--line);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
}
.sol:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);}
.sol__icon{width:36px;height:36px;color:var(--accent);stroke-width:1.5;}

.sol__titulo{
  margin:0;
  font-size:clamp(1.375rem,2.1vw,1.75rem);
  font-weight:600;letter-spacing:-.022em;line-height:1.2;
  text-wrap:balance;
}

/* El problema va en cursiva y con la barra de acento: es una cita del cliente,
   no una descripcion del servicio. */
.sol__dolor{
  margin:0;padding-left:16px;
  border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  font-size:1rem;line-height:1.5;
  color:var(--text-2);font-style:italic;
}

.sol__puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.sol__puntos li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--text-2);}
.sol__puntos svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent);}

.sol__acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:auto;padding-top:10px;
}
.sol__cta{font-size:1rem;font-weight:500;}
.sol__mas{
  font-size:.9375rem;color:var(--text-3);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.sol__mas:hover{color:var(--text);border-bottom-color:var(--line);}

.sols__pie{margin:36px 0 0;text-align:center;}

/* --- Soporte --- */
.support{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media (max-width:900px){.support{grid-template-columns:1fr;gap:40px;}}
.support__texto{font-size:1.125rem;margin-top:24px;}
.support__cta{margin-top:32px;}
.support__panel{
  border:1px solid var(--line);border-radius:24px;
  padding:32px;background:var(--bg);
  display:flex;flex-direction:column;gap:20px;
}
.chat{display:flex;flex-direction:column;gap:12px;}
.chat__msg{max-width:82%;padding:12px 16px;border-radius:18px;font-size:.9375rem;line-height:1.4;margin:0;}
.chat__msg--in{align-self:flex-start;background:var(--bg-alt);border-bottom-left-radius:6px;}
.chat__msg--out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px;}
.chat__meta{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--text-3);padding-top:16px;border-top:1px solid var(--line);
}

/* --- Herramientas --- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:900px){.tools{grid-template-columns:1fr;}}
.tool{
  display:flex;flex-direction:column;gap:14px;
  padding:32px;border-radius:20px;
  background:var(--bg-alt);text-decoration:none;color:inherit;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.tool:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);}
.tool__icon{width:30px;height:30px;color:var(--accent);stroke-width:1.5;}
.tool .body{font-size:.9375rem;}
.tool .tlink{margin-top:auto;padding-top:8px;font-size:.9375rem;}

/* --- Cierre --- */
.cta{text-align:center;}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:24px;}
.cta .lead{max-width:38ch;}
.cta .actions{justify-content:center;}

/* ==========================================================================
   7. CONTENIDO EDITORIAL (.prose)
   ========================================================================== */
.prose{max-width:68ch;margin-inline:auto;}
.prose--ancho{max-width:none;margin:0;}
.prose--herramientas{max-width:none;}

.prose > * + *{margin-top:1.4em;}
.prose h2{
  font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;
  margin-top:2em;text-wrap:balance;
}
.prose h3{font-size:1.375rem;font-weight:600;letter-spacing:-.015em;margin-top:1.8em;}
.prose h4{font-size:1.125rem;font-weight:600;margin-top:1.6em;}
.prose p{color:var(--text-2);}
.prose strong{color:var(--text);font-weight:600;}
.prose a{color:var(--accent);text-decoration:none;}
.prose a:hover{text-decoration:underline;}
.prose ul,.prose ol{padding-left:1.3em;color:var(--text-2);}
.prose li + li{margin-top:.5em;}
.prose img{border-radius:16px;}
.prose figure{margin:2em 0;}
.prose figcaption{font-size:.8125rem;color:var(--text-3);margin-top:10px;text-align:center;}
.prose blockquote{
  margin:2em 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--accent);
  font-size:clamp(1.125rem,1.6vw,1.375rem);
  color:var(--text-2);
}
.prose blockquote p{margin:0;}
.prose code{
  font-family:var(--mono);font-size:.9em;
  background:var(--bg-alt);padding:2px 6px;border-radius:6px;
}
.prose pre{
  font-family:var(--mono);font-size:.9375rem;
  background:var(--bg-alt);padding:20px 24px;border-radius:12px;
  overflow-x:auto;
}
.prose pre code{background:none;padding:0;}
.prose hr{border:0;border-top:1px solid var(--line);margin:3em 0;}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.prose th{font-weight:600;}
.prose td{color:var(--text-2);}

.pagina__media{margin:0;}
.pagina__media img{width:100%;border-radius:20px;}

.aviso{
  border:1px solid var(--accent);border-radius:12px;
  padding:16px 20px;font-size:.9375rem;color:var(--text-2);
}

/* Tablas y bloques anchos nunca desbordan la pagina. */
.prose .wp-block-table,
.prose > table{display:block;overflow-x:auto;}

/* ==========================================================================
   8. BLOG Y COMENTARIOS
   ========================================================================== */
.entry__meta{
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:0;
}
.entry__meta a{text-decoration:none;}
.entry__meta a:hover{color:var(--accent);}
.entry__tags{margin-top:40px;}
.entry__tags a{text-decoration:none;}

.entry__nav{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  font-size:.9375rem;
}
.entry__nav a{color:var(--accent);text-decoration:none;}

.pagination{margin-top:64px;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  border-radius:10px;border:1px solid var(--line);
  font-family:var(--mono);font-size:.875rem;
  text-decoration:none;color:var(--text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.pagination .page-numbers:hover{color:var(--text);border-color:var(--text-3);}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;}

.comentarios__titulo{margin-bottom:28px;}
.comentarios__lista{list-style:none;margin:0 0 48px;padding:0;display:flex;flex-direction:column;gap:28px;}
.comentarios__lista .children{list-style:none;margin:24px 0 0;padding-left:28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:24px;}
.comentarios__lista .comment-body{font-size:.9375rem;color:var(--text-2);}
.comentarios__lista .comment-author{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--text);}
.comentarios__lista .comment-author img{border-radius:50%;}
.comentarios__lista .comment-meta{font-size:.75rem;color:var(--text-3);margin-bottom:10px;}
.comentarios__lista .reply{font-size:.875rem;}
.comentarios__lista .reply a{color:var(--accent);text-decoration:none;}

/* Formularios */
input[type="text"],input[type="email"],input[type="url"],input[type="search"],
input[type="tel"],input[type="number"],input[type="password"],textarea,select{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
}
textarea{min-height:140px;resize:vertical;}
label{display:block;font-size:.875rem;margin-bottom:6px;color:var(--text-2);}
.comment-form{display:flex;flex-direction:column;gap:18px;max-width:60ch;}
.comment-form .form-submit{margin:0;}
.comment-form input[type="submit"]{width:auto;}

.buscador{display:flex;gap:12px;max-width:480px;}
.buscador__campo{flex:1;}
.buscador__btn{flex:none;}

/* Widgets */
.widget{margin-bottom:40px;}
.widget__title{font-size:.8125rem;font-weight:600;margin:0 0 14px;}
.widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.9375rem;}
.widget a{color:var(--text-2);text-decoration:none;}
.widget a:hover{color:var(--text);}

/* ==========================================================================
   9. PIE DE PAGINA
   ========================================================================== */
.foot{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  padding-block:64px 40px;
  font-size:.875rem;
}
.foot__cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px 24px;}
@media (max-width:900px){.foot__cols{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.foot__cols{grid-template-columns:1fr;}}

.foot h4{margin:0 0 14px;font-size:.8125rem;font-weight:600;color:var(--text);}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot a{color:var(--text-3);text-decoration:none;transition:color .2s var(--ease);}
.foot a:hover{color:var(--text);}
.foot__about p{margin:14px 0 0;color:var(--text-3);max-width:32ch;line-height:1.55;}
.foot__about .marca{margin-right:0;}
.foot__redes{flex-direction:row!important;flex-wrap:wrap;gap:16px!important;margin-top:18px!important;}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
}

/* ==========================================================================
   10. UTILIDADES DE WORDPRESS
   ========================================================================== */
.alignleft{float:left;margin:.4em 1.6em 1em 0;}
.alignright{float:right;margin:.4em 0 1em 1.6em;}
.aligncenter{display:block;margin-inline:auto;}
.alignwide{max-width:1120px;margin-inline:auto;}
.alignfull{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:.8125rem;color:var(--text-3);text-align:center;margin-top:8px;}
.sticky{position:relative;}
.page-links{margin-top:32px;font-family:var(--mono);font-size:.875rem;}
.says,.bypostauthor{display:inherit;}

/* ==========================================================================
   11. MATERIAL DE VIDRIO
   --------------------------------------------------------------------------
   Aproximacion en CSS puro al lenguaje Liquid Glass de iOS 26.

   Se compone de cuatro capas, y las cuatro hacen falta para que el efecto
   se lea como vidrio y no como un simple panel semitransparente:

     1. Fondo translucido            -> deja pasar lo que hay detras
     2. backdrop-filter               -> lo desenfoca y le sube la saturacion
     3. Reflejo especular en el borde -> la linea clara del canto superior
     4. Luz ambiente detras           -> sin esto no hay nada que refractar

   La cuarta es la que casi todo el mundo olvida: sobre un fondo negro plano
   el vidrio es invisible. Por eso las secciones llevan un resplandor suave.

   Todo esto solo se aplica si <body> tiene la clase vidrio-on, que pone
   inc/setup.php segun el ajuste de Personalizar > Link007 > Apariencia.
   ========================================================================== */

/* Los valores de la primera version eran demasiado timidos: el ambiente salia
   "casi invisible" y sin nada detras que refractar el vidrio no se lee. En modo
   claro ademas era blanco translucido sobre blanco, o sea, ningun cambio.
   Estos valores estan subidos hasta que el efecto se note sin gritar. */
:root{
  --vidrio-fondo:rgba(255,255,255,.38);
  --vidrio-borde:rgba(255,255,255,.92);
  --vidrio-luz:rgba(255,255,255,1);
  --vidrio-sombra:0 14px 44px rgba(0,0,0,.16);
  --vidrio-brillo:rgba(255,255,255,.65);
  --vidrio-blur:26px;
  --ambiente:color-mix(in srgb,var(--accent) 34%,transparent);
}

@media (prefers-color-scheme:dark){
  :root{
    --vidrio-fondo:rgba(255,255,255,.10);
    --vidrio-borde:rgba(255,255,255,.22);
    --vidrio-luz:rgba(255,255,255,.42);
    --vidrio-sombra:0 14px 44px rgba(0,0,0,.6);
    --vidrio-brillo:rgba(255,255,255,.15);
    --ambiente:color-mix(in srgb,var(--accent) 46%,transparent);
  }
}
:root[data-theme="dark"]{
  --vidrio-fondo:rgba(255,255,255,.10);
  --vidrio-borde:rgba(255,255,255,.22);
  --vidrio-luz:rgba(255,255,255,.42);
  --vidrio-sombra:0 14px 44px rgba(0,0,0,.6);
  --vidrio-brillo:rgba(255,255,255,.15);
  --ambiente:color-mix(in srgb,var(--accent) 46%,transparent);
}
:root[data-theme="light"]{
  --vidrio-fondo:rgba(255,255,255,.38);
  --vidrio-borde:rgba(255,255,255,.92);
  --vidrio-luz:rgba(255,255,255,1);
  --vidrio-sombra:0 14px 44px rgba(0,0,0,.16);
  --vidrio-brillo:rgba(255,255,255,.65);
  --ambiente:color-mix(in srgb,var(--accent) 34%,transparent);
}

/* --- Luz ambiente: lo que el vidrio refracta ---
   Los resplandores van colocados donde caen las tarjetas, no en las esquinas:
   si el vidrio no tiene color detras, no hay nada que refractar. */
.vidrio-on .sec{position:relative;isolation:isolate;}
.vidrio-on .sec::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(64% 58% at 22% 32%,var(--ambiente),transparent 64%),
    radial-gradient(58% 54% at 80% 72%,var(--ambiente),transparent 64%);
}
.vidrio-on .sec--dark::before{opacity:.7;}

/* --- El material --- */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .vidrio-on .card,
  .vidrio-on .plan,
  .vidrio-on .sol,
  .vidrio-on .tool,
  .vidrio-on .support__panel,
  .vidrio-on .perf__diagram{
    background:
      linear-gradient(150deg,var(--vidrio-brillo) 0%,transparent 42%),
      var(--vidrio-fondo);
    backdrop-filter:blur(var(--vidrio-blur)) saturate(175%);
    -webkit-backdrop-filter:blur(var(--vidrio-blur)) saturate(175%);
    border:1px solid var(--vidrio-borde);
    box-shadow:
      inset 0 1px 0 var(--vidrio-luz),
      inset 0 -1px 0 rgba(0,0,0,.10),
      var(--vidrio-sombra);
  }

  /* El plan destacado conserva su borde de acento: es el foco de la pagina. */
  .vidrio-on .plan--featured{
    border-color:color-mix(in srgb,var(--accent) 55%,transparent);
    box-shadow:
      inset 0 1px 0 var(--vidrio-luz),
      0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),
      0 12px 40px color-mix(in srgb,var(--accent) 14%,transparent);
  }

  /* Barra de navegacion: mismo material, mas desenfoque. */
  .vidrio-on .nav{
    background:
      linear-gradient(180deg,var(--vidrio-brillo) 0%,transparent 60%),
      var(--nav-bg);
    backdrop-filter:saturate(185%) blur(26px);
    -webkit-backdrop-filter:saturate(185%) blur(26px);
    box-shadow:inset 0 -1px 0 var(--vidrio-borde);
    border-bottom:0;
  }

  /* Botones secundarios y pildoras: vidrio con canto iluminado. */
  .vidrio-on .btn--ghost,
  .vidrio-on .sk__copiar{
    background:
      linear-gradient(150deg,var(--vidrio-brillo) 0%,transparent 55%),
      var(--vidrio-fondo);
    backdrop-filter:blur(14px) saturate(170%);
    -webkit-backdrop-filter:blur(14px) saturate(170%);
    border-color:var(--vidrio-borde);
    box-shadow:inset 0 1px 0 var(--vidrio-luz);
  }
  .vidrio-on .btn--ghost:hover{
    background:
      linear-gradient(150deg,var(--vidrio-brillo) 0%,transparent 45%),
      color-mix(in srgb,var(--accent) 14%,var(--vidrio-fondo));
  }

  /* El boton primario NO es de vidrio: es el foco y necesita opacidad total. */

  /* Al pasar el raton el reflejo se abre, como si la luz girara. */
  .vidrio-on .card:hover,
  .vidrio-on .sol:hover,
  .vidrio-on .tool:hover{
    background:
      linear-gradient(150deg,var(--vidrio-brillo) 0%,transparent 55%),
      color-mix(in srgb,var(--vidrio-fondo) 80%,var(--ambiente));
    box-shadow:
      inset 0 1px 0 var(--vidrio-luz),
      0 16px 44px rgba(0,0,0,.22);
  }

  /* Boton flotante de WhatsApp: vidrio teñido de acento. */
  .vidrio-on .wa{
    background:color-mix(in srgb,var(--accent) 78%,transparent);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      0 8px 28px color-mix(in srgb,var(--accent) 35%,transparent);
  }
}

/* --- Rendimiento en tactiles ---------------------------------------------
   backdrop-filter lo recalcula la GPU en cada cuadro, por cada elemento que lo
   use. En escritorio con 15 elementos va fluido; en un movil de gama media el
   scroll se siente frenado.

   La clave: de las cuatro capas del vidrio, la unica cara es el desenfoque.
   El tinte, el canto iluminado y la luz ambiente son practicamente gratis.

   Y aqui hay suerte: lo que hay detras de las tarjetas no es contenido con
   detalle, es un degradado suave. Un degradado desenfocado y uno sin
   desenfocar se ven casi igual. Asi que en tactiles se quita solo el
   desenfoque y el efecto se conserva casi entero.

   Se mantiene en la barra superior, que si flota sobre texto en movimiento y
   ahi el desenfoque si hace falta. Es un solo elemento: eso si lo aguanta
   cualquier telefono. */
@media (hover:none) and (pointer:coarse){
  .vidrio-on .card,
  .vidrio-on .plan,
  .vidrio-on .sol,
  .vidrio-on .tool,
  .vidrio-on .support__panel,
  .vidrio-on .perf__diagram,
  .vidrio-on .btn--ghost,
  .vidrio-on .sk__copiar,
  .vidrio-on .wa{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Un poco mas de cuerpo para compensar la falta de desenfoque. */
  .vidrio-on .card,
  .vidrio-on .plan,
  .vidrio-on .sol,
  .vidrio-on .tool,
  .vidrio-on .support__panel,
  .vidrio-on .perf__diagram{
    background:
      linear-gradient(150deg,var(--vidrio-brillo) 0%,transparent 42%),
      color-mix(in srgb,var(--vidrio-fondo) 65%,var(--bg));
  }

  .vidrio-on .wa{background:var(--accent);}

  /* La barra conserva el desenfoque, con menos radio: cuesta menos y sobre
     texto en movimiento se sigue notando. */
  .vidrio-on .nav{
    backdrop-filter:saturate(165%) blur(14px);
    -webkit-backdrop-filter:saturate(165%) blur(14px);
  }
}

/* --- Accesibilidad y respaldo ---
   Quien pide menos transparencia en su sistema recibe superficies solidas.
   Es una necesidad real de accesibilidad, no una preferencia estetica. */
@media (prefers-reduced-transparency:reduce){
  .vidrio-on .card,
  .vidrio-on .plan,
  .vidrio-on .sol,
  .vidrio-on .tool,
  .vidrio-on .support__panel,
  .vidrio-on .perf__diagram,
  .vidrio-on .btn--ghost,
  .vidrio-on .nav{
    background:var(--bg);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:1px solid var(--line);
    box-shadow:none;
  }
  .vidrio-on .sec::before{display:none;}
}

/* ==========================================================================
   12. REVELADO AL SCROLL
   ========================================================================== */
/* El estado oculto SOLO se aplica si hay JavaScript (la clase .js la pone el
   script del <head>). Sin JS no hay nada que revele el contenido, asi que
   nunca lo escondemos: la pagina se ve completa, solo sin animacion. */
.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none;}

.js .stagger > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.js .stagger.is-in > *{opacity:1;transform:none;}
.js .stagger.is-in > *:nth-child(1){transition-delay:0ms;}
.js .stagger.is-in > *:nth-child(2){transition-delay:70ms;}
.js .stagger.is-in > *:nth-child(3){transition-delay:140ms;}
.js .stagger.is-in > *:nth-child(4){transition-delay:210ms;}
.js .stagger.is-in > *:nth-child(5){transition-delay:280ms;}
.js .stagger.is-in > *:nth-child(6){transition-delay:350ms;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal,.js .stagger > *{opacity:1;transform:none;}
}