/* ============================================================
   DIUR STUDIO — Design System completo
   ============================================================ */

:root {
    --color-violeta:  #7A3CF5;
    --color-violeta-hover: #5C22DE;
    --color-negro:    #121212;
    --color-rosa:     #FF3FA0;
    --color-lima:     #C6FF3D;
    --color-blanco:   #FFFFFF;

    --color-texto:        #121212;
    --color-texto-cuerpo: #3D3B42;
    --color-texto-muted:  #8A8790;
    --color-texto-claro:  #B4B1BB;
    --color-texto-footer: #9490A0;

    --color-superficie:   var(--color-blanco);
    --color-neutro:       #F3F2F5;
    --color-mortero:      #EDEBF0;
    --color-fondo-base:   #FFFFFF;

    --radio-boton: 8px;
    --radio-pill: 20px;

    --fuente-titular: 'Archivo Black', sans-serif;
    --fuente-subtitulo: 'Poppins', sans-serif;
    --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fuente-firma: 'Permanent Marker', cursive;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo-base);
    color: var(--color-texto-cuerpo);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3 { margin: 0; }
h1 { font-family: var(--fuente-titular); text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-texto); }
h2, h3 { font-family: var(--fuente-subtitulo); font-weight: 700; color: var(--color-texto); }

a { color: var(--color-violeta); text-decoration: none; }
a:hover { color: var(--color-violeta-hover); }

.fondo-cuadricula {
    background-image:
        linear-gradient(rgba(18,18,18,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,18,18,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.numero-editorial { text-align: left; max-width: 1200px; margin: 0 auto 1.75rem; padding: 0 6%; }
.numero-editorial .etiqueta { font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--color-violeta); text-transform: uppercase; }
.numero-editorial h2 { margin-top: 0.4rem; font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: none; }
.numero-editorial p { color: var(--color-texto-muted); max-width: 520px; margin: 0.5rem 0 0; }

/* ---------- Logo (dos versiones: blanca arriba, original al hacer scroll) ---------- */
.logo-link { display: inline-flex; align-items: center; position: relative; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.logo-link:hover { transform: scale(1.05); }
.logo-header {
    height: 76px;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.logo-header.logo-original { position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0.96); }
.site-header.scrolled .logo-header.logo-blanca { opacity: 0; transform: scale(0.96); }
.site-header.scrolled .logo-header.logo-original { opacity: 1; transform: scale(1); }

/* ---------- Barra de utilidad (teléfono, correo, redes) ---------- */
.barra-utilidad {
    background: #000; color: var(--color-texto-claro);
    font-size: 0.75rem; padding: 0.5rem 5%;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.5rem;
}
.barra-utilidad .contacto-rapido { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.barra-utilidad .contacto-rapido a { color: var(--color-texto-claro); }
.barra-utilidad .contacto-rapido a:hover { color: var(--color-lima); }
.barra-utilidad .redes-mini { display: flex; gap: 0.9rem; }
.barra-utilidad .redes-mini a { color: var(--color-texto-claro); display: flex; align-items: center; }
.barra-utilidad .redes-mini a:hover { color: var(--color-lima); }
.barra-utilidad .redes-mini svg { width: 15px; height: 15px; }
@media (max-width: 700px) { .barra-utilidad .redes-mini { display: none; } }

/* ---------- Header / Nav — cambia de negro a blanco al hacer scroll ---------- */
.site-header {
    display: flex; justify-content: space-between; align-items: center; padding: 1rem 6%;
    background: var(--color-negro);
    position: sticky; top: 0; z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.scrolled {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(18,18,18,0.1);
    padding: 0.7rem 5%;
}
.site-header nav { display: flex; align-items: center; }
.site-header nav a { color: var(--color-texto-claro); margin-left: 1.75rem; font-weight: 500; font-size: 0.82rem; transition: color 0.2s ease; }
.site-header nav a:hover { color: #fff; }
.site-header.scrolled nav a { color: var(--color-texto-cuerpo); }
.site-header.scrolled nav a:hover { color: var(--color-violeta); }
.site-header.scrolled .btn-hamburguesa { color: var(--color-negro); }

.btn-hamburguesa { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: #fff; line-height: 1; padding: 4px 8px; }

.site-header nav a.btn-ingresar { background: var(--color-violeta); color: #fff !important; padding: 9px 20px; border-radius: var(--radio-boton); font-weight: 700; }
.site-header nav a.btn-ingresar:hover { background: var(--color-violeta-hover); }

.nav-dropdown { position: relative; margin-left: 1.75rem; }
.nav-dropdown > span { color: var(--color-texto-claro); font-weight: 500; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s ease; }
.nav-dropdown > span::after { content: '▾'; font-size: 0.6rem; transition: transform 0.15s ease; }
.nav-dropdown.abierto > span { color: #fff; }
.site-header.scrolled .nav-dropdown > span { color: var(--color-texto-cuerpo); }
.site-header.scrolled .nav-dropdown.abierto > span { color: var(--color-violeta); }
.nav-dropdown.abierto > span::after { transform: rotate(180deg); }
.nav-dropdown .menu-desplegable {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--color-blanco); border: 1px solid var(--color-mortero);
    min-width: 230px; padding: 0.5rem; box-shadow: 0 14px 34px rgba(18,18,18,0.16);
    border-radius: 10px; opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease; z-index: 50;
}
.nav-dropdown.abierto .menu-desplegable { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(4px); }
.nav-dropdown .menu-desplegable a {
    display: block; position: relative; color: var(--color-negro) !important; font-weight: 600;
    font-size: 0.85rem; padding: 0.6rem 0.75rem 0.6rem 1.6rem; border-radius: 6px; margin: 0 !important;
}
.nav-dropdown .menu-desplegable a:hover { background: var(--color-neutro); color: var(--color-violeta) !important; }
.nav-dropdown .menu-desplegable a.item-rosa::before,
.nav-dropdown .menu-desplegable a.item-lima::before,
.nav-dropdown .menu-desplegable a.item-violeta::before,
.nav-dropdown .menu-desplegable a.item-negro::before {
    content: ''; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 3px;
}
.nav-dropdown .menu-desplegable a.item-rosa::before    { background: var(--color-rosa); }
.nav-dropdown .menu-desplegable a.item-lima::before    { background: var(--color-lima); }
.nav-dropdown .menu-desplegable a.item-violeta::before { background: var(--color-violeta); }
.nav-dropdown .menu-desplegable a.item-negro::before   { background: var(--color-negro); }

@media (max-width: 880px) {
    .btn-hamburguesa { display: block; order: 3; }
    .site-header { flex-wrap: wrap; }
    .site-header nav {
        order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease; margin-top: 0;
    }
    .site-header nav.nav-abierto { max-height: 80vh; overflow-y: auto; opacity: 1; margin-top: 1rem; }
    .site-header nav a, .nav-dropdown { margin-left: 0; margin-top: 0.25rem; }
    .site-header nav a.btn-ingresar { display: inline-block; width: fit-content; margin-top: 0.75rem; }
    .nav-dropdown > span { padding: 0.5rem 0; width: 100%; justify-content: space-between; }
    .nav-dropdown .menu-desplegable {
        position: static; transform: none !important; opacity: 1; pointer-events: auto;
        box-shadow: none; border: none; border-left: 2px solid var(--color-violeta);
        border-radius: 0; padding: 0 0 0 0.75rem; display: none; min-width: 0;
    }
    .nav-dropdown.abierto .menu-desplegable { display: block; }
}

/* ---------- Pills / barra de acento ---------- */
.pill-outline, .pill-negro, .pill-neutro { display: inline-block; padding: 6px 16px; border-radius: var(--radio-pill); font-weight: 600; font-size: 11px; }
.pill-outline { border: 1.5px solid var(--color-negro); color: var(--color-negro); }
.pill-negro   { background: var(--color-negro); color: #fff; }
.pill-neutro  { background: var(--color-neutro); color: var(--color-texto-muted); }

.barra-acento { width: 28px; height: 4px; background: var(--color-violeta); margin-bottom: 12px; }
.barra-acento.rosa  { background: var(--color-rosa); }
.barra-acento.lima  { background: var(--color-lima); }
.barra-acento.negro { background: var(--color-negro); }

/* ---------- Hero (texto, páginas internas) ---------- */
.hero { position: relative; padding: 4rem 6% 3.5rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; text-align: left; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; text-align: center; } }
.hero-contenido h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0 0 1.1rem; }
.hero-contenido h1 .acento { color: var(--color-violeta); }
.hero-contenido p { color: var(--color-texto-muted); font-size: 1.05rem; max-width: 460px; margin: 0 0 2rem; }
@media (max-width: 900px) { .hero-contenido p { margin-left: auto; margin-right: auto; } }

/* ---------- Franjas de color sólido ---------- */
.franja-violeta { background: var(--color-violeta); }
.franja-violeta .numero-editorial .etiqueta { color: var(--color-lima); }
.franja-violeta .numero-editorial h2, .franja-violeta .numero-editorial p { color: #fff; }
.franja-violeta .tarjeta-enfoque { background: var(--color-blanco); }

.franja-lima { background: var(--color-lima); }
.franja-lima h2, .franja-lima .etiqueta { color: var(--color-negro); }

.franja-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; padding: 3rem 6%; background: var(--color-negro); }
.stat-oscuro { text-align: center; }
.stat-oscuro strong { display: block; font-family: var(--fuente-subtitulo); font-size: 2rem; font-weight: 800; color: var(--color-lima); }
.stat-oscuro span { color: var(--color-texto-claro); font-size: 0.85rem; }
@media (max-width: 700px) { .franja-stats { gap: 2rem; padding: 2.5rem 6%; } }

/* ---------- Split Corporativo / Eventos ---------- */
.split-enfoques { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-mortero); border: 1px solid var(--color-mortero); }
@media (max-width: 768px) { .split-enfoques { grid-template-columns: 1fr; } }
.tarjeta-enfoque { background: var(--color-blanco); padding: 2.5rem; }
.tarjeta-enfoque h3 { font-size: 1.4rem; margin: 0.75rem 0; text-transform: none; }
.tarjeta-enfoque ul { color: var(--color-texto-muted); padding-left: 1.2rem; margin: 0 0 1.5rem; }

.confianza-franja { text-align: center; padding: 2rem 6% 3rem; border-top: 1px solid var(--color-mortero); }
.confianza-franja .etiqueta { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-texto-muted); margin-bottom: 1.5rem; }
.confianza-lista { display: flex; justify-content: center; align-items: center; gap: 3rem; flex-wrap: wrap; }
.confianza-lista .cliente-logo {
    font-family: var(--fuente-titular); font-size: 1.1rem; color: var(--color-texto-muted);
    text-transform: uppercase; opacity: 0.6; display: inline-block;
    filter: grayscale(1);
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.confianza-lista .cliente-logo:hover {
    opacity: 1; color: var(--color-violeta); filter: grayscale(0);
    transform: scale(1.12) translateY(-3px);
}

/* ---------- Grid de productos ---------- */
.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; padding: 2rem 6%; }
.tarjeta-producto { background: var(--color-blanco); border: 1px solid var(--color-mortero); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s ease; }
.tarjeta-producto:hover { box-shadow: 0 10px 28px rgba(18,18,18,0.1); }
.tarjeta-producto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--color-neutro); }
.tarjeta-producto .contenido { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.tarjeta-producto h4 { font-family: var(--fuente-subtitulo); margin: 0 0 0.4rem; font-size: 1.02rem; }
.tarjeta-producto .precio { display: inline-block; background: var(--color-neutro); color: var(--color-violeta); font-weight: 700; font-size: 0.85rem; padding: 4px 12px; border-radius: 6px; margin: 0.5rem 0 1rem; }

/* ---------- Botones ---------- */
.btn { display: inline-block; padding: 13px 24px; border-radius: var(--radio-boton); border: none; font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-violeta { background: var(--color-violeta); color: #fff; }
.btn-violeta:hover { background: var(--color-violeta-hover); }
.btn-outline { background: transparent; color: var(--color-negro); border: 1.5px solid var(--color-negro); padding: 11.5px 22.5px; }
.btn-outline:hover { background: var(--color-negro); color: #fff; }
.btn-outline-claro { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7); padding: 11.5px 22.5px; }
.btn-outline-claro:hover { border-color: #fff; }
.btn-full { width: 100%; text-align: center; }
.btn:disabled { background: var(--color-neutro); color: var(--color-texto-claro); cursor: not-allowed; }

/* Micro-interacción de flecha (según buenas prácticas de UX de botones) */
.btn .icono-flecha { display: inline-block; margin-left: 8px; transition: transform 0.2s ease; }
.btn:hover .icono-flecha { transform: translateX(4px); }

/* ---------- Sección "¿Tienes la idea...?" debajo del slider ---------- */
.franja-plan { background: #fff; text-align: center; padding: 4.5rem 6%; }
.franja-plan h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 0.85rem; text-transform: none; }
.franja-plan p { color: var(--color-texto-muted); max-width: 540px; margin: 0 auto 2.25rem; font-size: 1.05rem; }
.franja-plan .btn { margin: 0 0.4rem; }

/* ---------- "¿Tienes la idea...?" — versión simple y clara ---------- */
/* ---------- "¿Tienes la idea...?" — tipografía + resaltador (sin ícono) ---------- */
.franja-plan-nueva { position: relative; overflow: hidden; text-align: center; padding: 5.5rem 6%; background: var(--color-neutro); }
.franja-plan-nueva-fondo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-family: var(--fuente-titular); font-size: clamp(14rem, 30vw, 26rem);
    color: rgba(122,60,245,0.08); line-height: 1; user-select: none; pointer-events: none;
}
.franja-plan-nueva h2 { position: relative; z-index: 1; font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0.75rem auto 1rem; max-width: 640px; text-transform: none; }
.franja-plan-nueva h2 .resaltado { position: relative; display: inline-block; }
.franja-plan-nueva h2 .resaltado::after {
    content: ''; position: absolute; left: -3px; right: -3px; bottom: 3px; height: 0.42em;
    background: var(--color-lima); z-index: -1; opacity: 0.85; transform: skewX(-8deg);
}
.franja-plan-nueva > p { position: relative; z-index: 1; color: var(--color-texto-muted); max-width: 520px; margin: 0 auto 2.25rem; font-size: 1.05rem; }
.franja-plan-nueva .btn { position: relative; z-index: 1; margin: 0 0.4rem; }
.franja-plan-chips { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.chip-mini {
    display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-blanco);
    border: 1px solid var(--color-mortero); border-radius: 999px; padding: 8px 16px;
    font-size: 0.8rem; font-weight: 600; color: var(--color-texto-cuerpo);
    box-shadow: 0 4px 12px rgba(18,18,18,0.06);
}

/* ---------- Modelo de trabajo 360° — oscuro, dividido ---------- */
.modelo-360-v2 {
    background: var(--color-negro); color: #fff; position: relative; overflow: hidden;
    padding: 5rem 6% 6rem;
}
.modelo-360-v2::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
}
.modelo-360-v2-split {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center;
    max-width: 1200px; margin: 0 auto; text-align: left; position: relative; z-index: 1;
}
@media (max-width: 860px) { .modelo-360-v2-split { grid-template-columns: 1fr; text-align: center; } }
.modelo-360-v2-texto h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0.5rem 0 1rem; text-transform: none; color: #fff; }
.modelo-360-v2-texto p { color: var(--color-texto-claro); font-size: 1.05rem; margin: 0; max-width: 460px; }
@media (max-width: 860px) { .modelo-360-v2-texto p { margin: 0 auto; } }
.modelo-360-v2-grafico { display: flex; align-items: center; justify-content: center; }

/* ---------- Diagrama circular "Marketing 360°" con íconos y arcos ---------- */
.marketing360-diagrama { position: relative; width: 320px; height: 320px; max-width: 100%; margin: 0 auto; }
.marketing360-anillos { position: absolute; inset: 0; transform: rotate(-45deg); }
.marketing360-centro {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 2; white-space: nowrap;
}
.marketing360-numero {
    display: block; font-family: var(--fuente-titular); text-transform: uppercase;
    font-size: 2.1rem; color: #fff; letter-spacing: -1px;
    text-shadow: 0 0 22px rgba(122,60,245,0.6);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.marketing360-centro:hover .marketing360-numero { color: var(--color-lima); text-shadow: 0 0 26px rgba(198,255,61,0.7); }
.marketing360-sub {
    display: block; font-family: var(--fuente-subtitulo); font-weight: 700; font-size: 0.62rem;
    color: var(--color-texto-claro); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 0.3rem;
}
.marketing360-nodo { position: absolute; text-align: center; width: 100px; z-index: 2; }
.marketing360-nodo.pos-top { top: -6px; left: 50%; transform: translateX(-50%); }
.marketing360-nodo.pos-right { top: 50%; right: -18px; transform: translateY(-50%); }
.marketing360-nodo.pos-bottom { bottom: -6px; left: 50%; transform: translateX(-50%); }
.marketing360-nodo.pos-left { top: 50%; left: -18px; transform: translateY(-50%); }
.marketing360-nodo-icono {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 0.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px rgba(0,0,0,0.4); transition: transform 0.3s ease;
}
.marketing360-nodo:hover .marketing360-nodo-icono { transform: scale(1.14) translateY(-3px); }
.marketing360-nodo-icono svg { width: 24px; height: 24px; color: #fff; }
.marketing360-nodo-icono.rosa { background: var(--color-rosa); }
.marketing360-nodo-icono.lima { background: var(--color-lima); }
.marketing360-nodo-icono.lima svg { color: var(--color-negro); }
.marketing360-nodo-icono.violeta { background: var(--color-violeta); }
.marketing360-nodo-icono.negro { background: #2b2b2b; border: 2px solid rgba(255,255,255,0.25); }
.marketing360-nodo h4 { font-family: var(--fuente-subtitulo); font-size: 0.82rem; color: #fff; margin: 0; text-transform: none; }
.mini-flotante { position: absolute; width: 12px; height: 12px; border-radius: 50%; opacity: 0.4; animation: flotarMini 4s ease-in-out infinite; }
.mini-flotante.mf-1 { top: 4%; left: 8%; background: var(--color-rosa); }
.mini-flotante.mf-2 { top: 8%; right: 4%; background: var(--color-lima); animation-delay: 0.8s; }
.mini-flotante.mf-3 { bottom: 8%; left: 4%; background: var(--color-violeta); animation-delay: 1.6s; }
.mini-flotante.mf-4 { bottom: 4%; right: 8%; background: #fff; animation-delay: 2.4s; }
@keyframes flotarMini { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 480px) { .marketing360-diagrama { transform: scale(0.82); } }

.modelo-360-firma {
    display: inline-block; font-family: var(--fuente-firma); font-size: 1.3rem;
    color: var(--color-lima); transform: rotate(-3deg); margin-bottom: 0.5rem;
}

/* ---------- Post-its de las 4 disciplinas ---------- */
.modelo-360-postits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.75rem 0 0; max-width: 280px; }
@media (max-width: 860px) { .modelo-360-postits { margin-left: auto; margin-right: auto; } }
.postit {
    padding: 1.1rem 0.75rem; border-radius: 3px; font-family: var(--fuente-subtitulo); font-weight: 700;
    font-size: 0.9rem; text-align: center; box-shadow: 4px 5px 0 rgba(0,0,0,0.25);
    transition: transform 0.25s ease;
}
.postit:hover { transform: translateY(-4px) rotate(0deg) !important; }
.postit:nth-child(1) { background: var(--color-rosa); color: #fff; transform: rotate(-3deg); }
.postit:nth-child(2) { background: var(--color-lima); color: var(--color-negro); transform: rotate(2deg); }
.postit:nth-child(3) { background: var(--color-violeta); color: #fff; transform: rotate(-2deg); }
.postit:nth-child(4) { background: #fff; color: var(--color-negro); transform: rotate(3deg); }

/* ---------- "Cómo funciona" — flujo horizontal con flechas animadas ---------- */
.modelo-360-flujo-seccion { padding: 5rem 6% 6rem; background: var(--color-blanco); }
.modelo-360-flujo {
    display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
    max-width: 1200px; margin: 3rem auto 0;
}
@media (max-width: 820px) { .modelo-360-flujo { flex-direction: column; align-items: center; } }
.modelo-360-paso {
    flex: 1; min-width: 200px; text-align: center; padding: 2.75rem 1.5rem;
    border-radius: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.modelo-360-paso:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(18,18,18,0.16); }
.modelo-360-paso-numero { display: block; font-family: var(--fuente-titular); font-size: 2.4rem; opacity: 0.28; margin-bottom: 0.4rem; }
.modelo-360-paso h3 { font-family: var(--fuente-subtitulo); font-size: 1.15rem; margin: 0 0 0.5rem; text-transform: none; color: inherit; }
.modelo-360-paso p { font-size: 0.86rem; margin: 0; opacity: 0.85; }
.modelo-360-paso.rosa { background: var(--color-rosa); color: #fff; }
.modelo-360-paso.lima { background: var(--color-lima); color: var(--color-negro); }
.modelo-360-paso.violeta { background: var(--color-violeta); color: #fff; }
.modelo-360-paso.blanco { background: var(--color-blanco); color: var(--color-negro); border: 2px solid var(--color-mortero); }
.modelo-360-flecha {
    display: flex; align-items: center; justify-content: center;
    color: var(--color-violeta); font-size: 1.7rem; font-weight: 800; padding: 0 0.6rem;
    animation: moverFlecha 1.4s ease-in-out infinite;
}
@media (max-width: 820px) { .modelo-360-flecha { transform: rotate(90deg); margin: 0.25rem 0; } }
@keyframes moverFlecha { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 820px) {
    @keyframes moverFlecha { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(6px); } }
}

/* ---------- 4 servicios como botones/tarjetas con ícono ---------- */
.franja-servicios { background: var(--color-neutro); padding-bottom: 1rem; }
.servicios-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding: 4.5rem 6%; }
@media (max-width: 760px) { .servicios-botones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .servicios-botones { grid-template-columns: 1fr; } }

/* Variante fusionada con el flujo (flechas entre tarjetas) */
.servicios-botones-flujo {
    display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
    max-width: 1200px; margin: 3rem auto 0; padding: 0 6%; gap: 0.25rem;
}
.servicios-botones-flujo .servicio-boton { flex: 1; min-width: 190px; }
.servicios-flecha { display: flex; align-items: center; }
@media (max-width: 900px) {
    .servicios-botones-flujo { flex-direction: column; align-items: center; }
    .servicios-flecha { transform: rotate(90deg); margin: 0.15rem 0; }
}
.servicio-boton-numero { display: block; position: relative; z-index: 1; font-family: var(--fuente-titular); font-size: 1.5rem; opacity: 0.4; margin-bottom: 0.4rem; }

.servicio-boton {
    display: block; text-decoration: none; text-align: center;
    padding: 2.25rem 1.25rem; border-radius: 14px; color: #fff;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease, filter 0.3s ease;
    position: relative; overflow: hidden;
}
.servicio-boton:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(18,18,18,0.28); filter: brightness(1.08); }
.servicio-boton.rosa { background: var(--color-rosa); }
.servicio-boton.lima { background: var(--color-lima); color: var(--color-negro); }
.servicio-boton.violeta { background: var(--color-violeta); }
.servicio-boton.negro { background: var(--color-negro); }
.servicio-boton .icono-servicio { width: 46px; height: 46px; margin: 0 auto 1rem; position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.servicio-boton:hover .icono-servicio { transform: scale(1.15) rotate(-8deg); }
.servicio-boton .icono-servicio svg { width: 100%; height: 100%; }
.servicio-boton h3 { position: relative; z-index: 1; font-family: var(--fuente-subtitulo); font-size: 1.05rem; margin: 0 0 0.4rem; color: inherit; text-transform: none; }
.servicio-boton p { position: relative; z-index: 1; font-size: 0.82rem; margin: 0; opacity: 0.9; color: inherit; }

/* ---------- ¿Por qué elegirnos? ---------- */
.grid-valores { grid-template-columns: repeat(4, 1fr); margin: 0 6% 5rem; display: grid; gap: 1px; background: var(--color-mortero); border: 1px solid var(--color-mortero); }
@media (max-width: 820px) { .grid-valores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid-valores { grid-template-columns: 1fr; } }
.tarjeta-valor { background: var(--color-blanco); padding: 2rem 1.5rem; }
.tarjeta-valor h4 { font-family: var(--fuente-subtitulo); font-size: 1rem; margin: 0 0 0.5rem; }
.tarjeta-valor p { color: var(--color-texto-muted); font-size: 0.88rem; margin: 0; }

/* ---------- Franja de estadísticas grande ---------- */
.stats-grande { background: var(--color-negro); padding: 4rem 6%; }
.stats-grande-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
@media (max-width: 760px) { .stats-grande-grid { grid-template-columns: 1fr 1fr; } }
.stats-grande-item strong { display: block; font-family: var(--fuente-titular); font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--color-lima); }
.stats-grande-item span { color: var(--color-texto-claro); font-size: 0.85rem; }
.stats-grande-aviso {
    max-width: 1200px; margin: 1.5rem auto 0; text-align: center;
    color: rgba(255,255,255,0.35); font-size: 0.72rem; font-style: italic;
}

/* ---------- Historias de éxito — panel dividido, color propio (violeta) ---------- */
.testimonios-split-seccion {
    position: relative; overflow: hidden;
    background: var(--color-violeta); padding: 5rem 6%;
}
.testimonios-split-fondo-comillas {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    width: clamp(18rem, 34vw, 30rem); height: clamp(18rem, 34vw, 30rem);
    color: rgba(255,255,255,0.08); user-select: none; pointer-events: none; z-index: 0;
}
.testimonios-split-fondo-comillas svg { width: 100%; height: 100%; animation: girarChispa 30s linear infinite; }
@keyframes girarChispa { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.testimonios-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    max-width: 1200px; margin: 0 auto; position: relative; z-index: 1;
}
@media (max-width: 860px) { .testimonios-split { grid-template-columns: 1fr; text-align: center; } }
.testimonios-split-texto { position: relative; text-align: left; overflow: hidden; }
.testimonios-split-texto > * { position: relative; z-index: 1; }
@media (max-width: 860px) { .testimonios-split-texto { text-align: center; overflow: visible; } }
.testimonios-split-texto h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 1rem 0 1rem; text-transform: none; }
.testimonios-split-texto p { color: rgba(255,255,255,0.85); font-size: 1.02rem; max-width: 420px; margin: 0; }
@media (max-width: 860px) { .testimonios-split-texto p { margin: 0 auto; } }

.testimonios-split-tarjeta {
    position: relative; background: var(--color-blanco); border-radius: 16px;
    padding: 2.5rem 2.25rem; box-shadow: 0 24px 50px rgba(0,0,0,0.22); min-height: 230px;
}
.testimonios-split-comillas {
    position: absolute; top: 0.75rem; right: 1.5rem;
    font-family: var(--fuente-titular); font-size: 3.5rem; color: var(--color-mortero); line-height: 1;
}
.testimonio-slide-unico { position: relative; }
.testimonio-unico { display: none; }
.testimonio-unico.activo { display: block; animation: apareceTestimonio 0.5s ease; }
@keyframes apareceTestimonio { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.testimonio-unico p { position: relative; z-index: 1; color: var(--color-texto-cuerpo); font-size: 1.05rem; margin: 0 0 1.25rem; line-height: 1.55; }
.testimonio-unico strong { display: block; color: var(--color-negro); }
.testimonio-unico .empresa { color: var(--color-texto-muted); font-size: 0.85rem; }
.testimonios-estrellas { color: #f5b400; letter-spacing: 2px; margin-top: 0.5rem; }
.testimonios-split-puntos { display: flex; gap: 8px; margin-top: 1.5rem; }
.testimonios-split-puntos button {
    width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--color-mortero); transition: background 0.2s ease, transform 0.2s ease;
}
.testimonios-split-puntos button.activo { background: var(--color-violeta); transform: scale(1.3); }
.testimonio-ejemplo-aviso {
    display: inline-block; background: #fff3c4; color: #8a6d00; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 0.85rem;
}

/* ---------- Páginas de servicio: precios (Básico/Premium/Platino/A medida) ---------- */
.servicio-precios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; max-width: 1200px; margin: 3rem auto 5rem; padding: 0 6%; }
@media (max-width: 1000px) { .servicio-precios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .servicio-precios { grid-template-columns: 1fr; } }
.precio-card {
    background: var(--color-blanco); border: 2px solid var(--color-mortero); border-radius: 18px;
    padding: 2rem 1.5rem; display: flex; flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.precio-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18,18,18,0.12); }
.precio-card.destacado { border-color: var(--color-servicio, var(--color-violeta)); position: relative; }
.precio-card.destacado::before {
    content: 'Más elegido'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--color-servicio, var(--color-violeta)); color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.precio-nombre {
    display: inline-block; font-family: var(--fuente-subtitulo); font-weight: 700; text-transform: uppercase;
    font-size: 0.72rem; letter-spacing: 0.5px; margin-bottom: 1rem; color: #fff;
    background: var(--color-servicio, var(--color-violeta)); padding: 5px 14px; border-radius: 999px;
}
.precio-regular { display: block; color: var(--color-texto-muted); font-size: 0.85rem; text-decoration: line-through; margin-bottom: 0.15rem; }
.precio-valor { font-family: var(--fuente-titular); font-weight: 400; font-size: 2.4rem; margin-bottom: 0.35rem; line-height: 1; color: var(--color-negro); }
.precio-valor .precio-moneda { font-size: 1.1rem; vertical-align: top; margin-right: 2px; }
.precio-valor .precio-centavos { font-size: 1.1rem; }
.precio-periodo { display: block; color: var(--color-texto-muted); font-size: 0.8rem; margin-bottom: 1.25rem; }
.precio-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.precio-lista li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.7rem; font-size: 0.87rem; color: var(--color-texto-cuerpo); }
.precio-lista li::before { content: '✓'; color: var(--color-servicio, var(--color-violeta)); font-weight: 800; flex-shrink: 0; }
.precio-lista li strong { color: var(--color-negro); }
.precio-card .btn { width: 100%; text-align: center; }
.precio-nota { text-align: center; color: var(--color-texto-muted); font-size: 0.8rem; margin-top: -3.5rem; margin-bottom: 3.5rem; }

/* ---------- Servicio: sección de "dolor" (esto te sonará) ---------- */
.servicio-dolor { padding: 4.5rem 6%; max-width: 1200px; margin: 0 auto; }
.servicio-dolor-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .servicio-dolor-grid { grid-template-columns: 1fr; } }
.servicio-dolor-texto span.pre-titulo { display: block; font-weight: 700; font-size: 0.95rem; color: var(--color-texto-muted); margin-bottom: 0.4rem; }
.servicio-dolor-texto h2 { font-family: var(--fuente-titular); text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--color-servicio, var(--color-violeta)); margin: 0 0 1.5rem; }
.servicio-dolor-lista { display: flex; flex-direction: column; gap: 0.9rem; }
.dolor-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.dolor-check {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-lima);
    color: var(--color-negro); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
    margin-top: 2px;
}
.dolor-card { flex: 1; border-radius: 12px; overflow: hidden; }
.dolor-card-titulo { background: var(--color-servicio, var(--color-violeta)); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 8px 14px; font-style: italic; }
.dolor-card-cita { background: var(--color-neutro); color: var(--color-texto-cuerpo); font-size: 0.86rem; padding: 10px 14px; font-style: italic; }
@media (max-width: 860px) { .dolor-item:nth-child(2) { margin-left: 1.5rem; } .dolor-item:nth-child(3) { margin-left: 3rem; } .dolor-item:nth-child(4) { margin-left: 1.5rem; } }

/* ---------- Servicio: lo que nos hace diferentes ---------- */
.servicio-diferentes { padding: 4.5rem 6%; background: var(--color-negro); text-align: center; }
.servicio-diferentes .pill-seccion { background: var(--color-lima); color: var(--color-negro); }
.servicio-diferentes h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0.75rem 0 2.5rem; text-transform: none; }
.diferentes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 900px; margin: 0 auto; text-align: left; }
@media (max-width: 700px) { .diferentes-grid { grid-template-columns: 1fr; } }
.diferente-item { display: flex; gap: 0.85rem; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 1.1rem 1.25rem; }
.diferente-check {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-servicio, var(--color-violeta));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-top: 2px;
}
.diferente-item strong { display: block; color: #fff; font-size: 0.92rem; margin-bottom: 0.2rem; }
.diferente-item span { color: var(--color-texto-claro); font-size: 0.84rem; }

/* ---------- Servicio: carrusel embebido de proyectos ---------- */
.servicio-proyectos { padding: 4.5rem 0; background: var(--color-servicio, var(--color-violeta)); text-align: center; overflow: hidden; }
.servicio-proyectos h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 2.5rem; text-transform: none; }
.servicio-proyectos-carrusel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 0 6% 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.servicio-proyectos-carrusel::-webkit-scrollbar { height: 6px; }
.servicio-proyectos-carrusel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 999px; }
.servicio-proyecto-mini {
    flex: 0 0 260px; scroll-snap-align: start; background: var(--color-blanco); border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 30px rgba(0,0,0,0.2); text-align: left; text-decoration: none; display: block;
    transition: transform 0.25s ease;
}
.servicio-proyecto-mini:hover { transform: translateY(-4px); }
.servicio-proyecto-mini .imagen { aspect-ratio: 4/3; background: var(--color-neutro); position: relative; overflow: hidden; }
.servicio-proyecto-mini .imagen img { width: 100%; height: 100%; object-fit: cover; }
.servicio-proyecto-mini .info { padding: 1rem 1.1rem; }
.servicio-proyecto-mini .info strong { display: block; font-size: 0.92rem; color: var(--color-negro); margin-bottom: 0.2rem; }
.servicio-proyecto-mini .info span { color: var(--color-texto-muted); font-size: 0.78rem; }
.servicio-proyectos .btn { margin-top: 2rem; }

/* ---------- Servicio: regalo de sesión de fotos ---------- */
.servicio-regalo {
    display: flex; align-items: center; gap: 1.5rem; max-width: 1000px; margin: 0 auto 4rem; padding: 1.75rem 6%;
    background: var(--color-neutro); border-radius: 18px; flex-wrap: wrap; justify-content: center; text-align: center;
}
.servicio-regalo-icono {
    width: 56px; height: 56px; border-radius: 50%; background: var(--color-lima); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.servicio-regalo-icono svg { width: 28px; height: 28px; color: var(--color-negro); }
.servicio-regalo-texto strong { display: block; font-family: var(--fuente-subtitulo); font-size: 1.02rem; margin-bottom: 0.15rem; }
.servicio-regalo-texto span { color: var(--color-texto-muted); font-size: 0.85rem; }

/* ---------- Página de servicio: hero + portafolio ---------- */
.servicio-hero { position: relative; overflow: hidden; text-align: center; padding: 5rem 6% 3.5rem; }
.servicio-hero-fondo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-size: clamp(9rem, 20vw, 16rem); color: rgba(255,255,255,0.12); line-height: 1;
    user-select: none; pointer-events: none;
}
.servicio-hero h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0.75rem 0 1rem; }
.servicio-hero > p { position: relative; z-index: 1; color: rgba(255,255,255,0.9); max-width: 480px; margin: 0 auto; font-size: 1.05rem; }
.servicio-hero.oscuro h1 { color: var(--color-negro); }
.servicio-hero.oscuro > p { color: rgba(18,18,18,0.75); }
.servicio-hero.oscuro .servicio-hero-fondo { color: rgba(18,18,18,0.1); }
.servicio-hero .btn { position: relative; z-index: 1; margin-top: 1.5rem; }
.servicio-portafolio-cta { text-align: center; padding: 3rem 6% 4rem; background: var(--color-neutro); }
.servicio-portafolio-cta h3 { font-family: var(--fuente-titular); text-transform: uppercase; font-size: 1.4rem; margin: 0 0 0.75rem; }
.servicio-portafolio-cta p { color: var(--color-texto-muted); max-width: 460px; margin: 0 auto 1.5rem; }


.contacto-hero-nuevo { position: relative; overflow: hidden; text-align: center; padding: 5rem 6% 3.5rem; background: var(--color-negro); }
.contacto-hero-fondo-comillas {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-family: var(--fuente-titular); font-size: clamp(10rem, 22vw, 18rem);
    color: rgba(255,255,255,0.04); line-height: 1; user-select: none; pointer-events: none;
}
.contacto-hero-nuevo h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0.75rem 0 1rem; }
.contacto-hero-nuevo h1 .resaltado-lima { color: var(--color-lima); }
.contacto-hero-nuevo > p { position: relative; z-index: 1; color: var(--color-texto-claro); max-width: 480px; margin: 0 auto; font-size: 1.05rem; }

.contacto-split-nuevo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; max-width: 1200px; margin: 0 auto; padding: 4rem 6% 5rem; }
@media (max-width: 900px) { .contacto-split-nuevo { grid-template-columns: 1fr; } }
.razon-card { background: var(--color-neutro); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.1rem; position: relative; overflow: hidden; }
.razon-numero { font-family: var(--fuente-titular); font-size: 1.8rem; color: var(--color-violeta); opacity: 0.5; margin-bottom: 0.4rem; }
.razon-card h4 { font-family: var(--fuente-subtitulo); font-size: 1.02rem; margin: 0 0 0.3rem; }
.razon-card p { color: var(--color-texto-muted); font-size: 0.88rem; margin: 0; }

.contacto-form-card-nuevo {
    background: var(--color-blanco); border-radius: 20px; padding: 2.5rem;
    box-shadow: 0 24px 50px rgba(18,18,18,0.12); border: 1px solid var(--color-mortero);
}

/* ---------- CTA final — franja oscura con accesos rápidos (distinta a cta-banner) ---------- */
.cta-final-nueva { position: relative; overflow: hidden; text-align: center; background: var(--color-negro); padding: 5rem 6%; }
.cta-final-blob {
    position: absolute; width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122,60,245,0.35) 0%, rgba(122,60,245,0) 70%);
    top: -180px; right: -140px; pointer-events: none;
}
.cta-final-nueva h2 { position: relative; z-index: 1; color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.75rem 0 1rem; text-transform: none; }
.cta-final-nueva h2 .resaltado-lima { color: var(--color-lima); }
.cta-final-nueva > p { position: relative; z-index: 1; color: var(--color-texto-claro); max-width: 480px; margin: 0 auto 2rem; font-size: 1.05rem; }
.cta-final-accesos { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin-bottom: 2rem; }
.cta-final-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.15); color: #fff; text-decoration: none;
    padding: 9px 18px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cta-final-chip:hover { background: rgba(255,255,255,0.16); border-color: var(--color-violeta); transform: translateY(-2px); }
.cta-final-chip .punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cta-final-chip .punto.rosa { background: var(--color-rosa); }
.cta-final-chip .punto.lima { background: var(--color-lima); }
.cta-final-chip .punto.violeta { background: var(--color-violeta); }
.cta-final-chip .punto.blanco { background: #fff; }
.cta-final-boton { position: relative; z-index: 1; }

/* ---------- Página de contacto (split) — clases anteriores, sin uso pero conservadas ---------- */
.contacto-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; padding: 4rem 6% 5rem; }
@media (max-width: 900px) { .contacto-split { grid-template-columns: 1fr; } }
.contacto-razones { list-style: none; padding: 0; margin: 2rem 0; }
.contacto-razones li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.1rem; font-size: 0.95rem; color: var(--color-texto-cuerpo); }
.contacto-razones .barra-acento { margin: 6px 0 0; flex-shrink: 0; }
.contacto-form-card { background: var(--color-blanco); border: 1px solid var(--color-mortero); border-radius: 14px; padding: 2.25rem; box-shadow: 0 10px 34px rgba(18,18,18,0.08); }

/* ---------- Testimonios: estado vacío más interesante ---------- */
.testimonios-vacio {
    position: relative;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 5rem;
    padding: 3.5rem 2.5rem;
    background: var(--color-negro);
    border-radius: 16px;
    color: #fff;
    overflow: hidden;
}
.testimonios-vacio::before {
    content: '“';
    position: absolute;
    top: -30px; left: 20px;
    font-family: var(--fuente-titular);
    font-size: 9rem;
    color: rgba(255,255,255,0.06);
    line-height: 1;
}
.testimonios-vacio .pill-lima-vacio {
    position: relative; z-index: 1;
    display: inline-block; background: var(--color-lima); color: var(--color-negro);
    font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 999px; margin-bottom: 1.25rem;
}
.testimonios-vacio p { position: relative; z-index: 1; color: var(--color-texto-claro); font-size: 1.05rem; max-width: 440px; margin: 0 auto 1.75rem; }
.testimonios-tarjeta {
    background: var(--color-blanco); border: 1px solid var(--color-mortero); border-radius: 12px;
    padding: 1.75rem; position: relative;
}
.testimonios-tarjeta::before {
    content: '“'; position: absolute; top: 0.5rem; left: 1.1rem;
    font-family: var(--fuente-titular); font-size: 2.5rem; color: var(--color-mortero);
}
.testimonios-tarjeta p { position: relative; z-index: 1; margin: 1.5rem 0 1.25rem; font-size: 0.9rem; }
.testimonios-tarjeta strong { display: block; }
.testimonios-tarjeta .empresa { color: var(--color-texto-muted); font-size: 0.85rem; }

/* ---------- Formularios ---------- */
.form-auth, .form-lead { display: flex; flex-direction: column; gap: 0.2rem; }
.form-auth label, .form-lead label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-texto-cuerpo); margin-top: 1.1rem; }
.form-auth input, .form-auth select, .form-auth textarea,
.form-lead input, .form-lead select, .form-lead textarea {
    background: transparent; border: none; border-bottom: 1.5px solid var(--color-negro);
    color: var(--color-texto); padding: 10px 2px; border-radius: 0; font-family: inherit; font-size: 14px;
}
.form-auth input::placeholder, .form-lead input::placeholder { color: var(--color-texto-claro); }
.form-auth input:focus, .form-lead input:focus,
.form-auth select:focus, .form-lead select:focus,
.form-auth textarea:focus, .form-lead textarea:focus { outline: none; border-bottom-color: var(--color-violeta); }
.form-auth button, .form-lead button { margin-top: 1.5rem; align-self: flex-start; }
.form-mensaje { margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600; }
.form-mensaje.exito { color: #1a8a52; }
.form-mensaje.error { color: #d1264f; }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; background: var(--color-negro); }
.auth-card { background: var(--color-blanco); border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 420px; }
.auth-card h2 { font-family: var(--fuente-subtitulo); }
.auth-alt { text-align: center; margin-top: 1.5rem; color: var(--color-texto-muted); font-size: 0.9rem; }

.alerta { padding: 0.85rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600; }
.alerta-error { background: rgba(255, 63, 160, 0.1); color: #b31160; border: 1.5px solid var(--color-rosa); }
.alerta-exito { background: rgba(198, 255, 61, 0.15); color: #4c6b00; border: 1.5px solid var(--color-lima); }

.dashboard-layout { display: flex; min-height: 100vh; }
.dashboard-sidebar { width: 240px; background: var(--color-negro); padding: 1.5rem 1rem; }
.dashboard-sidebar a { display: block; color: var(--color-texto-claro); padding: 0.65rem 0.9rem; border-radius: 6px; margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.dashboard-sidebar a.activo, .dashboard-sidebar a:hover { background: var(--color-violeta); color: #fff; }
.dashboard-main { flex: 1; padding: 2.5rem; background: var(--color-fondo-base); }
.dashboard-main h1 { text-transform: none; font-family: var(--fuente-subtitulo); font-size: 1.7rem; }
.tabla-datos { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--color-blanco); }
.tabla-datos th, .tabla-datos td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-mortero); font-size: 0.88rem; }
.tabla-datos th { color: var(--color-texto-muted); font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.5px; }
.badge { padding: 0.22rem 0.6rem; border-radius: var(--radio-pill); font-size: 0.68rem; font-weight: 700; }
.badge-pendiente_pago { background: #fff3c4; color: #8a6d00; }
.badge-pagado, .badge-completado, .badge-entregado { background: rgba(198,255,61,0.3); color: #4c6b00; }
.badge-en_proceso, .badge-desarrollo, .badge-diseno { background: rgba(122,60,245,0.12); color: var(--color-violeta); }
.badge-cancelado { background: rgba(255,63,160,0.14); color: #b31160; }

/* ---------- Página Portafolio: hero, filtros, tarjetas, modal ---------- */
.portafolio-hero { position: relative; overflow: hidden; text-align: center; padding: 5rem 6% 3.5rem; background: var(--color-negro); }
.portafolio-hero-fondo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-size: clamp(10rem, 22vw, 18rem); color: rgba(255,255,255,0.04); line-height: 1;
    user-select: none; pointer-events: none;
}
.portafolio-hero h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0.75rem 0 1rem; }
.portafolio-hero h1 .resaltado-lima { color: var(--color-lima); }
.portafolio-hero > p { position: relative; z-index: 1; color: var(--color-texto-claro); max-width: 480px; margin: 0 auto; font-size: 1.05rem; }

.portafolio-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; padding: 2.5rem 6% 1rem; max-width: 1200px; margin: 0 auto; }
.filtro-pill {
    background: var(--color-neutro); border: 1.5px solid var(--color-mortero); color: var(--color-texto-cuerpo);
    font-weight: 600; font-size: 0.85rem; padding: 8px 20px; border-radius: 999px; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filtro-pill:hover { border-color: var(--color-violeta); }
.filtro-pill.activo { background: var(--color-violeta); color: #fff; border-color: var(--color-violeta); }

.portafolio-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    max-width: 1200px; margin: 0 auto; padding: 2rem 6% 4rem;
}
@media (max-width: 900px) { .portafolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .portafolio-grid { grid-template-columns: 1fr; } }
.portafolio-card {
    background: var(--color-blanco); border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(18,18,18,0.06); display: flex; flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portafolio-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(18,18,18,0.14); }
.portafolio-card-imagen { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-neutro); }
.portafolio-card-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.portafolio-card:hover .portafolio-card-imagen img { transform: scale(1.06); }
.portafolio-card-categoria {
    position: absolute; top: 0.75rem; left: 0.75rem; background: var(--color-lima); color: var(--color-negro);
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
}
.portafolio-card-contenido { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.portafolio-card-contenido h4 { font-family: var(--fuente-titular); text-transform: uppercase; font-size: 1.15rem; margin: 0.5rem 0 0.6rem; line-height: 1.1; }
.portafolio-card-contenido p { color: var(--color-texto-muted); font-size: 0.88rem; flex: 1; margin: 0 0 1.25rem; }

/* Modal de galería */
.portafolio-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(18,18,18,0.82);
    z-index: 1000; align-items: center; justify-content: center; padding: 2rem;
}
.portafolio-modal-overlay.activo { display: flex; }
.portafolio-modal {
    background: var(--color-blanco); border-radius: 18px; max-width: 900px; width: 100%;
    max-height: 90vh; overflow-y: auto; display: grid; grid-template-columns: 1.2fr 1fr;
    position: relative;
}
@media (max-width: 760px) { .portafolio-modal { grid-template-columns: 1fr; } }
.portafolio-modal-cerrar {
    position: absolute; top: 1rem; right: 1rem; z-index: 5; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(18,18,18,0.6); color: #fff; border: none; cursor: pointer; font-size: 1rem;
}
.portafolio-modal-galeria { position: relative; background: var(--color-negro); aspect-ratio: 4/3; }
@media (max-width: 760px) { .portafolio-modal-galeria { aspect-ratio: 16/10; } }
.portafolio-modal-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portafolio-modal-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 1.1rem; cursor: pointer;
}
.portafolio-modal-flecha.prev { left: 12px; }
.portafolio-modal-flecha.next { right: 12px; }
.portafolio-modal-contador {
    position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.5); color: #fff;
    font-size: 0.75rem; padding: 3px 10px; border-radius: 999px;
}
.portafolio-modal-info { padding: 2rem; }
.portafolio-modal-info h3 { font-family: var(--fuente-titular); text-transform: uppercase; font-size: 1.4rem; margin: 0 0 0.75rem; }
.portafolio-modal-info p { color: var(--color-texto-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 1.25rem; }
.portafolio-modal-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-mortero); }
.portafolio-modal-datos strong { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-texto-muted); margin-bottom: 0.2rem; }
.portafolio-modal-datos span { font-weight: 600; color: var(--color-negro); }

/* ---------- Proyectos destacados (home) — tarjetas creativas con overlay ---------- */
.proyectos-grid-creativo {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    padding: 0 6%; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 900px) { .proyectos-grid-creativo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .proyectos-grid-creativo { grid-template-columns: 1fr; } }
.proyecto-card-creativo {
    position: relative; display: block; text-decoration: none; border-radius: 18px; overflow: hidden;
    aspect-ratio: 4/5; background: var(--color-neutro);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.proyecto-card-creativo:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 40px rgba(18,18,18,0.24); }
.proyecto-card-creativo img, .proyecto-card-creativo .sin-imagen {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    display: flex; align-items: center; justify-content: center; color: var(--color-texto-muted);
    transition: transform 0.5s ease;
}
.proyecto-card-creativo:hover img { transform: scale(1.08); }
.proyecto-card-creativo::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18,18,18,0) 35%, rgba(18,18,18,0.92) 100%);
    z-index: 1;
}
.proyecto-card-creativo .contenido { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: #fff; z-index: 2; }
.cliente-tag-creativo {
    display: inline-block; background: var(--color-violeta); color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 0.6rem;
}
.proyecto-card-creativo h4 { font-family: var(--fuente-titular); text-transform: uppercase; font-size: 1.35rem; margin: 0 0 0.4rem; line-height: 1.05; }
.proyecto-card-creativo p {
    font-size: 0.85rem; color: rgba(255,255,255,0.88); max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease; margin: 0;
}
.proyecto-card-creativo:hover p { max-height: 110px; opacity: 1; margin: 0 0 0.9rem; }
.proyecto-card-creativo .btn {
    opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.proyecto-card-creativo:hover .btn { opacity: 1; transform: translateY(0); }

.proyectos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0 6%; max-width: 1200px; margin: 0 auto; background: transparent; border: none; }
@media (max-width: 900px) { .proyectos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .proyectos-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .proyectos-grid { grid-template-columns: 1fr; } }
.proyecto-card { background: var(--color-blanco); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(18,18,18,0.06); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.proyecto-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(18,18,18,0.14); z-index: 2; position: relative; }
.proyecto-card .imagen-proyecto-wrap { position: relative; overflow: hidden; aspect-ratio: 16/11; background: var(--color-neutro); }
.proyecto-card .imagen-proyecto-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.proyecto-card:hover .imagen-proyecto-wrap img { transform: scale(1.06); }
.proyecto-card .imagen-proyecto-wrap .sin-imagen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-texto-muted); font-size: 0.85rem; background: var(--color-neutro); }
.proyecto-card .contenido-proyecto { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.proyecto-card .cliente-tag {
    align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: var(--color-negro); text-transform: uppercase; margin-bottom: 1rem;
    background: var(--color-lima); padding: 5px 14px; border-radius: 999px;
}
.proyecto-card:nth-child(2n) .cliente-tag { background: var(--color-rosa); color: #fff; }
.proyecto-card h4 {
    font-family: var(--fuente-titular); text-transform: uppercase; letter-spacing: -0.01em;
    margin: 0 0 0.6rem; font-size: 1.35rem; line-height: 1.1;
}
.proyecto-card p { color: var(--color-texto-muted); font-size: 0.88rem; flex: 1; margin: 0 0 1.25rem; }

/* ---------- Método: pasos con línea conectora ---------- */
.metodo-timeline { display: flex; justify-content: center; gap: 4rem; padding: 3rem 5% 4rem; position: relative; flex-wrap: wrap; }
.metodo-timeline::before { content: ''; position: absolute; top: 30px; left: 15%; right: 15%; height: 2px; background: var(--color-mortero); z-index: 0; }
.metodo-paso { position: relative; z-index: 1; text-align: center; max-width: 260px; }
.metodo-circulo { width: 60px; height: 60px; border-radius: 50%; background: var(--color-violeta); color: #fff; font-family: var(--fuente-titular); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.metodo-paso:nth-child(2) .metodo-circulo { background: var(--color-rosa); }
.metodo-paso:nth-child(3) .metodo-circulo { background: var(--color-negro); }
.metodo-paso h3 { font-family: var(--fuente-subtitulo); margin: 0 0 0.5rem; }
.metodo-paso p { color: var(--color-texto-muted); font-size: 0.9rem; }
@media (max-width: 700px) { .metodo-timeline::before { display: none; } }

/* ---------- Método: hero + 2 caminos (rediseño) ---------- */
.metodo-hero-nuevo { position: relative; overflow: hidden; text-align: center; padding: 5rem 6% 3rem; background: var(--color-negro); }
.metodo-hero-nuevo h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0.75rem 0 1rem; }
.metodo-hero-nuevo h1 .resaltado-lima { color: var(--color-lima); }
.metodo-hero-nuevo > p { position: relative; z-index: 1; color: var(--color-texto-claro); max-width: 480px; margin: 0 auto; font-size: 1.05rem; }

.metodo-caminos-nuevo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 1000px; margin: -2.5rem auto 5rem; padding: 0 6%; position: relative; z-index: 2; }
@media (max-width: 760px) { .metodo-caminos-nuevo { grid-template-columns: 1fr; margin-top: -1.5rem; } }
.metodo-camino-nuevo {
    display: block; text-decoration: none; text-align: center; color: #fff;
    padding: 2.75rem 2rem; border-radius: 18px;
    box-shadow: 0 20px 40px rgba(18,18,18,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metodo-camino-nuevo:hover { transform: translateY(-8px); box-shadow: 0 28px 50px rgba(18,18,18,0.28); }
.metodo-camino-nuevo.rosa { background: var(--color-rosa); }
.metodo-camino-nuevo.violeta { background: var(--color-violeta); }
.metodo-camino-icono-nuevo {
    width: 68px; height: 68px; margin: 0 auto 1.25rem; border-radius: 50%;
    background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease;
}
.metodo-camino-nuevo:hover .metodo-camino-icono-nuevo { transform: scale(1.1) rotate(-6deg); }
.metodo-camino-icono-nuevo svg { width: 30px; height: 30px; color: #fff; }
.metodo-camino-nuevo h3 { font-family: var(--fuente-subtitulo); font-size: 1.35rem; margin: 0 0 0.6rem; color: #fff; text-transform: none; }
.metodo-camino-nuevo p { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin: 0 0 1.5rem; }
.metodo-camino-cta { font-weight: 700; font-size: 0.9rem; }
.metodo-camino-cta .icono-flecha { display: inline-block; transition: transform 0.2s ease; margin-left: 4px; }
.metodo-camino-nuevo:hover .icono-flecha { transform: translateX(4px); }

/* ---------- Método: pregunta inicial (2 caminos) — versión anterior, sin uso ---------- */
.metodo-pregunta { text-align: center; padding: 4.5rem 5% 3.5rem; position: relative; overflow: hidden; }
.metodo-pregunta h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.6rem; }
.metodo-pregunta > p { color: var(--color-texto-muted); font-size: 1.05rem; margin-bottom: 3rem; }
.metodo-caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 900px; margin: 0 auto; background: var(--color-mortero); border: 1px solid var(--color-mortero); }
@media (max-width: 700px) { .metodo-caminos { grid-template-columns: 1fr; } }
.metodo-camino { background: var(--color-blanco); padding: 2.5rem 2rem; text-align: center; transition: background 0.25s ease, transform 0.25s ease; }
.metodo-camino:hover { transform: translateY(-4px); }
.metodo-camino.rosa:hover { background: var(--color-rosa); }
.metodo-camino.rosa:hover h3, .metodo-camino.rosa:hover p, .metodo-camino.rosa:hover .metodo-camino-icono { color: #fff; }
.metodo-camino.violeta:hover { background: var(--color-violeta); }
.metodo-camino.violeta:hover h3, .metodo-camino.violeta:hover p, .metodo-camino.violeta:hover .metodo-camino-icono { color: #fff; }
.metodo-camino-icono { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--color-neutro); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; transition: background 0.25s ease; }
.metodo-camino:hover .metodo-camino-icono { background: rgba(255,255,255,0.2); }
.metodo-camino h3 { font-family: var(--fuente-subtitulo); font-size: 1.3rem; margin: 0 0 0.6rem; transition: color 0.25s ease; }
.metodo-camino p { color: var(--color-texto-muted); font-size: 0.92rem; margin: 0 0 1.5rem; transition: color 0.25s ease; }
.metodo-camino a.btn { pointer-events: none; }

/* ---------- Método: 3 pasos — negro + número tipográfico gigante que sobresale ---------- */
.metodo-pasos-tipo { display: flex; justify-content: center; gap: 1.5rem; max-width: 1100px; margin: 3rem auto 5rem; padding: 0 6%; flex-wrap: wrap; }
@media (max-width: 820px) { .metodo-pasos-tipo { flex-direction: column; align-items: center; } }
.metodo-paso-tipo {
    flex: 1; min-width: 220px; max-width: 320px; position: relative; padding-top: 2.5rem;
}
.metodo-paso-tipo-numero {
    position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%);
    font-family: var(--fuente-titular); font-size: 6rem; line-height: 1; z-index: 0;
}
.metodo-paso-tipo-numero.acento-rosa { color: rgba(255,63,160,0.35); }
.metodo-paso-tipo-numero.acento-lima { color: rgba(198,255,61,0.35); }
.metodo-paso-tipo-numero.acento-violeta { color: rgba(122,60,245,0.35); }
.metodo-paso-tipo-contenido {
    position: relative; z-index: 1; background: var(--color-negro); color: #fff; border-radius: 16px;
    padding: 2.5rem 1.75rem 2rem; box-shadow: 6px 8px 0 rgba(18,18,18,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metodo-paso-tipo:hover .metodo-paso-tipo-contenido { transform: translateY(-6px); box-shadow: 8px 12px 0 rgba(18,18,18,0.2); }
.metodo-paso-tipo-icono { width: 42px; height: 42px; margin-bottom: 1rem; }
.metodo-paso-tipo-icono svg { width: 100%; height: 100%; }
.metodo-paso-tipo-icono.acento-rosa { color: var(--color-rosa); }
.metodo-paso-tipo-icono.acento-lima { color: var(--color-lima); }
.metodo-paso-tipo-icono.acento-violeta { color: var(--color-violeta); }
.metodo-paso-tipo-contenido h3 { font-family: var(--fuente-subtitulo); font-weight: 800; font-size: 1.35rem; margin: 0 0 0.6rem; text-transform: none; color: #fff; }
.metodo-paso-tipo-contenido p { font-size: 0.88rem; margin: 0; color: var(--color-texto-claro); }

/* ---------- CTA final ---------- */
.cta-banner { margin: 3rem 0 0; background: var(--color-neutro); border-radius: 0; padding: 3.5rem 6%; text-align: center; }
.cta-banner h2 { color: var(--color-negro); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.75rem; text-transform: none; }
.cta-banner p { color: var(--color-texto-muted); margin-bottom: 1.75rem; }
.cta-banner .btn { margin: 0 0.4rem; }
.cta-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; text-align: left; max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .cta-dual { grid-template-columns: 1fr; } }
.cta-dual-card {
    display: block; background: var(--color-blanco); border: 2px solid var(--color-mortero);
    border-radius: 14px; padding: 1.75rem; color: var(--color-negro);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cta-dual-card:hover { border-color: var(--color-violeta); background: #F7F3FF; transform: translateY(-4px); }
.cta-dual-card h4 { font-family: var(--fuente-subtitulo); margin: 0 0 0.5rem; font-size: 1rem; color: var(--color-negro); }
.cta-dual-card p { color: var(--color-texto-muted); font-size: 0.85rem; margin: 0 0 1.25rem; }
.cta-dual-card .btn { pointer-events: none; }

/* ---------- Footer ---------- */
/* ---------- ¿Por qué elegirnos? — 3 tarjetas, la del medio resaltada ---------- */
.pill-seccion {
    display: inline-block; background: var(--color-negro); color: #fff;
    font-weight: 700; font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
    padding: 10px 26px; border-radius: 999px; margin-bottom: 1.5rem;
}
.porque-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;
    max-width: 1200px; margin: 3rem auto 6rem; padding: 0 6%; align-items: stretch;
}
@media (max-width: 820px) { .porque-grid { grid-template-columns: 1fr; } }
.porque-card {
    background: var(--color-neutro); border-radius: 24px; padding: 3.25rem 2.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.porque-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(18,18,18,0.14); }
.porque-card.destacada:hover { transform: scale(1.05) translateY(-8px); }
.porque-card.destacada {
    background: linear-gradient(155deg, var(--color-violeta) 0%, var(--color-violeta-hover) 100%);
    box-shadow: 0 26px 54px rgba(122,60,245,0.32);
    transform: scale(1.06);
}
@media (max-width: 820px) { .porque-card.destacada { transform: none; } }
.porque-icono {
    width: 92px; height: 92px; margin: 0 auto 2rem;
    background: var(--color-blanco); border: 2px solid var(--color-violeta);
    border-radius: 20px; transform: rotate(45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 0 rgba(122,60,245,0.15);
    transition: transform 0.35s ease;
}
.porque-card.destacada .porque-icono { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.55); box-shadow: none; }
.porque-icono svg { width: 38px; height: 38px; transform: rotate(-45deg); color: var(--color-violeta); transition: transform 0.35s ease; }
.porque-card.destacada .porque-icono svg { color: #fff; }
.porque-card:hover .porque-icono { transform: rotate(135deg) scale(1.12); }
.porque-card:hover .porque-icono svg { transform: rotate(-135deg); }
.porque-card h4 { font-family: var(--fuente-subtitulo); font-size: 1.4rem; text-align: center; margin: 0 0 1rem; color: var(--color-negro); }
.porque-card.destacada h4 { color: #fff; }
.porque-card p { color: var(--color-texto-muted); text-align: center; font-size: 1.02rem; margin: 0; line-height: 1.55; }
.porque-card.destacada p { color: rgba(255,255,255,0.9); }

.footer-diur { background: var(--color-negro); color: var(--color-texto-footer); padding: 3.5rem 6% 0; }
.footer-columnas { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 760px) { .footer-columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-columnas { grid-template-columns: 1fr; } }
.footer-col h4 { color: #fff; font-family: var(--fuente-subtitulo); font-size: 0.95rem; margin: 0 0 1rem; }
.footer-col a { display: block; color: var(--color-texto-footer); font-size: 0.85rem; margin-bottom: 0.65rem; }
.footer-col a:hover { color: var(--color-lima); }
.footer-marca p { color: var(--color-texto-footer); font-size: 0.85rem; }
.footer-redes { display: flex; gap: 0.9rem; }
.footer-redes a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: background 0.2s ease, transform 0.2s ease; }
.footer-redes a:hover { background: var(--color-violeta); color: #fff; transform: translateY(-2px); }
.footer-barra-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.78rem; color: var(--color-texto-footer); }

.whatsapp-flotante {
    position: fixed; bottom: 24px; right: 24px; z-index: 200;
    display: flex; align-items: center; gap: 0; height: 56px; padding: 0 18px 0 0;
    background: #25D366; border-radius: 999px; box-shadow: 0 10px 28px rgba(37,211,102,0.45);
    text-decoration: none; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.whatsapp-flotante svg { width: 56px; height: 56px; padding: 15px; box-sizing: border-box; flex-shrink: 0; position: relative; z-index: 2; }
.whatsapp-texto {
    color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap;
    max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.3s ease, opacity 0.25s ease;
}
.whatsapp-flotante:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(37,211,102,0.55); }
.whatsapp-flotante:hover .whatsapp-texto { max-width: 140px; opacity: 1; margin-left: 2px; }
.whatsapp-anillo {
    position: absolute; inset: 0; border-radius: 999px; background: #25D366;
    animation: pulsoWhatsapp 2.2s ease-out infinite; z-index: 1;
}
@keyframes pulsoWhatsapp {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.35); opacity: 0; }
}
@media (max-width: 600px) { .whatsapp-texto { display: none; } .whatsapp-flotante { padding: 0; } }

.catalogo-vacio { grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem; background: var(--color-neutro); color: var(--color-texto-muted); }
.catalogo-vacio a { color: var(--color-violeta); font-weight: 700; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-grupo > * { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease; }
.reveal-grupo.visible > * { opacity: 1; transform: translateY(0); }
.reveal-grupo.visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-grupo.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-grupo.visible > *:nth-child(3) { transition-delay: 0.13s; }
.reveal-grupo.visible > *:nth-child(4) { transition-delay: 0.18s; }

/* ============================================================
   SLIDER DE SERVICIOS (home)
   ============================================================ */
.diur-slider { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--color-negro); }
.diur-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease; display: flex; align-items: center; }
.diur-slide.activa { opacity: 1; visibility: visible; z-index: 2; }
.diur-slide-fondo { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 7s ease-out; }
.diur-slide.activa .diur-slide-fondo { transform: scale(1); }
.diur-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.05) 100%); }
.diur-slide-contenido {
    position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto;
    padding: 0 6%; box-sizing: border-box; color: #fff;
    display: flex; align-items: center; gap: 3rem;
}
@media (max-width: 900px) { .diur-slide-contenido { flex-direction: column; text-align: center; gap: 1.5rem; } }

/* Columna izquierda: espacio reservado para tu imagen PNG por slide */
.diur-slide-imagen { flex: 0 0 300px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .diur-slide-imagen { order: -1; flex: 0 0 auto; max-width: 200px; } }
.diur-slide-png {
    display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain;
    opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
@media (max-width: 900px) { .diur-slide-png { max-height: 180px; } }
.diur-slide.activa .diur-slide-png { opacity: 1; transform: translateY(0); }

/* Columna derecha: el texto (mismo estilo que ya funcionaba bien) */
.diur-slide-texto { flex: 1; max-width: 560px; }
@media (max-width: 900px) { .diur-slide-texto { max-width: 100%; } }

.diur-slide-etiqueta {
    display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px; margin-bottom: 1rem;
    opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}
.diur-slide.activa .diur-slide-etiqueta { opacity: 1; transform: translateY(0); }
.diur-slide-contenido h2 {
    font-family: var(--fuente-titular); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05; margin: 0 0 1rem; color: #fff;
    opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s;
    text-shadow: none; -webkit-font-smoothing: antialiased; backface-visibility: hidden;
}
.diur-slide.activa .diur-slide-contenido h2 { opacity: 1; transform: translateY(0); }
.diur-slide-contenido p {
    font-size: 1.05rem; color: rgba(255,255,255,0.88); margin: 0 0 1.75rem; max-width: 480px;
    opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}
.diur-slide.activa .diur-slide-contenido p { opacity: 1; transform: translateY(0); }
.diur-slide-cta { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s; }
.diur-slide.activa .diur-slide-cta { opacity: 1; transform: translateY(0); }
.diur-slide-cta a {
    display: inline-block; font-weight: 700; font-size: 14px; color: #fff; background: transparent;
    border: 1.5px solid #fff; padding: 12px 26px; border-radius: 8px; text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.diur-slide-cta a:hover { background: #fff; color: var(--color-negro); }

.diur-slide:nth-child(1) .diur-slide-fondo { background-color: var(--color-violeta); }
.diur-slide:nth-child(1) .diur-slide-etiqueta { background: var(--color-lima); color: var(--color-negro); }
.diur-slide:nth-child(2) .diur-slide-fondo { background-color: var(--color-rosa); }
.diur-slide:nth-child(2) .diur-slide-etiqueta { background: #fff; color: var(--color-rosa); }
.diur-slide:nth-child(3) .diur-slide-fondo { background-color: var(--color-lima); }
.diur-slide:nth-child(3) .diur-slide-etiqueta { background: var(--color-negro); color: var(--color-lima); }
.diur-slide:nth-child(3) .diur-slide-overlay { background: linear-gradient(90deg, rgba(18,18,18,0.7) 0%, rgba(18,18,18,0.32) 55%, rgba(18,18,18,0.08) 100%); }
.diur-slide:nth-child(4) .diur-slide-fondo { background-color: var(--color-negro); }
.diur-slide:nth-child(4) .diur-slide-etiqueta { background: var(--color-violeta); color: #fff; }

.diur-slider-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,0.4); color: #fff;
    font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.diur-slider-flecha:hover { background: rgba(255,255,255,0.3); }
.diur-slider-flecha.prev { left: 20px; }
.diur-slider-flecha.next { right: 20px; }
.diur-slider-puntos { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; }
.diur-slider-punto { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; }
.diur-slider-punto.activo { background: #fff; transform: scale(1.25); }

@media (max-width: 700px) {
    .diur-slider { height: 100vh; }
    .diur-slide-contenido { padding: 0 6%; max-width: 100%; }
    .diur-slider-flecha { width: 36px; height: 36px; font-size: 1rem; }
    .diur-slider-flecha.prev { left: 10px; }
    .diur-slider-flecha.next { right: 10px; }
}