/* ==========================================================================
   MC&H Networks — rediseño visual del sitio completo (tema claro)
   Traducido desde Claude Design (proyecto "MCHNetworks redesign visual
   validation", archivos MCH *.dc.html) a HTML/CSS/JS vanilla, sin el
   runtime de React que trae el formato .dc.html — CLAUDE.md §2 prohíbe
   frameworks en el sitio publicado.

   Decisión explícita del cliente: las 9 páginas comparten este sistema
   (mismo fondo, mismas tarjetas de vidrio, mismos botones), incluyendo dos
   elementos que CLAUDE.md §4 había marcado como "descartados, no
   reintroducir" — el glow ambiental y el barrido tipo radar — y esquinas
   de 10-12px en vez del estándar de 3-6px del resto del brief original.
   Ver la nota completa en CLAUDE.md §4.

   Se sigue cargando después de tokens.css y main.css: reutiliza de ahí las
   fuentes, la escala de espaciado, los tres acentos de marca (--amber/
   --cyan/--coral, mismo hex que en el diseño nuevo) y la mecánica ya
   probada de .rail/.site-nav/.reveal/.form — este archivo solo repinta
   colores y agrega los componentes que el tema claro necesita y el oscuro
   no tenía.
   ==========================================================================
   ÍNDICE
   -- Compartido en las 9 páginas --
   01. Tokens locales del tema claro
   02. Reset puntual y fondo decorativo (blobs + barrido + grilla)
   03. Barra de progreso de scroll
   04. Cabecera y nav (reskin sobre la estructura de main.css)
   05. Rail (reskin)
   06. Revelado al hacer scroll (reskin: agrega blur)
   07. Botones
   08. Kicker / pill
   09. Tarjeta de vidrio (base) + rejillas genéricas
   10. Hero genérico
   11. Contacto (CTA de cierre + formulario)
   12. Pie de página
   -- Específico de ipv6.html --
   13. "El reto" en filas con barra
   14. Bloque del protocolo
   15. Marco regulatorio
   16. Fases del servicio
   -- Específico de index.html (home) --
   17. Hero con revelado palabra por palabra
   18. "El reto" en tarjetas compactas
   19. Servicios (tarjetas-enlace) y "Proceso"
   -- Específico de transformacion-digital.html --
   20. "Por qué ahora" y "Qué cubre"
   -- Específico de mesa-de-ayuda.html --
   21. "Qué va a cubrir"
   -- Específico de contacto.html --
   22. Hero + sección de contacto con formulario
   -- Compartido: blog --
   23. Listado (blog/index.html)
   24. Artículo (blog/*.html)
   ========================================================================== */


/* == 01. Tokens locales del tema claro ==================================== */

body.theme-light{
  --rl-bg:#F5F4F1;
  --rl-panel:#ECEAE5;
  --rl-border:#DEDBD3;
  --rl-ink:#1C1B19;
  --rl-ink-dim:#6E6B63;
  --rl-teal-dark:#35766C;   /* enlaces, quip, rail activo */
  --rl-amber-dark:#B5791C;  /* etiquetas/kickers */
  --rl-coral-dark:#B8402D;  /* estados vencidos, cifra negativa */
  --rl-glass:rgba(255,255,255,.55);
  --rl-glass-border:rgba(255,255,255,.7);
}


/* == 02. Reset puntual y fondo decorativo ==================================
   Los blobs y el barrido son decisión explícita del cliente — ver nota en
   el encabezado del archivo. prefers-reduced-motion los neutraliza vía la
   regla global de main.css (selector universal con !important), no hace
   falta repetirlo acá. */

body.theme-light{
  background:var(--rl-bg);
  color:var(--rl-ink);
}
body.theme-light ::selection{background:var(--amber);color:var(--rl-ink);}

@keyframes rl-drift-a{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(60px,-42px) scale(1.12);}
  100%{transform:translate(-30px,28px) scale(.95);}
}
@keyframes rl-drift-b{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-66px,40px) scale(1.14);}
  100%{transform:translate(36px,-32px) scale(.93);}
}
@keyframes rl-sweep{
  0%{transform:translateX(-30%) rotate(8deg);}
  100%{transform:translateX(130%) rotate(8deg);}
}

.rl-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.rl-bg-blob{position:absolute;border-radius:50%;filter:blur(90px);}
.rl-bg-blob--a{
  width:680px;height:680px;left:-160px;top:-140px;
  background:radial-gradient(circle,var(--amber) 0%,transparent 70%);
  opacity:.34;
  animation:rl-drift-a 16s ease-in-out infinite alternate;
}
.rl-bg-blob--b{
  width:720px;height:720px;right:-190px;bottom:8%;
  background:radial-gradient(circle,var(--cyan) 0%,transparent 70%);
  opacity:.30;filter:blur(100px);
  animation:rl-drift-b 19s ease-in-out infinite alternate;
}
.rl-bg-sweep{
  position:absolute;top:-20%;left:0;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  opacity:.5;
  animation:rl-sweep 9s linear infinite;
}
.rl-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(28,27,25,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,27,25,.06) 1px,transparent 1px);
  background-size:56px 56px;
}
.rl-bg-spotlight{
  position:absolute;left:0;right:0;top:0;height:820px;
  transform:translateY(-50%);
  background:radial-gradient(560px 460px at 50% 50%,rgba(232,163,61,.16),transparent 70%);
}


/* == 03. Barra de progreso de scroll ======================================= */

.rl-progress-track{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:rgba(222,219,211,.9);
}
.rl-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--cyan));}


/* == 04. Cabecera y nav — reskin ===========================================
   Reutiliza la estructura/mecánica de .site-header, .site-nav, .nav-toggle
   de main.css (posicionamiento, colapso móvil vía JS); acá solo se
   sobreescriben los colores para el tema claro. */

body.theme-light .site-header{
  background:linear-gradient(to bottom,rgba(245,244,241,.8),rgba(245,244,241,.3));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
body.theme-light .site-header .logo img{height:52px;width:auto;}
body.theme-light .site-nav{color:var(--rl-ink-dim);}
body.theme-light .site-nav a:hover{color:var(--rl-amber-dark);}
body.theme-light .site-nav a[aria-current]{
  color:var(--rl-ink);border-bottom-color:var(--amber);
}
body.theme-light .nav-toggle{border-color:var(--rl-border);color:var(--rl-ink);}
body.theme-light .nav-toggle:hover{border-color:var(--cyan);color:var(--rl-teal-dark);}
body.theme-light .site-nav[hidden]{display:none;}
@media (max-width:760px){
  body.theme-light .site-nav{background:var(--rl-bg);border-color:var(--rl-border);}
}


/* == 05. Rail — reskin ======================================================
   Misma mecánica de main.css/main.js (.grp, .dot, clase .active vía JS);
   acá solo cambian los colores para fondo claro. */

body.theme-light .rail{color:var(--rl-ink-dim);}
body.theme-light .rail .grp{color:var(--rl-ink-dim);}
body.theme-light .rail .grp .dot{background:#D8D6D1;}
body.theme-light .rail .grp:hover{color:var(--rl-ink);}
body.theme-light .rail .grp.active{color:var(--rl-teal-dark);}
body.theme-light .rail .grp.active .dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
body.theme-light .rail .sep{color:var(--rl-border);}


/* == 06. Revelado al hacer scroll — reskin =================================
   main.css ya pone opacity/transform bajo .js .reveal; acá se suma el
   blur que trae el diseño nuevo. Mismo seguro sin JS que el resto del
   sitio: sin la clase .js, esto no aplica y el contenido es visible. */

body.theme-light.js .reveal{filter:blur(6px);}
body.theme-light.js .reveal.in-view{filter:blur(0);}

/* Entrada escalonada en las rejillas de tarjetas: un delay por tarjeta en
   vez del inline style que traía el diseño. Cubre hasta 5 columnas (la
   rejilla de países más ancha que usa el home). */
.rl-cards > .reveal:nth-child(2),
.rl-reg-grid > .reveal:nth-child(2){transition-delay:.06s;}
.rl-cards > .reveal:nth-child(3){transition-delay:.12s;}
.rl-cards > .reveal:nth-child(4){transition-delay:.18s;}
.rl-cards > .reveal:nth-child(5){transition-delay:.24s;}


/* == 07. Botones ============================================================
   Mismo <a class="btn btn-primary|btn-ghost" data-magnetic> de siempre;
   el "magnetismo" lo agrega initMagnetic() en main.js vía data-magnetic,
   respetando prefers-reduced-motion y solo con mouse real. */

body.theme-light .btn{
  font-family:var(--mono);font-size:.9rem;
  padding:14px 26px;border-radius:10px;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .22s ease,transform .22s ease,border-color .22s ease,color .22s ease;
}
body.theme-light .btn-primary{
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)),var(--amber);
  color:var(--rl-ink);font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 20px rgba(232,163,61,.28);
}
body.theme-light .btn-primary:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0)),var(--amber-hover);
  transform:translateY(-2px);
}
body.theme-light .btn-ghost{
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  color:var(--rl-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px rgba(28,27,25,.06);
}
body.theme-light .btn-ghost:hover{border-color:var(--cyan);color:var(--rl-teal-dark);transform:translateY(-2px);}
@media (prefers-reduced-motion: reduce){
  body.theme-light .btn-primary:hover,
  body.theme-light .btn-ghost:hover{transform:none;}
}


/* == 08. Kicker / pill ======================================================
   Etiqueta pequeña de sección (con o sin el guion de --amber-dark) y la
   píldora de estado ("Próximamente", "Para ISP, empresas..."). */

.rl-kicker{
  font-family:var(--mono);font-size:.78rem;color:var(--rl-teal-dark);
  letter-spacing:.08em;display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.rl-kicker::before{content:'';width:26px;height:1px;background:var(--rl-teal-dark);flex-shrink:0;}
.rl-kicker--amber{color:var(--rl-amber-dark);}
.rl-kicker--amber::before{background:var(--rl-amber-dark);}
.rl-kicker--center{justify-content:center;}

.rl-pill{
  display:inline-flex;gap:8px;
  font-family:var(--mono);font-size:.72rem;color:var(--rl-ink-dim);
  border:1px solid var(--rl-border);border-radius:20px;
  padding:4px 12px;margin:0 0 18px;
}


/* == 09. Tarjeta de vidrio (base) + rejillas genéricas =====================
   Todas las tarjetas del rediseño comparten .rl-glass — vidrio esmerilado,
   esquina de 12px. Es una desviación deliberada del estándar de 3-6px del
   resto del sitio, parte de la misma decisión de tema claro.

   .rl-cards es el contenedor de rejilla genérico; los modificadores fijan
   el ancho mínimo de columna tal como lo trae cada diseño (150/220/260/280
   son los cuatro anchos que usan las 9 páginas — no hay un quinto). */

.rl-glass{
  background:var(--rl-glass);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--rl-glass-border);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 26px rgba(28,27,25,.07);
}

.rl-cards{display:grid;gap:16px;}
.rl-cards--150{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.rl-cards--220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.rl-cards--260{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.rl-cards--280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

/* Bloque genérico de 2-3 ítems del mismo peso (alcance de mesa-de-ayuda,
   qué-cubre de transformación digital): número/etiqueta + título + texto. */
.rl-block{padding:34px 30px;}
.rl-block .num{font-family:var(--mono);font-size:.75rem;color:var(--rl-ink-dim);margin:0 0 14px;}
.rl-block h3{font-family:var(--display);font-size:1.15rem;margin:0 0 10px;line-height:1.35;color:var(--rl-ink);}
.rl-block p{color:var(--rl-ink-dim);font-size:.92rem;margin:0;}

/* Tarjeta-enlace de servicio (home + servicios.html): num, h3, texto,
   pie con estado + "Ver más". Toda la tarjeta es zona de clic. */
.rl-service{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:36px 30px;transition:transform .22s ease;
}
.rl-service:hover{transform:translateY(-4px);}
.rl-service .num{font-family:var(--mono);font-size:.75rem;color:var(--rl-ink-dim);margin:0;}
.rl-service.rl-featured .num{color:var(--rl-teal-dark);}
.rl-service h3{font-family:var(--display);font-size:1.25rem;margin:16px 0 12px;line-height:1.35;color:var(--rl-ink);}
.rl-service.rl-featured h3{color:var(--rl-teal-dark);}
.rl-service p{color:var(--rl-ink-dim);font-size:.95rem;margin-bottom:18px;}
.rl-service-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
.rl-status{
  font-family:var(--mono);font-size:.72rem;color:var(--rl-amber-dark);
  border:1px solid var(--rl-amber-dark);border-radius:20px;padding:4px 12px;white-space:nowrap;
}
.rl-status--muted{color:var(--rl-ink-dim);border-color:var(--rl-border);}
.rl-service-more{font-family:var(--mono);font-size:.78rem;color:var(--rl-ink-dim);}

.rl-more-wrap{text-align:center;margin-top:26px;}
.rl-more{
  font-family:var(--mono);font-size:.85rem;color:var(--rl-ink-dim);
  border-bottom:1px solid var(--rl-border);padding-bottom:2px;
}
.rl-more:hover{color:var(--rl-teal-dark);border-color:var(--rl-teal-dark);}

/* Tarjeta de artículo (usa .rl-cards.rl-cards--260 como contenedor):
   compartida por "lecturas" en ipv6.html, el teaser de blog en el home y
   el listado real del blog. */
.rl-post{position:relative;padding:26px;}
.rl-post-kicker{font-family:var(--mono);font-size:.72rem;color:var(--rl-amber-dark);letter-spacing:.08em;margin:0 0 12px;}
.rl-post-date{font-family:var(--mono);font-size:.72rem;color:var(--rl-ink-dim);display:block;margin:0 0 12px;}
.rl-post h3{font-family:var(--display);font-size:1.05rem;margin:0 0 10px;line-height:1.35;}
.rl-post h3 a{color:var(--rl-ink);}
.rl-post h3 a::after{content:'';position:absolute;inset:0;}
.rl-post p{font-size:.88rem;color:var(--rl-ink-dim);margin:0;}


/* == 10. Hero genérico ======================================================
   Para toda página que no es el home (que tiene su propio §17, con
   revelado palabra por palabra y alto completo de viewport). */

.rl-hero{padding:clamp(150px,18vw,190px) clamp(20px,5vw,64px) 70px;max-width:1180px;margin:0 auto;}
.rl-hero h1{
  font-family:var(--display);font-size:clamp(2.2rem,5.2vw,4.4rem);
  line-height:1.08;font-weight:700;letter-spacing:-.01em;
  max-width:22ch;margin:0;color:var(--rl-ink);
}
.rl-hero .rl-lead{margin-top:28px;max-width:58ch;font-size:1.15rem;color:var(--rl-ink-dim);}
.rl-hero-cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}
.rl-hero-note{margin-top:18px;font-size:.95rem;color:var(--rl-ink-dim);}
.rl-hero-note a{color:var(--rl-teal-dark);border-bottom:1px solid var(--rl-border);}

/* Breadcrumb de vuelta a servicios.html — ipv6.html, transformacion-digital.html
   y mesa-de-ayuda.html se llegan casi siempre desde el hub de servicios y no
   tienen ítem propio en el nav principal (CLAUDE.md §5.1); sin esto, volver
   a elegir otro servicio significa subir al header y bajar de nuevo. */
.rl-breadcrumb{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.8rem;color:var(--rl-ink-dim);
  margin-bottom:24px;
}
.rl-breadcrumb a{color:var(--rl-ink-dim);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.rl-breadcrumb a:hover{color:var(--rl-teal-dark);border-color:var(--rl-teal-dark);}


/* == 11. Contacto (CTA de cierre + formulario) =============================
   .rl-contacto es el bloque de cierre que usan TODAS las páginas al final
   (mailto grande + dirección IPv6). contacto.html además agrega el
   formulario, reusando .form/.field de main.css con reskin de vidrio. */

.rl-contacto{
  position:relative;z-index:1;text-align:center;
  padding:140px clamp(20px,5vw,64px) 160px;max-width:1180px;margin:0 auto;
}
.rl-contacto .rl-kicker{justify-content:center;}
.rl-contacto h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.35;margin:0 0 18px;color:var(--rl-ink);}
.rl-contacto p{color:var(--rl-ink-dim);max-width:52ch;margin:0 auto 30px;}
.rl-contact-note{font-size:.9rem;margin-top:16px;}
.rl-contact-divider{margin:70px 0 30px;}
/* Selector descendiente a propósito, no solo .rl-final-addr: la regla
   genérica ".rl-contacto p" de arriba tiene más especificidad (clase +
   elemento) que ".rl-final-addr" sola (solo clase), así que su
   margin-top:0 le ganaba a este margin-top:50px y el espacio quedaba casi
   pegado al botón. */
.rl-contacto .rl-final-addr{font-family:var(--mono);color:var(--rl-teal-dark);font-size:.9rem;margin-top:50px;letter-spacing:.03em;}

body.theme-light .field label{color:var(--rl-ink-dim);}
body.theme-light .field input,
body.theme-light .field textarea{
  color:var(--rl-ink);
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:var(--rl-border);border-radius:8px;
}
body.theme-light .field input:hover,
body.theme-light .field textarea:hover{border-color:var(--rl-ink-dim);}
body.theme-light .field input:focus,
body.theme-light .field textarea:focus{border-color:var(--cyan);outline:none;}
body.theme-light .form .btn-primary{justify-content:center;}
.rl-contacto .form{margin:0 auto;}


/* == 12. Pie de página ======================================================= */

.rl-footer{
  position:relative;z-index:1;padding:30px clamp(20px,5vw,64px);
  border-top:1px solid var(--rl-border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:.75rem;color:var(--rl-ink-dim);
}


/* == 13. ipv6.html — "El reto" en filas con barra =========================== */

.rl-reto{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:90px clamp(20px,5vw,64px);
}
.rl-reto-head{max-width:760px;margin:0 auto 46px;}
.rl-reto-head h2{font-family:var(--display);font-size:1.6rem;line-height:1.35;margin:0 0 10px;color:var(--rl-ink);}
.rl-reto-head p{color:var(--rl-ink-dim);font-size:.95rem;margin:0;}

.rl-reto-card{max-width:820px;margin:0 auto;padding:34px 32px;}
.rl-reto-avg{text-align:right;font-family:var(--mono);font-size:.75rem;color:var(--rl-amber-dark);margin:0 0 14px;}
.rl-bars{display:grid;gap:16px;}
.rl-bar-row{display:grid;grid-template-columns:120px 1fr 70px;gap:14px;align-items:center;}
.rl-bar-row .rl-bar-label{font-family:var(--mono);font-size:.85rem;color:var(--rl-ink-dim);}
.rl-bar-row.rl-bar-row--emph .rl-bar-label{color:var(--rl-ink);font-weight:600;}
.rl-bar-track{display:block;width:100%;position:relative;height:10px;background:var(--rl-panel);border-radius:5px;overflow:hidden;}
.rl-bar-fill{display:block;height:100%;border-radius:5px;transition:width 1.3s cubic-bezier(.16,1,.3,1);}
.rl-bar-fill--high{background:var(--cyan);}
.rl-bar-fill--mid{background:var(--amber);}
.rl-bar-fill--low{background:var(--coral);}
.rl-bar-value{font-family:var(--mono);font-size:.82rem;color:var(--rl-ink-dim);text-align:right;font-variant-numeric:tabular-nums;}
.rl-bar-row--emph .rl-bar-value{color:var(--rl-ink);font-weight:600;}
.rl-reto-source{font-family:var(--mono);font-size:.75rem;color:var(--rl-ink-dim);margin:22px 0 0;}
.rl-reto-source a{color:var(--rl-teal-dark);}

.rl-reto-why{max-width:820px;margin:46px auto 0;}
.rl-reto-why h3{font-family:var(--display);font-size:1.15rem;margin:0 0 16px;color:var(--rl-ink);}
.rl-reto-why ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.rl-reto-why li{display:flex;gap:12px;color:var(--rl-ink-dim);font-size:.92rem;}
.rl-reto-why li::before{content:'::';font-family:var(--mono);color:var(--rl-teal-dark);flex-shrink:0;}


/* == 14. ipv6.html — Bloque del protocolo ==================================== */

.rl-protocolo{padding:140px clamp(20px,5vw,64px);max-width:1180px;margin:0 auto;}
.rl-protocolo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
@media (max-width:900px){.rl-protocolo-grid{grid-template-columns:1fr;}}
.rl-protocolo-copy h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.35;margin:0 0 20px;color:var(--rl-ink);}
.rl-protocolo-copy p{color:var(--rl-ink-dim);margin:0 0 16px;}
.rl-quip{font-family:var(--mono);font-size:.9rem;color:var(--rl-teal-dark);margin-top:24px;padding-top:20px;border-top:1px solid var(--rl-border);}
.rl-addr-block{padding:28px;font-family:var(--mono);font-size:.85rem;}
.rl-addr-line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rl-border);color:var(--rl-ink-dim);}
.rl-addr-line:last-child{border-bottom:none;}
.rl-addr-line b{font-weight:600;}
.rl-addr-line.rl-bad b{color:var(--rl-coral-dark);}
.rl-addr-line.rl-ok b{color:var(--rl-teal-dark);}


/* == 15. ipv6.html — Marco regulatorio ======================================= */

.rl-marco{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:90px clamp(20px,5vw,64px);
}
.rl-marco-inner{max-width:1180px;margin:0 auto;}
.rl-marco-head{max-width:720px;margin-bottom:46px;}
.rl-marco-head h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.35;margin:0 0 14px;color:var(--rl-ink);}
.rl-marco-head p{color:var(--rl-ink-dim);margin:0;}

.rl-reg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px;}
@media (max-width:800px){.rl-reg-grid{grid-template-columns:1fr;}}
.rl-reg-card{padding:32px 28px;}
.rl-reg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.rl-reg-num{font-family:var(--mono);font-size:.72rem;color:var(--rl-amber-dark);letter-spacing:.06em;margin:0;}
.rl-reg-status{font-family:var(--mono);font-size:.68rem;border:1px solid var(--rl-border);border-radius:20px;padding:4px 10px;color:var(--rl-ink-dim);white-space:nowrap;}
.rl-reg-status--expired{color:var(--rl-coral-dark);border-color:var(--rl-coral-dark);}
.rl-reg-card h3{font-family:var(--display);font-size:1.1rem;line-height:1.35;margin:0 0 14px;color:var(--rl-ink);}
.rl-reg-card p{color:var(--rl-ink-dim);font-size:.92rem;margin:0 0 14px;}
.rl-reg-card strong{color:var(--rl-ink);}
.rl-reg-facts{font-size:.88rem;border-top:1px solid var(--rl-border);padding-top:14px;display:grid;gap:6px;}
.rl-reg-facts > div{display:flex;justify-content:space-between;gap:12px;}
.rl-reg-facts dt{font-family:var(--mono);font-size:.68rem;color:var(--rl-ink-dim);}
.rl-reg-facts dd{color:var(--rl-ink);margin:0;}
.rl-reg-facts dd.rl-expired{color:var(--rl-coral-dark);}

.rl-stat-hero-title{font-family:var(--display);font-size:1.15rem;margin:40px 0 16px;color:var(--rl-ink);}
.rl-stat-hero{background:rgba(232,96,74,.08);border-left:3px solid var(--coral);border-radius:0 12px 12px 0;padding:32px 32px 26px;max-width:60ch;}
.rl-stat-hero-value{font-family:var(--display);font-weight:700;font-size:clamp(3rem,8vw,4.5rem);line-height:1;color:var(--rl-coral-dark);margin:0 0 12px;}
.rl-stat-hero-body{font-size:1.1rem;color:var(--rl-ink);margin:0;}
.rl-stat-hero-body b{color:var(--rl-coral-dark);}
.rl-stat-hero-note{font-family:var(--mono);font-size:.75rem;color:var(--rl-ink-dim);margin-top:16px;padding-top:16px;border-top:1px solid rgba(232,96,74,.25);}


/* == 16a. ipv6.html — "Del blog" (panel con fondo alterno) ==================
   Mismo tratamiento de panel que .rl-reto/.rl-marco. El teaser de blog del
   home NO lleva este panel (ver §19 — ahí el fondo queda plano). */

.rl-lecturas{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:100px clamp(20px,5vw,64px);
}
.rl-lecturas-inner{max-width:1180px;margin:0 auto;}
.rl-lecturas-head{margin-bottom:46px;}
.rl-lecturas-head h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.35;margin:0 0 14px;color:var(--rl-ink);}
.rl-lecturas-head p{color:var(--rl-ink-dim);max-width:60ch;margin:0;}


/* == 16. ipv6.html — Fases del servicio ======================================= */

.rl-fases{padding:140px clamp(20px,5vw,64px);max-width:1180px;margin:0 auto;}
.rl-fases-head{max-width:720px;margin-bottom:50px;}
.rl-fases-head h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.35;margin:0 0 14px;color:var(--rl-ink);}
.rl-fases-head p{color:var(--rl-ink-dim);margin:0;}

/* ISP / Cliente final: mismo patrón visual de 2 tarjetas que Hogar/Empresa
   en mesa-de-ayuda.html (.rl-block, §09) — antes vivía solo como texto
   dentro del párrafo del head y pasaba desapercibido. */
.rl-fases-perfil{margin-bottom:56px;}

.rl-fases h3{font-family:var(--display);font-size:1.25rem;margin:0 0 20px;color:var(--rl-ink);}
.rl-fases-block{margin-bottom:56px;}
.rl-fases-block > p{color:var(--rl-ink-dim);margin:0 0 16px;max-width:70ch;}
.rl-fases-block ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px;}
.rl-fases-block li{display:flex;gap:12px;color:var(--rl-ink-dim);font-size:.92rem;}
.rl-fases-block li::before{content:'::';font-family:var(--mono);color:var(--rl-teal-dark);flex-shrink:0;}
.rl-fases-block li strong{color:var(--rl-ink);}
.rl-fases-cta{color:var(--rl-ink-dim);margin:0;}
.rl-fases-cta a{color:var(--rl-teal-dark);}

.rl-phase{padding:30px 26px;}
.rl-phase-num{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--rl-teal-dark);margin:0 0 12px;}
.rl-phase-num--amber{color:var(--rl-amber-dark);font-size:1.6rem;}
.rl-phase h4{font-family:var(--display);font-size:1.05rem;margin:0;color:var(--rl-ink);}
.rl-phase p{color:var(--rl-ink-dim);font-size:.88rem;margin:8px 0 0;}


/* == 17. index.html — Hero con revelado palabra por palabra ================= */

.rl-hero--home{
  padding:clamp(150px,20vw,200px) clamp(20px,5vw,64px) 100px;
  max-width:1180px;margin:0 auto;min-height:92vh;
  display:flex;flex-direction:column;justify-content:center;
}
.rl-hero-address{font-family:var(--mono);font-size:.85rem;color:var(--rl-ink-dim);margin:0 0 28px;}
.rl-hero-address b{color:var(--rl-teal-dark);font-weight:500;}
.rl-hero--home h1{max-width:17ch;}
.rl-hero-word{
  display:inline-block;opacity:1;transform:translateY(0);filter:blur(0);
}
/* Estado oculto solo bajo .js (mismo patrón de seguro que .reveal en
   main.css): sin JS, las palabras del titular son visibles de una.
   initHeroWords() en main.js solo agrega .in-view a todas a la vez; el
   escalonado de 60ms por palabra lo hace este nth-child, no JS. */
body.theme-light.js .rl-hero-word{
  opacity:0;transform:translateY(20px);filter:blur(6px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);
}
body.theme-light.js .rl-hero-word.in-view{opacity:1;transform:translateY(0);filter:blur(0);}
/* nth-of-type, no nth-child: el h1 intercala un <br> entre palabras
   (para forzar el salto de línea del diseño) y nth-child contaría ese
   <br> como un hijo más, desincronizando el escalonado. */
.rl-hero-word:nth-of-type(2){transition-delay:.06s;}
.rl-hero-word:nth-of-type(3){transition-delay:.12s;}
.rl-hero-word:nth-of-type(4){transition-delay:.18s;}
.rl-hero-word:nth-of-type(5){transition-delay:.24s;}
.rl-hero-word:nth-of-type(6){transition-delay:.3s;}
.rl-hero-word:nth-of-type(7){transition-delay:.36s;}
.rl-hero-word--accent{color:var(--rl-teal-dark);}


/* == 18. index.html — "El reto" en tarjetas compactas ======================== */

/* Home centra el bloque de intro y la cita fuente; ipv6.html (§13) no.
   Diferencia real del diseño, no un descuido — cada una vive en su
   modificador. */
.rl-reto-head--center{max-width:640px;margin:0 auto 50px;text-align:center;}
.rl-reto-source--center{text-align:center;}

.rl-cards--150{max-width:1200px;margin:0 auto;}
.rl-stat-card{padding:34px 26px 26px;}
.rl-stat-card .rl-bar-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--rl-ink-dim);margin:0 0 14px;}
.rl-stat-value{font-family:var(--display);font-size:2rem;margin:0 0 14px;font-variant-numeric:tabular-nums;}
.rl-stat-value--high{color:var(--rl-teal-dark);}
.rl-stat-value--mid{color:var(--rl-amber-dark);}
.rl-stat-value--low{color:var(--rl-coral-dark);}
.rl-stat-card .rl-bar-track{height:6px;}


/* == 19. index.html — Servicios (tarjetas-enlace) y "Proceso" ===============
   Las secciones planas de "servicios" y "blog" del home reutilizan la
   clase .section de main.css tal cual (mismo padding:140px...100px y
   max-width:--maxw que ya necesitan) — no hacía falta una clase nueva.
   .rl-proceso sí es nueva porque lleva panel, como .rl-marco/.rl-lecturas.
   Las tarjetas reutilizan .rl-cards.rl-cards--280 + .rl-service (§09), y
   .rl-cards.rl-cards--220 + .rl-phase con el modificador .rl-phase-num--amber
   (§16).

   .rl-section--tight es el patrón de 70px arriba / 140px abajo que usan
   servicios.html y transformación-digital.html para la sección que sigue
   justo después de su hero — el hero ya deja 70px de aire abajo, así que
   140px arriba se sentiría como un salto de más. */

.rl-section--tight{padding:70px clamp(20px,5vw,64px) 140px;max-width:1180px;margin:0 auto;}

/* Contacto que sigue a una sección plana (no panel) queda mejor con menos
   aire arriba — la sección anterior ya cerró con su propio padding. */
.rl-contacto--tight{padding-top:70px;}

.rl-proceso{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:80px clamp(20px,5vw,64px);
}
.rl-proceso-inner{max-width:1180px;margin:0 auto;}
.rl-proceso-head{margin-bottom:46px;}
.rl-proceso-head h2{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;margin:0;color:var(--rl-ink);}

/* Encabezado de sección genérico: kicker (aparte) + h2 + p, sin ancho de
   caja propio — cada sección decide su max-width. Usado por servicios y
   blog del home; ipv6.html mantiene sus -head específicos porque varían
   en detalle (ancho, si están centrados). */
.rl-section-head{margin-bottom:56px;}
.rl-section-head h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.35;margin:0 0 14px;color:var(--rl-ink);}
.rl-section-head p{color:var(--rl-ink-dim);max-width:60ch;margin:0;}


/* == 20. transformacion-digital.html — "Por qué ahora" y "Qué cubre" ========
   Mismo tratamiento de panel que .rl-reto/.rl-marco/.rl-lecturas — cuarta
   sección con ese fondo alterno, cada una en su página. "Por qué ahora" no
   lleva tarjetas debajo, solo el encabezado — por eso .rl-section-head
   necesita el max-width propio acá (las demás páginas lo fijan en su
   sección de tarjetas, no en el head). */

.rl-porque{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:100px clamp(20px,5vw,64px);
}
.rl-porque .rl-section-head{max-width:820px;margin:0 auto;}
.rl-porque .rl-section-head p{margin-bottom:16px;}
.rl-porque .rl-section-head p:last-child{margin-bottom:0;}

/* "Qué cubre": mismo padding simétrico 140px que .rl-fases (ipv6.html) —
   a diferencia de .rl-section--tight, esta sección no viene justo después
   del hero (el panel de "por qué ahora" ya está en medio), así que no
   necesita el recorte a 70px arriba. */
.rl-alcance{padding:140px clamp(20px,5vw,64px);max-width:1180px;margin:0 auto;}
.rl-alcance .rl-section-head p{margin-bottom:56px;}


/* == 21. mesa-de-ayuda.html — "Qué va a cubrir" =============================
   Mismo panel que .rl-porque/.rl-lecturas, pero con dos tarjetas .rl-block
   debajo (a diferencia de .rl-porque, que no lleva tarjetas) — de ahí un
   nombre propio en vez de reusar .rl-porque. */

.rl-cobertura{
  position:relative;z-index:1;background:var(--rl-panel);
  border-top:1px solid var(--rl-border);border-bottom:1px solid var(--rl-border);
  padding:100px clamp(20px,5vw,64px);
}
.rl-cobertura-inner{max-width:1180px;margin:0 auto;}
.rl-cobertura .rl-section-head{max-width:720px;margin-bottom:46px;}


/* == 22. contacto.html — Hero + sección de contacto con formulario ==========
   Único par hero/contacto del sitio con esta partición (60px/60px en vez
   de 70px/70px o 70px/140px) — el diseño le da menos aire porque el
   formulario ya es harto contenido debajo. .field/.field input/textarea
   ya llevan su reskin de vidrio en la sección 11 (compartida con
   cualquier página que use .form), así que acá solo faltan los paddings. */

.rl-hero--form{padding-bottom:60px;}
.rl-contacto--form{padding-top:60px;}


/* == 23. blog/index.html — Listado ==========================================
   Sin rail (única página que lo excluye, CLAUDE.md §4). El hero es el
   .rl-hero genérico tal cual (mismo 70px de siempre). La rejilla de
   artículos reutiliza .rl-cards.rl-cards--280 + .rl-post (§09) — es
   literalmente la misma tarjeta que ya usan ipv6.html y el teaser del
   home; acá es donde vive "de verdad". Solo hace falta el padding propio
   de esta sección (40px arriba porque el hero ya dejó 70, 160 abajo por
   ser la última sección de la página). */

.rl-blog-list{padding:40px clamp(20px,5vw,64px) 160px;max-width:1180px;margin:0 auto;}


/* == 24. blog/*.html — Artículo ==============================================
   Sin diseño propio en Claude Design (solo el listado lo tiene) — acá se
   extrapola el lenguaje visual ya establecido. A diferencia de las demás
   secciones de este archivo, esta es un reskin de color puro sobre las
   clases que ya existían en main.css para artículos (.article-head,
   .article-meta, .prose, .closing-line, .kicker, .sep) — el mismo patrón
   que las secciones 04-08 usan para .site-header/.rail/.reveal/.btn, no
   una reconstrucción con clases rl- nuevas. La estructura y el espaciado
   (incluido el padding-top:180px de .article-head, que se suma al 140px
   de .section) se mantienen intactos: solo cambian los colores. */

body.theme-light .kicker{color:var(--rl-amber-dark);}
body.theme-light .article-meta{color:var(--rl-ink-dim);}
body.theme-light .article-meta .sep{color:var(--rl-border);}
body.theme-light .article-meta time{color:var(--rl-ink-dim);}

body.theme-light .prose{color:var(--rl-ink-dim);}
body.theme-light .prose h2,
body.theme-light .prose h3{color:var(--rl-ink);}
body.theme-light .prose a{color:var(--rl-teal-dark);border-bottom-color:rgba(53,118,108,.35);}
body.theme-light .prose a:hover{border-bottom-color:var(--rl-teal-dark);}
body.theme-light .prose strong{color:var(--rl-ink);}
body.theme-light .prose ul li::before{color:var(--rl-teal-dark);}
body.theme-light .prose ol li::before{color:var(--rl-amber-dark);}
body.theme-light .prose blockquote{border-left-color:var(--rl-border);color:var(--rl-ink-dim);}
body.theme-light .prose pre{background:var(--rl-panel);border-color:var(--rl-border);}
body.theme-light .prose code{color:var(--rl-teal-dark);}
body.theme-light .prose pre code{color:var(--rl-ink);}

body.theme-light .closing-line{color:var(--rl-teal-dark);border-color:var(--rl-border);}

/* Tarjeta de lectura: el cuerpo del artículo (los dos .prose + la frase de
   cierre) se agrupa en una sola tarjeta de vidrio, ancha y centrada, en vez
   de quedar flotando directo sobre el fondo con grilla/blobs — eso era lo
   que hacía difícil leerlo. El título (.article-head) queda fuera, arriba,
   como portada. Texto justificado + hyphens:auto para que la justificación
   no deje ríos de espacio raros en columnas de ~700px. */
.rl-article-card{
  max-width:820px;margin:0 auto;
  padding:56px clamp(28px,6vw,76px) 64px;
}
.rl-article-card .prose{max-width:none;}
.rl-article-card .closing-line{max-width:none;text-align:center;}
body.theme-light .prose p,
body.theme-light .prose li{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
}
body.theme-light .prose pre{text-align:left;hyphens:none;}