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

   Página nueva e independiente (no reemplaza dominios-correos.php).
   Identidad propia dentro de la misma marca: acá el protagonista es
   el buscador de dominios en vivo (WHOIS real, ver public/api/check-domain.php),
   así que la composición gira en torno a un hero "search-first" y un
   acento azul/cian ("presencia en internet") más marcado que en el
   resto del sitio, en vez de repetir el aurora de dominios-correos.php
   o el rack/dashboard de hosting-vps.php.
   ============================================================ */

body.page-dominios{background:var(--navy);}
body.page-dominios::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{
  --dr-glass:rgba(255,255,255,.05);
  --dr-glass-strong:rgba(255,255,255,.09);
  --dr-border:rgba(255,255,255,.1);
  --dr-border-soft:rgba(255,255,255,.06);
  --dr-text:#F1F3FA;
  --dr-muted:#9AA3C4;
  --dr-cyan:#38BDF8;
  --dr-green:#1EA672;
  --dr-amber:#F5A524;
}

.page-dominios section{position:relative;}

/* ---------- utilidades ---------- */
.dr-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;
}
.dr-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 4px rgba(234,33,81,.25);}
.dr-eyebrow.is-cyan{color:var(--dr-cyan); background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.3);}
.dr-eyebrow.is-cyan::before{background:var(--dr-cyan); box-shadow:0 0 0 4px rgba(56,189,248,.25);}

.dr-glass{background:var(--dr-glass); border:1px solid var(--dr-border); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);}

.dr-aurora{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.dr-aurora span{position:absolute; border-radius:50%; filter:blur(72px); will-change:transform;}
.dr-aurora .a1{width:520px; height:520px; top:-160px; left:-100px; background:radial-gradient(circle, rgba(56,189,248,.3), transparent 68%); animation:drDrift1 24s ease-in-out infinite alternate;}
.dr-aurora .a2{width:460px; height:460px; top:12%; right:-140px; background:radial-gradient(circle, rgba(234,33,81,.24), transparent 68%); animation:drDrift2 27s ease-in-out infinite alternate;}
.dr-aurora .a3{width:420px; height:420px; bottom:-160px; left:35%; background:radial-gradient(circle, rgba(30,166,114,.18), transparent 68%); animation:drDrift3 30s ease-in-out infinite alternate;}
@keyframes drDrift1{from{transform:translate(0,0) scale(1);} to{transform:translate(50px,40px) scale(1.1);}}
@keyframes drDrift2{from{transform:translate(0,0) scale(1);} to{transform:translate(-40px,50px) scale(1.08);}}
@keyframes drDrift3{from{transform:translate(0,0) scale(1);} to{transform:translate(40px,-30px) scale(1.12);}}

.dr-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% 25%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 100%);
}

/* partículas flotantes muy sutiles del hero */
.dr-particles{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.dr-particles span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--dr-cyan); opacity:.5; filter:drop-shadow(0 0 4px var(--dr-cyan));
  animation:drParticleFloat 9s ease-in-out infinite;
}
.dr-particles span:nth-child(1){top:18%; left:8%; animation-delay:0s;}
.dr-particles span:nth-child(2){top:62%; left:14%; animation-delay:-2s; background:var(--crimson); filter:drop-shadow(0 0 4px var(--crimson));}
.dr-particles span:nth-child(3){top:30%; left:92%; animation-delay:-4s;}
.dr-particles span:nth-child(4){top:78%; left:88%; animation-delay:-6s; background:var(--dr-green); filter:drop-shadow(0 0 4px var(--dr-green));}
.dr-particles span:nth-child(5){top:8%; left:48%; animation-delay:-3s;}
@keyframes drParticleFloat{0%,100%{transform:translateY(0) scale(1); opacity:.5;} 50%{transform:translateY(-22px) scale(1.3); opacity:.9;}}

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

.reveal-scale{transform:scale(.92);}
.reveal-scale.in-view{transform:scale(1);}
@media (prefers-reduced-motion: reduce){ .reveal-scale{transform:none;} }


/* ============================================================
   HERO — el buscador vive acá adentro (no en una sección aparte): es
   la acción principal de la página, tiene que verse sin scrollear.
   Sin imagen: todo centrado en una sola columna en vez del grid de
   texto + foto que tenía antes.
   ============================================================ */
.dr-hero{
  display:flex; align-items:center;
  min-height:100vh; min-height:100dvh;
  /* padding:150px 0 90px (antiguo, de cuando el hero no ocupaba toda
     la pantalla) — asimétrico, empujaba el texto hacia abajo del
     centro real en vez de quedar centrado como en el home/Nosotros
     (que no llevan padding vertical, solo min-height + centrado). */
  padding:40px 0;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%);
  overflow:hidden;
}
.dr-hero-grid{position:relative; z-index:2; display:flex; justify-content:center;}
.dr-hero-text{max-width:640px; text-align:center;}
.dr-hero-text h1{font-size:44px; line-height:1.15; color:#fff; letter-spacing:-.02em;}
.dr-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:drAccentSheen 6s linear infinite;
}
@keyframes drAccentSheen{to{background-position:200% center;}}
.dr-hero-text .sub{font-size:16px; line-height:1.65; color:var(--dr-muted); margin:18px auto 0; max-width:480px;}

/* ---------- buscador ---------- */
.dr-search-card{margin:32px auto 0; max-width:560px; padding:22px; border-radius:20px; box-shadow:0 30px 60px -24px rgba(0,0,0,.55);}
.dr-search-form{display:flex; gap:10px; flex-wrap:wrap;}
.dr-search-input-wrap{
  flex:1 1 260px; min-width:0; display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.22); border:1px solid var(--dr-border); border-radius:13px; padding:0 16px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.dr-search-input-wrap:focus-within{border-color:var(--dr-cyan); box-shadow:0 0 0 4px rgba(56,189,248,.16);}
.dr-search-input-wrap svg{color:var(--dr-muted); flex-shrink:0;}
.dr-search-input-wrap input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  padding:15px 0; font-family:'IBM Plex Mono'; font-size:15.5px; color:#fff;
}
.dr-search-input-wrap input::placeholder{color:#5C6685;}
.dr-search-suffix{font-family:'IBM Plex Mono'; font-size:13.5px; color:var(--dr-muted); flex-shrink:0;}
.dr-search-btn{flex-shrink:0; padding:0 26px; font-size:14.5px;}

.dr-search-note{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; font-size:11.5px; color:var(--dr-muted);}
.dr-search-note b{color:var(--dr-text); font-weight:600;}

.dr-hero-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:28px;}
.dr-hero-trust span{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--dr-muted);}
.dr-hero-trust svg{color:var(--dr-green); flex-shrink:0;}

/* ---------- visual: ilustración protagonista ---------- */
.dr-hero-visual{position:relative; z-index:2; perspective:1200px;}
.dr-hero-glow{
  position:absolute; inset:-50px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(56,189,248,.35), rgba(234,33,81,.16) 45%, transparent 72%);
  filter:blur(34px);
}
.dr-hero-photo-frame{
  position:relative; z-index:1;
  border-radius:28px; padding:10px;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  border:1px solid var(--dr-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; transition:transform .25s ease-out; will-change:transform;
  animation:drFloat 8s ease-in-out infinite;
}
.dr-hero-photo-frame img{width:100%; height:100%; object-fit:cover; border-radius:20px; display:block;}
@keyframes drFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

.dr-hero-float-badge{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:8px;
  padding:11px 17px; border-radius:14px; font-size:12px; font-weight:700; color:var(--dr-text);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);
  animation:drFloatSlow 5.5s ease-in-out infinite;
}
.dr-hero-float-badge svg{color:var(--dr-green);}
.dr-badge-a{top:-16px; left:8px;}
.dr-badge-b{bottom:12px; right:-18px; animation-delay:-2.6s;}
@keyframes drFloatSlow{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}

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

@media (max-width:1080px){
  .dr-hero{padding:32px 0;}
  .dr-hero-grid{grid-template-columns:1fr; gap:64px; text-align:center;}
  .dr-hero-text{max-width:none; margin:0 auto;}
  .dr-hero-text .sub{margin-left:auto; margin-right:auto;}
  .dr-search-form{justify-content:center;}
  .dr-hero-trust{justify-content:center;}
  .dr-hero-visual{max-width:440px; margin:0 auto;}
}
@media (max-width:640px){
  .dr-hero-text h1{font-size:30px;}
  .dr-search-form{flex-direction:column;}
  /* .dr-search-input-wrap tiene flex:1 1 260px pensado para fila (260px
     de ANCHO); al pasar el form a flex-direction:column esos mismos
     260px se interpretan como ALTO del recuadro (flex-basis sigue el
     eje principal, que ahora es vertical) — de ahí la caja enorme y
     vacía. flex-basis:auto lo deja usar su alto natural de contenido. */
  .dr-search-input-wrap{flex-basis:auto;}
  .dr-search-btn{width:100%; justify-content:center;}
}

/* ============================================================
   BUSCADOR CENTRADO — antes vivía dentro del hero; ahora es su propia
   sección centrada, con un mensaje corto arriba.
   ============================================================ */
.dr-search-section{padding:80px 0; background:var(--navy-ink); overflow:hidden;}
.dr-search-section .section-head h2{color:#fff;}
.dr-search-section .section-head p{color:var(--dr-muted);}

.dr-search-standalone{
  max-width:620px; margin:44px auto 0; position:relative; z-index:1;
}
.dr-search-standalone .dr-search-form{justify-content:center;}
.dr-search-standalone .dr-search-note{justify-content:center;}

@media (max-width:640px){
  .dr-search-standalone .dr-search-form{flex-direction:column;}
  .dr-search-standalone .dr-search-btn{width:100%; justify-content:center;}
}

/* ============================================================
   RESULTADOS DEL BUSCADOR
   ============================================================ */
.dr-results{padding:64px 0 110px; background:linear-gradient(180deg, var(--navy-ink) 0%, var(--navy) 100%);}
.dr-results .wrap{position:relative; z-index:1;}

.dr-results-idle, .dr-results-loading, .dr-results-error{
  text-align:center; max-width:420px; margin:0 auto; padding:50px 20px; color:var(--dr-muted);
}
.dr-results-idle svg{color:var(--dr-border); margin:0 auto 16px;}
.dr-results-idle p, .dr-results-loading p, .dr-results-error p{font-size:14px; line-height:1.6;}
.dr-results-error{color:var(--dr-text);}
.dr-results-error .btn{margin-top:18px;}

.dr-spinner{
  width:38px; height:38px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--dr-border); border-top-color:var(--dr-cyan);
  animation:drSpin .8s linear infinite;
}
@keyframes drSpin{to{transform:rotate(360deg);}}

.dr-results-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px;}
.dr-result-card{
  padding:20px; border-radius:16px;
  background:var(--dr-glass); border:1px solid var(--dr-border);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
  animation:drCardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes drCardIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.dr-result-card:hover{transform:translateY(-4px);}
.dr-result-domain{font-family:'IBM Plex Mono'; font-size:14.5px; font-weight:600; color:#fff; word-break:break-all;}
.dr-result-status{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; width:fit-content; padding:5px 12px; border-radius:20px;}
.dr-result-card.is-disponible{border-color:rgba(30,166,114,.4); background:rgba(30,166,114,.08);}
.dr-result-card.is-disponible .dr-result-status{color:var(--dr-green); background:rgba(30,166,114,.14);}
.dr-result-card.is-ocupado{opacity:.7;}
.dr-result-card.is-ocupado .dr-result-status{color:var(--dr-muted); background:rgba(255,255,255,.06);}
.dr-result-card.is-manual .dr-result-status{color:var(--dr-amber); background:rgba(245,165,36,.14);}
.dr-result-card.is-error .dr-result-status{color:#FF7A9C; background:rgba(234,33,81,.12);}
.dr-result-card .btn{margin-top:auto; width:100%; justify-content:center; padding:10px 14px; font-size:12.5px;}

.dr-alt-wrap{margin-top:44px;}
.dr-alt-wrap h3{font-size:15px; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.dr-alt-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px;}

.dr-results-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; justify-content:center;}

@media (max-width:640px){
  .dr-results-grid, .dr-alt-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   POR QUÉ REGISTRAR CON NOSOTROS
   ============================================================ */
.dr-benefits{padding:120px 0; background:var(--paper);}
.dr-benefits .section-head h2{color:var(--navy);}
.dr-benefits .section-head p{color:var(--muted);}

.dr-benefits-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:48px;}
.dr-benefit-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px;
  box-shadow:0 10px 26px -20px rgba(30,44,81,.2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
/* Anillo de borde en degradado guinda, aparece solo en hover (misma
   técnica que .marca-porque-card en creacion-marca.css). */
.dr-benefit-card::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  padding:1.5px;
  background:linear-gradient(135deg, var(--crimson), rgba(234,33,81,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
.dr-benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 54px -22px rgba(30,44,81,.3), 0 0 30px -8px rgba(234,33,81,.35);
}
.dr-benefit-card:hover::before{opacity:1;}
.dr-benefit-icon{
  position:relative;
  width:42px; height:42px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 10px 20px -8px rgba(234,33,81,.5);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.dr-benefit-card:hover .dr-benefit-icon{transform:scale(1.12) rotate(-6deg);}
/* Anillo de pulso continuo, escalonado por tarjeta */
.dr-benefit-icon::after{
  content:""; position:absolute; inset:-6px; z-index:-1;
  border-radius:inherit; border:2px solid var(--crimson);
  opacity:0;
  animation:drBenefitPulse 2.8s ease-out infinite;
}
.dr-benefit-card:nth-child(4n+1) .dr-benefit-icon::after{animation-delay:0s;}
.dr-benefit-card:nth-child(4n+2) .dr-benefit-icon::after{animation-delay:.5s;}
.dr-benefit-card:nth-child(4n+3) .dr-benefit-icon::after{animation-delay:1s;}
.dr-benefit-card:nth-child(4n+4) .dr-benefit-icon::after{animation-delay:1.5s;}
@keyframes drBenefitPulse{
  0%{transform:scale(.85); opacity:.55;}
  70%{transform:scale(1.5); opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .dr-benefit-icon::after{animation:none;}
  .dr-benefit-card{transition:none;}
}
.dr-benefit-card h3{font-size:14.5px; color:var(--navy); margin-bottom:6px;}
.dr-benefit-card p{font-size:12.5px; color:var(--muted); line-height:1.55;}

@media (max-width:1080px){ .dr-benefits-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .dr-benefits-grid{grid-template-columns:1fr;} }

/* ============================================================
   PROCESO DE REGISTRO — timeline vertical con línea de progreso
   ============================================================ */
.dr-process{position:relative; overflow:hidden; padding:130px 0; background:linear-gradient(180deg, var(--navy) 0%, var(--navy-ink) 100%);}
.dr-process-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.14; pointer-events:none; user-select:none;
}
.dr-process .wrap{position:relative; z-index:1;}
.dr-process .section-head h2{color:#fff;}
.dr-process .section-head p{color:var(--dr-muted);}

/* Mismo diseño de "flujo" horizontal que .vps-flow (hosting-vps.css):
   nodos circulares con ícono, conectados por una línea punteada con
   puntitos de color animados. Se mantiene la imagen de fondo propia
   de esta sección (.dr-process-bg), a diferencia de la de VPS. */
.dr-flow{position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin-top:64px;}
.dr-flow::before{
  content:""; position:absolute; top:34px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px);
}
.dr-flow-track{position:absolute; top:34px; left:8%; right:8%; height:2px; overflow:hidden; pointer-events:none;}
.dr-flow-track span{
  position:absolute; top:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--dr-cyan); box-shadow:0 0 10px var(--dr-cyan);
  animation:drFlowMove 3.2s linear infinite;
}
.dr-flow-track span:nth-child(2){animation-delay:1.1s; background:var(--crimson); box-shadow:0 0 10px var(--crimson);}
.dr-flow-track span:nth-child(3){animation-delay:2.2s; background:var(--dr-green); box-shadow:0 0 10px var(--dr-green);}
@keyframes drFlowMove{from{left:0%;} to{left:100%;}}

.dr-flow-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center;}
.dr-flow-icon{
  width:68px; height:68px; border-radius:50%; margin-bottom:16px;
  background:var(--navy-ink); border:2px solid var(--dr-border);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--dr-cyan);
  box-shadow:0 0 0 8px rgba(56,189,248,.08);
}
.dr-flow-node:nth-child(2) .dr-flow-icon{color:var(--crimson); box-shadow:0 0 0 8px rgba(234,33,81,.08);}
.dr-flow-node:nth-child(3) .dr-flow-icon{color:var(--dr-green); box-shadow:0 0 0 8px rgba(30,166,114,.08);}
.dr-flow-node:nth-child(4) .dr-flow-icon{color:var(--dr-amber); box-shadow:0 0 0 8px rgba(245,165,36,.08);}
.dr-flow-node:nth-child(5) .dr-flow-icon{color:var(--dr-cyan); box-shadow:0 0 0 8px rgba(56,189,248,.08);}
.dr-flow-node h3{font-size:14.5px; color:#fff; margin-bottom:6px;}
.dr-flow-node p{font-size:12.5px; color:var(--dr-muted); line-height:1.55; max-width:190px;}

@media (max-width:900px){
  .dr-flow{grid-template-columns:1fr; gap:44px;}
  .dr-flow::before, .dr-flow-track{display:none;}
}

/* ============================================================
   EXTENSIONES DISPONIBLES
   ============================================================ */
.dr-extensions{padding:120px 0; background:var(--paper);}
.dr-extensions .section-head h2{color:var(--navy);}
.dr-extensions .section-head p{color:var(--muted);}

.dr-ext-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:48px;}
.dr-ext-card{
  padding:26px 20px; border-radius:16px; text-align:center;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 10px 26px -20px rgba(30,44,81,.2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.dr-ext-card:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 26px 48px -22px rgba(30,44,81,.28); border-color:rgba(56,189,248,.35);}
.dr-ext-card .dr-ext-tag{
  display:inline-block; font-family:'IBM Plex Mono'; font-weight:700; font-size:19px;
  color:var(--navy); background:var(--crimson-tint); padding:8px 16px; border-radius:10px; margin-bottom:12px;
}
.dr-ext-card p{font-size:12.5px; color:var(--muted); line-height:1.5;}

@media (max-width:1080px){ .dr-ext-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .dr-ext-grid{grid-template-columns:1fr;} }

/* ============================================================
   QUÉ INCLUYE — checklist en panel oscuro
   ============================================================ */
.dr-includes{padding:130px 0; background:linear-gradient(120deg, var(--navy-ink) 0%, var(--navy) 60%, var(--crimson-dark) 140%);}
.dr-includes-panel{
  max-width:920px; margin:52px auto 0; padding:44px 40px; border-radius:24px;
}
.dr-includes-list{display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; list-style:none; margin:0; padding:0;}
.dr-includes-list li{display:flex; align-items:flex-start; gap:12px;}
.dr-includes-list svg{color:var(--dr-green); flex-shrink:0; margin-top:2px;}
.dr-includes-list strong{display:block; font-size:14.5px; color:#fff;}
.dr-includes-list span{font-size:12.5px; color:var(--dr-muted); line-height:1.5;}

@media (max-width:760px){ .dr-includes-list{grid-template-columns:1fr;} .dr-includes-panel{padding:32px 24px;} }

/* ============================================================
   FAQ
   ============================================================ */
.dr-faq{padding:120px 0; background:var(--paper);}
.dr-faq .section-head h2{color:var(--navy);}
.dr-faq-list{margin-top:40px; display:flex; flex-direction:column; gap:14px;}

.dr-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 .35s ease, background .35s ease, box-shadow .35s ease;
}
.dr-faq .faq-item.open{border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.05); box-shadow:0 16px 34px -18px rgba(56,189,248,.2);}
.dr-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);
}
.dr-faq .faq-question svg{flex-shrink:0; color:var(--crimson); transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.dr-faq .faq-item.open .faq-question svg{transform:rotate(180deg);}
.dr-faq .faq-answer{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1);}
.dr-faq .faq-item.open .faq-answer{max-height:280px;}
.dr-faq .faq-answer p{padding:0 24px 22px; margin:0; font-size:13.5px; color:var(--muted); line-height:1.7;}

/* ============================================================
   CTA FINAL — split diagonal (mismo patrón de marca ya usado en
   creacion-marca.php / dominios-correos.php / hosting-vps.php),
   con acento cian propio de esta página.
   ============================================================ */
.dr-cta-final{
  padding:0 !important;
  display:flex; align-items:stretch;
  min-height:300px;
  background:linear-gradient(120deg, var(--navy-ink) 0%, var(--navy) 55%, var(--crimson-dark) 130%) !important;
  overflow:hidden;
}
.dr-cta-final::after{display:none;}

.dr-cta-split-inner{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; max-width:720px; position:relative; z-index:2;
  padding:44px 48px;
  /* Offset con margin (no padding) para alinear con el borde izquierdo
     de .wrap sin que se reste del max-width en box-sizing:border-box. */
  margin-left:max(0px, calc((100vw - 1180px) / 2 - 16px));
}
.dr-cta-split-inner .cta-row{margin-top:20px; gap:14px;}
/* Los 3 textos de esta página ("Verificación en tiempo real", etc.)
   son más largos que en otros CTA parecidos y envuelven a 2 líneas —
   se achica el margen de arriba para compensar y no sumar más alto
   del necesario. */
.dr-cta-split-inner .cta-fullwidth-points{margin-top:12px; row-gap:6px;}

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

@media (max-width:760px){
  .dr-cta-final{flex-direction:column;}
  .dr-cta-split-visual{clip-path:none; flex:0 0 170px; width:100%; order:-1; margin-left:0;}
  .dr-cta-split-inner{padding:40px 26px; max-width:none;}
}