/* ============================================================
   dominios-correos.css — estilos exclusivos de public/dominios-correos.php
   Cargada solo en esta vista vía $pageStyles (ver header.php).

   Identidad propia de esta landing, "premium tech" con glassmorphism,
   glow y grid tenue — inspirado en cómo Stripe/Linear/Vercel presentan
   producto. Las secciones alternan fondo blanco (var(--paper)) y azul
   marca (var(--navy)/var(--navy-ink)) — NUNCA texto claro sobre blanco
   ni texto oscuro sobre azul: cada sección fija sus propios colores de
   texto explícitamente, no hay un color de texto "por defecto" que
   se herede de una sección a otra.
   Todo vive bajo body.page-correos para no filtrarse a otras páginas;
   ninguna clase global (.btn-*, .reveal*, .faq-*, .cta-fullwidth,
   .section-shape) se modifica en su definición compartida, solo se
   extiende con clases nuevas (cc-*) aplicadas junto a las de siempre.
   ============================================================ */

body.page-correos{
  background:var(--navy);
}
/* Ruido muy sutil sobre toda la página — un solo filtro de turbulencia
   inline (sin pedir ninguna imagen nueva), casi imperceptible, que le
   quita la planitud a los degradados oscuros. */
body.page-correos::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root{
  --cc-glass:rgba(255,255,255,.045);
  --cc-glass-strong:rgba(255,255,255,.08);
  --cc-border:rgba(255,255,255,.09);
  --cc-border-soft:rgba(255,255,255,.06);
  /* texto claro, SOLO para usar dentro de secciones de fondo azul */
  --cc-text:#F1F3FA;
  --cc-muted:#98A2C3;
  --cc-blue:#4C8DFF;
  --cc-violet:#8B5CF6;
}

.page-correos section{position:relative;}

/* ---------- utilidades compartidas: glass / aurora / grid ---------- */
.cc-glass{
  background:var(--cc-glass); border:1px solid var(--cc-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.cc-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--crimson); background:rgba(234,33,81,.12); border:1px solid rgba(234,33,81,.28);
  padding:7px 15px; border-radius:20px; margin-bottom:20px;
}
.cc-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 4px rgba(234,33,81,.25);}

/* Fondo "aurora": 3 manchas de color muy difuminadas que derivan
   lentamente. Solo anima transform/opacity (compositor, no reflow). */
.cc-aurora{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.cc-aurora span{
  position:absolute; border-radius:50%; filter:blur(70px);
  will-change:transform, opacity;
}
.cc-aurora .a1{width:520px; height:520px; top:-160px; left:-100px; background:radial-gradient(circle, rgba(234,33,81,.32), transparent 68%); animation:ccDrift1 22s ease-in-out infinite alternate;}
.cc-aurora .a2{width:480px; height:480px; top:10%; right:-140px; background:radial-gradient(circle, rgba(76,141,255,.26), transparent 68%); animation:ccDrift2 26s ease-in-out infinite alternate;}
.cc-aurora .a3{width:420px; height:420px; bottom:-160px; left:30%; background:radial-gradient(circle, rgba(139,92,246,.22), transparent 68%); animation:ccDrift3 30s ease-in-out infinite alternate;}
@keyframes ccDrift1{from{transform:translate(0,0) scale(1);} to{transform:translate(60px,40px) scale(1.12);}}
@keyframes ccDrift2{from{transform:translate(0,0) scale(1);} to{transform:translate(-50px,50px) scale(1.08);}}
@keyframes ccDrift3{from{transform:translate(0,0) scale(1);} to{transform:translate(40px,-30px) scale(1.1);}}

/* Grid técnico tenue, con máscara para que se desvanezca en los bordes */
.cc-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
  .cc-aurora span{animation:none;}
}

/* ---------- reveal: variantes propias (scale / blur), suman a las
   .reveal / .reveal-left / .reveal-right / .reveal-delay-N globales ---------- */
.reveal-scale{transform:scale(.92);}
.reveal-scale.in-view{transform:scale(1);}
.reveal-blur{filter:blur(14px);}
.reveal-blur.in-view{filter:blur(0);}
.reveal-delay-5{transition-delay:.4s;}
.reveal-delay-6{transition-delay:.48s;}
@media (prefers-reduced-motion: reduce){
  .reveal-scale, .reveal-blur{transform:none; filter:none;}
}


/* ============================================================
   HERO
   ============================================================ */
/* Antes era texto | imagen a los costados en un grid; ahora la foto
   es el fondo completo del hero (a pantalla completa) y el texto va
   centrado encima, con un degradado oscuro para que se siga leyendo
   bien. */
.correos-hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:100vh; min-height:100dvh;
  /* Mismo ajuste que .dr-hero (registro-dominios.css): un padding
     asimétrico (150 arriba, 90 abajo) empujaba el texto hacia abajo
     del centro real, a diferencia del home/Nosotros. */
  padding:40px 0;
  background:var(--navy-ink);
}
.correos-hero-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.correos-hero-overlay{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(18,24,46,.86) 0%, rgba(30,44,81,.8) 55%, rgba(18,24,46,.9) 100%);
}

.correos-hero-grid{
  position:relative; z-index:2;
  display:flex; justify-content:center;
}
.correos-hero-text{max-width:640px; text-align:center;}
.correos-hero-text h1{font-size:50px; line-height:1.12; color:#fff; letter-spacing:-.02em;}
.correos-hero-text h1 .accent{
  background:linear-gradient(100deg, var(--crimson) 10%, #FF7A9C 50%, var(--crimson) 90%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ccAccentSheen 6s linear infinite;
}
@keyframes ccAccentSheen{to{background-position:200% center;}}
.correos-hero-text .sub{font-size:16.5px; line-height:1.65; color:var(--cc-text); margin:20px auto 0; max-width:490px;}

.correos-hero-text .cta-row{margin-top:32px; gap:14px; justify-content:center;}
.correos-hero-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:28px;}
.correos-hero-trust span{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--cc-text);}
.correos-hero-trust svg{color:#3DDC97; flex-shrink:0;}
.correos-hero-text .btn-primary{box-shadow:none;}
.correos-hero-text .btn-primary:hover{box-shadow:none;}
.correos-hero-text .btn-outline-light{background:rgba(255,255,255,.04);}

/* ---------- visual: imagen flotando en marco glass + parallax por mouse ---------- */
.correos-hero-visual{position:relative; z-index:2; perspective:1200px;}
.correos-hero-photo-glow{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 55% 45%, rgba(234,33,81,.35), rgba(76,141,255,.18) 45%, transparent 72%);
  filter:blur(30px);
}
.correos-hero-photo-frame{
  position:relative; z-index:1;
  border-radius:26px; padding:10px;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  border:1px solid var(--cc-border);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform-style:preserve-3d;
  animation:ccFloat 7s ease-in-out infinite;
  transition:transform .25s ease-out;
  will-change:transform;
}
.correos-hero-photo-frame img{
  width:100%; height:100%; object-fit:cover; border-radius:18px; display:block;
  aspect-ratio:4/3.3;
}
@keyframes ccFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

.correos-hero-float-badge{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:14px;
  font-size:12.5px; font-weight:700; color:var(--cc-text);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);
  animation:ccFloatSlow 5.5s ease-in-out infinite;
}
.correos-hero-float-badge svg{color:#3DDC97;}
.correos-hero-badge-domain{top:-18px; right:0;}
.correos-hero-badge-support{bottom:14px; left:-30px; animation-delay:-2.4s;}
@keyframes ccFloatSlow{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}

@media (prefers-reduced-motion: reduce){
  .correos-hero-photo-frame, .correos-hero-float-badge{animation:none;}
  .correos-hero-text h1 .accent{animation:none;}
}

@media (max-width:1080px){
  .correos-hero{padding:32px 0;}
  .correos-hero-grid{grid-template-columns:1fr; gap:64px; text-align:center;}
  .correos-hero-text{max-width:none; margin:0 auto;}
  .correos-hero-text .sub{margin-left:auto; margin-right:auto;}
  .correos-hero-text .cta-row{justify-content:center;}
  .correos-hero-trust{justify-content:center;}
  .correos-hero-visual{max-width:440px; margin:0 auto;}
}
@media (max-width:640px){
  .correos-hero-text h1{font-size:34px;}
  .correos-hero-badge-support{left:0;}
}

/* ============================================================
   SINCRONIZACIÓN — split asimétrico, imagen desbordando el contenedor
   ============================================================ */
.correos-sync{padding:120px 0; background:var(--paper);}
.correos-sync-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.95fr 1.15fr; gap:20px; align-items:center;
}
.correos-sync-text{max-width:480px;}
.correos-sync-text h2{font-size:36px; line-height:1.2; color:var(--navy);}
.correos-sync-text .sub{color:var(--muted); font-size:15.5px; line-height:1.65; margin:16px 0 30px;}

.correos-sync-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.correos-sync-list li{
  display:flex; align-items:center; gap:14px;
  font-size:14.5px; font-weight:600; color:var(--navy);
  padding:14px 18px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 10px 26px -18px rgba(30,44,81,.2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}
.correos-sync-list li strong{color:var(--navy);}
.correos-sync-list li .correos-sync-info{color:var(--muted); font-weight:500;}
.correos-sync-list li:hover{transform:translateX(6px); border-color:rgba(234,33,81,.35); background:var(--crimson-tint);}
.correos-sync-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color:#fff;
}

.correos-sync-visual{position:relative;}
.correos-sync-glow{
  position:absolute; inset:-60px 10% -60px auto; width:70%; z-index:0;
  background:radial-gradient(circle, rgba(76,141,255,.3), transparent 70%);
  filter:blur(50px); pointer-events:none;
}
.correos-sync-photo{
  position:relative; z-index:1;
  margin-right:-64px;
  border-radius:24px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 80px -24px rgba(30,44,81,.3);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.correos-sync-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; display:block;}
.correos-sync-visual:hover .correos-sync-photo{transform:translateY(-6px) scale(1.015);}

@media (max-width:1080px){
  .correos-sync{padding:90px 0;}
  .correos-sync-grid{grid-template-columns:1fr; gap:56px;}
  .correos-sync-text{max-width:none; text-align:center; margin:0 auto;}
  .correos-sync-list{text-align:left;}
  .correos-sync-photo{margin-right:0; max-width:520px; margin-left:auto; margin-right:auto;}
}

/* ============================================================
   PLANES — tarjetas glass premium
   ============================================================ */
.correos-planes{padding:130px 0; background:linear-gradient(180deg, var(--navy) 0%, var(--navy-ink) 100%); overflow:hidden;}
.correos-planes > .correos-planes-bg-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.18; pointer-events:none;
}
.correos-planes > .wrap{position:relative; z-index:1;}
.correos-planes .section-head{text-align:center; max-width:620px !important; margin:0 auto;}
.correos-planes .section-head h2{color:#fff;}
.correos-planes .section-head p{margin:0 auto; color:var(--cc-muted);}

.correos-planes-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  margin-top:52px; align-items:stretch;
}

.correos-plan-card{
  position:relative;
  background:var(--cc-glass); border:1px solid var(--cc-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:22px; padding:34px 28px;
  display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
/* Solo sombreado por FUERA al pasar el mouse (levantar + glow), sin
   tocar el fondo interno de la tarjeta — antes también se aplicaba un
   degradado guinda por encima del contenido. */
.correos-plan-card:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.65), 0 0 40px -10px rgba(234,33,81,.4);
  border-color:rgba(234,33,81,.35);
}

.correos-plan-tag{
  position:absolute; top:-14px; left:28px; z-index:2;
  background:linear-gradient(120deg, var(--crimson), var(--crimson-dark)); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:6px 15px; border-radius:20px;
  box-shadow:0 8px 18px -6px rgba(234,33,81,.6);
}

.correos-plan-head{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.correos-plan-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 10px 22px -8px rgba(234,33,81,.55);
}
.correos-plan-head h3{font-size:19px; color:#fff;}

.correos-plan-desc{font-size:13.5px; color:var(--cc-muted); margin-bottom:20px;}

.correos-plan-items{
  list-style:none; margin:0 0 26px; padding:18px 0 0; border-top:1px solid var(--cc-border-soft);
  display:flex; flex-direction:column; gap:12px;
}
.correos-plan-items li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13.5px; color:#DCE1F2; font-weight:500;
}
.correos-plan-items svg{color:var(--crimson); flex-shrink:0; margin-top:2px;}

.correos-plan-price{margin-top:auto; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.correos-plan-amount{font-size:29px; font-weight:700; color:#fff;}
.correos-plan-amount-custom{font-size:22px;}
.correos-plan-period{font-size:12px; color:var(--cc-muted);}

.correos-plan-ahorro{font-size:12.5px; font-weight:600; color:#FF7A9C; margin:8px 0 22px;}

.correos-plan-btn{width:100%; justify-content:center;}

@media (max-width:1080px){
  .correos-planes{padding:90px 0;}
  .correos-planes-grid{grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto;}
}

/* ============================================================
   SEGURIDAD — fondo oscuro, imagen izquierda + badges flotantes CSS
   ============================================================ */
.correos-security{padding:130px 0; background:var(--paper);}
.correos-security-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;
}
.correos-security-visual{position:relative;}
.correos-security-photo{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 80px -24px rgba(30,44,81,.32);
}
.correos-security-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/4.4; display:block;}

/* Los badges flotan sobre la FOTO (que sigue siendo oscura/neón), no
   sobre el fondo blanco de la sección, así que se quedan en vidrio
   oscuro con texto claro — pero con fondo sólido (no cc-glass) para
   la porción que sí cae fuera del recorte de la imagen. */
.correos-security-badge{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:12px 18px; border-radius:14px;
  font-size:12.5px; font-weight:700; color:#fff;
  background:var(--navy-ink); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 44px -16px rgba(18,24,46,.45);
  animation:ccFloatSlow 6s ease-in-out infinite;
}
.correos-security-badge svg, .correos-security-badge i{color:#3DDC97;}
.correos-security-badge-1{top:-16px; left:-24px;}
.correos-security-badge-2{bottom:24px; right:-28px; animation-delay:-3s;}
.correos-security-badge-2 i{color:#FF7A9C;}

.correos-security-text{max-width:520px;}
.correos-security-text h2{font-size:36px; line-height:1.2; color:var(--navy);}
.correos-security-text .sub{color:var(--muted); font-size:15.5px; line-height:1.65; margin:16px 0 32px;}

.correos-security-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.correos-security-features li{display:flex; align-items:flex-start; gap:14px;}
.correos-security-feature-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:rgba(76,141,255,.12); border:1px solid rgba(76,141,255,.28); color:#2E6FE0;
}
.correos-security-features strong{display:block; font-size:14.5px; color:var(--navy); margin-bottom:2px;}
.correos-security-features span{font-size:13px; color:var(--muted); line-height:1.5;}

@media (max-width:1080px){
  .correos-security{padding:90px 0;}
  .correos-security-grid{grid-template-columns:1fr; gap:80px;}
  .correos-security-text{max-width:none; margin:0 auto;}
  .correos-security-visual{max-width:480px; margin:0 auto;}
}
@media (max-width:640px){
  .correos-security-badge{padding:9px 13px; font-size:11px;}
  .correos-security-badge-1{left:0;}
  .correos-security-badge-2{right:0;}
}

/* ============================================================
   TRABAJO EN EQUIPO — composición diagonal, imagen desbordando,
   profundidad con capas superpuestas
   ============================================================ */
.correos-team{
  padding:150px 0 130px; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 55%, var(--crimson-dark) 130%);
}
.correos-team-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;
}
.correos-team-text{max-width:480px;}
.correos-team-text h2{font-size:38px; line-height:1.18; color:#fff;}
.correos-team-text .sub{color:var(--cc-muted); font-size:15.5px; line-height:1.65; margin:16px 0 30px;}

.correos-team-chips{display:flex; flex-wrap:wrap; gap:12px;}
.correos-team-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--cc-text);
  background:var(--cc-glass); border:1px solid var(--cc-border);
  padding:9px 16px; border-radius:20px;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.correos-team-chip:hover{transform:translateY(-4px); border-color:rgba(234,33,81,.4); background:rgba(234,33,81,.08);}
.correos-team-chip i{color:var(--crimson);}

.correos-team-visual{position:relative; justify-self:end; width:100%; max-width:600px;}
.correos-team-glow{
  position:absolute; inset:-80px -40px -80px 10%; z-index:0;
  background:radial-gradient(circle, rgba(139,92,246,.32), transparent 70%);
  filter:blur(60px); pointer-events:none;
}
.correos-team-photo{
  position:relative; z-index:1;
  margin-right:-90px;
  border-radius:26px; overflow:hidden;
  border:1px solid var(--cc-border);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.75);
  transform:rotate(-2.2deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.correos-team-visual:hover .correos-team-photo{transform:rotate(0deg) scale(1.02);}
.correos-team-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:6/5; display:block;}

.correos-team-float-card{
  position:absolute; z-index:2; left:-36px; bottom:-26px;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:16px; max-width:220px;
  box-shadow:0 26px 50px -16px rgba(0,0,0,.7);
  animation:ccFloatSlow 6.5s ease-in-out infinite;
}
.correos-team-float-card .cc-avatars{display:flex;}
.correos-team-float-card .cc-avatars span{
  width:26px; height:26px; border-radius:50%; margin-left:-8px;
  border:2px solid var(--navy-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; color:#fff;
}
.correos-team-float-card .cc-avatars span:first-child{margin-left:0;}
.correos-team-float-card strong{font-size:12.5px; color:#fff; display:block;}
.correos-team-float-card span.cc-label{font-size:10.5px; color:var(--cc-muted);}

@media (max-width:1080px){
  .correos-team{padding:100px 0;}
  .correos-team-grid{grid-template-columns:1fr; gap:80px;}
  .correos-team-text{max-width:none; text-align:center; margin:0 auto;}
  .correos-team-chips{justify-content:center;}
  .correos-team-visual{justify-self:center; max-width:460px;}
  .correos-team-photo{margin-right:0;}
  .correos-team-float-card{left:0;}
}

/* ============================================================
   FAQ — acordeón glass
   ============================================================ */
.correos-faq{position:relative; padding:120px 0; background:var(--paper); overflow:hidden;}
.correos-faq .section-head h2{color:var(--navy);}
.correos-faq .wrap{position:relative; z-index:1;}

.correos-faq-bg-img{
  position:absolute; z-index:0; pointer-events:none;
  bottom:-40px; left:-30px;
  width:560px; max-width:50vw;
  opacity:.14;
}

.correos-faq-list{margin-top:40px; display:flex; flex-direction:column; gap:14px;}

.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 .35s ease, background .35s ease, box-shadow .35s ease;
}
.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);}
.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);
}
.faq-question svg{flex-shrink:0; color:var(--crimson); transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.faq-item.open .faq-question svg{transform:rotate(180deg);}

.faq-answer{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1);}
.faq-item.open .faq-answer{max-height:280px;}
.faq-answer p{padding:0 24px 22px; margin:0; font-size:13.5px; color:var(--muted); line-height:1.7;}

/* ============================================================
   CTA FINAL — mismo patrón que .marca-cta-split (creacion-marca.css):
   la sección misma se vuelve el contenedor flex (texto | imagen a
   pantalla completa con corte diagonal), en vez de una imagen chica
   flotando. Se anula el padding y el ::after decorativo de
   .cta-fullwidth (global) solo en esta página, igual que allá.
   ============================================================ */
.correos-cta-final{
  padding:0 !important;
  display:flex; align-items:stretch;
  min-height:320px;
  background:linear-gradient(120deg, var(--navy-ink) 0%, var(--navy) 55%, var(--crimson-dark) 130%) !important;
  overflow:hidden;
}
.correos-cta-final::after{display:none;}

.correos-cta-split-inner{
  /* La causa real: el sitio tiene *{box-sizing:border-box} global, así
     que un padding-left grande (el cálculo de alineación con el logo,
     que puede pasar de 300px en pantallas anchas) se RESTABA del
     width fijo, dejando apenas ~200px de contenido real — de ahí el
     título partido en 4 líneas por más que se agrandara el width o se
     tocara el flex. La solución: mover ese offset a margin-left (que
     no se descuenta del ancho del elemento) y dejar el padding solo
     para el respiro interno de arriba/derecha/abajo. */
  flex:0 0 auto; width:min(640px, 52vw);
  margin-left:max(32px, calc((100vw - 1340px) / 2 + 32px));
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
  padding:56px 48px 56px 0;
}
/* El h2 hereda max-width:580px de .cta-fullwidth-text (global, style.css),
   más angosto que este contenedor. */
.correos-cta-final .cta-fullwidth-text h2{max-width:none;}
.correos-cta-split-inner .btn{margin-top:26px; align-self:flex-start;}

.correos-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-ink);
  overflow:hidden;
}
.correos-cta-split-image img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block;
}
.correos-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:760px){
  .correos-cta-final{flex-direction:column;}
  .correos-cta-split-image{
    clip-path:none; flex:0 0 200px; width:100%; order:-1; margin-left:0;
  }
  .correos-cta-split-inner{padding:40px 26px; width:100%; margin-left:0;}
}