/*
Theme Name: FISCALCLOUD
Theme URI: https://fiscalcloud.mx
Author: Grupo Bego
Description: Tema propio ligero de FiscalCloud (sin Divi). Facturación electrónica CFDI 4.0. Reconstrucción optimizada para velocidad.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: fiscalcloud
*/

/* ============ Base / reset ============ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Paleta FISCALCLOUD (azul + acento amarillo) */
  --azul:#0047bb; --azul2:#007bff; --azul-osc:#00308f;
  --naranja:#fdc100; --naranja2:#ffd43d;
  --amarillo:#fdc100;
  --tinta:#0d1b2e; --gris:#f3f6fb; --raya:#e3eaf5;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--tinta);line-height:1.55;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;font-weight:700;padding:13px 26px;border-radius:10px;font-size:15px;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn-naranja{background:var(--naranja);color:#1a1a1a;box-shadow:0 8px 20px rgba(253,193,0,.35)}
.btn-blanco{background:#fff;color:var(--azul);box-shadow:0 8px 20px rgba(0,49,143,.14)}
.btn-linea{background:transparent;color:#fff;border:2px solid #ffffff8c}
.btn-naranja.precios-btn,.btn-naranja.ctafinal-btn{background:var(--naranja);color:#1a1a1a}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--raya)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.site-header .logo img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-weight:600;font-size:15px;color:var(--tinta)}
.nav a:hover{color:var(--azul2)}
.header-cta{display:flex;align-items:center;gap:12px}

/* ============ Hero (carrusel + form sobrepuesto) ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero{position:relative;background:#eaf1fc;overflow:hidden;padding-bottom:78px}
.hero-carousel{position:relative;width:100%;aspect-ratio:1920/624;max-height:560px;min-height:340px}
.hero-carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-carousel .slide.activo{opacity:1}
.hero-carousel .slide img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-carousel .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:#ffffffd9;border:0;width:44px;height:44px;border-radius:50%;font-size:22px;color:var(--azul);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.16);display:grid;place-items:center}
.hero-carousel .prev{left:16px}.hero-carousel .next{right:16px}
.hero-carousel .dots{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;gap:8px;justify-content:center}
.hero-carousel .dots button{width:9px;height:9px;border-radius:50%;border:0;background:#ffffff8c;cursor:pointer;padding:0}
.hero-carousel .dots button.activo{background:#fff;width:22px;border-radius:6px}
.form-overlay{position:absolute;inset:0;z-index:6;pointer-events:none}
.form-overlay .wrap{position:relative;height:100%}
.form-card{position:absolute;top:24px;right:22px;width:352px;pointer-events:auto;background:#fff;border-radius:16px;box-shadow:0 22px 60px rgba(0,26,66,.28);overflow:hidden}
.form-card .tit{color:var(--tinta);text-align:center;font-weight:800;font-size:18px;padding:14px 12px 2px}
.form-card .desc{color:#5b6b85;text-align:center;font-size:12.5px;padding:0 14px 8px}
.form-card iframe{width:100%;height:520px;border:0;display:block}

/* ============ Strip de integraciones ============ */
.marcas{background:#fff;padding:26px 0;border-bottom:1px solid var(--raya)}
.marcas p{text-align:center;color:#7b8aa3;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.marcas img{margin:0 auto;max-height:110px;width:auto}

/* ============ Footer ============ */
.site-footer{background:var(--azul-osc);color:#cdd9ee;padding:34px 0;text-align:center;font-size:14px}
.site-footer img{height:32px;margin:0 auto 14px;opacity:.9}

/* ============ Responsive base ============ */
@media(max-width:900px){
  .nav{display:none}
  /* Proporción de los banners verticales (484x450) que sirve <picture> en este
     ancho: al coincidir con la de la imagen, `cover` ya no recorta nada y el
     mensaje se lee entero. Antes era 16/11 con la imagen apaisada y partía el
     texto. `object-position` vuelve al centro por lo mismo. */
  .hero-carousel{aspect-ratio:484/450;max-height:none;min-height:0}
  .hero-carousel .slide img{object-position:center}
  /* Las flechas quedaban sobre el texto del banner vertical: se suben a la zona
     de la ilustración y se mantienen en 44px. */
  .hero-carousel .arrow{top:34%}
  .hero-carousel .prev{left:8px}
  .hero-carousel .next{right:8px}
  .form-overlay{position:static;pointer-events:auto;background:#eaf1fc}
  .form-overlay .wrap{padding:0}
  /* El -26px montaba la tarjeta sobre el banner: con el banner apaisado solo
     pisaba fondo, pero el vertical lleva texto hasta abajo y le tapaba la
     última línea («confiable y sin complicaciones»). */
  .form-card{position:static;transform:none;width:auto;max-width:420px;margin:16px auto 22px}
  .form-card iframe{height:560px}
}

/* ===== Servicios ===== */
.servicios{background:#fff;padding:64px 0}
.servicios h2{text-align:center;font-size:34px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;margin:0 0 10px}
.servicios-sub{text-align:center;color:#5b6b85;font-size:17px;max-width:640px;margin:0 auto 40px}
.servicios-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.servicios-card{background:#fff;border:1px solid var(--raya);border-radius:14px;box-shadow:0 10px 30px rgba(0,49,143,.08);padding:28px;transition:transform .2s ease,box-shadow .2s ease}
.servicios-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,49,143,.13)}
.servicios-icono{width:52px;height:52px;border-radius:12px;background:rgba(0,123,255,.1);color:var(--azul2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.servicios-card h3{font-size:18px;font-weight:700;color:var(--tinta);margin:0 0 8px}
.servicios-card p{font-size:15px;line-height:1.55;color:#5b6b85;margin:0}

/* ===== Pasos ===== */
.pasos{background:var(--gris);padding:64px 0}
.pasos h2{text-align:center;font-size:34px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;margin:0 0 10px}
.pasos-sub{text-align:center;color:#5b6b85;font-size:17px;max-width:640px;margin:0 auto 40px}
.pasos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pasos-card{background:#fff;border:1px solid var(--raya);border-radius:14px;box-shadow:0 10px 30px rgba(0,49,143,.08);padding:28px;text-align:center}
.pasos-num{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;font-weight:800;color:#fff}
.pasos-num-1{background:var(--azul2)}
.pasos-num-2{background:var(--naranja);color:var(--tinta)}
.pasos-num-3{background:var(--azul)}
.pasos-card h3{font-size:18px;font-weight:700;color:var(--tinta);margin:0 0 8px}
.pasos-card p{font-size:15px;line-height:1.55;color:#5b6b85;margin:0}
.pasos-cta{text-align:center;margin-top:36px}

/* ===== Beneficios ===== */
.porque{background:#fff;padding:64px 0}
.porque h2{text-align:center;font-size:34px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;margin:0 0 10px}
.porque-sub{text-align:center;color:#5b6b85;font-size:17px;max-width:640px;margin:0 auto 40px}
.porque-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.porque-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--raya);border-radius:14px;box-shadow:0 10px 30px rgba(0,49,143,.08);padding:28px}
.porque-icono{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:rgba(0,123,255,.1);color:var(--azul2);display:flex;align-items:center;justify-content:center}
.porque-item h3{font-size:17px;font-weight:700;color:var(--tinta);margin:0 0 6px}
.porque-item p{font-size:15px;line-height:1.55;color:#5b6b85;margin:0}
.porque-cta{background:var(--azul);border-color:var(--azul)}
.porque-cta h3{color:#fff}
.porque-cta p{color:rgba(255,255,255,.85);margin-bottom:16px}

/* ===== FAQ ===== */
.faq{background:var(--gris);padding:64px 0}
.faq-titulo{text-align:center;font-size:34px;font-weight:800;color:var(--tinta);margin:0 0 10px}
.faq-sub{text-align:center;color:#5b6b85;font-size:17px;margin:0 0 36px}
.faq-lista{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,49,143,.08);margin-bottom:14px;border:1px solid var(--raya);overflow:hidden}
.faq-item summary{font-weight:700;color:var(--tinta);font-size:17px;padding:18px 52px 18px 22px;cursor:pointer;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:700;color:var(--azul2);transition:transform .2s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-resp{padding:0 22px 20px}
.faq-resp p{margin:0;color:#5b6b85;font-size:15.5px;line-height:1.65}

/* ===== Precios ===== */
.precios{background:#fff;padding:64px 0}
.precios-titulo{text-align:center;font-size:34px;font-weight:800;color:var(--tinta);margin:0 0 10px}
.precios-sub{text-align:center;color:#5b6b85;font-size:17px;margin:0 0 36px}
.precios-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.precios-card{background:#fff;border:1px solid var(--raya);border-radius:14px;box-shadow:0 10px 30px rgba(0,49,143,.08);padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;transition:transform .2s,box-shadow .2s}
.precios-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,49,143,.14)}
.precios-cant{font-size:40px;font-weight:800;color:var(--azul2);line-height:1.1}
.precios-label{font-size:14px;font-weight:700;color:var(--tinta);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.precios-precio{font-size:28px;font-weight:800;color:var(--tinta);margin-top:14px}
.precios-precio small{font-size:13px;font-weight:700;color:#5b6b85}
.precios-inc{color:#5b6b85;font-size:13.5px;line-height:1.5;margin:12px 0 0}
.precios-popular{border:2px solid var(--naranja)}
.precios-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--naranja);color:var(--tinta);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 14px;border-radius:20px;white-space:nowrap}
.precios-ancha{grid-column:1/-1;flex-direction:row;justify-content:space-between;text-align:left;gap:24px;flex-wrap:wrap}
.precios-label-ancha{text-transform:none;font-size:18px;letter-spacing:0}
.precios-ancha .precios-precio{margin-top:0}
.precios-accion{text-align:center;margin-top:36px}
.precios-btn{display:inline-block;font-size:17px;font-weight:800;padding:16px 36px;border-radius:10px}

/* ===== CTA final ===== */
.ctafinal{background:linear-gradient(120deg,var(--azul-osc),var(--azul2));padding:64px 0;text-align:center;color:#fff}
.ctafinal-titulo{font-size:40px;font-weight:800;color:#fff;margin:0 0 14px}
.ctafinal-texto{font-size:18px;color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 28px;line-height:1.6}
.ctafinal-btn{display:inline-block;font-size:18px;font-weight:800;padding:18px 42px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.ctafinal-login{font-size:14px;color:rgba(255,255,255,.85);margin:18px 0 0}

/* ===== Responsive secciones ===== */
@media(max-width:900px){
  .servicios-grid{grid-template-columns:repeat(2,1fr)}
  .pasos-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .porque-grid,.precios-grid{grid-template-columns:repeat(2,1fr)}
  .precios-ancha{flex-direction:column;text-align:center;align-items:center}
  .servicios h2,.pasos h2,.porque h2,.faq-titulo,.precios-titulo{font-size:28px}
  .ctafinal-titulo{font-size:30px}
  .servicios,.pasos,.porque,.faq,.precios,.ctafinal{padding:48px 0}
}
@media(max-width:560px){
  .servicios-grid,.porque-grid,.precios-grid{grid-template-columns:1fr}
}

/* ============ Contenido genérico (páginas y posts migrados) ============ */
.prose-wrap{padding:48px 0 72px;background:#fff}
.prose{max-width:820px;margin:0 auto}
.prose h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--tinta);margin:0 0 22px;line-height:1.15}
.prose h2{font-size:26px;font-weight:800;color:var(--tinta);margin:34px 0 12px;letter-spacing:-.01em}
.prose h3{font-size:21px;font-weight:700;color:var(--tinta);margin:26px 0 10px}
.prose p{font-size:17px;line-height:1.75;color:#33445c;margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px 24px}
.prose li{font-size:17px;line-height:1.7;color:#33445c;margin-bottom:8px}
.prose a{color:var(--azul2);text-decoration:underline}
.prose img{border-radius:12px;margin:18px auto}
.prose blockquote{border-left:4px solid var(--azul2);padding:8px 20px;margin:20px 0;background:var(--gris);border-radius:0 10px 10px 0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--raya);padding:10px 12px;text-align:left}
.prose th{background:var(--gris);font-weight:700}
.prose-meta{font-size:14px;color:#7b8aa3}
.prose-meta a{color:var(--azul2);text-decoration:none}
.prose-thumb img{width:100%;border-radius:14px}
.prose iframe{max-width:100%}

/* ============ Listado del blog ============ */
.blog-list{padding:48px 0 72px;background:var(--gris)}
.blog-h1{font-size:clamp(30px,4.5vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--tinta);margin-bottom:34px;text-align:center}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:#fff;border:1px solid var(--raya);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(4,26,66,.07);display:flex;flex-direction:column;padding-bottom:12px;transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(4,26,66,.13)}
.blog-card img{width:100%;height:180px;object-fit:cover}
/* Cabecera de reserva para entradas sin imagen destacada (ver home.php) */
.blog-sin-imagen{display:block;height:180px;position:relative;
  background:linear-gradient(135deg,var(--azul-osc) 0%,var(--azul) 55%,var(--azul2) 100%)}
.blog-sin-imagen::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;
  transform:translate(-50%,-50%);opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/contain no-repeat}
.blog-card h2{font-size:18px;font-weight:700;line-height:1.35;color:var(--tinta);margin:16px 18px 6px}
/* #8a97ab daba 2,96:1 sobre blanco (mínimo AA: 4,5). #64748b da 4,76 y sigue
   siendo más tenue que el extracto (#5b6b85), que es la jerarquía buscada. */
.blog-fecha{font-size:13px;color:#64748b;margin:0 18px 8px}
.blog-card>p{font-size:14.5px;line-height:1.55;color:#5b6b85;margin:0 18px 12px}
/* --azul2 (#007bff) da 3,98:1 -> se usa --azul-enlace (#0069e0 = 5,13:1), el
   mismo azul accesible del resto del sitio. El alto era de 22px: como es el
   CTA de la tarjeta (no un enlace dentro de un párrafo) no lo exime WCAG 2.5.8
   y se lleva a 44px. */
.blog-mas{margin:auto 18px 0;font-weight:700;font-size:14px;color:var(--azul-enlace);
  display:inline-flex;align-items:center;min-height:44px}
.blog-pag{margin-top:34px;text-align:center}
.blog-pag .nav-links{display:inline-flex;gap:8px}
.blog-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 14px;background:#fff;border:1px solid var(--raya);
  border-radius:8px;font-weight:700;color:var(--tinta)}
/* blanco sobre --azul2 = 3,98:1; sobre --azul (#0047bb) sube a 8:1 */
.blog-pag .page-numbers.current{background:var(--azul);color:#fff;border-color:var(--azul)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
/* ============ Página: Registro gratis ============ */
.pg-reg-hero{background:linear-gradient(180deg,#eaf1fc 0%,var(--gris) 55%,#fff 100%);padding:56px 0 72px}
.pg-reg-head{text-align:center;max-width:760px;margin:0 auto 44px}
.pg-reg-title{font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.08;color:var(--tinta);margin:0 0 16px;font-weight:800;letter-spacing:-.5px}
.pg-reg-sub{font-size:1.15rem;line-height:1.55;color:#3a4f6b;margin:0}
.pg-reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pg-reg-bh{font-size:1.35rem;color:var(--azul);margin:0 0 22px;font-weight:700}
.pg-reg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.pg-reg-item{display:flex;gap:16px;align-items:flex-start}
.pg-reg-ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--raya);display:flex;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 4px 14px rgba(12,77,162,.08)}
.pg-reg-item div{display:flex;flex-direction:column;gap:4px}
.pg-reg-item strong{font-size:1.05rem;color:var(--tinta);font-weight:700}
.pg-reg-item span:last-child{font-size:.95rem;line-height:1.5;color:#54688a}
.pg-reg-login{margin:28px 0 0;font-size:1rem;color:#54688a}
.pg-reg-login a{color:var(--azul2);font-weight:700}
.pg-reg-card{background:#fff;border:1px solid var(--raya);border-radius:18px;padding:32px 28px;box-shadow:0 18px 50px rgba(8,58,122,.14);position:relative}
.pg-reg-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--naranja),var(--amarillo))}
.pg-reg-ch{font-size:1.5rem;color:var(--tinta);margin:6px 0;font-weight:800}
.pg-reg-cnote{font-size:.95rem;color:#54688a;margin:0 0 20px}
.pg-reg-iframe{width:100%;height:560px;border:0;display:block;border-radius:10px}
@media (max-width:900px){.pg-reg-hero{padding:40px 0 52px}.pg-reg-grid{grid-template-columns:1fr;gap:32px}.pg-reg-iframe{height:600px}}



/* === MENÚ MÓVIL + CTA FIJA (bego, 20260720_172846) === */
.cta-fija{display:none}
.menu-toggle{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--azul,#0c4da2);cursor:pointer;min-width:44px;min-height:44px}
@media(max-width:900px){
  .site-header{position:sticky;top:0;z-index:80}
  .menu-toggle{display:inline-grid;place-items:center}
  .site-header .header-cta{display:none}
  #site-nav{display:none;position:fixed;top:62px;left:0;right:0;max-height:calc(100dvh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;align-items:stretch;background:#fff;border-top:1px solid var(--raya,#e2e5ea);padding:8px 20px 22px;gap:0;box-shadow:0 18px 40px rgba(8,58,122,.14);z-index:70}
  #site-nav.open{display:flex}
  #site-nav a{padding:13px 0;border-bottom:1px solid var(--gris,#eef1f5)}
  #site-nav .cta-movil{display:flex!important;flex-direction:column;gap:10px;padding:16px 0 6px;border:0;border-top:1px solid var(--gris,#eef1f5);margin-top:6px}
  #site-nav .cta-movil .btn{width:100%;text-align:center;justify-content:center}
  body.nav-abierto{overflow:hidden}
  .cta-fija{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:65;background:#0047bb;color:#fff;font-weight:700;font-size:16px;padding:15px;text-align:center;box-shadow:0 -4px 16px rgba(8,58,122,.18)}
  body{padding-bottom:56px}
}

/* ===== Menú con desplegables (nav-fix, paridad con el live) ===== */
.nav-drop{position:relative;display:inline-flex}
.nav-toggle{background:none;border:0;font:inherit;font-weight:600;font-size:15px;color:var(--tinta);cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
.nav-toggle:hover,.nav-drop.open .nav-toggle{color:var(--azul2)}
.nav-toggle .caret{font-size:11px;transition:transform .2s}
.nav-drop.open .nav-toggle .caret{transform:rotate(180deg)}
.nav-sub{display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:260px;background:#fff;border:1px solid var(--raya,#e2e5ea);border-radius:12px;box-shadow:0 18px 40px rgba(8,58,122,.14);padding:8px;z-index:60}
.nav-sub a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;color:var(--tinta)}
.nav-sub a:hover{background:var(--gris,#eef1f5);color:var(--azul2)}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub,.nav-drop.open .nav-sub{display:block}
/* puente invisible sobre el hueco de 12px: sin él, al bajar el cursor del botón al
   submenú se pierde el :hover y el desplegable se cierra */
.nav-drop:hover::after,.nav-drop:focus-within::after,.nav-drop.open::after{content:"";position:absolute;left:0;top:100%;width:100%;min-width:260px;height:14px;z-index:59}
@media(max-width:900px){
  .nav-drop{display:block;width:100%}
  #site-nav .nav-toggle{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--gris,#eef1f5);font-size:16px}
  #site-nav .nav-sub{position:static;box-shadow:none;border:0;border-radius:0;min-width:0;padding:2px 0 6px 14px}
  #site-nav .nav-drop:hover .nav-sub{display:none}
  #site-nav .nav-drop.open .nav-sub{display:block}
  #site-nav .nav-sub a{white-space:normal;padding:10px 0;border-bottom:1px solid var(--gris,#eef1f5)}
  /* en móvil el submenú va en flujo: el puente sobraría y taparía enlaces */
  .nav-drop:hover::after,.nav-drop:focus-within::after,.nav-drop.open::after{display:none}
}

/* ===== Hero: la tarjeta de registro tapaba el titular del banner =====
   El arte del banner (1920x624) termina hacia x=1450 y deja el resto libre a
   propósito, pero la tarjeta se anclaba al `.wrap` de 1180px, cayendo ~150px
   encima del titular. En pantallas anchas se ancla al borde real del viewport;
   por debajo de 1180px ya no cabe sin encimarse, así que se apila bajo el banner
   (mismo tratamiento que en móvil, sin tocar el breakpoint de 900px del menú).
   Además la tarjeta mide 591px fijos mientras el carrusel escala con el ancho
   (aspect-ratio 1920/624), así que por debajo de ~1700px el `overflow:hidden`
   del hero la RECORTABA por abajo (a 1440px se perdían 69px: el botón de envío).
   Por eso el overlay solo se usa donde cabe entero; en el resto va apilada. */
@media(min-width:1700px){
  .form-overlay .wrap{max-width:none;padding:0 22px}
  /* El `padding-bottom:78px` del hero reservaba sitio para que la tarjeta
     SOBRESALIERA del banner, cuando era el iframe de registro de 591px. Hoy es
     un CTA corto que cabe holgadamente dentro (termina 146px por encima del
     borde del carrusel), así que ese reservado se veía como una franja blanca
     bajo el banner. Solo hace falta corregirlo en el modo overlay: por debajo
     de 1700px la tarjeta se apila y el padding ya estaba a 0. */
  .hero{padding-bottom:0}
}
@media(max-width:1699px){
  .form-overlay{position:static;pointer-events:auto;background:#eaf1fc}
  .form-overlay .wrap{padding:0}
  .form-card{position:static;transform:none;width:auto;max-width:420px;margin:-26px auto 22px}
  .form-card iframe{height:560px}
  .hero{padding-bottom:0}
}

/* ===== Secciones de paridad de contenido con la home de producción ===== */

.btn-azul{background:var(--azul);color:#fff;box-shadow:0 8px 20px rgba(0,49,143,.22)}

/* Intro + H1 visible + multiempresa */
.intro{background:#fff;padding:64px 0}
.intro-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start}
.intro-texto h1{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--tinta);line-height:1.15;margin:0 0 20px}
.intro-texto p{font-size:17px;line-height:1.7;color:#33445c;margin:0 0 16px}
.intro-necesitas{font-weight:700;color:var(--tinta);margin-top:24px!important;margin-bottom:12px!important}
.intro-lista{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.intro-lista li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--tinta)}
.intro-lista svg{color:var(--azul2);flex:0 0 auto}
.intro-multi{background:linear-gradient(150deg,var(--azul-osc),var(--azul2));color:#fff;border-radius:16px;padding:32px;box-shadow:0 18px 40px rgba(0,49,143,.18)}
.intro-multi h2{font-size:24px;font-weight:800;color:#fff;margin:0 0 14px;line-height:1.25}
.intro-multi p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.92);margin:0 0 14px}
.intro-multi-link{display:inline-block;margin-top:6px;font-weight:700;font-size:15px;color:#fff;border-bottom:2px solid rgba(255,255,255,.5)}
.intro-multi-link:hover{border-bottom-color:#fff}

/* Aplicación móvil */
.app{background:var(--gris);padding:64px 0}
.app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.app-texto h2{font-size:30px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;line-height:1.2;margin:0 0 14px}
.app-texto p{font-size:17px;line-height:1.7;color:#5b6b85;margin:0 0 24px}
.app-tiendas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px}
.app-tiendas img{height:44px;width:auto;border-radius:7px}
.app-link{font-weight:700;font-size:15px;color:var(--azul2);border-bottom:2px solid transparent}
.app-link:hover{border-bottom-color:var(--azul2)}
.app-imagen img{width:100%;height:auto;max-width:380px;margin:0 auto;display:block}

/* Servicios: 6 tarjetas → 3 columnas */
.servicios-grid{grid-template-columns:repeat(3,1fr)}
.servicios-card a{display:inline-block;margin-top:14px;font-weight:700;font-size:14px;color:var(--azul2)}
.servicios-card a:hover{text-decoration:underline}

/* Qué incluye el servicio */
.incluye{background:var(--gris);padding:64px 0}
.incluye h2{text-align:center;font-size:32px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;line-height:1.25;margin:0 auto 34px;max-width:860px}
.incluye-lista{list-style:none;margin:0 auto;padding:0;max-width:900px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.incluye-lista li{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--raya);border-radius:11px;padding:14px 16px;font-size:15.5px;line-height:1.5;color:var(--tinta);font-weight:600}
.incluye-lista svg{color:var(--azul2);flex:0 0 auto;margin-top:2px}

/* Cómo empezar (banda oscura, como en producción) */
.empezar{background:var(--tinta);padding:64px 0;color:#fff}
.empezar-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.empezar h2{font-size:27px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.25;margin:0 0 16px}
.empezar p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 16px}
.empezar-btn{margin-top:8px}
.empezar-link{display:inline-block;margin-top:6px;font-weight:700;font-size:15px;color:#fff;border-bottom:2px solid rgba(255,255,255,.5)}
.empezar-link:hover{border-bottom-color:#fff}

/* Addendas */
.addendas-home{background:#fff;padding:64px 0}
.addendas-home h2{text-align:center;font-size:32px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;line-height:1.25;margin:0 auto 14px;max-width:820px}
.addendas-intro{text-align:center;font-size:17px;color:#5b6b85;margin:0 auto 32px;max-width:720px}
.addendas-opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin:0 auto}
.addendas-card{display:flex;gap:16px;align-items:flex-start;background:var(--gris);border:1px solid var(--raya);border-radius:14px;padding:24px}
.addendas-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--azul2);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.addendas-card p{font-size:15.5px;line-height:1.6;color:var(--tinta);margin:0}
.addendas-cierre{text-align:center;font-size:16px;line-height:1.7;color:#5b6b85;max-width:760px;margin:28px auto 0}
.addendas-accion{text-align:center;margin-top:26px}
/* el logo de marcas va aquí, como en producción, no en una banda propia */
.addendas-marcas{margin:30px auto 0;max-width:560px}
.addendas-marcas img{width:100%;height:auto;display:block}
/* botón de cierre de la sección de beneficios */
.porque-accion{text-align:center;margin-top:30px}

/* FAQ: enlace a todas */
.faq-accion{text-align:center;margin-top:28px}
.faq-link{font-weight:700;font-size:15px;color:var(--azul2)}
.faq-link:hover{text-decoration:underline}

@media(max-width:1000px){
  .servicios-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .intro-grid,.app-grid,.empezar-grid{grid-template-columns:1fr;gap:32px}
  .incluye-lista,.addendas-opciones{grid-template-columns:1fr}
  .intro,.app,.incluye,.empezar,.addendas-home{padding:48px 0}
  .app-texto h2,.incluye h2,.addendas-home h2{font-size:26px}
  .empezar h2{font-size:24px}
  .app-imagen{order:-1}
}
@media(max-width:560px){
  .servicios-grid{grid-template-columns:1fr}
  .intro-lista{grid-template-columns:1fr}
  .app-tiendas img{height:38px}
}

/* ===== Pie de 5 columnas (paridad con producción) ===== */
.site-footer{background:var(--azul-osc);color:#cdd9ee;padding:0;text-align:left;font-size:14px}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:38px;padding-top:52px;padding-bottom:44px}
.pie-marca img{height:36px;width:auto;margin:0 0 16px;opacity:.95;filter:brightness(0) invert(1)}
.pie-marca p{font-size:13.5px;line-height:1.7;color:#a9bcdd;margin:0 0 18px}
.pie-redes{display:flex;gap:10px}
.pie-redes a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#cdd9ee;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pie-redes a:hover{background:#fff;color:var(--azul-osc);border-color:#fff}
.pie-col h3{font-size:14px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.pie-col ul{list-style:none;margin:0;padding:0}
.pie-col li{margin-bottom:9px}
.pie-col a{color:#a9bcdd;font-size:14px;line-height:1.5}
.pie-col a:hover{color:#fff;text-decoration:underline}
.pie-contacto address{font-style:normal;display:flex;flex-direction:column;gap:11px}
.pie-contacto address a{color:#a9bcdd;font-size:14px;line-height:1.6}
.pie-contacto address a:hover{color:#fff}
.pie-legal{border-top:1px solid rgba(255,255,255,.13);padding:18px 0;font-size:13px;color:#8ea4c9;text-align:center}

@media(max-width:1000px){
  .pie-grid{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .pie-marca{grid-column:1/-1}
}
@media(max-width:640px){
  .pie-grid{grid-template-columns:1fr 1fr;gap:26px;padding-top:40px}
  .pie-marca{grid-column:1/-1}
}

/* ============================================================================
   ACCESIBILIDAD — correcciones medidas sobre /contacto/ (aplican a todo el sitio)
   ========================================================================== */

/* --- Contraste de enlaces (WCAG AA 4.5:1) ---------------------------------
   El azul de enlace era #007bff: 3.98:1 sobre blanco y 3.67:1 sobre la banda
   gris, por debajo del mínimo. #0069e0 da 5.13 y 4.73 conservando el tono.
   --azul2 se mantiene para acentos DECORATIVOS en texto grande (≥24px), donde
   el mínimo exigible es 3:1 y sí lo cumple.
   OJO: solo para enlaces sobre fondo CLARO. El pie es azul oscuro y su
   #a9bcdd ya da 6.0:1 sobre #00308f; aplicarle este azul lo bajaba a 2.25:1. */
:root{--azul-enlace:#0069e0}
.pagina-limpia a,
.prose a,
.faq-link,
.app-link,
.servicios-card a{color:var(--azul-enlace)}
.pagina-limpia a h1,.pagina-limpia a h2,.pagina-limpia a h3,.pagina-limpia a h4{color:var(--azul-enlace)}

/* --- Foco visible en todo elemento interactivo (requisito crítico) --------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--azul-enlace);outline-offset:2px;border-radius:4px}
/* anillo blanco SOLO sobre superficies oscuras (la cabecera es blanca) */
.site-footer a:focus-visible,.ctafinal a:focus-visible,
.intro-multi a:focus-visible,.empezar a:focus-visible,
.pagina-limpia .empezar a:focus-visible{outline-color:#fff}

/* --- Objetivos táctiles ≥44px en controles independientes -----------------
   Los enlaces en línea dentro de un párrafo quedan exentos (WCAG 2.5.8), pero
   los iconos sociales medían 34x34 y los del pie 19px de alto.               */
.pie-redes a{width:44px;height:44px}
.pie-col li{margin-bottom:2px}
.pie-col a{display:inline-flex;align-items:center;min-height:44px}
.pie-contacto address{gap:2px}
.pie-contacto address a{display:inline-flex;align-items:center;min-height:44px}

/* --- Respeto a "reducir movimiento" --------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-carousel .slide{transition:none}
}

/* --- El iframe del formulario debe poder crecer con el texto del sistema --- */
.pagina-limpia .fc-form-contacto{min-height:900px}

/* --- Contrastes puntuales medidos ----------------------------------------
   El signo "$" de las tarjetas de precio estaba en #8ea0bb: 2.66:1 sobre
   blanco, muy por debajo del mínimo para texto pequeño.                    */

/* --- Áreas táctiles de controles pequeños --------------------------------
   Los puntos del carrusel medían 9x9px. Se conserva el tamaño visual y se
   amplía el área activa con un pseudo-elemento transparente.               */
.hero-carousel .dots button{position:relative}
.hero-carousel .dots button::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.hero-carousel .dots{gap:14px}
/* barra de navegación y logo: alto mínimo cómodo sin alterar el diseño */
.site-header .nav > a,.site-header .nav .nav-toggle{min-height:44px;display:inline-flex;align-items:center}
.site-header .logo{display:inline-flex;align-items:center;min-height:44px}
.app-link,.intro-multi-link,.empezar-link,.faq-link{display:inline-flex;align-items:center;min-height:44px}
/* enlaces "Ver más" de las tarjetas de servicio y enlaces de tarjeta */
.servicios-card a{display:inline-flex;align-items:center;min-height:44px}
/* enlaces que envuelven un encabezado (tarjetas de addenda y de manual): el
   área activa medía 27px de alto */
.pagina-limpia a h2,.pagina-limpia a h3,.pagina-limpia a h4{display:flex;align-items:center;min-height:44px;margin-top:0}
/* botones de la cabecera: estaban en 40-42px */
.header-cta .btn{min-height:44px;display:inline-flex;align-items:center}
/* botón "Comprar" de las tarjetas de precio: 37px en escritorio */

/* Números de paso: blanco sobre --azul2 (#007bff) daba 3.98:1 con texto de
   16px en negrita. Sobre --azul (#0047bb) sube a 8:1. */
.addendas-num,.pasos-num{background:var(--azul)}

/* --- Banda de cierre idéntica en home e interiores -------------------------
   En las páginas interiores el título salía casi negro y el párrafo gris sobre
   el azul, porque `.pagina-limpia h2` (0,1,1) gana por especificidad a
   `.ctafinal-titulo` (0,1,0). Se iguala al tratamiento de la portada.        */
.pagina-limpia .ctafinal h2,.pagina-limpia .ctafinal .ctafinal-titulo{color:#fff}
.pagina-limpia .ctafinal p,.pagina-limpia .ctafinal .ctafinal-texto{color:rgba(255,255,255,.9)}
.pagina-limpia .ctafinal .ctafinal-login{color:rgba(255,255,255,.85)}
.pagina-limpia .ctafinal a:not(.btn){color:#fff}
.pagina-limpia .ctafinal .btn-naranja{color:#1a1a1a}
.pagina-limpia .ctafinal h2{margin-top:0}
/* centrado explícito: el bloque heredaba la alineación del contenido de Divi */
.pagina-limpia .ctafinal,.pagina-limpia .ctafinal .wrap,.pagina-limpia .ctafinal p,
.pagina-limpia .ctafinal h2{text-align:center}
.pagina-limpia .ctafinal .ctafinal-texto{margin-left:auto;margin-right:auto}

/* ============================================================================
   PÁGINAS SIN MARKUP DE DIVI (.pagina-simple)
   Son las 16 addendas re-migradas como HTML limpio. Caían en la columna de
   lectura de 820px del blog, así que dentro de /addenda/ convivían con 61
   páginas maquetadas a ancho completo y se veían de otro sitio. Aquí reciben la
   MISMA jerarquía tipográfica y el mismo ritmo que las de Divi, conservando una
   medida de lectura cómoda para los párrafos.
   ========================================================================== */
.pagina-simple{background:#fff;padding:0 0 8px}
.pagina-simple > .wrap{max-width:1080px}
.pagina-simple .prose{max-width:none}
/* miga de pan, recolocada encima del H1 como en producción */
.pagina-simple .prose .miga{margin:0 0 14px}
.pagina-simple .prose .miga p{font-size:14.5px;color:#7b8aa3;margin:0}
.pagina-simple .prose .miga a{color:var(--azul-enlace);font-weight:600}
.pagina-simple .prose > h1{font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--tinta);letter-spacing:-.02em;line-height:1.18;margin:0 0 26px;max-width:24ch}
/* bloque de entrada a dos columnas: texto + primera imagen, como producción */
.intro-dos-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin:0 0 30px}
.intro-dos-col__texto > p:first-child{margin-top:0}
.pagina-simple .prose .intro-dos-col__texto p{max-width:none}
.pagina-simple .prose .intro-dos-col__media img{margin:0;max-width:100%;border-radius:12px}
@media(max-width:900px){
  .intro-dos-col{grid-template-columns:1fr;gap:22px}
}
.pagina-simple .prose > h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--tinta);letter-spacing:-.01em;line-height:1.28;margin:46px 0 14px;padding-top:26px;border-top:1px solid var(--raya)}
.pagina-simple .prose > h2:first-of-type{border-top:0;padding-top:0}
.pagina-simple .prose > h3{font-size:20px;font-weight:700;color:var(--tinta);margin:28px 0 10px}
.pagina-simple .prose > p,.pagina-simple .prose > ul,.pagina-simple .prose > ol{max-width:70ch}
.pagina-simple .prose p{font-size:16.5px;line-height:1.75;color:#33445c;margin:0 0 16px}
.pagina-simple .prose li{font-size:16.5px;line-height:1.7;color:#33445c;margin-bottom:9px}
.pagina-simple .prose ul,.pagina-simple .prose ol{margin:0 0 18px 22px}
.pagina-simple .prose a[href]{color:var(--azul-enlace);font-weight:600}
.pagina-simple .prose a[href]:hover{text-decoration:underline}
/* Restos de Divi: la lista de "Requisitos" son <a> SIN href — no son enlaces.
   Pintarlos de azul hacía creer que se podía hacer clic. */
.pagina-simple .prose a:not([href]){color:inherit;font-weight:inherit;text-decoration:none;cursor:default}
.pagina-simple .prose hr{border:0;border-top:1px solid var(--raya);margin:10px 0}
.pagina-simple .prose p > a:not([href]):only-child{display:block;padding:4px 0}
/* CTA: la clase la pone fiscal_marcar_ctas() en PHP comparando el texto del
   párrafo con el del enlace, porque `p > a:only-child` también casaría con la
   miga de pan (los nodos de texto no cuentan para :only-child). */
.pagina-simple .prose p.fc-cta{margin:6px 0 18px}
.pagina-simple .prose p.fc-cta > a[href]{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;background:var(--azul);color:#fff;font-weight:700;font-size:16px;padding:13px 26px;
  border-radius:26px;text-decoration:none;box-shadow:0 8px 20px rgba(0,49,143,.2)}
.pagina-simple .prose p.fc-cta > a[href]:hover{background:var(--azul-osc);text-decoration:none;color:#fff}
/* las imágenes salían a 610px; producción las muestra en torno a 510-544 */
.pagina-simple .prose img{max-width:min(544px,100%);height:auto;display:block;margin:26px auto;border-radius:12px}
.pagina-simple .prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px}
.pagina-simple .prose th,.pagina-simple .prose td{border:1px solid var(--raya);padding:10px 12px;text-align:left}
.pagina-simple .prose th{background:var(--gris);font-weight:700;color:var(--tinta)}
.pagina-simple .prose blockquote{margin:0 0 20px;padding:16px 20px;background:var(--gris);border-left:4px solid var(--azul2);border-radius:0 10px 10px 0}
@media(max-width:820px){
  .pagina-simple .prose > h2{margin-top:34px;padding-top:20px}
  .pagina-simple .prose img{margin:20px auto}
}

/* ===== Página de resultados de búsqueda ===== */
.buscador-pagina{background:var(--gris);padding:52px 0 64px;min-height:55vh}
.buscador-cabecera{max-width:820px;margin:0 auto 34px}
.buscador-cabecera h1{font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--tinta);letter-spacing:-.02em;margin:0 0 10px}
.buscador-resumen{font-size:17px;color:#5b6b85;margin:0 0 20px}
.buscador-resumen strong{color:var(--tinta)}
.buscador-cabecera .fc-buscador{max-width:none;margin:0}
.buscador-lista{max-width:820px;margin:0 auto;display:grid;gap:16px}
.buscador-item{background:#fff;border:1px solid var(--raya);border-radius:14px;padding:22px 24px;box-shadow:0 8px 24px rgba(0,49,143,.06)}
.buscador-item h2{font-size:20px;font-weight:800;margin:0;line-height:1.3}
/* El título del resultado medía 24px de alto. Es el objetivo principal de la
   tarjeta, así que se lleva a 44px; el margen del h2 se absorbe en ese alto. */
.buscador-item h2 a{color:var(--tinta);display:inline-flex;align-items:center;min-height:44px}
.buscador-item h2 a:hover{color:var(--azul-enlace);text-decoration:underline}
/* #8ea0bb daba 2,66:1 sobre blanco, el peor contraste del sitio */
.buscador-ruta{font-size:13px;color:#64748b;margin:0 0 10px;word-break:break-all}
.buscador-extracto{font-size:15.5px;line-height:1.65;color:#5b6b85;margin:0 0 12px}
.buscador-enlace{font-weight:700;font-size:14.5px;color:var(--azul-enlace);display:inline-flex;align-items:center;min-height:44px}
.buscador-enlace:hover{text-decoration:underline}
.buscador-paginacion{max-width:820px;margin:28px auto 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.buscador-paginacion .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--raya);border-radius:10px;background:#fff;color:var(--azul-enlace);font-weight:700;font-size:15px}
.buscador-paginacion .page-numbers.current{background:var(--azul);color:#fff;border-color:var(--azul)}
.buscador-paginacion .page-numbers:hover:not(.current){background:var(--gris)}
.buscador-vacio{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--raya);border-radius:14px;padding:28px}
.buscador-vacio p{font-size:16.5px;line-height:1.7;color:#5b6b85;margin:0 0 12px}
.buscador-vacio ul{margin:0 0 0 20px}
.buscador-vacio li{margin-bottom:8px}
.buscador-vacio a{color:var(--azul-enlace);font-weight:600}
.buscador-vacio a:hover{text-decoration:underline}

/* ===== Hero: tarjeta de CTA en lugar del iframe de registro =====
   `pro.fiscalcloud.mx` no permite embeberse, así que el bloque pasa de
   formulario a llamada a la acción. Al no tener altura fija de iframe (591px),
   se acabó también el recorte que sufría por el `overflow:hidden` del hero. */
.form-card--cta{padding:26px 24px 24px;width:auto;max-width:380px}
.form-card--cta .tit{font-size:21px;padding:0 0 6px;text-align:left}
.form-card--cta .desc{font-size:14.5px;line-height:1.55;padding:0 0 16px;text-align:left}
.form-card-lista{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.form-card-lista li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--tinta);font-weight:600}
.form-card-lista li:before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;
  background:var(--azul2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.form-card-btn{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;font-size:16.5px}
.form-card-pie{font-size:13.5px;color:#5b6b85;margin:13px 0 0;text-align:center}
.form-card-pie a{color:var(--azul-enlace);font-weight:700}
.form-card-pie a:hover{text-decoration:underline}

/* ============================================================================
   LANDING DE ACCESO (/iniciar-sesion/)
   Dos destinos de login mientras conviven la plataforma nueva y la anterior.
   ========================================================================== */
.acceso{background:var(--gris);padding:60px 0 72px;min-height:60vh}
.acceso-cabecera{max-width:680px;margin:0 auto 40px;text-align:center}
.acceso-cabecera h1{font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--tinta);letter-spacing:-.02em;line-height:1.18;margin:0 0 12px}
.acceso-cabecera p{font-size:17.5px;line-height:1.65;color:#5b6b85;margin:0}

.acceso-opciones{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.acceso-tarjeta{background:#fff;border:1px solid var(--raya);border-radius:18px;padding:32px 28px 26px;
  display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,49,143,.07)}
/* la opción principal se distingue por peso visual, no solo por color */
.acceso-tarjeta--pro{border:2px solid var(--azul);box-shadow:0 18px 44px rgba(0,49,143,.16)}
.acceso-etiqueta{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;background:var(--azul);color:#fff;padding:5px 11px;border-radius:999px;margin-bottom:14px}
.acceso-etiqueta--gris{background:var(--gris);color:#5b6b85;border:1px solid var(--raya)}
.acceso-tarjeta h2{font-size:24px;font-weight:800;color:var(--tinta);margin:0 0 10px;letter-spacing:-.01em}
.acceso-tarjeta p{font-size:16px;line-height:1.65;color:#5b6b85;margin:0 0 20px}
.acceso-btn{width:100%;text-align:center;margin-top:auto;min-height:52px;display:inline-flex;
  align-items:center;justify-content:center;font-size:16.5px}
.acceso-pie{font-size:14.5px;color:#5b6b85;margin:14px 0 0!important;text-align:center}
.acceso-pie a{color:var(--azul-enlace);font-weight:700}
.acceso-pie a:hover{text-decoration:underline}

.acceso-ayuda{max-width:900px;margin:34px auto 0;background:#fff;border:1px solid var(--raya);
  border-radius:14px;padding:26px 28px}
.acceso-ayuda h2{font-size:19px;font-weight:800;color:var(--tinta);margin:0 0 10px}
.acceso-ayuda p{font-size:16px;line-height:1.7;color:#5b6b85;margin:0 0 10px}
.acceso-ayuda p:last-child{margin-bottom:0}
.acceso-ayuda a{color:var(--azul-enlace);font-weight:600}
.acceso-ayuda a:hover{text-decoration:underline}

@media(max-width:820px){
  .acceso{padding:44px 0 52px}
  .acceso-opciones{grid-template-columns:1fr;gap:18px}
  .acceso-tarjeta{padding:26px 22px 22px}
}

/* ============================================================================
   Bloque «Cómo se aplica esta addenda» — común a las ~77 páginas de addenda.
   ========================================================================== */
.addenda-como{background:var(--gris);padding:56px 0;border-top:1px solid var(--raya)}
.addenda-como .wrap{max-width:840px}
.addenda-como h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--tinta);
  letter-spacing:-.01em;line-height:1.28;margin:0 0 22px}
.addenda-como p{font-size:16.5px;line-height:1.7;color:#33445c;margin:0 0 16px}
.addenda-pasos{counter-reset:paso;list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.addenda-pasos li{counter-increment:paso;position:relative;padding-left:46px}
.addenda-pasos li:before{content:counter(paso);position:absolute;left:0;top:0;width:31px;height:31px;
  border-radius:50%;background:var(--azul);color:#fff;font-weight:800;font-size:15px;
  display:grid;place-items:center}
.addenda-pasos p{margin:0;padding-top:3px}
/* el aviso del timbre es el dato que más reclamaciones evita: se destaca */
.addenda-aviso{background:#fff;border:1px solid var(--raya);border-left:4px solid var(--naranja);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 18px!important}
.addenda-nota{font-size:15.5px!important;color:#5b6b85!important;background:#fff;
  border:1px solid var(--raya);border-radius:12px;padding:16px 20px;margin:0!important}
@media(max-width:820px){
  .addenda-como{padding:40px 0}
  .addenda-pasos li{padding-left:40px}
}

/* ============================================================================
   Cierre de las páginas de addenda — ver `fiscal_addenda_cierre`.
   Antes eran tres encabezados sueltos con su enlace, sin caja ni jerarquía y
   sin dejar claro qué hacía cada uno. Ahora son tres tarjetas con una acción
   cada una, y la de WhatsApp destacada por ser la que resuelve la duda.
   ========================================================================== */
.add-cierre{background:var(--gris);padding:52px 0;border-top:1px solid var(--raya)}
.add-cierre .wrap{max-width:1080px}
.add-cierre-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.add-cta{display:flex;flex-direction:column;background:#fff;border:1px solid var(--raya);
  border-radius:16px;padding:26px 24px;box-shadow:0 4px 16px rgba(4,26,66,.05)}
.add-cta h2{font-size:19px!important;font-weight:800;color:var(--tinta);margin:0 0 10px!important;
  letter-spacing:-.01em;line-height:1.3;border:0!important;padding:0!important}
.add-cta p{font-size:15.5px!important;line-height:1.6;color:#33445c;margin:0 0 14px!important}
/* Estas tarjetas viven dentro de `.prose`, cuyas reglas de enlace
   (`.pagina-simple .prose a[href]`) ganaban por especificidad y dejaban los
   botones como enlaces: el de WhatsApp salía con TEXTO AZUL sobre verde. Por
   eso los selectores van cualificados y con `a`. */
.add-cierre .add-cta a.btn{margin-top:auto;align-self:stretch;justify-content:center;
  background:#fff;color:var(--azul);border:1px solid #c3d4ee;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  padding:11px 20px;border-radius:10px;font-size:15px}
.add-cierre .add-cta a.btn:hover{background:var(--gris);border-color:var(--azul);
  color:var(--azul);text-decoration:none}
.add-cta-lista{margin:0 0 14px;padding-left:20px}
.add-cta-lista li{font-size:15px;line-height:1.55;color:#33445c;margin-bottom:6px}
.add-cta-nota{font-size:14px!important;color:#5b6b85!important;margin:0 0 14px!important}

/* La tarjeta de WhatsApp es la accion principal: se destaca con el verde del
   canal, que ademas la hace reconocible de un vistazo. El verde del boton es
   #0f7a40 y no el #25d366 de marca: sobre blanco ese da 1,98:1 con texto blanco
   y aqui hace falta cumplir AA. */
.add-cta--wa{border:2px solid #25d366;box-shadow:0 14px 34px rgba(37,211,102,.14)}
.add-cierre .add-cta a.btn-wa{margin-top:auto;align-self:stretch;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 18px;
  border:0;border-radius:10px;background:#0f7a40;color:#fff;font-weight:700;font-size:15px;
  text-decoration:none;transition:background .15s}
.add-cierre .add-cta a.btn-wa:hover{background:#0c6b38;color:#fff;text-decoration:none}
.add-cierre .add-cta a.btn-wa svg{flex:none}

@media(max-width:600px){
  .add-cierre{padding:36px 0}
  .add-cta{padding:20px 18px}
}

/* ============================================================================
   Rejilla de addendas (/addenda/) — ver `fiscal_addendas_rejilla`.
   Sustituye el muro de 152 botones azules por tarjetas con un solo destino
   claro: la tarjeta entera lleva a la addenda y el manual queda como enlace
   secundario.

   Los selectores van cualificados con `.pagina-limpia` para ganar a las reglas
   genéricas de contenido de `fc-paginas.css` (`.pagina-limpia ul`, `h3`, `a`).
   Antes la referencia era `.pagina-divi`; al convertir /addenda/ a marcado
   propio la página cambió de clase y la rejilla se quedó SIN estilos —de ahí
   que la página pasara de 11.456 a 16.055px—. Si se renombra el contenedor,
   hay que renombrarlo también aquí.
   ========================================================================== */
.pagina-limpia .add-rejilla{list-style:none;margin:8px auto 0;padding:0 22px;max-width:1080px;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

.pagina-limpia .add-item{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--raya);border-radius:14px;padding:20px 18px 14px;
  box-shadow:0 4px 14px rgba(4,26,66,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pagina-limpia .add-item:hover{transform:translateY(-3px);border-color:#c3d4ee;
  box-shadow:0 14px 32px rgba(4,26,66,.12)}

/* Altura fija: los logos vienen con proporciones muy distintas (Costco, Comex,
   MULTIASISTENCIA…) y así quedan ópticamente alineados en toda la rejilla. */
.pagina-limpia .add-logo{display:grid;place-items:center;height:58px;margin-bottom:14px}
.pagina-limpia .add-logo img{max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain}

/* El nombre va en tinta, NO en azul: con la tarjeta entera clicable el azul en
   las 78 tarjetas solo añadía ruido. El azul se reserva para el hover. */
.pagina-limpia .add-nombre{font-size:15px;font-weight:700;line-height:1.35;
  color:var(--tinta);margin:0 0 10px;letter-spacing:-.01em}
.pagina-limpia .add-nombre .add-enlace{color:var(--tinta);text-decoration:none;font-size:15px}
.pagina-limpia .add-item:hover .add-nombre .add-enlace{color:var(--azul-enlace)}
/* Enlace estirado: toda la tarjeta es clicable sin anidar <a> dentro de <a>. */
.pagina-limpia .add-enlace::after{content:"";position:absolute;inset:0;border-radius:14px}
.pagina-limpia .add-enlace:focus-visible{outline:none}
.pagina-limpia .add-item:has(.add-enlace:focus-visible){outline:3px solid var(--azul2);outline-offset:2px}

/* El manual va POR ENCIMA del enlace estirado y con su propia área táctil. */
.pagina-limpia .add-manual{position:relative;z-index:2;margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:13.5px;font-weight:600;color:#5b6b85;text-decoration:none}
.pagina-limpia .add-manual:hover{color:var(--azul-enlace);text-decoration:underline}
.pagina-limpia .add-manual svg{flex:none;opacity:.75}

/* Sin resultados en el filtro del buscador */
.pagina-limpia .add-vacio{grid-column:1/-1;margin:0;padding:26px 22px;background:#fff;
  border:1px solid var(--raya);border-radius:14px;color:#5b6b85;font-size:16px;line-height:1.6}
.pagina-limpia .add-vacio strong{color:var(--tinta)}

@media(max-width:600px){
  .pagina-limpia .add-rejilla{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;padding:0 16px}
  .pagina-limpia .add-item{padding:15px 13px 10px}
  .pagina-limpia .add-logo{height:44px;margin-bottom:10px}
  .pagina-limpia .add-logo img{max-height:44px}
  .pagina-limpia .add-nombre,.pagina-limpia .add-nombre .add-enlace{font-size:13.5px}
  .pagina-limpia .add-manual{font-size:12.5px}
}

/* ============================================================================
   PÁGINAS LIMPIAS — reemplazo de la capa de compatibilidad de Divi.
   El contenido de estas páginas ya NO trae clases et_pb_*: `convertir_divi.py`
   lo reescribió a este marcado propio. Cada página convertida deja de depender
   de `fc-divi.css`, que es el objetivo: cuando no quede ninguna, se borra.

   Componentes: .sec / .fila / .col / .txt / .fig / .plan / .acordeon
   ========================================================================== */
.pagina-limpia{--fila:1080px}

/* --- Bandas y rejilla ---------------------------------------------------- */
.pagina-limpia .sec{padding:56px 0}
.pagina-limpia .sec--alt{background:var(--gris)}
/* Banda de BANNER: la sección solo contiene la imagen de cabecera a ancho
   completo, sin texto. El padding de banda le metía 112px de blanco por encima
   y por debajo (y el fondo gris asomaba como una franja). */
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)){
  padding:0;background:none}
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) .fila{
  max-width:none;padding:0;gap:0}
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) img{
  display:block;width:100%;border-radius:0}
/* `line-height:0` en el contenedor: aunque la <img> sea `display:block`, el
   salto de línea que la rodea en el HTML crea una caja de línea y dejaba 24px
   de blanco DENTRO del figure, justo debajo del banner. */
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) .fig,
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) .col{
  line-height:0;font-size:0}
.pagina-limpia .sec + .sec{border-top:1px solid var(--raya)}
/* Dos bandas seguidas del mismo color se funden en una: la segunda no repite
   el padding ni pinta línea. */
.pagina-limpia .sec--alt + .sec--alt{border-top:0;padding-top:0}
/* …PERO la banda de banner no cuenta: su fondo ya se anuló, así que no hay
   continuidad de color que justificar, y la regla anterior dejaba el contenido
   pegado a la imagen (4 de 6 páginas: facturación, precios, cotizaciones y
   nómina salían a 0px de separación). Se le devuelve el respiro. */
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) + .sec{
  padding-top:56px;border-top:0}

.pagina-limpia .fila{max-width:var(--fila);margin:0 auto;padding:0 22px;
  display:grid;gap:30px;align-items:start}
.pagina-limpia .fila--anidada{padding:0;gap:22px}
.pagina-limpia .col--2{grid-column:span 1}

/* Aire ENTRE filas de una misma sección. El `gap:30px` de la rejilla solo separa
   columnas hermanas; dos `.fila` consecutivas quedaban a 0px y el título de la
   segunda salía pegado al último párrafo de la primera (el buscador de
   /manuales-…/ era el caso claro). Es lo que el usuario describió como
   «no tienen el espacio necesario», ahora en los encabezados. */
.pagina-limpia .fila + .fila{margin-top:34px}
/* Un H2 que no abre su bloque necesita separarse de lo que lleva encima:
   TODOS los encabezados llevan `margin-top:0` para no descuadrar el arranque
   de las columnas, y sin esta excepción quedan cosidos al párrafo anterior. */
.pagina-limpia .txt > h2:not(:first-child),
.pagina-limpia .col > h2:not(:first-child){margin-top:36px}
/* …salvo los encabezados que solo envuelven un enlace: esos son entradas de
   índice y tienen que seguir compactos (ver `h3:has(> a:only-child)` más abajo). */
.pagina-limpia .txt > h3:not(:first-child):not(:has(> a:only-child)){margin-top:26px}
@media(min-width:860px){
  .pagina-limpia .fila{grid-auto-flow:column;grid-auto-columns:1fr}
  /* Una fila con columnas de distinto peso respeta la proporción de origen. */
  .pagina-limpia .fila:has(.col--2-3){grid-auto-flow:row;grid-template-columns:2fr 1fr}
  .pagina-limpia .fila:has(.col--3-4){grid-auto-flow:row;grid-template-columns:3fr 1fr}
  .pagina-limpia .fila:has(.col--2-5){grid-auto-flow:row;grid-template-columns:2fr 3fr}
  .pagina-limpia .fila:has(.col--3-5){grid-auto-flow:row;grid-template-columns:3fr 2fr}
}

/* --- Tipografía del contenido -------------------------------------------- */
.pagina-limpia h1{font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--tinta);
  letter-spacing:-.02em;line-height:1.18;margin:0 0 16px}
.pagina-limpia h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--tinta);
  letter-spacing:-.01em;line-height:1.28;margin:0 0 14px}
.pagina-limpia h3{font-size:19px;font-weight:700;color:var(--tinta);line-height:1.35;margin:0 0 10px}
.pagina-limpia h4{font-size:17px;font-weight:700;color:var(--tinta);margin:0 0 8px}
.pagina-limpia p{font-size:16.5px;line-height:1.7;color:#33445c;margin:0 0 14px}
.pagina-limpia .txt > *:last-child{margin-bottom:0}
.pagina-limpia a{color:var(--azul-enlace)}
.pagina-limpia a:hover{text-decoration:underline}
.pagina-limpia ul,.pagina-limpia ol{margin:0 0 16px;padding-left:20px}
.pagina-limpia li{font-size:16.5px;line-height:1.65;color:#33445c;margin-bottom:7px}
.pagina-limpia strong{color:var(--tinta)}
/* El contenido heredado abusaba de la cursiva en listas: se normaliza. */
.pagina-limpia li em,.pagina-limpia li i{font-style:normal}

.pagina-limpia .fig{margin:0}
.pagina-limpia .fig img,.pagina-limpia img{max-width:100%;height:auto;border-radius:12px}

/* --- Botones -------------------------------------------------------------- */
/* Con 8-14 botones por página, el azul sólido en todos creaba un muro. El
   sólido queda para la acción principal; el resto van en contorno. */
.pagina-limpia .btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 22px;border-radius:10px;font-weight:700;font-size:15px;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pagina-limpia .btn:hover{text-decoration:none}
.pagina-limpia .btn-azul{background:var(--azul);color:#fff;border:1px solid var(--azul)}
.pagina-limpia .btn-azul:hover{background:var(--azul-osc);border-color:var(--azul-osc)}
.pagina-limpia .btn-linea{background:#fff;color:var(--azul);border:1px solid #c3d4ee}
.pagina-limpia .btn-linea:hover{background:var(--gris);border-color:var(--azul)}

/* --- Tarjetas de precio --------------------------------------------------- */
/* `.planes` es el contenedor de tarifas (el antiguo ul.et_pb_pricing). Sin
   rejilla propia las tarjetas se apilan a ancho completo. */
.pagina-limpia .planes{display:grid;gap:18px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pagina-limpia .fila:has(.planes){grid-auto-flow:row}
.pagina-limpia .fila:has(.plan){grid-auto-flow:row;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--raya);
  border-radius:16px;padding:22px 20px 20px;box-shadow:0 4px 16px rgba(4,26,66,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.plan:hover{transform:translateY(-3px);border-color:#c3d4ee;box-shadow:0 16px 34px rgba(4,26,66,.12)}
/* La cabecera era una banda azul sólida en cada tarjeta: ocho bloques azules
   compitiendo. Ahora el color se reserva para la cifra y el plan destacado. */
.plan-cab{background:none;padding:0;margin:0 0 12px;text-align:left}
.plan-titulo{font-size:16px;font-weight:800;color:var(--tinta);margin:0;letter-spacing:-.01em}
.plan-cab p,.plan-cab span{font-size:13.5px;color:#5b6b85;margin:2px 0 0}
.plan-precio{padding:0;margin:0 0 14px;display:flex;align-items:baseline;gap:2px}
.plan-moneda{font-size:17px;font-weight:700;color:#5b6b85;align-self:flex-start;margin-top:6px}
.plan-cifra,.plan-sum{font-size:34px;font-weight:800;color:var(--azul);letter-spacing:-.02em;line-height:1}
.plan-frec{font-size:13.5px;color:#5b6b85;margin-left:4px}
.plan-lista{margin:0 0 18px;padding:0;list-style:none}
.plan-lista ul{margin:0;padding:0;list-style:none}
.plan-lista li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;
  color:#33445c;margin-bottom:8px;font-style:normal}
.plan-lista li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230047bb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{margin-top:auto;width:100%}
.plan--destacado{border:2px solid var(--azul);box-shadow:0 18px 40px rgba(0,49,143,.14)}
/* El «sello» de Divi lo llevan las OCHO tarjetas con el mismo texto («Adquiere
   tu paquete de facturas»), así que no distingue nada: como insignia naranja
   era puro ruido repetido. Se degrada a subtítulo discreto. */
.plan-sello{align-self:flex-start;background:none;color:#5b6b85;font-size:12.5px;
  font-weight:600;letter-spacing:0;text-transform:none;padding:0;margin:0 0 10px}

/* --- Acordeón (details nativos) ------------------------------------------ */
/* El acordeón de Divi llegó sin su JS y el tema tenía que reimplementarlo.
   Con <details> es nativo: accesible, con teclado y sin una línea de script. */
.acordeon{display:grid;gap:10px}
.acordeon-item{background:#fff;border:1px solid var(--raya);border-radius:12px;overflow:hidden}
.acordeon-item[open]{border-color:#c3d4ee;box-shadow:0 8px 24px rgba(4,26,66,.07)}
.acordeon-item summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;
  font-size:16.5px;font-weight:700;color:var(--tinta);position:relative;min-height:44px;
  display:flex;align-items:center}
.acordeon-item summary::-webkit-details-marker{display:none}
.acordeon-item summary::after{content:"";position:absolute;right:20px;top:50%;
  width:13px;height:13px;margin-top:-6px;border-right:2.5px solid var(--azul);
  border-bottom:2.5px solid var(--azul);transform:rotate(45deg);transition:transform .2s}
.acordeon-item[open] summary::after{transform:rotate(-135deg)}
.acordeon-item summary:hover{background:var(--gris)}
.acordeon-item summary:focus-visible{outline:3px solid var(--azul2);outline-offset:-3px}
.acordeon-cuerpo{padding:0 20px 18px}
.acordeon-cuerpo > *:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){
  .acordeon-item summary::after{transition:none}
  .plan{transition:none}
}

/* --- Tablas del contenido ------------------------------------------------- */
/* En /complementos/ cada complemento es una fila de tabla: icono | nombre +
   descripción | botón. Con alineación al centro las filas bailaban y los
   botones quedaban a distinta altura; arriba quedan alineados. */
.pagina-limpia table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px}
.pagina-limpia td,.pagina-limpia th{padding:14px 14px;border-bottom:1px solid var(--raya);
  vertical-align:top;text-align:left}
.pagina-limpia tr:last-child td{border-bottom:0}
.pagina-limpia thead th{font-weight:800;color:var(--tinta);background:var(--gris);vertical-align:middle}
.pagina-limpia td img{width:56px;height:auto;border-radius:8px}
/* Los nombres venían como encabezado grande y EN MAYÚSCULAS: dentro de una
   celda compiten con los títulos de sección. Se bajan a escala de tabla. */
.pagina-limpia td h2,.pagina-limpia td h3,.pagina-limpia td h4{font-size:16px;
  line-height:1.3;margin:0 0 6px;letter-spacing:0}
.pagina-limpia td p{font-size:14.5px;line-height:1.55;margin:0 0 10px}
.pagina-limpia td p:last-child{margin-bottom:0}
.pagina-limpia td .btn{padding:9px 16px;font-size:14px;white-space:nowrap}
/* La tabla no debe forzar scroll horizontal en móvil. */
@media(max-width:700px){
  .pagina-limpia td,.pagina-limpia th{padding:10px 8px;font-size:14.5px}
  .pagina-limpia td img{width:40px}
}

/* Títulos largos: repartir las líneas en vez de dejar una palabra suelta. */
.pagina-limpia h1,.pagina-limpia h2,.pagina-limpia .plan-titulo{text-wrap:balance}

@media(max-width:859px){
  .pagina-limpia .sec{padding:38px 0}
  .pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) + .sec{padding-top:38px}
  .pagina-limpia .fila{gap:22px}
  .plan{padding:18px 16px 16px}
}

/* ============================================================================
   MÓDULOS QUE INYECTA EL TEMA (rescatados de la difunta capa `fc-divi.css`).
   Divi migró estos módulos vacíos y `fiscal_reinyectar_modulos` los rellena en
   tiempo de ejecución: buscador de /addenda/ y /manuales-…/, y formulario y
   mapa de /contacto/. Sus estilos vivían en la capa de compatibilidad, así que
   al retirarla el buscador quedó como un input desnudo. No dependen del
   contenedor de página: el mismo formulario se usa en los resultados de
   búsqueda (`.buscador-pagina`).
   ========================================================================== */
.fc-buscador{display:flex;gap:10px;max-width:680px;margin:0 0 22px}
.fc-buscador input[type=search]{flex:1;min-width:0;padding:13px 16px;font:inherit;
  font-size:16px;border:1px solid var(--raya);border-radius:10px;background:#fff;
  color:var(--tinta);-webkit-appearance:none;appearance:none}
.fc-buscador input[type=search]:focus{outline:2px solid var(--azul2);outline-offset:1px;
  border-color:var(--azul2)}
.fc-buscador button{background:var(--azul);color:#fff;border:0;border-radius:10px;
  padding:13px 24px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;
  min-height:44px}
.fc-buscador button:hover{background:var(--azul-osc)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pagina-limpia .fc-form-contacto{width:100%;max-width:520px;height:900px;border:0;
  display:block;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,49,143,.08)}
.pagina-limpia .fc-mapa{margin-top:40px}
.pagina-limpia .fc-mapa iframe{width:100%;height:420px;border:0;display:block}

/* ============================================================================
   /comprar-folios-digitales/ — pasos y formas de pago.
   Antes los cuatro pasos eran filas sueltas de texto + ilustración: sin
   numeración visible, sin alineación entre columnas y con las imágenes comiendo
   el doble de espacio que el texto. Aquí van como pasos alternos con su número.
   ========================================================================== */
.pagina-limpia .pasos-compra{max-width:1080px;margin:0 auto;padding:0 22px;display:grid;gap:14px}
.paso-compra{display:grid;grid-template-columns:1fr .85fr;gap:36px;align-items:center;
  background:#fff;border:1px solid var(--raya);border-radius:16px;padding:28px 30px;
  box-shadow:0 4px 16px rgba(4,26,66,.05)}
/* Alterna el lado de la ilustración para dar ritmo sin desalinear el texto. */
.paso-compra:nth-child(even) .paso-compra__texto{order:2}
.paso-compra__texto{min-width:0}
.paso-compra__num{display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--azul);color:#fff;font-weight:800;font-size:16px;
  margin-bottom:12px}
.paso-compra h3{font-size:21px;margin:0 0 10px}
.paso-compra p,.paso-compra li{font-size:16px}
.paso-compra ul,.paso-compra ol{margin-bottom:0}
.paso-compra__media{margin:0;display:grid;place-items:center}
.paso-compra__media img{max-width:100%;max-height:250px;width:auto;border-radius:12px}

/* Formas de pago: la pregunta real de quien llega aquí es cuándo se acredita. */
.pagina-limpia .pagos-lista{max-width:1080px;margin:0 auto;padding:0 22px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pago{background:#fff;border:1px solid var(--raya);border-radius:14px;padding:22px 20px;
  box-shadow:0 4px 14px rgba(4,26,66,.05)}
.pago h3{font-size:17px;margin:0 0 8px}
.pago p{font-size:15.5px;margin:0 0 10px}
.pago-tiempo{margin:0!important;padding-top:10px;border-top:1px solid var(--raya);
  font-size:14.5px;color:#5b6b85}
.pago-tiempo strong{color:var(--tinta)}

.pagina-limpia .entradilla{font-size:18px;line-height:1.65;color:#33445c;max-width:70ch}
.pagina-limpia .miga{font-size:14.5px;color:#7b8aa3;margin:0 0 12px}
.pagina-limpia .miga a{color:var(--azul-enlace);font-weight:600}

@media(max-width:859px){
  .paso-compra{grid-template-columns:1fr;gap:20px;padding:22px 20px}
  .paso-compra:nth-child(even) .paso-compra__texto{order:0}
  .paso-compra__media img{max-height:200px}
}

/* --- Aire alrededor de los CTA -------------------------------------------
   Los botones quedaban PEGADOS al párrafo anterior (0px de separación en casi
   todas las páginas): sin aire no se leen como una acción, parecen parte del
   texto. Se les da respiro arriba.

   Se excluyen los botones que viven dentro de una tarjeta (`.plan`, `.add-cta`,
   `.pago`, `.paso-compra`), donde el `margin-top:auto` es el que los alinea al
   fondo y este margen los descolocaría.                                      */
.pagina-limpia a.btn:not(:is(.plan, .add-cta, .pago, .paso-compra, .planes) a),
.pagina-limpia .fc-cta,
.pagina-simple .prose a.btn:not(:is(.plan, .add-cta, .pago, .paso-compra, .planes) a),
.pagina-simple .prose .fc-cta{margin-top:26px}
/* Dos CTA seguidos son un grupo: entre ellos basta una separación corta. */
.pagina-limpia .fc-cta + .fc-cta,
.pagina-simple .prose .fc-cta + .fc-cta{margin-top:10px}
/* El párrafo que envuelve al botón no necesita su margen inferior de texto. */
.pagina-limpia .fc-cta,.pagina-simple .prose .fc-cta{margin-bottom:0}
/* Y el texto que venga DESPUÉS de un CTA tampoco debe pegarse a él. */
.pagina-limpia .fc-cta + *:not(.fc-cta){margin-top:26px}

/* ============================================================================
   PLANES Y PAQUETES EN VIVO (/precios-…/) — ver `fiscal_precios_en_vivo`.
   Los datos vienen del endpoint de la plataforma, así que el maquetado no puede
   dar por hecho cuántos planes o paquetes hay: todo en rejillas que se adaptan.
   ========================================================================== */
.pagina-limpia .planes-lista{max-width:1080px;margin:0 auto 8px;padding:0 22px;
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.plan-tarjeta{display:flex;flex-direction:column;background:#fff;border:1px solid var(--raya);
  border-radius:16px;padding:26px 24px;box-shadow:0 6px 20px rgba(4,26,66,.06)}
.plan-tarjeta h3{font-size:20px!important;font-weight:800;margin:0 0 12px!important}
.plan-tarjeta__precio{display:flex;align-items:baseline;gap:6px;margin:0 0 4px!important}
.plan-tarjeta__cifra{font-size:38px;font-weight:800;color:var(--azul);letter-spacing:-.02em;line-height:1}
.plan-tarjeta__periodo{font-size:15px;color:#5b6b85}
.plan-tarjeta__anual{font-size:14.5px!important;color:#5b6b85!important;margin:0 0 14px!important}
.plan-tarjeta__ahorro{color:#0f7a40;font-weight:700}
.plan-tarjeta__timbres{font-size:15.5px!important;color:#33445c;margin:0 0 14px!important;
  padding:12px 14px;background:var(--gris);border-radius:10px}
.plan-tarjeta__topes{list-style:none;margin:0 0 14px;padding:0}
.plan-tarjeta__topes li{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;
  color:#33445c;padding:7px 0;border-bottom:1px solid var(--raya);margin:0}
.plan-tarjeta__topes li:last-child{border-bottom:0}
.plan-tarjeta__topes strong{color:var(--tinta);font-variant-numeric:tabular-nums}
/* Los módulos son hasta 15 por plan: plegados no aplastan la comparación. */
.plan-tarjeta__mods{margin:0 0 16px;border:1px solid var(--raya);border-radius:10px}
.plan-tarjeta__mods summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:14.5px;
  font-weight:700;color:var(--azul-enlace);min-height:44px;display:flex;align-items:center}
.plan-tarjeta__mods summary::-webkit-details-marker{display:none}
.plan-tarjeta__mods ul{margin:0;padding:0 14px 12px 32px}
.plan-tarjeta__mods li{font-size:14.5px;color:#33445c;margin-bottom:5px}
.plan-tarjeta .btn{margin-top:auto;align-self:stretch;justify-content:center}
.plan-tarjeta--free .plan-tarjeta__cifra{color:var(--tinta)}
.pagina-limpia .planes-nota{max-width:1080px;margin:18px auto 0;padding:0 22px;
  font-size:15px;color:#5b6b85}

.pagina-limpia .paquetes-lista{max-width:1080px;margin:0 auto;padding:0 22px;display:grid;
  gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.paquete{display:flex;flex-direction:column;background:#fff;border:1px solid var(--raya);
  border-radius:14px;padding:20px 18px;box-shadow:0 4px 14px rgba(4,26,66,.05);
  transition:transform .18s ease,box-shadow .18s ease}
.paquete:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(4,26,66,.12)}
.paquete__timbres{font-size:15px!important;color:#33445c;margin:0 0 6px!important}
.paquete__timbres strong{font-size:19px;color:var(--tinta);font-variant-numeric:tabular-nums}
.paquete__precio{font-size:28px!important;font-weight:800;color:var(--azul);margin:0 0 4px!important;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.paquete__nota{font-size:13.5px!important;color:#5b6b85!important;margin:0 0 14px!important}
.paquete .btn{margin-top:auto;align-self:stretch;justify-content:center;padding:9px 14px;font-size:14px}
.pagina-limpia .paquetes-cot{margin:0;padding-left:20px}

@media(max-width:600px){
  .plan-tarjeta{padding:20px 18px}
  .plan-tarjeta__cifra{font-size:32px}
}

/* Un ítem de rejilla NO se encoge por debajo de su contenido si no se le dice:
   sin `min-width:0`, la lista de paquetes medía 1.058px dentro de una columna de
   331px y sacaba scroll horizontal en móvil (375 y 768). Es el gotcha clásico
   de flex/grid, y aquí lo disparó meter una rejilla propia dentro del contenido. */
.pagina-limpia .col,.pagina-limpia .fila{min-width:0}
.pagina-limpia .planes-lista,.pagina-limpia .paquetes-lista{max-width:min(1080px,100%)}

/* Presentación de los planes: cabecera con a quién sirve, y los módulos a la
   vista (un contador «13 módulos incluidos» no dice cuáles). */
.plan-tarjeta__cab{margin-bottom:14px}
.plan-tarjeta__para{font-size:14px!important;color:#5b6b85!important;margin:0!important;line-height:1.5}
.plan-tarjeta__mods-tit{font-size:13px!important;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:#5b6b85!important;margin:0 0 8px!important}
.plan-tarjeta__mods-lista{list-style:none;margin:0 0 10px;padding:0}
.plan-tarjeta__mods-lista li{position:relative;padding-left:23px;font-size:14.5px;line-height:1.5;
  color:#33445c;margin-bottom:6px}
.plan-tarjeta__mods-lista li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a40' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.plan-tarjeta__mods{margin:0 0 16px;border:0}
.plan-tarjeta__mods summary{padding:0;min-height:34px;font-size:14px}
.plan-tarjeta__mods ul{padding:6px 0 0 23px}

/* Los folios de cotización iban como lista suelta bajo la rejilla y se veían
   descolgados: ahora usan la misma tarjeta que los timbres. */
.pagina-limpia .paquetes-sub{margin:34px 0 4px!important;font-size:19px!important}
.pagina-limpia .paquetes-sub-txt{margin:0 0 16px!important;font-size:15.5px!important;color:#5b6b85!important}
.pagina-limpia .paquetes-lista--cot{grid-template-columns:repeat(auto-fit,minmax(190px,220px));justify-content:start}
.paquete--cot .paquete__precio{color:var(--tinta)}
.pagina-limpia .paquetes-integrador{max-width:1080px;margin:26px auto 0;padding:16px 20px;
  background:#fff;border:1px solid var(--raya);border-left:4px solid var(--azul);
  border-radius:0 12px 12px 0;font-size:15.5px!important;color:#33445c}

/* Aviso que separa las dos intenciones (ficha de addenda vs guía de ticket).
   Va arriba del contenido: quien llegó a la página equivocada tiene que verlo
   antes de irse, no al final. */
.aviso-intencion{background:#fff8e6;border:1px solid #f3dca0;border-left:4px solid var(--naranja);
  border-radius:0 12px 12px 0;padding:15px 20px;margin:0 0 26px}
.aviso-intencion p{margin:0!important;font-size:15.5px!important;line-height:1.6;color:#4a3c1a!important}
.aviso-intencion strong{color:#2f2405}
.aviso-intencion a{color:#8a5a00;font-weight:700;text-decoration:underline}
.aviso-intencion a:hover{color:#6b4600}

/* --- Medida de lectura en filas de una sola columna ----------------------
   Buena parte del contenido migrado vive en filas de UNA columna, y a 1.080px
   de ancho los párrafos salen a ~150 caracteres por línea: el ojo se pierde al
   volver al margen. Se limita la medida del texto (no de tablas, rejillas ni
   imágenes, que sí deben aprovechar todo el ancho).
   Las 7 páginas revisadas tenían entre 1 y 6 filas así.                      */
.pagina-limpia .fila:has(> .col:only-child) > .col > p,
.pagina-limpia .fila:has(> .col:only-child) > .col > ul,
.pagina-limpia .fila:has(> .col:only-child) > .col > ol,
.pagina-limpia .fila:has(> .col:only-child) > .col > .txt > p,
.pagina-limpia .fila:has(> .col:only-child) > .col > .txt > ul,
.pagina-limpia .fila:has(> .col:only-child) > .col > .txt > ol{max-width:72ch}
/* Los encabezados admiten algo más de ancho sin perder legibilidad. */
.pagina-limpia .fila:has(> .col:only-child) > .col > h2,
.pagina-limpia .fila:has(> .col:only-child) > .col > h3{max-width:28ch}
.pagina-limpia .fila:has(> .col:only-child) > .col > .txt > h2,
.pagina-limpia .fila:has(> .col:only-child) > .col > .txt > h3{max-width:28ch}

/* Bloque «cómo se hace»: enlaces al centro de ayuda (documentación viva). */
.ayuda-rel-grid{max-width:1080px;margin:0 auto;padding:0 22px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ayuda-rel-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--raya);border-radius:12px;padding:16px 18px;
  min-height:44px;text-decoration:none;color:var(--tinta);font-weight:600;font-size:15.5px;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.ayuda-rel-item:hover{border-color:#c3d4ee;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(4,26,66,.10);text-decoration:none;color:var(--azul-enlace)}
.ayuda-rel-flecha{color:var(--azul-enlace);font-size:19px;flex:none}
.pagina-limpia .ayuda-rel-todo{margin-top:18px!important}
.pagina-limpia .ayuda-rel-todo a{font-weight:700}

/* Página de API: rejilla de capacidades de la integración. */
.pagina-limpia .api-grid{max-width:1080px;margin:0 auto;padding:0 22px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.api-item{background:#fff;border:1px solid var(--raya);border-radius:14px;padding:22px 20px;
  box-shadow:0 4px 14px rgba(4,26,66,.05)}
.api-item h3{font-size:17px!important;margin:0 0 8px!important}
.api-item p{font-size:15.5px!important;margin:0!important;line-height:1.6}
.pagina-limpia .api-enlaces{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px!important;max-width:none!important}
.pagina-limpia .api-enlaces a.btn{margin-top:0}

/* Indice de enlaces (3+ parrafos-enlace seguidos): lista compacta, no CTA.
   Cada uno con su separador, como un directorio. */
/* `margin:0!important` pisaba el `margin:auto` que centra los bloques
   huérfanos y los dejaba pegados al borde: solo se anulan los verticales. */
.pagina-limpia .fc-indice{margin-top:0!important;margin-bottom:0!important;
  padding-top:9px!important;padding-bottom:9px!important;
  border-bottom:1px solid var(--raya)}
.pagina-limpia .fc-indice:last-of-type{border-bottom:0}
.pagina-limpia .fc-indice a{font-size:15.5px;font-weight:600;line-height:1.45;
  display:inline-flex;align-items:center;min-height:26px}

/* Encabezado que NO es un encabezado: solo envuelve un enlace. Viene del
   contenido migrado (`<a><h3>Titulo</h3></a>`, que el filtro
   `fiscal_enlace_con_encabezado` reordena a `<h3><a>…</a></h3>`). Se lee como
   entrada de índice, no como título de sección: mismo tamaño y separador que
   `.fc-indice`, o las «Preguntas frecuentes» vuelven a ser nueve titulares. */
.pagina-limpia .col h3:has(> a:only-child){
  font-size:15.5px;line-height:1.45;letter-spacing:0;
  margin-top:0;margin-bottom:0;padding:9px 0;
  border-bottom:1px solid var(--raya)}
.pagina-limpia .col h3:has(> a:only-child):last-child{border-bottom:0}
.pagina-limpia .col h3 > a:only-child{
  display:inline-flex;align-items:center;min-height:26px;font-weight:600}

/* --- Contenido HUÉRFANO -------------------------------------------------
   El contenido migrado dejó bloques (párrafos, listas, figuras, encabezados)
   como hijos DIRECTOS de `main`, fuera de toda `<section>`: 38 repartidos en 6
   páginas. Sin contenedor salían a 1.440px pegados al borde de la ventana —el
   bloque de addendas de /manuales-…/ era el caso más visible—.

   No lo detecta el chequeo de overflow: ocupan exactamente el ancho de la
   ventana, así que no generan scroll horizontal. Solo se ve MIRANDO la página.  */
.pagina-limpia > :not(section),
/* …y también lo que cuelga de una <section> sin pasar por su .fila: el
   contenido migrado dejó columnas sueltas ahí, igual de pegadas al borde. */
/* `.fig` queda FUERA de la contención: es el banner de cabecera y va a sangre,
   de borde a borde. Al normalizar el HTML con DOM el <figure> pasó a ser hijo
   directo de la <section> y esta regla lo encogió a 1.080px en todas las
   páginas secundarias. Las ilustraciones que también usan `.fig` viven dentro
   de una `.col`, así que no las alcanza este selector de hijo directo. */
.pagina-limpia > section > :not(.fila):not(.fig):not(.planes):not(.paquetes-lista):not(.pasos-compra):not(.pagos-lista):not(.add-rejilla):not(.add-cierre-grid):not(.ayuda-rel-grid):not(.planes-lista):not(.api-grid){
  max-width:1080px;margin-left:auto;margin-right:auto;
  padding-left:22px;padding-right:22px;box-sizing:border-box}
.pagina-limpia > section > .fig{max-width:none;margin:0;padding:0}
.pagina-limpia > section > .fig img{width:100%;height:auto;max-height:none;display:block}
/* El mapa de contacto sí aprovecha todo el ancho de su caja. */
.pagina-limpia > .fc-mapa{padding-left:0;padding-right:0}

/* Índice en COLUMNAS. `columns` y no grid a propósito: reparte en vertical, así
   el orden se lee hacia abajo en cada columna y no saltando de lado a lado.
   Un índice de 50 addendas pasa de ~2.500px en una columna a ~850px en tres. */
/* `column-width` y no `column-count`: el navegador pone tantas columnas como
   quepan según el ANCHO REAL del contenedor. Así el mismo índice sale a 3-4
   columnas suelto en la página y a 1 dentro de una columna estrecha, sin
   reglas especiales por sitio ni media queries. */
/* `margin-bottom` y NO el atajo `margin:0 0 8px`: el atajo fija los laterales a
   0 y anula el `margin:auto` que centra los bloques huérfanos, dejándolos
   pegados al borde. Mismo tropiezo que con `.fc-indice`: al escribir reglas
   para elementos que pueden ir sueltos en la página, nunca usar el atajo. */
.pagina-limpia .fc-indice-grupo{columns:250px;column-gap:36px;margin-bottom:8px}
.pagina-limpia .fc-indice-grupo .fc-indice{break-inside:avoid}

/* Una fila cuyo contenido es un ÍNDICE LARGO no debe repartir el ancho con las
   columnas vecinas: el índice queda en una tira de 325px y el resto vacío (le
   pasaba a «Llenado de Addendas», ~50 enlaces en una columna). Se apila para
   que el índice disponga del ancho completo y se reparta en columnas solo. */
/* …pero solo si el índice es DE VERDAD largo. Con la condición a secas, un
   bloque de 9 enlaces bastaba para apilar la fila entera, y «Administración
   catálogos / Configuración de cuenta / Comienza a facturar» pasaba de tres
   columnas a tres bloques uno debajo de otro. El `:nth-child(16)` exige que
   haya al menos 16 entradas: el índice de 57 addendas la cumple, el de 9 no. */
.pagina-limpia .fila:has(.fc-indice-grupo > .fc-indice:nth-child(16)){
  grid-auto-flow:row;grid-template-columns:1fr}

/* --- Tamaño de las ilustraciones ----------------------------------------
   El contenido migrado trae ilustraciones de 500-713px de ALTO dentro de
   columnas de ~500px de ancho (15 de 19 páginas). Desequilibran la sección:
   empujan el texto, dejan huecos y obligan a desplazarse de más.
   Se les pone techo conservando la proporción; las capturas anchas
   (900x491, 1036x449) apenas se ven afectadas.                              */
.pagina-limpia .col img,
.pagina-limpia .fig img,
.pagina-limpia .txt img{max-height:340px;width:auto;height:auto;
  object-fit:contain;display:block}
/* Centradas dentro de su columna cuando sobra sitio. */
.pagina-limpia .col > .fig,
.pagina-limpia .col > p:has(> img:only-child){display:flex;justify-content:center}
/* La banda de banner conserva su tratamiento a ancho completo. */
.pagina-limpia .sec:not(:has(p, h1, h2, h3, h4, li, table, .btn, .plan, .acordeon)) img{
  max-height:none;width:100%}
@media(max-width:859px){
  .pagina-limpia .col img,.pagina-limpia .fig img,.pagina-limpia .txt img{max-height:260px}
}

/* ============================================================================
   TARJETAS DE CONTENIDO  (`fiscal_tabla_a_tarjeta`)
   El contenido migrado maquetaba estos bloques con <table>: icono en una celda,
   título y texto en otra, y el botón suelto fuera. Ahora son una <article> y
   aquí se le da forma de tarjeta: una caja que agrupa las tres partes.

   Rejilla de dos filas —cuerpo que CRECE y botón— para que todos los botones
   de una misma fila queden a la misma altura aunque los textos midan distinto.
   Era el defecto más visible de /complementos/: 14 botones a 14 alturas.      */
.pagina-limpia .fc-tarjeta{
  display:grid;grid-template-columns:var(--icono-tarjeta,76px) 1fr;
  grid-template-rows:1fr auto;column-gap:20px;row-gap:14px;
  background:#fff;border:1px solid var(--raya);border-radius:14px;
  padding:22px 24px;height:100%;box-sizing:border-box}
.pagina-limpia .fc-tarjeta-icono{grid-row:1 / -1;align-self:start}
/* Tamaño de icono ÚNICO. Estas imágenes venían a 128, 184, 198, 237, 314, 325
   y 340px —siete tamaños para el mismo papel—, que es lo que hacía que la
   página se leyera como desordenada por mucho que el texto estuviera bien. */
.pagina-limpia .fc-tarjeta-icono img{
  width:var(--icono-tarjeta,76px);height:var(--icono-tarjeta,76px);
  max-height:none;object-fit:contain;display:block}
.pagina-limpia .fc-tarjeta-cuerpo{grid-column:2;grid-row:1;min-width:0}
.pagina-limpia .fc-tarjeta-titulo{
  font-size:16px;font-weight:700;line-height:1.3;margin:0 0 8px;
  letter-spacing:.01em;color:var(--tinta)}
.pagina-limpia .fc-tarjeta p{font-size:15px;line-height:1.6;margin:0}
/* El botón, anclado abajo y sin el margen de CTA suelto que traía. */
.pagina-limpia .fc-tarjeta .fc-cta{
  grid-column:2;grid-row:2;align-self:end;
  margin:0!important;padding:0!important;border:0}
.pagina-limpia .fc-tarjeta .fc-cta .btn{margin-top:0}

/* La fila que contiene tarjetas no necesita el `gap` grande de las columnas de
   texto: las tarjetas ya tienen su propio borde que las separa.
   `align-items:stretch` (la fila por defecto usa `start`) para que las tarjetas
   hermanas midan lo mismo aunque su texto sea más corto: si no, quedan de
   alturas distintas y vuelve a leerse como un bloque desalineado. */
.pagina-limpia .fila:has(.fc-tarjeta){gap:20px;align-items:stretch}
.pagina-limpia .fila:has(.fc-tarjeta) .col,
.pagina-limpia .fila:has(.fc-tarjeta) .col > .txt{height:100%}

@media(max-width:859px){
  .pagina-limpia .fc-tarjeta{--icono-tarjeta:56px;padding:18px 18px;column-gap:14px}
}

/* ============================================================================
   ICONOS EN LÍNEA  —  `<p><img> Etiqueta</p>`
   Así están escritas las listas de requisitos y de beneficios en 5 páginas. El
   HTML pide `width="32"` pero el ARCHIVO mide 128x128, y la regla de arriba
   (`width:auto;height:auto`, para capar ilustraciones) ignora el atributo y
   pinta los 128px. Encima le tocaba `display:block`, así que el icono rompía la
   línea y la etiqueta caía debajo: cuatro requisitos ocupaban 500px de alto en
   una tira vertical. De ahí venía buena parte del «se ve desorganizado».
   Se fija un tamaño ÚNICO y se devuelve el icono a la línea de su texto.      */
/* `img.` y no solo la clase: `.pagina-limpia .col img` lleva un selector de
   tipo y ganaba por especificidad, dejando la regla sin efecto. */
.pagina-limpia img.fc-icono-linea{
  display:inline-block;vertical-align:middle;
  width:auto;height:32px;max-height:32px;
  margin:0 10px 0 0;border-radius:0;flex:none}
/* Una imagen sola en su párrafo sigue siendo una ilustración: no se toca —por
   eso la marca la pone PHP, que sí puede ver si el párrafo lleva texto. */

/* --- Insignias de las tiendas de apps ------------------------------------- */
/* No tenían ninguna regla: se pintaban al tamaño del archivo (503x150 cada una)
   y APILADAS, ocupando 450px de alto. Además el contenido trae un <br> dentro
   de cada enlace y entre ellos, que forzaba el salto de línea. */
.pagina-limpia .fc-store-badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0 6px}
.pagina-limpia .fc-store-badges br{display:none}
.pagina-limpia .fc-badge{display:inline-flex;align-items:center;
  border-radius:9px;transition:transform .15s ease,opacity .15s ease}
.pagina-limpia .fc-badge:hover{transform:translateY(-2px);opacity:.88}
.pagina-limpia .fc-badge img{
  height:48px;width:auto;max-height:48px;display:block;border-radius:0;margin:0}
@media(max-width:859px){
  .pagina-limpia .fc-badge img{height:42px;max-height:42px}
}

/* ============================================================================
   REJILLA DE CARACTERÍSTICAS  (`regenerar_bloque_iconos.py`)
   Sustituye a los bloques de «icono + título + descripción» que el contenido
   migrado pintaba con una fila y una columna por elemento, en zigzag y con el
   icono a 340px. Aquí cada elemento es una caja igual a las demás y el tamaño
   del icono es un token: la lista se lee de un vistazo en vez de obligar a
   recorrer media pantalla por función.                                       */
.pagina-limpia .fc-caracteristicas{
  display:grid;gap:26px 30px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.pagina-limpia .fc-caracteristica{min-width:0}
.pagina-limpia img.fc-caracteristica-icono{
  width:56px;height:56px;max-height:56px;object-fit:contain;
  display:block;margin:0 0 12px;border-radius:0}
.pagina-limpia .fc-caracteristica h3{
  font-size:16.5px;font-weight:700;line-height:1.35;margin:0 0 6px}
.pagina-limpia .fc-caracteristica p{font-size:15px;line-height:1.6;margin:0}
/* Una fila que solo lleva la rejilla no reparte ancho con nadie. */
.pagina-limpia .fila:has(.fc-caracteristicas){grid-auto-flow:row;grid-template-columns:1fr}

/* El «QR» de la app venía a 500x500: ocupaba más que todo el texto de su
   columna. A 168px sigue siendo escaneable y deja de dominar la sección. */
.pagina-limpia .fc-store-block ~ .fig img,
.pagina-limpia .bloque + .fig img{max-height:168px;width:auto}

/* --- Icono que ENCABEZA una columna --------------------------------------- */
/* Patrón `<figure class="fig"><img></figure><h2>Título</h2>`: la imagen no es
   una ilustración, es el icono del bloque. Venían al tamaño de cada archivo
   —dos a 128px y el tercero a 325px en la misma fila—, así que los títulos
   hermanos arrancaban a alturas distintas y la fila se leía torcida.
   `:has(+ h2)` selecciona la figura SOLO cuando le sigue un encabezado; una
   figura suelta sigue siendo ilustración y conserva su tamaño.               */
.pagina-limpia .col > .fig:has(+ h2) img,
.pagina-limpia .col > .fig:has(+ h3) img,
.pagina-limpia .col > .fig:has(+ h4) img,
.pagina-limpia .col > .fig:has(+ .txt > h2:first-child) img{
  width:72px;height:72px;max-height:72px;object-fit:contain;border-radius:0}
.pagina-limpia .col > .fig:has(+ h2),
.pagina-limpia .col > .fig:has(+ h3),
.pagina-limpia .col > .fig:has(+ h4){margin-bottom:14px;display:block}
/* El <br> que el contenido migrado deja dentro del figure añade una línea en
   blanco bajo el icono. */
.pagina-limpia .col > .fig br{display:none}