/* =====================================================================
   v12.2 · Identidad por sección
   Paleta de marca (una sola familia):
     Noche   #12101f  · fondo oscuro de marca
     Violeta #6c2bff  · color principal (acentos, botones, insignias)
     Lima    #c6ff3d  · energía (CTA, detalles en fondos oscuros)
     Lavanda #f1ebfc  · claro frío
     Lima suave #f5fae8 · claro fresco
     Blanco  #ffffff
   Ritmo: oscuro · claro · claro · claro · OSCURO · claro · VIOLETA · claro · claro · OSCURO
   Nunca dos secciones seguidas con el mismo fondo.
   ===================================================================== */
:root{--noche:#12101f;--noche-2:#1c1734;--violeta:#6c2bff;--violeta-2:#4a17c9;--lavanda:#f1ebfc;--lima-suave:#f5fae8;--on-dark:#fff;--on-dark-muted:#c9bfdc}

/* Las secciones que vivían dentro de .wrap ahora ocupan todo el ancho para que su color llegue a los bordes */
#propuesta,#estilos,#planes{max-width:none;width:100%;padding-inline:max(18px,calc((100% - 1160px)/2))}
#propuesta:before,#estilos:before,#planes:before,#preguntas:before{display:none!important}

/* 01 · Qué hacemos — Lavanda: la primera sección clara después del banner oscuro */
.services-stage{background:radial-gradient(ellipse 70% 60% at 85% 0%,#ffffffd9,transparent 70%),radial-gradient(ellipse 60% 70% at 0% 100%,#e2d4ff,transparent 70%),var(--lavanda);color:var(--ink)}
.services-stage .eyebrow,.services-stage .eyebrow .code{color:var(--violeta)}
.services-stage h2{color:var(--ink)}
.services-stage .deal-hint,.services-stage .pdf-line,.services-stage .section-heading p{color:var(--muted)}
.services-stage .pdf-line a,.services-stage .pdf-line b{color:var(--violeta)}
.svc{box-shadow:0 2px 4px #2a106014,0 22px 44px #2a106026}
.svc:not(.svc-dark):not(.svc-lime) .svc-bg{background:#fff}

/* 02 · Propuesta — Blanco con trama de puntos (papel de diseño) */
#propuesta{background:radial-gradient(#6c2bff1c 1px,transparent 1.4px) 0 0/24px 24px,#fff}
#propuesta .reason{background:#fff}

/* 03 · Demo WhatsApp — Lima suave: fresco, conversación */
.demo-sec{background:radial-gradient(ellipse 60% 70% at 100% 0%,#e6f7bf,transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,#eef9d6,transparent 70%),var(--lima-suave)}
.demo-sec .prod{background:#fff}

/* 04 · Estilos — Noche: sala de exhibición, los colores de cada rubro resaltan */
#estilos{background:radial-gradient(ellipse 60% 70% at 100% 100%,#3a1c7a,transparent 70%),radial-gradient(ellipse 45% 50% at 0% 0%,#2a1757,transparent 70%),var(--noche);color:var(--on-dark)}
#estilos h2{color:#fff}
#estilos .eyebrow,#estilos .eyebrow .code{color:var(--lime)}
#estilos .demo-lead{color:var(--on-dark-muted)}
#estilos .chip{background:#ffffff0f;border-color:#ffffff2e;color:#fff}
#estilos .chip:hover{border-color:var(--lime);background:#ffffff1a}
#estilos .chip[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#estilos .browser{box-shadow:0 2px 4px #0003,0 32px 64px #0007}
#estilos .style-card{border-color:transparent;box-shadow:0 24px 48px #0005}

/* 05 · Planes — Blanco con luz violeta arriba: limpio para comparar precios */
#planes{background:radial-gradient(ellipse 60% 40% at 50% 0%,#efe6ff,transparent 70%),#fff}

/* 06 · Trabajos — Violeta de marca: el portafolio como vitrina */
.work-section{background:radial-gradient(ellipse 55% 65% at 100% 0%,#c6ff3d26,transparent 65%),radial-gradient(ellipse 60% 70% at 0% 100%,#2c0d8c,transparent 70%),linear-gradient(150deg,#6c2bff,var(--violeta-2));color:#fff}
.work-section h2,.work-section .pcard h3{color:#fff}
.work-section .eyebrow,.work-section .eyebrow .code,.work-section .pc-k{color:var(--lime)}
.work-section .pcard p,.work-section .port-note{color:#e3d9ff}
.work-section .browser{box-shadow:0 2px 4px #1a064a33,0 30px 60px #1a064a66}
.work-section .glow.glow-light:after{background:radial-gradient(380px circle at var(--mx) var(--my),#ffffff26,transparent 50%)}

/* 07 · Proceso — Blanco con cuadrícula de plano: la obra en construcción */
.process-section{background:linear-gradient(#6c2bff0f 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,#6c2bff0f 1px,transparent 1px) 0 0/32px 32px,radial-gradient(ellipse 60% 60% at 0% 100%,#f1ebfc,transparent 70%),#fff}

/* 08 · Preguntas — Lavanda con tarjetas blancas */
.faq-section{background:radial-gradient(ellipse 50% 60% at 100% 100%,#e6f7bf99,transparent 65%),var(--lavanda)}
.faq details{background:#fff;border-color:#e4d8f6}
.faq details[open]{background:#fff;border-color:#b99bf5;box-shadow:var(--e1)}
.faq-layout>div:first-child:after{color:#d9c8f6}

/* Contacto — Noche con brillo violeta (cierre, igual que el banner) · pie blanco */
.contact-section{background:radial-gradient(ellipse at 60% 100%,#5727a4,transparent 70%),var(--noche)}

/* Transiciones de hoja: las esquinas muestran el color de la sección anterior */
@media(min-width:761px){
 #propuesta,#estilos,#planes{padding-inline:max(32px,calc((100% - 1160px)/2))}
}
#estilos .style-card{color:var(--ink)}#estilos .style-card b{color:var(--ink)}
#estilos .chips{margin-bottom:24px}