/* ============================================================
   Rocket Impact LLC — Sitio público
   Paleta de marca (logo): #CE2029 rojo / #5B6470 acero / #F5A623 ámbar
           #0F172A ink / #E2E8F0 slate-200 / #475569 slate-600
   Mobile-first.
   ============================================================ */

:root {
    /* Paleta de marca extraída del logo Rocket Impact (rojo + acero + ámbar) */
    --brand-blue:  #CE2029;   /* ROJO Rocket Impact — color primario */
    --brand-teal:  #5B6470;   /* ACERO/plata metálico — secundario */
    --accent:      #F5A623;   /* ÁMBAR del anillo/llama — CTAs */
    --accent-dark: #DB7E0A;
    --brand-red:   #CE2029;
    --brand-red-dark: #A4161A;
    --brand-steel: #5B6470;
    --brand-amber: #F5A623;
    --slate-900:   #0F172A;
    --slate-800:   #1E293B;
    --slate-700:   #334155;
    --slate-600:   #475569;
    --slate-500:   #64748B;
    --slate-400:   #94A3B8;
    --slate-300:   #CBD5E1;
    --slate-200:   #E2E8F0;
    --slate-100:   #F1F5F9;
    --slate-50:    #F8FAFC;
    --white:       #FFFFFF;
    --success:     #10B981;
    --warning:     #F59E0B;
    --danger:      #EF4444;

    --container:   1240px;
    --radius:      12px;
    --radius-lg:   18px;
    --shadow-sm:   0 1px 2px rgba(15,23,42,.08);
    --shadow:      0 4px 12px rgba(15,23,42,.10);
    --shadow-lg:   0 20px 40px rgba(15,23,42,.15);

    /* Tipografía elegante: Fraunces (serif premium, titulares) + Hanken Grotesk (cuerpo/UI) */
    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    --transition: .3s cubic-bezier(.4, 0, .2, 1);
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--slate-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-teal); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--slate-900); letter-spacing: -0.01em; font-optical-sizing: auto; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4.1rem); font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.85rem); margin-bottom: 1rem; font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); font-weight: 600; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4rem 0; }
.section--alt { background: var(--slate-50); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section__eyebrow { color: var(--brand-teal); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem; }
.section__title { color: var(--slate-900); margin-bottom: .75rem; }
.section__lead { color: var(--slate-600); font-size: 1.05rem; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.5rem; border-radius: var(--radius); font-weight: 600;
    transition: all var(--transition); white-space: nowrap; border: 2px solid transparent;
    text-decoration: none; font-size: .95rem;
}
.btn--primary { background: var(--brand-blue); color: var(--white); }
.btn--primary:hover { background: #A4161A; color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--secondary { background: var(--brand-teal); color: var(--white); }
.btn--secondary:hover { background: #454C56; color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: var(--white); box-shadow: 0 8px 20px rgba(245,166,35,.28); }
.btn--accent:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245,166,35,.38); }
.btn--outline { background: transparent; color: var(--brand-blue); border-color: var(--brand-blue); }
.btn--outline:hover { background: var(--brand-blue); color: var(--white); }
.btn--ghost { background: transparent; color: var(--slate-700); }
.btn--ghost:hover { background: var(--slate-100); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ============================================================
   Site header — overlay transparente sobre el hero (estilo referencia)
   ============================================================ */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
.site-header.is-stuck { position: fixed; animation: slideDown .35s ease; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Top utility bar (blanco, como la referencia) */
.topbar-utility { background: var(--white); color: var(--slate-600); font-size: .82rem; border-bottom: 1px solid var(--slate-200); }
.topbar-utility__inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: .5rem 1.25rem; flex-wrap: wrap; }
.topbar-utility__left { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.topbar-utility__right { display: none; }
.topbar-utility__item { display: inline-flex; align-items: center; gap: .45rem; color: var(--slate-600); font-weight: 600; }
.topbar-utility__item svg { width: 15px; height: 15px; color: var(--accent); }
a.topbar-utility__item:hover { color: var(--slate-900); }
.site-header.is-stuck .topbar-utility { display: none; }
@media (min-width: 992px) {
    .topbar-utility__inner { justify-content: space-between; }
    .topbar-utility__right { display: flex; }
}

/* Navbar transparente */
.navbar { position: relative; background: transparent; transition: background var(--transition), box-shadow var(--transition); }
/* Cápsula de "glass líquido" (estilo iOS): casi transparente, frosted */
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .7rem .5rem 1rem; max-width: var(--container); margin: .9rem auto 0;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 12px 38px rgba(7,10,18,.20), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.06);
    transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 991px) { .navbar__inner { margin-top: .6rem; } }
.navbar__logo { display: flex; align-items: center; gap: .65rem; }
.navbar__logo-img { height: 56px; width: auto; display: block; transition: height var(--transition); }
.site-header.is-stuck .navbar__logo-img { height: 46px; }
@media (max-width: 991px) { .navbar__logo-img { height: 46px; } }
.navbar__logo-icon {
    width: 44px; height: 44px; border-radius: 11px;
    background: linear-gradient(135deg, var(--accent), #F7B733);
    display: grid; place-items: center; color: var(--white);
    box-shadow: 0 6px 16px rgba(245,166,35,.35);
}
.navbar__logo-icon svg { width: 24px; height: 24px; }
.navbar__logo-text { font-family: var(--font-sans); font-weight: 800; font-size: 1.35rem; color: var(--white); letter-spacing: -0.02em; }
.navbar__logo-text span { color: var(--accent); }
.navbar__menu { display: none; gap: 2rem; align-items: center; }
.navbar__menu a { color: rgba(255,255,255,.92); font-weight: 600; font-size: .92rem; position: relative; }
.navbar__menu a:hover { color: var(--white); }
.navbar__menu a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); transition: width var(--transition); }
.navbar__menu a:hover::after { width: 100%; }
.navbar__cta { display: none; align-items: center; gap: .75rem; }
.navbar__toggle {
    width: 44px; height: 44px; border-radius: 10px;
    display: grid; place-items: center; background: rgba(255,255,255,.18);
}
.navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--white); margin: 4px 0; transition: var(--transition); }
.navbar.is-open .navbar__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar.is-open .navbar__toggle span:nth-child(2) { opacity: 0; }
.navbar.is-open .navbar__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navbar__mobile {
    position: absolute; inset: 100% 0 auto 0; background: var(--white);
    padding: 1.5rem 1.25rem; display: none; flex-direction: column; gap: .5rem;
    box-shadow: var(--shadow-lg); max-height: 80vh; overflow-y: auto;
}
.navbar__mobile a { padding: .85rem .25rem; border-bottom: 1px solid var(--slate-100); color: var(--slate-800); font-weight: 600; }
.navbar.is-open .navbar__mobile { display: flex; }

/* Estado "stuck": al hacer scroll la navbar se vuelve blanca con texto oscuro */
.site-header.is-stuck .navbar { background: transparent; }
.site-header.is-stuck .navbar__inner {
    background: rgba(255,255,255,.62);
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 10px 30px rgba(7,10,18,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
.site-header.is-stuck .navbar__logo-text { color: var(--slate-900); }
.site-header.is-stuck .navbar__menu a { color: var(--slate-800); }
.site-header.is-stuck .navbar__menu a:hover { color: var(--accent); }
.site-header.is-stuck .navbar__toggle { background: var(--slate-100); }
.site-header.is-stuck .navbar__toggle span { background: var(--slate-900); }

@media (min-width: 992px) {
    .navbar__menu { display: flex; }
    .navbar__cta { display: flex; }
    .navbar__toggle { display: none; }
}

/* ============================================================
   Hero (cinematográfico, estilo referencia)
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    background: var(--slate-900); color: var(--white);
    min-height: 92vh; display: flex; align-items: center;
    padding: 132px 0 48px;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Degradado oscuro a la izquierda (legibilidad) que despeja a la derecha (se ve la foto) */
.hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(95deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.5) 36%, rgba(15,23,42,.22) 66%, rgba(15,23,42,.08) 100%),
        linear-gradient(to top, rgba(15,23,42,.42), rgba(15,23,42,0) 42%);
}
@media (max-width: 991px) {
    /* En móvil el texto ocupa todo el ancho: oscurecemos más para legibilidad */
    .hero__media::after {
        background:
            linear-gradient(to right, rgba(15,23,42,.74), rgba(15,23,42,.5)),
            linear-gradient(to top, rgba(15,23,42,.4), rgba(15,23,42,0) 55%);
    }
}
/* Animación lenta de alejamiento (centro histórico) */
.hero__media img { animation: heroZoom 18s ease-out forwards; transform-origin: center; }
@keyframes heroZoom { from { transform: scale(1.18); } to { transform: scale(1); } }

.hero__inner { position: relative; z-index: 2; padding: 1rem 0; width: 100%; }
.hero__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1.1rem; background: rgba(245,166,35,.16); border: 1px solid rgba(245,166,35,.4); border-radius: 999px;
    color: #F7C883; font-weight: 700; font-size: .8rem;
    margin-bottom: 1.5rem; letter-spacing: .06em; text-transform: uppercase;
}
.hero__title { color: var(--white); margin-bottom: 1.5rem; max-width: 15ch; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.06; font-weight: 700; }
.hero__title .accent { font-style: italic; }
.hero__title .accent { color: var(--accent); }
.hero__title .word { display: inline-block; opacity: 0; transform: translateY(28px); transition: all .55s cubic-bezier(.2,.7,.2,1); }
.hero__title.is-visible .word { opacity: 1; transform: translateY(0); }
.hero__lead { font-size: 1.15rem; color: rgba(255,255,255,.82); margin-bottom: 2rem; max-width: 540px; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2.5rem; }
.hero__play { display: inline-flex; align-items: center; gap: .75rem; color: var(--white); font-weight: 600; }
.hero__play-btn {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.4); color: var(--white);
    transition: var(--transition);
}
.hero__play:hover .hero__play-btn { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.hero__play-btn svg { width: 18px; height: 18px; margin-left: 2px; }

.hero__trust { display: flex; gap: 1rem; align-items: center; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.15); }
.hero__avatars { display: flex; }
.hero__avatars span {
    width: 42px; height: 42px; border-radius: 50%; margin-left: -12px; border: 2px solid var(--slate-900);
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal)); display: grid; place-items: center;
    color: var(--white); font-weight: 700; font-size: .9rem;
}
.hero__avatars span:first-child { margin-left: 0; }
.hero__trust-text strong { display: block; color: var(--white); font-size: 1rem; }
.hero__trust-text span { color: rgba(255,255,255,.7); font-size: .82rem; }

/* Chips de tipos de techo en el hero */
.hero__chips { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.hero__chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    color: rgba(255,255,255,.92); font-size: .85rem; font-weight: 600; transition: var(--transition);
}
.hero__chip:hover { background: rgba(245,166,35,.18); border-color: var(--accent); color: var(--white); }

@media (min-width: 992px) {
    .hero { padding: 96px 0 64px; }
    .hero__inner { max-width: var(--container); margin: 0 auto; padding: 1.5rem 1.25rem; }
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
    .hero__content { max-width: 600px; }
}

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: .85rem; color: var(--slate-700); margin-bottom: .35rem; }
.form-control {
    width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--slate-200);
    border-radius: 10px; transition: var(--transition); background: var(--white); color: var(--slate-900);
}
.form-control:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(206,32,41,.12); }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-error { color: var(--danger); font-size: .85rem; margin-top: .25rem; }
.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1rem; }
.alert--success { background: #ECFDF5; color: #065F46; border-left: 4px solid var(--success); }
.alert--error   { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }
.alert--info    { background: #EFF6FF; color: #1E3A8A; border-left: 4px solid var(--brand-blue); }

/* ============================================================
   Trust bar
   ============================================================ */
.trust-bar {
    background: var(--slate-50); padding: 2rem 0; border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200);
}
.trust-bar__title { text-align: center; color: var(--slate-500); font-size: .85rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1.5rem; font-weight: 600; }
.trust-bar__logos {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: center;
}
.trust-bar__item {
    display: grid; place-items: center; padding: .75rem; opacity: .65; transition: opacity var(--transition);
    color: var(--slate-700); font-weight: 700; font-size: .9rem; text-align: center;
}
.trust-bar__item:hover { opacity: 1; }
@media (min-width: 768px) { .trust-bar__logos { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   Services
   ============================================================ */
.services__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.service-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 2rem 1.75rem;
    box-shadow: var(--shadow-sm); border: 1px solid var(--slate-100);
    transition: all var(--transition); position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
    transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card__icon {
    width: 60px; height: 60px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(206,32,41,.12), rgba(91,100,112,.12));
    color: var(--brand-blue); display: grid; place-items: center; margin-bottom: 1.25rem;
}
.service-card__icon svg { width: 32px; height: 32px; }
.service-card__title { font-size: 1.2rem; color: var(--slate-900); margin-bottom: .65rem; }
.service-card__desc  { color: var(--slate-600); font-size: .95rem; margin-bottom: 1.25rem; }
.service-card__link  { color: var(--brand-blue); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; }
.service-card__link:hover { gap: .65rem; }

@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   About Camilo
   ============================================================ */
.about__inner { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.about__badge {
    position: absolute; bottom: -1rem; right: -1rem;
    background: var(--white); padding: 1.25rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow); text-align: center;
}
.about__badge strong { display: block; font-size: 2rem; color: var(--brand-blue); font-family: var(--font-display); }
.about__badge span { font-size: .8rem; color: var(--slate-500); text-transform: uppercase; letter-spacing: .1em; }
.about__quote { padding: 1.25rem 1.5rem; border-left: 4px solid var(--brand-teal); background: var(--slate-50); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--slate-700); margin: 1.5rem 0; }
.about__signature { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 1.5rem; color: var(--slate-900); margin-top: 1rem; letter-spacing: -0.02em; }
@media (min-width: 992px) { .about__inner { grid-template-columns: 1fr 1.2fr; } }

/* ============================================================
   Process 1-2-3
   ============================================================ */
.process__steps {
    display: grid; gap: 2rem; grid-template-columns: 1fr; position: relative;
}
.process__step { text-align: center; padding: 1.5rem; position: relative; }
.process__step-number {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
    color: var(--white); display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 800; box-shadow: var(--shadow);
}
.process__step h3 { margin-bottom: .5rem; }
.process__step p  { color: var(--slate-600); font-size: .95rem; }
@media (min-width: 768px) {
    .process__steps { grid-template-columns: repeat(3, 1fr); }
    .process__steps::before {
        content: ''; position: absolute; top: 32px; left: 16.66%; right: 16.66%; height: 2px;
        background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
        opacity: .3; z-index: 0;
    }
    .process__step { z-index: 1; background: var(--white); }
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.gallery-card {
    position: relative; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 4/3; background: var(--slate-200);
    box-shadow: var(--shadow-sm); transition: transform var(--transition);
}
.gallery-card:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.06); }
.gallery-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.85), transparent 60%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem; color: var(--white);
}
.gallery-card__overlay h4 { color: var(--white); font-size: 1.05rem; }
.gallery-card__overlay span { font-size: .8rem; color: rgba(255,255,255,.8); }

@media (min-width: 576px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-filters {
    display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem;
}
.gallery-filters .btn { padding: .55rem 1.1rem; font-size: .85rem; }

/* ============================================================
   Why us
   ============================================================ */
.why__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.why-card {
    display: flex; gap: 1rem; padding: 1.5rem; background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.why-card__icon {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px;
    background: rgba(91,100,112,.12); color: var(--brand-teal);
    display: grid; place-items: center;
}
.why-card__icon svg { width: 26px; height: 26px; }
.why-card h4 { margin-bottom: .35rem; font-size: 1.05rem; }
.why-card p  { color: var(--slate-600); font-size: .9rem; }
@media (min-width: 768px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial {
    background: var(--white); padding: 2rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow); height: 100%;
}
.testimonial__stars { color: var(--warning); margin-bottom: 1rem; letter-spacing: .15rem; }
.testimonial__text  { font-size: 1.05rem; color: var(--slate-700); margin-bottom: 1.5rem; line-height: 1.7; }
.testimonial__author { display: flex; align-items: center; gap: .85rem; }
.testimonial__avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
    color: var(--white); display: grid; place-items: center; font-weight: 700;
}
.testimonial__author strong { display: block; color: var(--slate-900); font-size: .95rem; }
.testimonial__author span   { color: var(--slate-500); font-size: .85rem; }

/* ============================================================
   Stats
   ============================================================ */
.stats {
    background: linear-gradient(135deg, var(--slate-900), var(--brand-blue));
    color: var(--white); padding: 4rem 0;
}
.stats__grid {
    display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); text-align: center;
}
.stat__number { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--white); display: block; line-height: 1; margin-bottom: .35rem; text-shadow: 0 2px 10px rgba(7,10,18,.25); }
.stat__label  { font-size: .9rem; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .1em; }
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   CTA
   ============================================================ */
.cta-section {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
    color: var(--white); padding: 4rem 0;
}
.cta-section__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.cta-section h2 { color: var(--white); }
.cta-section p  { color: rgba(255,255,255,.92); margin-bottom: 1.5rem; }
.cta-section__form {
    background: var(--white); padding: 2rem; border-radius: var(--radius-lg); color: var(--slate-900); box-shadow: var(--shadow-lg);
}
@media (min-width: 992px) { .cta-section__inner { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Map
   ============================================================ */
.map-section iframe { width: 100%; height: 400px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.map-facade {
    width: 100%; height: 400px; border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer;
    background: linear-gradient(135deg, var(--slate-900), var(--brand-blue)); display: grid; place-items: center; overflow: hidden;
    position: relative;
}
.map-facade::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at 70% 70%, rgba(91,100,112,.18), transparent 45%); }
.map-facade__overlay { position: relative; text-align: center; color: var(--white); display: grid; justify-items: center; gap: .75rem; }
.map-facade__overlay svg { width: 40px; height: 40px; color: var(--accent); }
.map-facade__overlay strong { font-size: 1.1rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--slate-900); color: rgba(255,255,255,.7); padding: 4rem 0 2rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
.footer__col h4 { color: var(--white); margin-bottom: 1rem; font-size: 1.05rem; }
.footer__col a  { color: rgba(255,255,255,.7); display: block; padding: .35rem 0; font-size: .9rem; }
.footer__col a:hover { color: var(--brand-teal); }
.footer__brand { display: flex; align-items: center; gap: .65rem; color: var(--white); font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem; }
.footer__brand .navbar__logo-icon { background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue)); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem; align-items: center;
    text-align: center; font-size: .85rem;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ============================================================
   WhatsApp floating button
   ============================================================ */
/* Speed-dial Call / Text (estilo EEUU) */
.contact-fab { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.contact-fab__menu { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.contact-fab__action {
    display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .95rem; border-radius: 999px;
    color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(7,10,18,.25);
    opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transform-origin: bottom right;
    transition: opacity .25s ease, transform .25s ease;
}
.contact-fab__action--call { background: #16A34A; }
.contact-fab__action--text { background: var(--brand-blue); }
.contact-fab__ico { display: inline-flex; }
.contact-fab.is-open .contact-fab__action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.contact-fab.is-open .contact-fab__action--text { transition-delay: .05s; }
.contact-fab__toggle {
    position: relative; align-self: flex-end; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--brand-blue); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(206,32,41,.42); transition: transform .25s ease;
}
.contact-fab__toggle:hover { transform: scale(1.06); }
.contact-fab__toggle::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--brand-blue); animation: pulse 2s infinite; opacity: 0; }
.contact-fab__toggle-ico { position: absolute; display: inline-flex; transition: opacity .2s ease, transform .25s ease; }
.contact-fab__toggle-ico--close { opacity: 0; transform: rotate(-90deg); }
.contact-fab.is-open .contact-fab__toggle-ico--phone { opacity: 0; transform: rotate(90deg); }
.contact-fab.is-open .contact-fab__toggle-ico--close { opacity: 1; transform: rotate(0); }
@keyframes pulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* ============================================================
   Seller profile
   ============================================================ */
.seller-hero {
    background: linear-gradient(135deg, var(--slate-900), var(--brand-blue));
    color: var(--white); padding: 8rem 0 4rem;
}
.seller-hero__inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
.seller-hero__avatar {
    width: 180px; height: 180px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue));
    color: var(--white); display: grid; place-items: center;
    font-size: 4rem; font-weight: 800; margin: 0 auto;
    border: 6px solid rgba(255,255,255,.15);
}
.seller-hero__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.seller-hero__role { color: var(--brand-teal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; margin-bottom: .5rem; }
.seller-hero__name { color: var(--white); margin-bottom: 1rem; }
.seller-hero__bio  { color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.seller-hero__meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.seller-hero__meta div strong { display: block; font-size: 1.5rem; color: var(--brand-teal); }
.seller-hero__meta div span   { font-size: .85rem; color: rgba(255,255,255,.7); }
@media (min-width: 992px) {
    .seller-hero__inner { grid-template-columns: 1fr 2fr; }
    .seller-hero__avatar { margin: 0; }
}

/* ============================================================
   Page header (interior pages)
   ============================================================ */
.page-header {
    background: linear-gradient(135deg, var(--slate-900), var(--brand-blue));
    color: var(--white); padding: 9.5rem 0 3.5rem; text-align: center;
}
.page-header h1 { color: var(--white); }
.page-header p  { color: rgba(255,255,255,.85); max-width: 620px; margin: .75rem auto 0; }

.breadcrumbs { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: 1rem; }
.breadcrumbs a { color: rgba(255,255,255,.9); }

/* Contact split */
.contact-split { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.contact-card {
    padding: 1.5rem; background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); border: 1px solid var(--slate-100);
}
.contact-card h4 { margin-bottom: .35rem; }
.contact-card p  { color: var(--slate-600); font-size: .95rem; }
.contact-card a  { color: var(--brand-blue); font-weight: 600; }
@media (min-width: 992px) { .contact-split { grid-template-columns: 1.2fr 1fr; } }

/* Utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none !important; }

/* Print-friendly QR card */
.qr-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 2rem;
    text-align: center; box-shadow: var(--shadow); max-width: 360px; margin: 0 auto;
}
.qr-card img { margin: 0 auto 1rem; }
.qr-card a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }

/* ============================================================
   Section helpers extra (look referencia)
   ============================================================ */
.section--dark { background: var(--slate-900); color: rgba(255,255,255,.82); }
.section--dark .section__title { color: var(--white); }
.section--dark .section__lead { color: rgba(255,255,255,.72); }
.eyebrow-accent { color: var(--accent) !important; }

/* Roof types overview cards (los 4 juntos) */
.roof-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.roof-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px;
    display: flex; align-items: flex-end; color: var(--white); box-shadow: var(--shadow);
    background: var(--slate-800);
}
.roof-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.roof-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.92), rgba(15,23,42,.25) 70%); z-index: 1; }
.roof-card:hover img { transform: scale(1.07); }
.roof-card__body { position: relative; z-index: 2; padding: 1.5rem; }
.roof-card__tag { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 3; display: inline-block; padding: .3rem .7rem; background: var(--accent); color: var(--white); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.roof-card h3 { color: var(--white); margin-bottom: .35rem; }
.roof-card p { color: rgba(255,255,255,.8); font-size: .9rem; }
@media (min-width: 640px) { .roof-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .roof-cards { grid-template-columns: repeat(4, 1fr); } }

/* Roof detail zig-zag (individuales con especificaciones) */
.roof-detail { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; padding: 3rem 0; border-bottom: 1px solid var(--slate-100); }
.roof-detail:last-of-type { border-bottom: 0; }
.roof-detail__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: var(--slate-200); }
.roof-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.roof-detail__num { position: absolute; top: 1rem; left: 1rem; width: 54px; height: 54px; border-radius: 12px; background: var(--accent); color: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow); }
.roof-detail__eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin-bottom: .5rem; }
.roof-detail__title { margin-bottom: .35rem; }
.roof-detail__sub { color: var(--brand-teal); font-weight: 700; margin-bottom: 1rem; font-size: 1.05rem; }
.roof-detail__desc { color: var(--slate-600); margin-bottom: 1.25rem; }
.roof-detail__specs { list-style: none; display: grid; gap: .6rem; }
.roof-detail__specs li { display: flex; align-items: flex-start; gap: .6rem; color: var(--slate-700); font-weight: 500; }
.roof-detail__specs svg { width: 20px; height: 20px; color: var(--brand-teal); flex-shrink: 0; margin-top: 2px; }

/* Variedad anti-plantilla: stats reales + badge "popular" + fila destacada */
.roof-detail__flag {
    position: absolute; top: 1rem; right: 1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--accent); color: #1A1205; font-weight: 800; font-size: .72rem;
    padding: .38rem .75rem; border-radius: 999px; box-shadow: 0 8px 18px rgba(7,10,18,.25);
    text-transform: uppercase; letter-spacing: .03em;
}
.roof-detail__flag svg { color: #1A1205; }
.roof-detail__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
.roof-stat { flex: 1 1 auto; min-width: 86px; text-align: center;
    background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 12px; padding: .55rem .8rem; }
.roof-stat strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--brand-blue); line-height: 1.12; }
.roof-stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.roof-detail--featured {
    background: linear-gradient(135deg, rgba(245,166,35,.07), rgba(206,32,41,.04));
    border: 1px solid rgba(245,166,35,.32); border-radius: var(--radius-lg); padding: 1.75rem;
}
.roof-detail--featured .roof-stat { background: rgba(255,255,255,.72); }

@media (min-width: 900px) {
    .roof-detail { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
    .roof-detail--featured { padding: 2.5rem; }
    .roof-detail--rev .roof-detail__media { order: 2; }
}

/* Remodel CTA + big phone */
.remodel-cta {
    background: linear-gradient(120deg, var(--slate-900), #14233f);
    color: var(--white); border-radius: var(--radius-lg); overflow: hidden;
    display: grid; grid-template-columns: 1fr; position: relative;
}
.remodel-cta__media { position: relative; min-height: 240px; }
.remodel-cta__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.remodel-cta__body { padding: 2.5rem; }
.remodel-cta__eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin-bottom: .75rem; }
.remodel-cta h2 { color: var(--white); margin-bottom: 1rem; }
.remodel-cta p { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.phone-xl { display: inline-flex; align-items: center; gap: .85rem; margin-top: .5rem; }
.phone-xl__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--white); flex-shrink: 0; }
.phone-xl__icon svg { width: 26px; height: 26px; }
.phone-xl__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--white); letter-spacing: -0.02em; line-height: 1; }
.phone-xl__label { display: block; font-size: .8rem; color: rgba(255,255,255,.65); font-weight: 500; letter-spacing: .03em; margin-bottom: .15rem; }
@media (min-width: 900px) { .remodel-cta { grid-template-columns: 1fr 1fr; } .remodel-cta__media { min-height: 100%; } }

/* Before / After slider */
.beforeafter { position: relative; max-width: 820px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); user-select: none; aspect-ratio: 16/10; background: var(--slate-200); }
.beforeafter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.beforeafter__after { z-index: 1; }
.beforeafter__before { z-index: 2; clip-path: inset(0 50% 0 0); }
.beforeafter__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--white); z-index: 3; cursor: ew-resize; }
.beforeafter__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: var(--accent); color: var(--white); border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow); }
.beforeafter__label { position: absolute; bottom: 1rem; padding: .35rem .85rem; background: rgba(15,23,42,.75); color: var(--white); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; z-index: 4; }
.beforeafter__label--before { left: 1rem; z-index: 3; }
.beforeafter__label--after { right: 1rem; }

/* Process steps (redibujado, oscuro) */
/* Timeline vertical con línea que se dibuja al entrar en vista */
.process-rows { position: relative; max-width: 760px; margin: 0 auto; padding-left: 8px; }
.process-rows::before { content: ''; position: absolute; left: 39px; top: 14px; bottom: 44px; width: 3px; border-radius: 3px; background: rgba(255,255,255,.12); }
.process-rows::after { content: ''; position: absolute; left: 39px; top: 14px; width: 3px; height: 0; border-radius: 3px;
    background: linear-gradient(var(--accent), var(--brand-blue)); transition: height 1.6s cubic-bezier(.4,0,.2,1); }
.process-rows.is-drawn::after { height: calc(100% - 58px); }
.process-row { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; gap: 1.4rem; align-items: start; padding: 0 0 2.4rem; background: none; border: none; }
.process-row:last-child { padding-bottom: 0; }
.process-row__num { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
    background: var(--slate-900); border: 3px solid var(--accent); color: var(--accent);
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
    box-shadow: 0 0 0 6px var(--slate-900); transition: transform .3s ease, background .3s ease, color .3s ease; }
.process-row:hover .process-row__num { transform: scale(1.08); background: var(--accent); color: var(--slate-900); }
.process-row h3 { color: var(--white); margin-bottom: .4rem; padding-top: .55rem; }
.process-row p { color: rgba(255,255,255,.72); font-size: .92rem; }

/* Sellers / contacts */
.sellers-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.seller-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 2rem; text-align: center;
    box-shadow: var(--shadow-sm); border: 1px solid var(--slate-100); transition: var(--transition);
}
.seller-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.seller-card__avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal)); display: grid; place-items: center; color: var(--white); font-size: 2.2rem; font-weight: 800; font-family: var(--font-display); }
.seller-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.seller-card h3 { margin-bottom: .15rem; }
.seller-card__role { color: var(--accent); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.seller-card__actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
@media (min-width: 640px) { .sellers-grid:not(.sellers-grid--solo) { grid-template-columns: 1fr 1fr; } }
/* Un solo asesor: tarjeta centrada, no estirada a lo ancho */
.sellers-grid--solo { max-width: 360px; }

/* Why-us strip (chips de garantías) */
.guarantee-strip { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.guarantee-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.15rem; background: var(--white); border: 1px solid var(--slate-200); border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--slate-700); box-shadow: var(--shadow-sm); }
.guarantee-chip svg { width: 18px; height: 18px; color: var(--brand-teal); }

/* Video modal */
.video-modal { position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.9); display: grid; place-items: center; padding: 1.5rem; }
.video-modal[hidden] { display: none; }
.video-modal__inner { position: relative; width: 100%; max-width: 880px; }
.video-modal__close { position: absolute; top: -3rem; right: 0; width: 40px; height: 40px; border-radius: 50%; color: var(--white); background: rgba(255,255,255,.12); display: grid; place-items: center; transition: var(--transition); }
.video-modal__close:hover { background: var(--accent); }
.video-modal__frame { aspect-ratio: 16/9; background: var(--slate-800); border-radius: var(--radius-lg); display: grid; place-items: center; color: rgba(255,255,255,.7); text-align: center; padding: 2rem; }
.video-modal__frame code { background: rgba(255,255,255,.1); padding: .15rem .4rem; border-radius: 5px; }
.video-modal__player { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.video-modal__player video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.video-modal__reels { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
.video-reel { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); font-weight: 600; font-size: .85rem; transition: var(--transition); }
.video-reel:hover { background: rgba(255,255,255,.2); color: var(--white); }
.video-reel.is-active { background: var(--accent); color: var(--white); }
.video-reel__ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); }

/* Emergency band */
.emergency-band { background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: var(--white); }
.emergency-band__inner { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; padding: 2.5rem 0; }
.emergency-band h2 { color: var(--white); }
.emergency-band p { color: rgba(255,255,255,.9); }
@media (min-width: 768px) { .emergency-band__inner { grid-template-columns: 2fr 1fr; } }

/* ============================================================
   INTRO SPLASH (preloader)
   ============================================================ */
html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; }
.preloader { position: fixed; inset: 0; z-index: 9999; }
.preloader__panel { position: absolute; top: 0; bottom: 0; width: 56%; background: #0a0b0d; will-change: transform; }
.preloader__panel--left  { left: 0;  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 6.25%, 100% 12.5%, calc(100% - 16px) 18.75%, 100% 25%, calc(100% - 16px) 31.25%, 100% 37.5%, calc(100% - 16px) 43.75%, 100% 50%, calc(100% - 16px) 56.25%, 100% 62.5%, calc(100% - 16px) 68.75%, 100% 75%, calc(100% - 16px) 81.25%, 100% 87.5%, calc(100% - 16px) 93.75%, 100% 100%, 0 100%); }
.preloader__panel--right { right: 0; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 93.75%, 16px 87.5%, 0 81.25%, 16px 75%, 0 68.75%, 16px 62.5%, 0 56.25%, 16px 50%, 0 43.75%, 16px 37.5%, 0 31.25%, 16px 25%, 0 18.75%, 16px 12.5%, 0 6.25%); }
.preloader__content {
    position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
    gap: 1.1rem; text-align: center; padding: 1.5rem;
}
.preloader__logo { width: clamp(180px, 34vw, 300px); height: auto; opacity: 0; transform: scale(.82) translateY(12px); animation: preLogo 1s cubic-bezier(.2,.8,.2,1) .15s forwards; filter: drop-shadow(0 12px 30px rgba(206,32,41,.35)); }
.preloader__sub { color: rgba(255,255,255,.66); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; opacity: 0; animation: preFade .8s ease .6s forwards; }
.preloader__bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; animation: preFade .6s ease .7s forwards; }
.preloader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-red), var(--accent)); animation: preBar 1.6s ease .7s forwards; }
@keyframes preLogo { to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes preFade { to { opacity: 1; } }
@keyframes preBar  { to { width: 100%; } }

/* Cohete que despega desde abajo */
.preloader__rocket { position: absolute; left: 50%; bottom: -130px; z-index: 4; transform: translateX(-50%); opacity: 0; will-change: bottom, transform; }
.preloader__rocket-svg { display: block; filter: drop-shadow(0 6px 22px rgba(255,122,26,.55)); }
.rkt-flame { transform-origin: 24px 60px; animation: rktFlicker .09s steps(2) infinite; }
@keyframes rktFlicker { 0% { transform: scaleY(.78); opacity: .9; } 100% { transform: scaleY(1.18); opacity: 1; } }

/* Revelado: el cohete despega y los paneles se abren a los lados (cremallera) */
.preloader.is-done .preloader__content { opacity: 0; transform: translateY(-26px) scale(.95); transition: opacity .4s ease, transform .5s ease; }
.preloader.is-done .preloader__panel { transition: transform .85s cubic-bezier(.76,0,.24,1) .3s; }
.preloader.is-done .preloader__panel--left  { transform: translateX(-103%); }
.preloader.is-done .preloader__panel--right { transform: translateX(103%); }
.preloader.is-done .preloader__rocket { animation: rktLaunch 1.05s cubic-bezier(.45,0,.75,.25) .05s forwards; }
@keyframes rktLaunch {
    0%   { opacity: 0; bottom: -130px; transform: translateX(-50%) scale(.85); }
    9%   { opacity: 1; }
    24%  { transform: translateX(-50%) scale(1); }
    100% { opacity: 1; bottom: calc(100% + 90px); transform: translateX(-50%) scale(1.12); }
}

/* ============================================================
   HERO — video + formulario
   ============================================================ */
.hero__video { animation: heroZoom 26s ease-out forwards; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.hero-form {
    background: rgba(255,255,255,.96); backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-lg);
    padding: 1.75rem; box-shadow: 0 30px 60px rgba(7,10,18,.45);
    color: var(--slate-900);
}
.hero-form__head { margin-bottom: 1.1rem; }
.hero-form__head h3 { font-size: 1.4rem; margin-bottom: .15rem; }
.hero-form__head p { color: var(--slate-500); font-size: .88rem; }
.hero-form .form-control { background: var(--slate-50); }
.hero-form__fine { font-size: .72rem; color: var(--slate-400); margin-top: .75rem; text-align: center; }

/* Scroll indicator */
.hero__scroll {
    position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 3;
    display: none; flex-direction: column; align-items: center; gap: .4rem;
    color: rgba(255,255,255,.7); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
    animation: floaty 2.4s ease-in-out infinite;
}
.hero__scroll-mouse { width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; display: grid; justify-items: center; padding-top: 6px; }
.hero__scroll-mouse span { width: 4px; height: 8px; border-radius: 4px; background: var(--accent); animation: scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0; } }
@keyframes floaty { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,6px); } }
@media (min-width: 992px) { .hero__scroll { display: flex; } }

/* ============================================================
   SISTEMA DE REVEAL (animaciones al hacer scroll)
   ============================================================ */
.js [data-reveal], .js [data-fade] {
    opacity: 0; transform: translateY(42px);
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-46px); }
.js [data-reveal="right"] { transform: translateX(46px); }
.js [data-reveal="scale"] { transform: scale(.9); }
.js [data-reveal="zoom"]  { transform: scale(1.06); }
.js [data-reveal].is-visible, .js [data-fade].is-visible { opacity: 1; transform: none; }

/* Aparición "desde abajo" más marcada y elegante para las secciones de tipos de techo */
.js .roof-reveal [data-reveal],
.js .roof-reveal [data-fade] {
    transform: translateY(72px) scale(.985);
    transition-duration: .95s, .95s;
    transition-timing-function: cubic-bezier(.16,.84,.28,1), cubic-bezier(.16,.84,.28,1);
}
.js .roof-reveal [data-reveal].is-visible,
.js .roof-reveal [data-fade].is-visible { transform: none; }

/* ============================================================
   Botón con brillo (sheen)
   ============================================================ */
.btn--sheen { position: relative; overflow: hidden; }
.btn--sheen::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); transition: none;
}
.btn--sheen:hover::after { animation: sheen 1s ease; }
@keyframes sheen { from { left: -120%; } to { left: 140%; } }

/* Micro-interacciones extra */
.service-card, .roof-card, .seller-card, .testimonial, .why-card, .gallery-card, .stat-card { will-change: transform; }
.section__title { position: relative; }

/* ============================================================
   Junk Removal — dumpster + electroimán que levanta escombros
   ============================================================ */
.junk__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .junk__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.junk__content p { color: var(--slate-600); }
.junk__stage { position: relative; min-height: 320px; display: flex; align-items: flex-end; justify-content: flex-end; }
.junk__dumpster { width: 100%; max-width: 480px; height: auto; display: block; position: relative; z-index: 2;
    filter: drop-shadow(0 24px 26px rgba(7,10,18,.32)); }
.junk__stage.is-visible .junk__dumpster { animation: dumpRoll 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dumpRoll { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }

.junk__crane { position: absolute; top: 0; left: 4%; width: 72px; height: 150px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; }
.junk__cable { width: 3px; height: 60px; background: linear-gradient(#9aa1ab, #5B6470); }
.junk__magnet { position: relative; line-height: 0; filter: drop-shadow(0 6px 8px rgba(7,10,18,.3)); }
.junk__spark { position: absolute; left: 50%; bottom: -7px; width: 20px; height: 20px; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,.95), rgba(245,166,35,0) 70%); opacity: 0; }
.junk__bit { position: absolute; bottom: 4px; width: 13px; height: 4px; background: #7c8492; border-radius: 1px; opacity: 0; z-index: 1; }
.junk__bit--1 { left: 20px; }
.junk__bit--2 { left: 36px; width: 6px; height: 6px; border-radius: 50%; }
.junk__bit--3 { left: 8px; width: 15px; height: 3px; }

.junk__stage.is-visible .junk__magnet  { animation: magBob 3.4s ease-in-out infinite; }
.junk__stage.is-visible .junk__spark   { animation: magSpark 3.4s ease-in-out infinite; }
.junk__stage.is-visible .junk__bit--1  { animation: bitLift 3.4s ease-in-out infinite; }
.junk__stage.is-visible .junk__bit--2  { animation: bitLift 3.4s ease-in-out .18s infinite; }
.junk__stage.is-visible .junk__bit--3  { animation: bitLift 3.4s ease-in-out .36s infinite; }
@keyframes magBob { 0%, 100% { transform: translateY(0); } 40%, 70% { transform: translateY(34px); } }
@keyframes magSpark { 0%, 38% { opacity: 0; transform: translateX(-50%) scale(.5); } 50% { opacity: 1; transform: translateX(-50%) scale(1); } 70% { opacity: .5; } 82%, 100% { opacity: 0; } }
@keyframes bitLift {
    0%, 34% { opacity: 0; transform: translateY(0); }
    42% { opacity: 1; transform: translateY(0); }
    56% { opacity: 1; transform: translateY(-48px); }
    72% { opacity: 1; transform: translateY(-48px); }
    84% { opacity: 0; transform: translateY(-56px); }
    100% { opacity: 0; }
}

/* ============================================================
   Drive band — la camioneta cruza arrastrando un letrero (scroll)
   ============================================================ */
.drive-band { position: relative; overflow: hidden; height: 210px; background: linear-gradient(180deg, var(--slate-50), #fff); }
.drive-band__road { position: absolute; left: 0; right: 0; bottom: 48px; height: 4px;
    background: repeating-linear-gradient(90deg, var(--slate-300) 0 30px, transparent 30px 60px); }
.drive-band__rig { position: absolute; bottom: 36px; left: 0; display: flex; align-items: center;
    transform: translateX(-45vw); will-change: transform; }
.drive-band__sign { order: 0; background: var(--brand-blue); color: #fff; font-weight: 800; letter-spacing: .01em;
    padding: .6rem 1.1rem; border-radius: 8px; white-space: nowrap; font-size: .92rem; transform: translateY(-30px);
    box-shadow: 0 10px 18px rgba(7,10,18,.2); position: relative; }
.drive-band__sign::after { content: ''; position: absolute; left: 50%; bottom: -16px; width: 2px; height: 16px; background: #2A2F37; }
.drive-band__rope { order: 1; width: 30px; height: 3px; background: #2A2F37; margin: 0 2px 22px; align-self: flex-end; }
.drive-band__truck { order: 2; height: 124px; width: auto; display: block; filter: drop-shadow(0 12px 10px rgba(7,10,18,.22)); }
@media (max-width: 600px) { .drive-band { height: 150px; } .drive-band__truck { height: 86px; } .drive-band__sign { font-size: .76rem; padding: .45rem .8rem; } }

/* ============================================================
   Hero a una sola columna (sin formulario) + botón-regalo + modal
   ============================================================ */
.hero__grid--solo { grid-template-columns: 1fr !important; }
.hero__grid--solo .hero__content { max-width: 720px; }
.hero__grid--solo .hero__lead { font-size: 1.15rem; }

/* Botón flotante "regalo" */
.gift-fab {
    position: fixed; left: 22px; bottom: 24px; z-index: 60;
    display: inline-flex; align-items: center; gap: 0;
    width: 62px; height: 62px; padding: 0; border: none; cursor: pointer;
    border-radius: 50%; background: var(--brand-blue); color: #fff;
    box-shadow: 0 12px 28px rgba(206,32,41,.42);
    transform-origin: bottom center;
    animation: giftWiggle 2.8s ease-in-out infinite;
}
.gift-fab__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; }
.gift-fab__icon svg { width: 28px; height: 28px; }
.gift-fab__ribbon {
    position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
    background: var(--accent); color: #1A1205; font-weight: 800; font-size: .72rem; letter-spacing: .02em;
    padding: .32rem .6rem; border-radius: 7px; white-space: nowrap; box-shadow: 0 8px 16px rgba(7,10,18,.25); pointer-events: none;
}
.gift-fab__ribbon::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--accent); }
.gift-fab:hover { animation: none; transform: scale(1.08); box-shadow: 0 16px 34px rgba(206,32,41,.5); }
.gift-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes giftWiggle {
    0%, 64%, 100% { transform: rotate(0); }
    68% { transform: rotate(-11deg); } 72% { transform: rotate(9deg); }
    76% { transform: rotate(-7deg); } 80% { transform: rotate(5deg); }
    84% { transform: rotate(-3deg); } 88% { transform: rotate(0); }
}
@media (max-width: 600px) { .gift-fab { width: 56px; height: 56px; left: 16px; bottom: 18px; } .gift-fab__icon { width: 56px; height: 56px; } }

/* Modal del estimado */
.estimate-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.estimate-modal[hidden] { display: none; }
.estimate-modal__overlay { position: absolute; inset: 0; background: rgba(7,10,18,.62); backdrop-filter: blur(4px); animation: estFade .25s ease both; }
.estimate-modal__card {
    position: relative; z-index: 2; width: 100%; max-width: 440px; background: #fff; color: var(--slate-900);
    border-radius: var(--radius-lg); padding: 1.9rem 1.6rem 1.5rem; box-shadow: 0 40px 80px rgba(7,10,18,.5);
    animation: estPop .35s cubic-bezier(.2,.8,.25,1) both;
}
.estimate-modal__close { position: absolute; top: .7rem; right: .7rem; background: var(--slate-100); border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--slate-600); }
.estimate-modal__close:hover { background: var(--slate-200); color: var(--slate-900); }
.estimate-modal__head { text-align: center; margin-bottom: 1.25rem; }
.estimate-modal__gift { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 50%; background: rgba(206,32,41,.1); color: var(--brand-blue); margin-bottom: .6rem; }
.estimate-modal__gift svg { width: 28px; height: 28px; }
.estimate-modal__head h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.estimate-modal__head p { color: var(--slate-500); font-size: .9rem; }
.estimate-modal .form-control { background: var(--slate-50); }
.estimate-modal__fine { font-size: .72rem; color: var(--slate-400); margin-top: .75rem; text-align: center; }
@keyframes estFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes estPop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================
   Trust drive — la camioneta arrastra un tendedero con los sellos
   ============================================================ */
.trust-drive { position: relative; overflow: hidden; height: 220px;
    background: linear-gradient(180deg, #fff, var(--slate-50)); border-bottom: 1px solid var(--slate-100); }
.trust-drive__title { position: absolute; top: 20px; left: 0; right: 0; text-align: center;
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-400); font-weight: 700; z-index: 1; }
.trust-drive__road { position: absolute; left: 0; right: 0; bottom: 42px; height: 4px;
    background: repeating-linear-gradient(90deg, var(--slate-300) 0 30px, transparent 30px 60px); }
.trust-drive__rig { position: absolute; bottom: 30px; left: 0; display: flex; align-items: flex-end;
    transform: translateX(-72vw); will-change: transform; }
.trust-drive__truck { order: 3; height: 122px; width: auto; display: block; filter: drop-shadow(0 12px 10px rgba(7,10,18,.22)); }
.trust-drive__hitch { order: 2; width: 16px; height: 3px; background: #2A2F37; align-self: flex-end; margin-bottom: 34px; }

.trust-line { order: 1; position: relative; display: flex; align-items: flex-start; gap: 20px; padding-top: 16px; margin-bottom: 50px; }
.trust-line__rope { position: absolute; top: 8px; left: 6px; right: -8px; height: 2px; background: #2A2F37; border-radius: 2px; }
.trust-chip { position: relative; margin-top: 22px; display: inline-flex; align-items: center; gap: .55rem;
    background: linear-gradient(180deg, #fff, var(--slate-50)); border: 1px solid var(--slate-200);
    box-shadow: 0 14px 26px rgba(7,10,18,.16), inset 0 1px 0 #fff;
    color: var(--slate-800); font-weight: 700; font-size: .82rem; white-space: nowrap;
    padding: .45rem .95rem .45rem .45rem; border-radius: 12px; transform-origin: top center; --rot: 0deg;
    animation: chipSway 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.trust-chip__ico { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center;
    background: rgba(206,32,41,.1); color: var(--brand-blue); flex-shrink: 0; }
.trust-chip__ico--amber { background: rgba(245,166,35,.16); color: #B7791F; }
.trust-chip__ico svg { width: 15px; height: 15px; }
.trust-chip::before { content: ''; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: #8a93a1; transform: translateX(-50%); }
.trust-chip::after { content: ''; position: absolute; left: 50%; top: -26px; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FBBF24, var(--accent)); border: 1px solid rgba(122,78,0,.35);
    box-shadow: 0 1px 3px rgba(7,10,18,.35); transform: translateX(-50%); }
@keyframes chipSway { 0%, 100% { transform: rotate(calc(var(--rot) - 1.8deg)); } 50% { transform: rotate(calc(var(--rot) + 1.8deg)); } }
@media (max-width: 700px) {
    .trust-drive { height: 180px; }
    .trust-drive__truck { height: 92px; }
    .trust-chip { font-size: .7rem; padding: .35rem .7rem .35rem .35rem; }
    .trust-chip__ico { width: 22px; height: 22px; border-radius: 7px; }
    .trust-chip__ico svg { width: 12px; height: 12px; }
    .trust-line { gap: 12px; }
}

/* ============================================================
   Motion pass — más vida (subrayado, zoom al revelar, flotación)
   ============================================================ */
/* Subrayado acento que crece bajo cada título de sección */
.section__head .section__title::after {
    content: ''; display: block; width: 60px; height: 4px; margin: 1rem auto 0; border-radius: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: center;
    transition: transform .7s cubic-bezier(.2,.8,.2,1) .12s;
}
.section__head.is-visible .section__title::after { transform: scaleX(1); }

/* Ken-Burns sutil al revelar las fotos de techo */
.roof-detail__media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.js .roof-detail:not(.is-visible) .roof-detail__media img { transform: scale(1.12); }
.roof-detail__media:hover img { transform: scale(1.05); }

/* Flotación continua de los números del proceso/detalle (vida perpetua) */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.roof-detail__num { animation: floatY 4.5s ease-in-out infinite; }

/* Chips de garantía: interactivos */
.guarantee-chip { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.guarantee-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(7,10,18,.12); border-color: var(--accent); }

/* ============================================================
   Marquee — franja continua de zonas de servicio
   ============================================================ */
.marquee { overflow: hidden; background: var(--slate-900); padding: 1.05rem 0; }
.marquee__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: .5rem; color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.marquee__item svg { color: var(--accent); flex-shrink: 0; }
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .55; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Parallax suave en imágenes + testimonios con vida
   ============================================================ */
/* Mosaico de fotos en Remodeling (3 trabajos distintos) */
/* Mosaico de remodelación: layout NORMAL (no absoluto) para que las imágenes
   nunca se solapen ni se recorten. Cada una crece al pasar el cursor y pasa
   al frente con su propia sombra. */
.remodel-cta__media--mosaic { overflow: visible; min-height: 0; }
.remodel-mosaic {
    position: static; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.remodel-mosaic img {
    position: static; width: 100%; height: 100%; min-height: 0; min-width: 0;
    object-fit: cover; aspect-ratio: 3 / 2; border-radius: 14px;
    box-shadow: 0 10px 24px rgba(7,10,18,.20);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.remodel-mosaic__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* Al hover: la imagen sube al frente (z-index) y crece, sin empujar a las demás */
.remodel-mosaic img:hover {
    position: relative; z-index: 3; transform: scale(1.06);
    box-shadow: 0 22px 46px rgba(7,10,18,.34);
}
@media (max-width: 600px) { .remodel-mosaic { gap: .6rem; } }
/* Contraste: la lista de specs dentro de la tarjeta azul oscura debe leerse clara */
.remodel-cta .roof-detail__specs li { color: rgba(255,255,255,.88); }

.testimonial { position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial::before { content: '\201C'; position: absolute; top: .4rem; right: 1.3rem;
    font-family: var(--font-display); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--accent); opacity: .16; pointer-events: none; }
.testimonial__avatar { transition: transform .3s ease; }
.testimonial:hover .testimonial__avatar { transform: scale(1.08) rotate(-3deg); }

/* ============================================================
   "What Each System Includes" — entrada en capas (cinemática)
   ============================================================ */
/* El contenedor solo hace fade: el movimiento lo llevan los hijos */
.js .roof-reveal .roof-detail { transform: none; }

/* Foto: entra deslizándose desde su lado (invertido en filas --rev) */
.js .roof-detail .roof-detail__media {
    opacity: 0; transform: translateX(-52px);
    transition: opacity .85s cubic-bezier(.16,.84,.28,1) .05s, transform .85s cubic-bezier(.16,.84,.28,1) .05s;
}
.js .roof-detail--rev .roof-detail__media { transform: translateX(52px); }
.js .roof-detail.is-visible .roof-detail__media { opacity: 1; transform: none; }

/* Contenido: cada bloque entra escalonado desde abajo */
.js .roof-detail__body > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .roof-detail.is-visible .roof-detail__body > * { opacity: 1; transform: none; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(1) { transition-delay: .14s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(2) { transition-delay: .22s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(3) { transition-delay: .3s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(4) { transition-delay: .38s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(5) { transition-delay: .46s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(6) { transition-delay: .54s; }
.js .roof-detail.is-visible .roof-detail__body > *:nth-child(7) { transition-delay: .64s; }

/* Stats chips: pop con rebote, uno tras otro */
.js .roof-detail .roof-stat { opacity: 0; transform: scale(.65); transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.js .roof-detail.is-visible .roof-stat { opacity: 1; transform: scale(1); }
.js .roof-detail.is-visible .roof-stat:nth-child(1) { transition-delay: .42s; }
.js .roof-detail.is-visible .roof-stat:nth-child(2) { transition-delay: .54s; }
.js .roof-detail.is-visible .roof-stat:nth-child(3) { transition-delay: .66s; }

/* Checks: cascada lateral */
.js .roof-detail .roof-detail__specs li { opacity: 0; transform: translateX(-18px); transition: opacity .45s ease, transform .45s ease; }
.js .roof-detail.is-visible .roof-detail__specs li { opacity: 1; transform: none; }
.js .roof-detail.is-visible .roof-detail__specs li:nth-child(1) { transition-delay: .6s; }
.js .roof-detail.is-visible .roof-detail__specs li:nth-child(2) { transition-delay: .7s; }
.js .roof-detail.is-visible .roof-detail__specs li:nth-child(3) { transition-delay: .8s; }
.js .roof-detail.is-visible .roof-detail__specs li:nth-child(4) { transition-delay: .9s; }
.js .roof-detail.is-visible .roof-detail__specs li:nth-child(5) { transition-delay: 1s; }

/* ============================================================
   Videos como media de tarjetas/secciones (loops de fondo)
   ============================================================ */
.roof-detail__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.gallery-card:hover video { transform: scale(1.06); }

/* Reducción de movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js [data-reveal], .js [data-fade] { opacity: 1 !important; transform: none !important; }
    .preloader { display: none !important; }
}

/* ============================================================
   Galería por tipo de techo — botón + lightbox
   ============================================================ */
.roof-detail__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.roof-detail__actions .mt-3 { margin-top: 0; }

.btn--gallery {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #0B0D12; color: #fff; border: 1.5px solid #0B0D12;
    font-weight: 700; cursor: pointer;
}
.btn--gallery:hover { background: #1d222e; border-color: #1d222e; color: #fff; }
.btn--gallery svg { flex: 0 0 auto; }
.btn--gallery__count {
    background: var(--brand-red, #CE2029); color: #fff; font-size: .72rem; font-weight: 800;
    min-width: 1.35em; padding: .1em .45em; border-radius: 999px; text-align: center; line-height: 1.35;
}

.roof-lb {
    /* Por encima de .estimate-modal (1200): jerarquía clara si ambos se abren */
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(11, 13, 18, .94);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
}
.roof-lb.is-open { opacity: 1; }
.roof-lb[hidden] { display: none; }
.roof-lb__stage { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.roof-lb__img {
    max-width: 100%; max-height: 76vh; border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.55); object-fit: contain;
    background: #000;
}
.roof-lb__meta { margin-top: .9rem; color: #E2E8F0; display: flex; flex-direction: column; gap: .15rem; }
.roof-lb__title { font-family: "Fraunces", serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.roof-lb__caption { font-size: .9rem; color: #CBD5E1; min-height: 1.2em; }
.roof-lb__count { font-size: .78rem; letter-spacing: .12em; color: #94A3B8; text-transform: uppercase; }
.roof-lb__close, .roof-lb__nav {
    position: fixed; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18);
    cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.roof-lb__close:hover, .roof-lb__nav:hover { background: var(--brand-red, #CE2029); transform: scale(1.06); }
.roof-lb__close { top: 1.1rem; right: 1.1rem; }
.roof-lb__nav--prev { left: 1.1rem; top: 50%; transform: translateY(-50%); }
.roof-lb__nav--next { right: 1.1rem; top: 50%; transform: translateY(-50%); }
.roof-lb__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.roof-lb__nav--next:hover { transform: translateY(-50%) scale(1.06); }
body.roof-lb-open { overflow: hidden; }

@media (max-width: 640px) {
    .roof-lb__nav { width: 40px; height: 40px; }
    .roof-lb__nav--prev { left: .5rem; }
    .roof-lb__nav--next { right: .5rem; }
    .roof-lb__img { max-height: 62vh; }
}

/* ============================================================
   Sección Camilo Florido — asesor comercial principal
   ============================================================ */
.camilo { scroll-margin-top: 96px; position: relative; overflow: hidden; }
.camilo::before { content: ''; position: absolute; top: -120px; right: -140px; width: 420px; height: 420px;
    border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,.12), transparent 70%); pointer-events: none; }
.camilo__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center; }

.camilo__media { position: relative; width: 100%; max-width: 420px; justify-self: center; }
.camilo__frame { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 4.6;
    background: linear-gradient(160deg, var(--slate-100), var(--slate-200)); box-shadow: 0 26px 60px rgba(7,10,18,.18); }
.camilo__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.camilo__frame::after { content: ''; position: absolute; inset: 0; border-radius: 18px;
    border: 1px solid rgba(11,13,18,.08); pointer-events: none; }
.camilo__media::before { content: ''; position: absolute; inset: 18px -14px -14px 18px; border-radius: 18px;
    border: 2px solid rgba(206,32,41,.35); z-index: -1; }
.camilo__frame-initials { display: none; }
.camilo__frame--empty { display: grid; place-items: center; }
.camilo__frame--empty .camilo__frame-initials { display: block; font-family: "Fraunces", serif; font-weight: 900;
    font-size: 5rem; color: #fff; background: linear-gradient(135deg, #0B0D12, var(--brand-blue));
    width: 100%; height: 100%; display: grid; place-items: center; }
.camilo__badge { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    background: #0B0D12; color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
    padding: .55rem 1.1rem; border-radius: 999px; box-shadow: 0 12px 28px rgba(7,10,18,.3); }
.camilo__badge svg { color: var(--accent); }

.camilo__role { font-weight: 700; color: var(--brand-blue); font-size: .95rem; margin: -0.35rem 0 1.1rem; }
.camilo__quote { position: relative; font-family: "Fraunces", serif; font-size: 1.35rem; line-height: 1.45;
    font-weight: 600; color: var(--slate-900); margin: 0 0 1rem; padding-left: 1.1rem;
    border-left: 4px solid var(--brand-blue); font-style: italic; }
.camilo__desc { color: var(--slate-600); margin-bottom: 1.35rem; max-width: 56ch; }
.camilo__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800;
    color: var(--slate-400); margin-bottom: .6rem; }
.camilo__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.35rem; }
.camilo__chip { background: #fff; border: 1px solid var(--slate-200); color: var(--slate-800);
    font-weight: 600; font-size: .82rem; padding: .4rem .8rem; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(7,10,18,.05); }
.camilo__points { list-style: none; padding: 0; margin: 0 0 1.35rem; display: grid; gap: .5rem; }
.camilo__points li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--slate-800); }
.camilo__points svg { width: 18px; height: 18px; color: var(--brand-blue); flex-shrink: 0; }
.camilo__closing { color: var(--slate-600); margin-bottom: 1.5rem; max-width: 58ch; }
.camilo__closing strong { color: var(--slate-900); }
.camilo__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.camilo__actions .btn { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 900px) {
    .camilo__grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .camilo__media { max-width: 320px; }
    .camilo__quote { font-size: 1.15rem; }
}

/* ============================================================
   Navbar — botón del asesor (avatar con campaneo)
   ============================================================ */
.navbar__advisor { position: relative; display: inline-flex; margin-right: .9rem; text-decoration: none; }
.navbar__advisor-pic { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px rgba(7,10,18,.25);
    transform-origin: top center; animation: advisorBell 5s ease-in-out infinite; background: #0B0D12; }
.navbar__advisor-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.navbar__advisor-initials { display: none; }
.navbar__advisor-pic.is-empty .navbar__advisor-initials { display: grid; place-items: center; width: 100%; height: 100%;
    color: #fff; font-weight: 800; font-size: .85rem; background: linear-gradient(135deg, #0B0D12, var(--brand-blue)); }
.navbar__advisor-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--brand-blue); border: 2px solid #fff; animation: advisorPulse 2.2s ease-in-out infinite; }
.navbar__advisor:hover .navbar__advisor-pic { animation-play-state: paused; transform: scale(1.08); transition: transform .18s ease; }
@keyframes advisorBell {
    0%, 62%, 100% { transform: rotate(0deg); }
    66% { transform: rotate(13deg); }
    72% { transform: rotate(-11deg); }
    78% { transform: rotate(8deg); }
    84% { transform: rotate(-5deg); }
    90% { transform: rotate(2deg); }
}
@keyframes advisorPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(206,32,41,.45); } 50% { box-shadow: 0 0 0 6px rgba(206,32,41,0); } }
.navbar__mobile-advisor { display: flex; align-items: center; gap: .7rem; font-weight: 700; }
.navbar__mobile-advisor .navbar__advisor-pic { width: 38px; height: 38px; animation: none; }
@media (prefers-reduced-motion: reduce) {
    .navbar__advisor-pic, .navbar__advisor-dot { animation: none; }
}
@media (max-width: 700px) {
    .trust-drive__title { font-size: .62rem; letter-spacing: .16em; padding: 0 1rem; }
}

/* Avatar de vendedor con foto rota: vuelve a la inicial */
.seller-card__avatar.is-broken::after { content: attr(data-initial); }

/* ============================================================
   Galería de videos propia (subidos desde el admin)
   ============================================================ */
.wv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
.wv-card { display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg, 16px); overflow: hidden;
    box-shadow: 0 10px 30px rgba(7,10,18,.07); transition: transform .2s ease, box-shadow .2s ease; }
.wv-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(7,10,18,.16); }
.wv-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: #0B0D12; overflow: hidden; }
.wv-card__media img, .wv-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-card__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: rgba(206,32,41,.92); box-shadow: 0 8px 22px rgba(7,10,18,.4);
    transition: transform .2s ease, background .2s ease; }
.wv-card:hover .wv-card__play { transform: scale(1.12); background: var(--brand-red, #CE2029); }
.wv-card__body { display: block; padding: .9rem 1rem 1.1rem; }
.wv-card__title { display: block; font-weight: 800; color: var(--slate-900); margin-bottom: .25rem; }
.wv-card__desc { display: block; font-size: .85rem; color: var(--slate-500); line-height: 1.5; }
.video-modal__desc { color: #CBD5E1; font-size: .9rem; text-align: center; margin: .85rem auto 0; max-width: 60ch; min-height: 1.2em; }

/* ============================================================
   Tipos de metal roofing (editables desde el admin)
   ============================================================ */
.metal-types { margin: 0 0 1.35rem; padding: 1rem 1.15rem; border-radius: 12px;
    background: linear-gradient(180deg, #fff, var(--slate-50)); border: 1px solid var(--slate-200); }
.metal-types__label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800;
    color: var(--slate-400); margin-bottom: .7rem; }
.metal-type { display: grid; gap: .1rem; padding: .55rem 0; border-bottom: 1px dashed var(--slate-200); }
.metal-type:last-child { border-bottom: 0; padding-bottom: 0; }
.metal-type:first-of-type { padding-top: 0; }
.metal-type__name { font-weight: 800; color: var(--brand-blue); font-size: .92rem; }
.metal-type__desc { font-size: .84rem; color: var(--slate-600); line-height: 1.5; }