/* ============================================================
   Certificados Digitales (facturacion-electronica.php)
   Página "limpia" — reutiliza los mismos componentes globales que
   nosotros.php / index.php (.hero, .card, .service-card, .btn-primary,
   .btn-outline). Este archivo SOLO agrega lo que no existe todavía:
   el media del hero, las miniaturas de casos de uso y el acordeón FAQ
   en su versión clara. Nada de shimmer, magnetic ni tilt aquí.
   ============================================================ */

/* Íconos decorativos sueltos de fondo, mismo patrón que .scatter-icon-light
   de nosotros.php (timeline), para que el hero claro no se vea vacío. */
.cd-hero{position:relative; overflow:hidden;}
.cd-hero > .wrap{position:relative; z-index:1;}

/* Grid del hero: definida acá (no inline) para poder colapsarla a
   una columna en mobile — un style="grid-template-columns:..." inline
   no puede ser sobrescrito por un @media de una hoja externa. */
.cd-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}

/* Idem para las grillas de 3 tarjetas ("Más que un Certificado" y
   "Casos de uso"): reemplaza el style inline que tenían antes. */
.cd-grid-3{grid-template-columns:repeat(3,1fr);}

.cd-hero-media{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:20px; padding:30px;
  box-shadow:0 24px 50px -20px rgba(30,44,81,.25);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.cd-hero-media:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 70px -24px rgba(30,44,81,.35);
}
.cd-hero-media img{
  width:100%; max-width:280px; height:auto; display:block;
  border-radius:8px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.cd-hero-media:hover img{
  transform:scale(1.035);
}

.cd-usecase-card{ padding:0 0 26px; overflow:hidden; }
.cd-usecase-media{
  width:100%; aspect-ratio:16/10; overflow:hidden;
  border-radius:16px 16px 0 0; margin-bottom:16px;
}
.cd-usecase-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cd-usecase-card h3, .cd-usecase-card p{ padding-left:22px; padding-right:22px; }
.cd-usecase-card h3{ font-size:16px; }

/* ---------- FAQ (versión clara, sin vidrio ni glow) ---------- */
.cd-faq{ padding:100px 0; }
.cd-faq-list{ margin-top:40px; display:flex; flex-direction:column; gap:14px; }

.cd-faq .faq-item{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(30,44,81,.2);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.cd-faq .faq-item.open{
  border-color:rgba(234,33,81,.35); background:var(--crimson-tint);
  box-shadow:0 16px 34px -18px rgba(234,33,81,.25);
}
.cd-faq .faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Poppins'; font-size:14.5px; font-weight:600; color:var(--navy);
}
.cd-faq .faq-question svg{ flex-shrink:0; color:var(--crimson); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.cd-faq .faq-item.open .faq-question svg{ transform:rotate(180deg); }
.cd-faq .faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.cd-faq .faq-item.open .faq-answer{ max-height:220px; }
.cd-faq .faq-answer p{ padding:0 24px 22px; margin:0; font-size:13.5px; color:var(--muted); line-height:1.7; }

@media (max-width:820px){
  .cd-hero-media{ margin-top:30px; }
  .cd-hero-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .cd-hero-grid .badge-row, .cd-hero-grid .cta-row{justify-content:center;}
  .cd-grid-3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .cd-grid-3{grid-template-columns:1fr;}
}

/* ============================================================
   CTA FINAL dividido en texto + imagen — mismo patrón que
   .marca-cta-split (creacion-marca.css): panel de imagen real a
   la derecha con corte en diagonal, en vez de la tarjeta con
   degradado navy→guinda que usaba antes esta sección.
   ============================================================ */
.cd-cta-split{
  padding:0 !important;
  display:flex; align-items:stretch;
  min-height:300px;
  background:var(--navy) !important;
}
.cd-cta-split::after{display:none;}

.cd-cta-split-inner{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:0;
  padding:56px 48px; max-width:680px; position:relative; z-index:2;
  /* margin-left, no padding-left: esta caja tiene max-width propio, un
     padding grande le comería su propio espacio de contenido en pantallas
     anchas. El margin solo la reposiciona para alinearla exactamente con
     el logo del header (--header-edge, definida en style.css — usa
     max-width:1340px como .site-header .wrap, no el de 1180px del .wrap
     normal). Una sola fuente de verdad para todas las secciones
     full-bleed que necesiten esta alineación. */
  margin-left:var(--header-edge);
}
.cd-cta-split-btn{margin-top:26px;}

.cd-cta-split-image{
  position:relative; flex:0 0 40%;
  margin-left:auto;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  background:var(--navy);
  overflow:hidden;
}
.cd-cta-split-image img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block;
}
.cd-cta-split-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, var(--navy) 0%, rgba(30,44,81,.5) 16%, rgba(30,44,81,0) 42%);
}

@media (max-width:900px){
  .cd-cta-split{flex-direction:column;}
  .cd-cta-split-image{
    clip-path:none; flex:0 0 200px; width:100%; order:-1; margin-left:0;
  }
  .cd-cta-split-inner{padding:40px 26px; max-width:none; margin-left:0;}
}