/* ============================================================
   Portada: sección de facturación electrónica (#facturacion-electronica).
   Se carga en el <head> de index.php (primera pantalla sin saltos).
   Marcado: includes/fe-seccion.php (el hero está en css/hero-slider.css)
   ============================================================ */
html:not(.fe-js) .fe-js-only { display: none !important; }

.fe-sec { background: #fff; }
.fe-sec__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
.fe-sec__h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; color: var(--gray-900, #111827); }
.fe-sec__list { list-style: none; padding: 0; margin: 0 0 2rem; }
.fe-sec__list li { display: flex; gap: .65rem; margin-bottom: .7rem; color: #374151; line-height: 1.55; }
.fe-sec__list i { color: var(--success, #10b981); margin-top: .25rem; }
.fe-steps { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 2rem; }
.fe-steps li { counter-increment: paso; position: relative; padding: 0 0 1rem 3rem; color: #374151; line-height: 1.55; }
.fe-steps li::before {
    content: counter(paso); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--primary-100, #dbeafe);
    color: var(--primary-dark, #1d4ed8); font-weight: 700;
}
.fe-steps strong { color: var(--gray-900, #111827); }
.fe-sec__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.fe-sec__more { margin: 1rem 0 0; font-size: .92rem; color: #4b5563; }
.fe-sec__more a { color: var(--primary-dark, #1d4ed8); }
.fe-sec__media img { width: 100%; height: auto; border-radius: 16px; display: block; }
.fe-sec__trust { margin: 1rem 0 0; font-size: .92rem; color: #4b5563; line-height: 1.55; }

.fe-sec__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.5rem; align-items: start; }
.fe-faq details { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: .6rem; background: #f9fafb; }
.fe-faq summary { cursor: pointer; padding: .9rem 1rem; font-weight: 600; color: #111827; min-height: 44px; list-style-position: inside; }
.fe-faq details p { margin: 0; padding: 0 1rem 1rem; color: #374151; line-height: 1.6; }
.fe-sec__form { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.5rem; outline: none; }
.fe-sec__formtxt { margin: -.5rem 0 1rem; color: #4b5563; }

@media (max-width: 1024px) {
    .fe-sec__grid, .fe-sec__bottom { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
    .fe-sec__actions .fe-btn { width: 100%; }
    .fe-sec__form { padding: 1.1rem; }
}

/* Requisitos de certificación (bajo las preguntas frecuentes) */
.fe-req { margin-top: 2rem; }
.fe-req .fe-steps { margin-bottom: .75rem; }
.fe-req .fe-steps a { color: var(--primary-dark, #1d4ed8); }
.fe-req code { font-size: .9em; background: #f3f4f6; padding: .05rem .35rem; border-radius: 4px; }

/* Los fundidos laterales de AOS (fade-left/right) colocan los elementos 100 px fuera
   de pantalla antes de animarse y generaban scroll horizontal (1366 px: 1399 de ancho).
   clip solo recorta el eje X y no crea un contenedor de scroll. */
.hero-info-section, .section { overflow-x: clip; }

/* Primera sección tras el hero: sin el hueco blanco de 6rem (96 px) que quedaba
   bajo la franja de botones; el contenido empieza justo debajo del hero. */
.hs + .fe-sec { padding-top: 2.5rem; }
.hs + .fe-sec .section-header { margin-bottom: 2.5rem; }

/* Oferta en la sección de facturación electrónica */
.fe-sec__oferta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .6rem; margin: 1.25rem auto 0; padding: .6rem 1.1rem; border-radius: 999px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: 1.02rem; }
.fe-sec__oferta strong { font-size: 1.25rem; color: #c2410c; }
.fe-sec__oferta small { color: #9a3412; font-size: .8rem; }
.fe-sec__oferta-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }