:root {
    --color-primary: #004A95;
    --color-accent: #0066CC;
    --color-black: #0A0A0A;
    --color-dark: #111111;
    --color-dark2: #161616;
    --color-gray: #CFCFCF;
    --color-white: #FFFFFF;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --container: 1120px;
}

/* Reset básico */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background: var(--color-black);
    color: var(--color-gray);
}

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

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

.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

/* TOPBAR */
.topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--color-black) 40%, rgba(0,74,149,.85) 100%);
    border-bottom: 2px solid rgba(0,74,149,.8);
    backdrop-filter: blur(8px);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;   /* evita que crezca */
    margin-right: 10px; /* menos espacio a la derecha */
}

.nav--desktop{
  display:flex;
  align-items:center;
  gap: 18px;
  flex: 1;               /* 🔥 el menú toma el espacio central */
  justify-content: center;
  min-width: 0;          /* permite que se comprima correctamente */
}

.brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-primary), #012b55);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

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

.brand__logo{
  height: 40px;      /* súbelo a 32 o 36 */
  width: auto;
  display:block;
  /* si tu logo tiene fondo transparente, esto lo hace lucir mejor en dark */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.brand__name{
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
}


.brand__name {
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--color-white);
}

/* Nav */
.nav {
    display: flex;
    gap: 22px;
    align-items: center;
}

.nav__link {
    font-weight: 700;
    letter-spacing: .03em;
    font-size: 14px;
    color: rgba(255,255,255,.9);
    padding: 8px 6px;
    position: relative;
    white-space: nowrap;   /* 🔥 evita que parta en 2 líneas */
}

    .nav__link:hover {
        color: var(--color-accent);
        text-shadow: 0 0 8px rgba(0,102,204,.65);
    }

    .nav__link::after {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 2px;
        height: 2px;
        background: transparent;
        transition: .2s;
    }

    .nav__link:hover::after {
        background: rgba(0,102,204,.9);
    }

/* Actions */
.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iconbtn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--color-white);
}

    .iconbtn:hover {
        border-color: rgba(0,102,204,.7);
        box-shadow: 0 0 0 3px rgba(0,102,204,.15);
    }

/* Idioma */
.lang {
    position: relative;
}

.lang__btn {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--color-white);
    cursor: pointer;
}

.lang__menu {
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 160px;
    border-radius: 12px;
    background: var(--color-dark2);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding: 6px;
    display: none;
}

    .lang__menu.is-open {
        display: block;
    }

.lang__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    text-align: left;
}

    .lang__item:hover {
        background: rgba(0,74,149,.25);
    }

/* Hamburger */
.hamburger {
    width: 40px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display: none;
    cursor: pointer;
    padding: 0;
}

    .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: rgba(255,255,255,.9);
        margin: 4px auto;
    }

/* Mobile nav */
.nav--mobile {
    display: none;
    padding: 10px 0 14px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

    .nav--mobile.is-open {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .nav--mobile .nav__link {
        padding: 10px 10px;
        border-radius: 12px;
        background: rgba(255,255,255,.03);
    }

/* HERO */
.hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,74,149,.25)), radial-gradient(circle at 70% 40%, rgba(0,102,204,.20), transparent 55%), url("https://images.unsplash.com/photo-1509389807183-f0fbe962761a?q=80&w=1375&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
    filter: saturate(.9) contrast(1.05);
    transform: scale(1.00);
}

.hero__content {
    position: relative;
    padding: 56px 0;
}

.panel {
    max-width: 720px;
    background: rgba(10,10,10,.72);
    border: 1px solid rgba(255,255,255,.10);
    border-top: 3px solid rgba(0,102,204,.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px;
}

.panel--tight {
    padding: 20px;
}

.panel__title {
    margin: 0 0 10px 0;
    color: var(--color-white);
    font-size: 40px;
    letter-spacing: .02em;
}

.panel__subtitle {
    margin: 0 0 18px 0;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
    font-size: 16px;
}

.panel__titleSm {
    margin: 0 0 10px 0;
    color: var(--color-white);
    font-size: 22px;
}

.panel__text {
    margin: 0 0 14px 0;
    line-height: 1.6;
    color: rgba(255,255,255,.78);
}

.panel__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .02em;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: rgba(255,255,255,.12);
}

    .btn-primary:hover {
        background: var(--color-accent);
    }

.btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.92);
}

    .btn-ghost:hover {
        border-color: rgba(0,102,204,.7);
        box-shadow: 0 0 0 3px rgba(0,102,204,.12);
    }

/* SECTIONS */
.section {
    padding: 64px 0;
    background: var(--color-black);
}

.section--dark {
    background: linear-gradient(180deg, var(--color-black), #050b12 70%, var(--color-black));
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.section__head {
    margin-bottom: 22px;
}

.section__title {
    margin: 0 0 8px 0;
    font-size: 30px;
    color: var(--color-white);
    letter-spacing: .04em;
}

.section__desc {
    margin: 0;
    color: rgba(255,255,255,.72);
    max-width: 820px;
    line-height: 1.6;
}

/* Cards / grids */
.grid {
    display: grid;
    gap: 16px;
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.card {
    background: var(--color-dark);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid rgba(0,74,149,.9);
    border-radius: var(--radius);
    padding: 18px;
}

.card--accent {
    border-left-color: rgba(0,102,204,.95);
}

.card__title {
    margin: 0 0 10px 0;
    color: var(--color-white);
}

.card__text {
    margin: 0;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
}

.bullets {
    margin: 0;
    padding-left: 18px;
    color: rgba(255,255,255,.78);
    line-height: 1.75;
}

    .bullets li {
        margin: 6px 0;
    }

/* Media row placeholders */
.mediaRow {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.mediaBox {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--color-dark);
}

.mediaBox__img {
    height: 180px;
    background: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("../img/infraredsens2.png");
    background-size: cover;
    background-position: center;
    padding-top: 60%; 
}

.mediaBox__img--2 {
    background-image: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("../img/insulatingfluidanalysis.png");
    background-size: 90% auto;
    background-size: cover;
    background-position: center 30%;
    padding-top: 60%; 
}

.mediaBox__img--3 {
    background-image: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("https://images.unsplash.com/photo-1595856619767-ab739fa7daae?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    padding-top: 60%; 
}

.mediaBox__img--4 {
    background-image: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("../img/padmountedtransformerrelay.png");
    padding-top: 60%; 
}

.mediaBox__img--5 {
    background-image: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("../img/harness.png");
    padding-top: 60%; 
    background-position: center 30%;
}

.mediaBox__img--6 {
    background-image: linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.65)), url("../img/powerqualityanalysis.png");
    padding-top: 60%;
}

/* Split blocks */
.split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 18px;
}

.split--reverse {
    grid-template-columns: 1fr 1.2fr;
}

.split__visual {
    min-height: 360px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,74,149,.22)), url("https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&w=2000&q=80");
    background-size: cover;
    background-position: center;
}

.split__visual--zigzag {
    background-image: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,74,149,.22)), url("https://images.unsplash.com/photo-1487875961445-47a00398c267?auto=format&fit=crop&w=2000&q=80");
}

.split__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Simple list */
.list {
    display: grid;
    gap: 6px;
    margin: 10px 0 14px 0;
}

.list__item {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
}

/* Gallery placeholders */
.gallery {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.gallery__item {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("https://images.unsplash.com/photo-1509390144018-eeaf65052242?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
}

.gallery__item-1 {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("https://images.unsplash.com/photo-1555963966-b7ae5404b6ed?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
}

.gallery__item-2 {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("https://images.unsplash.com/photo-1509390221805-d1c887a72a00?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
}

.gallery__item-3 {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("https://images.unsplash.com/photo-1509390373685-579356742d95?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
}

.gallery__item-4 {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("../img/infraredsens.png");
    background-size: cover;
    background-position: center;
}

.gallery__item-5 {
    height: 180px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(0,74,149,.18), rgba(0,0,0,.60)), url("https://images.unsplash.com/photo-1586283383807-cb97cb037450?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: center;
}

/* Form */
.formWrap {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 18px;
    margin-top: 18px;
}

.form {
    background: rgba(17,17,17,.88);
    border: 1px solid rgba(255,255,255,.10);
    border-top: 3px solid rgba(0,102,204,.9);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.form__row {
    margin-bottom: 12px;
}

.form__label {
    display: block;
    margin: 0 0 6px 0;
    font-weight: 700;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.form__input, .form__textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.35);
    color: rgba(255,255,255,.90);
    padding: 12px 12px;
    outline: none;
}

.form__textarea {
    min-height: 110px;
    resize: vertical;
}

    .form__input:focus, .form__textarea:focus {
        border-color: rgba(0,102,204,.85);
        box-shadow: 0 0 0 3px rgba(0,102,204,.15);
    }

.form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.form__hint {
    color: rgba(255,255,255,.65);
    font-size: 13px;
}

/* Contact card */
.contactCard {
    background: rgba(17,17,17,.65);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 18px;
    height: fit-content;
}

.contactCard__title {
    margin: 0 0 10px 0;
    color: var(--color-white);
}

.contactCard__line {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
}

    .contactCard__line:last-child {
        border-bottom: 0;
    }

.contactCard__note {
    margin-top: 10px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
}

/* Downloads */
.downloads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 18px;
}

.downloadItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--color-dark);
    border: 1px solid rgba(255,255,255,.08);
}

    .downloadItem:hover {
        border-color: rgba(0,102,204,.7);
        box-shadow: 0 0 0 3px rgba(0,102,204,.12);
    }

.downloadItem__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0,74,149,.22);
    border: 1px solid rgba(0,102,204,.25);
    color: var(--color-white);
}

.downloadItem__text {
    color: rgba(255,255,255,.85);
    font-weight: 700;
}

/* Footer */
.footer {
    border-top: 2px solid rgba(0,74,149,.7);
    background: linear-gradient(90deg, var(--color-black) 40%, rgba(0,74,149,.45) 100%);
    padding: 22px 0;
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.footer__title {
    margin: 0 0 6px 0;
    color: var(--color-white);
}

.footer__text {
    margin: 0;
    color: rgba(255,255,255,.72);
    max-width: 520px;
    line-height: 1.6;
}

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

.footer__link {
    color: rgba(255,255,255,.85);
    font-weight: 700;
}

    .footer__link:hover {
        color: var(--color-accent);
    }

/* Responsive */
@media (max-width: 980px) {
    .nav--desktop {
        display: none;
    }

    .hamburger {
        display: inline-block;
    }

    .mediaRow {
        grid-template-columns: 1fr;
    }

    .grid--2 {
        grid-template-columns: 1fr;
    }

    .split, .split--reverse {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .formWrap {
        grid-template-columns: 1fr;
    }

    .panel__title {
        font-size: 32px;
    }
}

@media (max-width: 520px) {
    .iconbtn {
        display: none;
    }
    /* estos iconos pueden ser "solo móvil" luego */
    .downloads {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .panel__title {
        font-size: 28px;
    }
}



/* === Lab distributed layout === */
.labLayout {
    margin-top: 22px;
    display: grid;
    gap: 16px;
}

.labIntro {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    padding: 16px;
    background: rgba(0, 0, 0, .20);
}

.labIntro__title {
    margin: 0 0 8px;
    letter-spacing: .2px;
}

.labIntro__lead {
    margin: 0;
    opacity: .92;
    line-height: 1.55;
}

.labBadge {
    margin-top: 12px;
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid rgba(0, 74, 149, .25);
    background: linear-gradient(180deg, rgba(0, 74, 149, .12), rgba(0, 0, 0, .18));
    font-size: .98rem;
    line-height: 1.5;
}

/* Accordion container */
.labAccGrid {
    display: grid;
    gap: 12px;
}

/* details card */
.labAcc {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .16);
    overflow: hidden;
}

/* summary row */
.labAcc__sum {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}

.labAcc__sum::-webkit-details-marker {
    display: none;
}

.labAcc__title {
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.labAcc__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, .65);
    border-bottom: 2px solid rgba(255, 255, 255, .65);
    transform: rotate(45deg);
    transition: transform .18s ease;
    opacity: .9;
}

.labAcc[open] .labAcc__chev {
    transform: rotate(-135deg);
}

.labAcc__body {
    padding: 0 16px 16px;
}

.labPanel__divider {
    height: 1px;
    margin: 14px 0;
    background: rgba(255, 255, 255, .10);
}

.labPanel__subTitle {
    margin: 0 0 10px;
    font-size: 1.02rem;
    letter-spacing: .2px;
}

/* lists */
.labList {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}

.labList li {
    line-height: 1.45;
}

.labList li span {
    opacity: .9;
}

.labList--compact {
    gap: 8px;
}

/* CTA */
.labCta {
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(0, 74, 149, .14), rgba(0, 0, 0, .18));
}

.labCta__title {
    margin: 0 0 6px;
}

.labCta__text {
    margin: 0;
    opacity: .95;
    line-height: 1.55;
}

/* === Desktop: turn accordion into 3 columns === */
@media (min-width: 900px) {
    .labAccGrid {
        grid-template-columns: 1.1fr 1.2fr 1.1fr;
        align-items: start;
    }

    /* Make it look like panels (no clickable header feel) */
    .labAcc__sum {
        cursor: default;
        padding-bottom: 10px;
    }

    .labAcc__chev {
        display: none;
    }
}


/* ============================
   TRANSFORMADORES (PRO THEME)
   ============================ */

:root{
  --bg-0:#070a10;
  --bg-1:#0b1220;
  --bg-2:#0e1a2f;

  --card:#0c1526;
  --card-2:#0b1322;

  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);

  --blue:rgba(0,74,149,1);
  --blueSoft:rgba(0,74,149,.22);
  --blueSoft2:rgba(0,74,149,.12);

  --radius:16px;
  --radius-sm:12px;

  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 22px rgba(0,0,0,.28);

  --max:1200px;
}

/* Containers */
.container{
  width: min(var(--max), 92%);
  margin-inline: auto;
}
.container.narrow{
  width: min(980px, 92%);
}

/* Generic section helpers */
.section{
  padding: clamp(56px, 6vw, 88px) 0;
  position: relative;
}
.section--dark{
  background:
    radial-gradient(circle at 12% 10%, var(--blueSoft), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,.06), transparent 52%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
.section--dark2{
  background:
    radial-gradient(circle at 75% 20%, var(--blueSoft2), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

/* Typography */
.section__head{ margin-bottom: 28px; }
.section__head.center{ text-align:center; }

.section__title{
  color: var(--text);
  letter-spacing: .04em;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 10px;
}
.section__titleSm{
  color: var(--text);
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 12px;
}
.section__desc{
  color: var(--muted);
  line-height: 1.6;
  font-size: clamp(14px, 1.2vw, 16px);
  margin: 0;
}

/* ============================
   Optional HERO IMAGE
   ============================ */
.hero-transformer-img{
  margin: 26px auto 34px;
  height: clamp(220px, 28vw, 360px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70)),
    radial-gradient(circle at 70% 35%, rgba(0,74,149,.22), transparent 55%),
    /* Pon tu imagen aquí */
    url("https://images.unsplash.com/photo-1643649819787-8433d30868ce?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center 65%;
  overflow: hidden;
  position: relative;
}
.hero-transformer-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 28px
    );
  mix-blend-mode: overlay;
  opacity: .25;
  pointer-events:none;
}

/* ============================
   SPEC GRID (Capabilities)
   ============================ */
.spec-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.spec{
  grid-column: span 6;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.spec::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 15%, rgba(0,74,149,.18), transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,.05), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

.spec h4{
  position: relative;
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.spec p{
  position: relative;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14.5px;
}

/* Responsive: specs stack */
@media (max-width: 860px){
  .spec{ grid-column: span 12; }
}

/* ============================
   TEST LIST (Factory testing)
   ============================ */
.test-list{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.test-list > div{
  grid-column: span 6;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  color: var(--muted);
  line-height: 1.35;
  position: relative;
  padding-left: 40px;
}

.test-list > div::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: rgba(0,74,149,.55);
  box-shadow: 0 0 0 4px rgba(0,74,149,.16);
}

@media (max-width: 860px){
  .test-list > div{ grid-column: span 12; }
}

.facility-note{
  margin-top: 16px;
  color: rgba(234,240,255,.65);
  border-left: 3px solid rgba(0,74,149,.55);
  padding: 10px 12px;
  background: rgba(0,74,149,.08);
  border-radius: 10px;
  line-height: 1.55;
}

/* ============================
   CARDS (Product portfolio)
   ============================ */
.cards{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.card{
  grid-column: span 4;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  position: relative;
}

.card h4{
  margin: 10px 0 8px;
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14.5px;
}

/* Card image (optional, recomendado) */
.card__img{
  height: 160px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.10), transparent 55%),
    /* placeholder: reemplaza por tu imagen */
    url("https://images.unsplash.com/photo-1643649819787-8433d30868ce?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
}

/* Variantes por categoría (pon tus rutas reales) */
.card__img--pole{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://images.unsplash.com/photo-1577742410730-a83c01f60d8e?q=80&w=1175&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.card__img--dry{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://cdn.prod.website-files.com/66b236099e39348f6967371b/66b236099e39348f69673ab5_How%20to%20buy%20the%20right%20transformer%20(600v%20class).webp");
}
.card__img--substation{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://images.unsplash.com/photo-1681495628907-592089c3a546?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.card__img--pad{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://images.unsplash.com/photo-1705051278299-7e64ba21437a?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.card__img--power{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://wilson-power-solutions.imgix.net/photography/transformers/power-transformers/wilson-power-transformer-parallax-09.jpg?ixlib=php-4.1.0");
}
.card__img--distribution{
  background-image:
    linear-gradient(180deg, rgba(0,74,149,.20), rgba(0,0,0,.70)),
    url("https://i0.wp.com/velatron.com/wp-content/uploads/2025/03/Pad-Mounted-Transformer.webp?w=1200&ssl=1");
}

@media (max-width: 1020px){
  .card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .card{ grid-column: span 12; }
  .card__img{ height: 190px; }
}

/* Small helpers */
.center{ text-align:center; }



/* Componentes de transformadores */
.split__visual--components{
  min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,74,149,.25), rgba(0,0,0,.75)),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.10), transparent 60%),
    url("https://images.openai.com/static-rsc-3/yXj4I5furzcLEoQ4DdfPHxGMmigGCt00LOwu_waetaPGsUygZ4Ss8_mP9QIsWcsdXL-g_DDaErmwKvpHFFsmWLIfv1J2rCY61HEtdvuXtmY?purpose=fullsize&v=1");
  background-size: cover;
  background-position: center;
}

.sub-title{
  margin: 16px 0 6px;
  color: var(--text);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.spec-mini{
  margin: 12px 0;
  padding: 10px 12px;
  background: rgba(0,74,149,.12);
  border-left: 3px solid rgba(0,74,149,.55);
  border-radius: 8px;
  color: var(--muted);
}

.bullets--tight li{
  margin-bottom: 6px;
}


.about-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.about-card{
  grid-column: span 6;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border-radius: var(--radius, 16px);
  padding: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.about-card--wide{ grid-column: span 12; }

.about-card--accent{
  border-color: rgba(0,74,149,.35);
  background:
    radial-gradient(circle at 12% 10%, rgba(0,74,149,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
}

.about-title{
  margin: 0 0 10px;
  color: var(--text, #eaf0ff);
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 18px;
}

.about-text{
  margin: 0;
  color: rgba(234,240,255,.72);
  line-height: 1.6;
  font-size: 14.5px;
}

.about-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(234,240,255,.72);
  line-height: 1.7;
}
.about-list li{ margin-bottom: 8px; }

@media (max-width: 860px){
  .about-card{ grid-column: span 12; }
}


.form__hint.is-ok{ color: rgba(60, 255, 180, .95); }
.form__hint.is-bad{ color: rgba(255, 120, 120, .95); }


.footer__legal{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  opacity:.65;
}

.footer__dev strong{
  letter-spacing:.08em;
}