/* ============================================================
   BRAKES UTV — Stylesheet
   ============================================================ */


/* ------------------------------------------------------------
   Fuente custom
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Newtown';
    src: url('assets/Newtown Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ------------------------------------------------------------
   Variables
   ------------------------------------------------------------ */

:root {
    --bg: #061a33;
    --bg-2: #04132a;
    --surface: #0c2a52;
    --surface-2: #10356a;
    --line: #173d6b;
    --line-2: #20507f;
    --text: #f4f1ea;
    --muted: #8c9bb4;
    --dim: #5a6a85;
    --red: #e6262c;
    --red-2: #ff3a40;
    --navy: #0a2547;
    --navy-2: #102e58;
    --navy-3: #163669;
    --white: #ffffff;
    --font-display: "Newtown", serif;
    --font-body: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --max: 1400px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}


/* ------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

::selection {
    background: var(--red);
    color: #0a0a0a;
}


/* ------------------------------------------------------------
   Efectos de fondo (grain + grid)
   ------------------------------------------------------------ */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: .08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
}


/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */

.display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: .85;
    text-transform: uppercase;
}

.mono {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .wrap {
        padding: 0 20px;
    }
}


/* ------------------------------------------------------------
   Nav
   ------------------------------------------------------------ */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6, 26, 51, .82);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    background: var(--navy);
    display: grid;
    place-items: center;
    border: 1px solid var(--navy-3);
    overflow: hidden;
    flex-shrink: 0;
}

.brand-mark img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: .95;
}

.brand-text b {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: .02em;
}

.brand-text small {
    font-family: var(--font-mono);
    font-size: .62rem;
    color: var(--muted);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.nav ul {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul a {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding: 6px 0;
    transition: color .25s var(--ease);
}

.nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--red);
    transition: width .35s var(--ease);
}

.nav ul a:hover {
    color: var(--red);
}

.nav ul a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
}

@media (max-width: 980px) {
    .nav ul {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .menu-toggle .bars {
        width: 24px;
        height: 14px;
        position: relative;
    }

    .menu-toggle .bars::before,
    .menu-toggle .bars::after,
    .menu-toggle .bars i {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--text);
    }

    .menu-toggle .bars::before {
        top: 0;
    }

    .menu-toggle .bars i {
        top: 6px;
    }

    .menu-toggle .bars::after {
        bottom: 0;
        background: var(--red);
    }
}


/* ------------------------------------------------------------
   Menú mobile
   ------------------------------------------------------------ */

.mobile-menu {
    position: fixed;
    inset: 72px 0 0 0;
    z-index: 40;
    background: var(--bg);
    transform: translateY(calc(-100% - 80px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
    padding: 32px 24px;
    border-bottom: 1px solid var(--line);
}

.mobile-menu.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .45s var(--ease), visibility 0s linear 0s;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-menu a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 32px;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.mobile-menu a small {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--muted);
    letter-spacing: .2em;
}


/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
    position: relative;
    padding: 60px 0 80px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background-image: url('assets/images/hero-background3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(6, 26, 51, .93) 0%, rgba(6, 26, 51, .72) 55%, rgba(6, 26, 51, .4) 100%),
        linear-gradient(to bottom, rgba(6, 26, 51, .2) 0%, rgba(6, 26, 51, .55) 100%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: end;
    position: relative;
    z-index: 1;
}

@media (min-width: 980px) {
    .hero-grid {
        grid-template-columns: 1.4fr .8fr;
        gap: 64px;
    }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(64px, 12vw, 128px);
    line-height: .82;
    font-weight: 400;
    margin: 0;
    letter-spacing: -.01em;
}

.hero h1 .row {
    display: block;
    overflow: hidden;
}

.hero h1 .row span {
    display: inline-block;
    transform: translateY(110%);
    animation: rise .9s var(--ease) forwards;
}

.hero h1 .row:nth-child(1) span {
    animation-delay: .05s;
}

.hero h1 .row:nth-child(2) span {
    animation-delay: .18s;
}

.hero h1 .row:nth-child(3) span {
    animation-delay: .32s;
}

@keyframes rise {
    to {
        transform: translateY(0);
    }
}

.hero h1 .accent {
    color: var(--red);
    font-style: italic;
    position: relative;
}

.hero h1 .strike {
    -webkit-text-stroke: 2px var(--text);
    color: transparent;
    transition: color .4s var(--ease);
}

.hero h1 .strike:hover {
    color: var(--text);
}

.hero-sub {
    margin-top: 36px;
    max-width: 560px;
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--muted);
    line-height: 1.55;
}

.hero-sub strong {
    color: var(--text);
    font-weight: 500;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    flex-wrap: wrap;
}


/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    border: 1px solid var(--line-2);
}

.btn.primary {
    background: var(--red);
    color: #0a0a0a;
    border-color: var(--red);
}

.btn.primary:hover {
    background: var(--white);
    border-color: var(--white);
    transform: translateY(-2px);
}

.btn.ghost {
    color: var(--text);
    background: transparent;
}

.btn.ghost:hover {
    border-color: var(--red);
    color: var(--red);
}

.btn .arrow {
    display: inline-block;
    width: 18px;
    height: 8px;
    position: relative;
}

.btn .arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
}

.btn .arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}


/* ------------------------------------------------------------
   Hero meta (stats)
   ------------------------------------------------------------ */

.hero-meta {
    border-left: 1px solid var(--line);
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
}

@media (max-width: 980px) {
    .hero {
        background-image: none;
        .hero-meta {
            border-left: 0;
            padding-left: 0;
            border-top: 1px solid var(--line);
            padding-top: 32px;
        }
    }
}

.hero-meta .stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.hero-meta .stat .num {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: .9;
    color: var(--text);
}

.hero-meta .stat .num em {
    color: var(--red);
    font-style: normal;
}

.hero-meta .stat .lbl {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    max-width: 130px;
    line-height: 1.4;
}


/* ------------------------------------------------------------
   Hero visual / fotos
   ------------------------------------------------------------ */

.photo>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease), filter .6s var(--ease);
    filter: saturate(1.05) contrast(1.04);
}

.photo {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.photo .tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 6px 10px;
    background: var(--red);
    color: #0a0a0a;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}

.photo .coord {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #f4f1ea;
    background: rgba(4, 19, 42, .7);
    padding: 6px 8px;
    backdrop-filter: blur(4px);
}

.photo .frame {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
    z-index: 2;
}

.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 19, 42, 0) 40%, rgba(4, 19, 42, .6) 100%);
}


.placeholder {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, #1a1a1a, #0e0e0e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.placeholder .ph-frame {
    position: absolute;
    inset: 14px;
    border: 1px dashed var(--line-2);
}

.placeholder .ph-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    background: var(--red);
    color: #0a0a0a;
    font-weight: 700;
}

.placeholder .ph-coord {
    position: absolute;
    bottom: 14px;
    right: 14px;
    color: var(--muted);
}

.hero-tape {
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: -1px;
    height: 38px;
    background: repeating-linear-gradient(135deg, var(--red) 0 18px, #0a0a0a 18px 22px, var(--white) 22px 40px, #0a0a0a 40px 44px);
    transform: rotate(-1.2deg);
    z-index: 2;
    opacity: .96;
}


/* ------------------------------------------------------------
   Secciones generales
   ------------------------------------------------------------ */

section {
    position: relative;
    z-index: 1;
    padding: 80px 0;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
    section {
        padding: 80px 0;
    }
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 64px;
    flex-wrap: wrap;
}

.sec-head h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 104px);
    line-height: .88;
    margin: 0;
    letter-spacing: -.005em;
    max-width: 11ch;
}

.sec-head h2 .accent {
    color: var(--red);
    font-style: italic;
}


/* ------------------------------------------------------------
   Nosotros
   ------------------------------------------------------------ */

.about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

@media (min-width: 980px) {
    .about {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
}

.about-heading h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 104px);
    line-height: .88;
    margin: 0;
    letter-spacing: -.005em;
}

.about-heading h2 .accent {
    color: var(--red);
    font-style: italic;
}

.about p.lead {
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.4;
    color: var(--text);
}

.about p.lead .hl {
    background: linear-gradient(transparent 65%, rgba(230, 38, 44, .35) 65%);
}

.about p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}


/* ------------------------------------------------------------
   Servicios
   ------------------------------------------------------------ */

.services-list {
    border-top: 1px solid var(--line);
}

.service {
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background .35s var(--ease);
}

.service:hover {
    background: var(--bg-2);
}

.service-head {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 36px 0;
    cursor: pointer;
}

@media (max-width: 720px) {
    .service-head {
        grid-template-columns: 60px 1fr auto;
        padding: 24px 0;
        gap: 10px;
    }

    .service-toggle {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 400px) {
    .service-head {
        grid-template-columns: 40px 1fr auto;
        gap: 6px;
    }

    .service-toggle {
        width: 30px;
        height: 30px;
    }
}

.service-num {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
    letter-spacing: .16em;
    align-self: start;
    padding-top: 8px;
}

.service-num b {
    display: block;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 34px;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 6px;
}

.service-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 6vw, 64px);
    line-height: .92;
    font-weight: 500;
    margin: 0;
    min-width: 0;
    transition: transform .4s var(--ease), color .4s var(--ease);
}

.service:hover .service-title {
    transform: translateX(14px);
    color: var(--red);
}

.service-title small {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-2);
    position: relative;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.service:hover .service-toggle {
    background: var(--red);
    border-color: var(--red);
}

.service-toggle::before,
.service-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--text);
    transition: background .25s var(--ease), transform .35s var(--ease);
}

.service-toggle::before {
    width: 14px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.service-toggle::after {
    width: 1px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.service:hover .service-toggle::before,
.service:hover .service-toggle::after {
    background: #0a0a0a;
}

.service.open .service-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.service-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease);
}

.service.open .service-body {
    grid-template-rows: 1fr;
}

.service-body>div {
    overflow: hidden;
}

.service-body-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 0 48px 104px;
    color: var(--muted);
}

@media (max-width: 720px) {
    .service-body-inner {
        padding-left: 74px;
        padding-bottom: 28px;
    }
}

@media (min-width: 980px) {
    .service-body-inner {
        grid-template-columns: 1.3fr 1fr;
        padding-left: 104px;
    }
}

.service-body p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 52ch;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.service-tags span {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid var(--line-2);
    padding: 8px 12px;
    color: var(--text);
}

.service-icon {
    flex-shrink: 0;
    color: var(--red);
}


/* ------------------------------------------------------------
   Galería
   ------------------------------------------------------------ */

.gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 14px;
}

@media (max-width: 720px) {
    .gallery {
        grid-auto-rows: 80px;
        gap: 10px;
    }
}

.gallery .cell {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .5s var(--ease), border-color .35s var(--ease);
}

.gallery .cell:hover {
    transform: translateY(-4px);
    border-color: var(--red);
}

.gallery .cell:hover>img {
    transform: scale(1.06);
    filter: saturate(1.15) contrast(1.08);
}

.gallery .cell .tag {
    font-size: .62rem;
}

.c-1 {
    grid-column: span 7;
    grid-row: span 4;
}

.c-2 {
    grid-column: span 5;
    grid-row: span 3;
}

.c-3 {
    grid-column: span 5;
    grid-row: span 4;
}

.c-4 {
    grid-column: span 4;
    grid-row: span 3;
}

.c-5 {
    grid-column: span 3;
    grid-row: span 3;
}

.c-6 {
    grid-column: span 4;
    grid-row: span 3;
}

.c-7 {
    grid-column: span 8;
    grid-row: span 3;
}

@media (max-width: 720px) {

    .c-1,
    .c-2,
    .c-3,
    .c-4,
    .c-5,
    .c-6,
    .c-7 {
        grid-column: span 12;
        grid-row: span 3;
    }

    .c-1 {
        grid-row: span 4;
    }
}


/* ------------------------------------------------------------
   Testimonios
   ------------------------------------------------------------ */

.testi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 880px) {
    .testi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

.testi {
    border: 1px solid var(--line);
    padding: 36px;
    background: var(--surface);
    position: relative;
    transition: transform .4s var(--ease), border-color .4s var(--ease);
}

.testi:hover {
    transform: translateY(-4px);
    border-color: var(--red);
}

.testi .q-mark {
    position: absolute;
    top: 18px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 96px;
    line-height: .7;
    color: var(--red);
    opacity: .16;
}

.testi blockquote {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.05;
    margin: 0 0 28px;
    color: var(--text);
}

.testi blockquote .accent {
    color: var(--red);
    font-style: italic;
}

.testi cite {
    display: flex;
    align-items: center;
    gap: 14px;
    font-style: normal;
}

.testi .avatar {
    width: 44px;
    height: 44px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--red);
}

.testi cite .who b {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .02em;
}

.testi cite .who small {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    color: var(--muted);
    text-transform: uppercase;
}

.reviews-bar {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.reviews-bar .group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.reviews-bar .stars {
    display: flex;
    gap: 4px;
    color: var(--white);
}

.reviews-bar .stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.reviews-bar .ftxt {
    font-family: var(--font-display);
    font-size: 36px;
}

.reviews-bar .ftxt em {
    color: var(--red);
    font-style: normal;
}

.reviews-bar small {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ------------------------------------------------------------
   Contacto
   ------------------------------------------------------------ */

.contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 980px) {
    .contact {
        grid-template-columns: 1fr 1.1fr;
        gap: 48px;
        align-items: stretch;
    }
}

.contact-info {
    background: var(--navy);
    border: 1px solid var(--navy-3);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
}

.contact-info::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 32px;
    width: 100px;
    height: 3px;
    background: var(--red);
}

.ci-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ci-row .label {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ci-row .label::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--red);
}

.ci-row .val {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.1;
    color: var(--text);
    transition: color .25s var(--ease);
}

.ci-row a.val:hover {
    color: var(--red);
}

.hours {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .06em;
    padding-top: 6px;
}

.hours .d {
    color: var(--text);
}

.hours .h {
    color: var(--muted);
    text-align: right;
}

.hours .closed {
    color: var(--red);
}

.contact-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}


/* ------------------------------------------------------------
   Mapa
   ------------------------------------------------------------ */

.map {
    position: relative;
    min-height: 520px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #0e0e0e;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: none;
    position: absolute;
    inset: 0;
}

.map .pin {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--navy);
    border: 1px solid var(--line-2);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    max-width: 240px;
}

.map .pin .lab {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
}

.map .pin .addr {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.1;
    color: var(--text);
}


/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

footer {
    padding: 80px 0 32px;
    background: #03101f;
    position: relative;
    z-index: 1;
}

.foot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 980px) {
    .foot-grid {
        grid-template-columns: 1.4fr .8fr .8fr .8fr;
    }
}

.foot h4 {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
}

.foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot a {
    transition: color .2s var(--ease);
}

.foot a:hover {
    color: var(--red);
}

.foot-brand .bigword {
    font-family: var(--font-display);
    font-size: clamp(72px, 9vw, 132px);
    line-height: .85;
    margin: 0 0 12px;
    letter-spacing: -.01em;
}

.foot-brand .bigword span {
    color: var(--red);
    font-style: italic;
}

.foot-brand p {
    color: var(--muted);
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.55;
}


/* ------------------------------------------------------------
   Animaciones reveal
   ------------------------------------------------------------ */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal.d-1 {
    transition-delay: .08s;
}

.reveal.d-2 {
    transition-delay: .16s;
}

.reveal.d-3 {
    transition-delay: .24s;
}

.reveal.d-4 {
    transition-delay: .32s;
}

.reveal.d-5 {
    transition-delay: .4s;
}

.reveal.d-6 {
    transition-delay: .48s;
}


/* ------------------------------------------------------------
   WhatsApp FAB
   ------------------------------------------------------------ */

.wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #073;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 6px rgba(37, 211, 102, .18);
    transition: transform .25s var(--ease);
}

.wa-fab:hover {
    transform: scale(1.08);
}

.wa-fab img {
    width: 30px;
    height: 30px;
}


/* ------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(4, 19, 42, .96);
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
    cursor: zoom-out;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s linear 0s;
}

.lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border: 1px solid var(--line);
    transform: scale(.95);
    transition: transform .35s var(--ease);
}

.lightbox.open .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-2);
    background: var(--navy);
    color: var(--text);
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.lightbox-close:hover {
    background: var(--red);
    border-color: var(--red);
}