@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root
{
    --marino: #06283f;
    --marino-2: #0a3f63;
    --titulo: #0a3557;
    --azul: #0d6088;
    --teal: #00819a;
    --teal-fuerte: #006c84;
    --teal-texto: #00768b;
    --cielo: #dff0f6;
    --cielo-2: #eef7fb;
    --fondo: #f4f7fc;
    --superficie: #ffffff;
    --linea: #dce7f0;
    --linea-fuerte: #c6d8e6;
    --texto: #2a4760;
    --texto-suave: #5b7489;
    --exito: #16794a;
    --exito-fondo: #e6f6ee;

    --grad-boton: linear-gradient(135deg, #01849a 0%, #006c84 100%);
    --grad-nav: linear-gradient(90deg, #0a3e5c 0%, #0e5a7a 55%, #147b9a 100%);
    --grad-oscuro: linear-gradient(135deg, #06283f 0%, #0a3f63 100%);

    --fuente: "Space Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radio: 16px;
    --radio-sm: 12px;
    --sombra: 0 14px 34px -18px rgba(6, 40, 63, 0.35);
    --sombra-suave: 0 6px 18px -10px rgba(6, 40, 63, 0.28);
    --ancho: 78rem;

    /* Curvas de transición estándar del sitio: úsalas en botones, tarjetas y menús
       para que todo se sienta parte del mismo sistema de animación. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-rapida: 0.15s;
    --dur-base: 0.25s;
}

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

/* Utilidad usada por tienda.js (aplicarModoAuth) para alternar los pasos del
   modal de login/registro/recuperación. El !important evita que quede pisada
   por reglas más específicas definidas más abajo en este archivo. */
.hidden { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body
{
    margin: 0;
    overflow-x: hidden;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 1.04rem;
    line-height: 1.55;
}

main
{
    padding-inline: clamp(1rem, 4vw, 1.5cm);
}

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

h1, h2, h3
{
    margin: 0 0 0.75rem;
    color: var(--titulo);
    font-family: var(--fuente);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.96;
}

p
{
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.6;
}
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--teal-texto); }
[id] { scroll-margin-top: 8rem; }

:focus-visible { outline: 3px solid #21b6cc; outline-offset: 2px; }

.ico
{
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.boton
{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--grad-boton);
    box-shadow: 0 10px 22px -12px rgba(0, 108, 132, 0.9);
    color: #ffffff;
    font: 600 0.95rem/1.2 var(--fuente);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.boton:hover { filter: brightness(1.08); transform: translateY(-1px); }
.boton:active { transform: translateY(0) scale(0.97); }
.boton .ico { width: 1.1rem; height: 1.1rem; transition: transform var(--dur-base) var(--ease-out); }
.boton:hover .ico { transform: translateX(2px); }

.boton.secundario
{
    overflow: hidden;
    border: 1.5px solid var(--teal);
    background: #ffffff;
    box-shadow: none;
    color: var(--teal-fuerte);
    z-index: 0;
}

.boton.secundario::before
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cielo-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
}

.boton.secundario:hover { filter: none; }
.boton.secundario:hover::before { transform: scaleX(1); }

.boton.pequeno { min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.85rem; }

.boton-claro
{
    background: #ffffff;
    box-shadow: none;
    color: var(--teal-fuerte);
}

.enlace
{
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal-texto);
    font: 600 0.9rem var(--fuente);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.enlace-flecha
{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--teal-texto);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.enlace-flecha .ico { width: 1rem; height: 1rem; transition: transform var(--dur-rapida) var(--ease-out); }
.enlace-flecha:hover .ico { transform: translateX(3px); }

.eyebrow
{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    color: var(--teal-texto);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow::before
{
    content: "";
    width: 1.4rem;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
}

.cabecera
{
    position: relative;
    z-index: 20;
    background: #ffffff;
}

.cabecera-superior { background: linear-gradient(180deg, #ffffff 0%, #f6fafd 100%); }

.cabecera-fila
{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca acciones boton" "buscar buscar buscar";
    align-items: center;
    gap: 0.75rem 1rem;
    padding-block: 0.75rem;
}

.marca { display: inline-flex; align-items: center; grid-area: marca; text-decoration: none; }
.marca img { width: auto; height: 3.6rem; }

.buscador
{
    position: relative;
    display: flex;
    grid-area: buscar;
    align-items: center;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: var(--sombra-suave);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.buscador:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 132, 154, 0.14); }

.buscador input
{
    flex: 1;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0 0.5rem 0 1.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font: 500 0.9rem var(--fuente);
}

.buscador input:focus { outline: none; }
.buscador input::placeholder { color: #6f889c; }

.buscador button
{
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--titulo);
    cursor: pointer;
}

.buscador button:hover { color: var(--teal); }

.cabecera-acciones { display: flex; grid-area: acciones; align-items: center; justify-content: flex-end; gap: 0.5rem; }

.nav-util,
.carrito-link
{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radio-sm);
    color: var(--titulo);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-util:hover,
.carrito-link:hover { background: var(--cielo-2); }

.nav-util .ico,
.carrito-link .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.5; }

.nav-util span,
.carrito-link > span:not(.carrito-cuenta) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.carrito-cuenta
{
    position: absolute;
    top: 0.05rem;
    left: 1.6rem;
    display: grid;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    place-items: center;
    border-radius: 999px;
    background: var(--teal);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.menu-boton
{
    display: none;
    grid-area: boton;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--grad-boton);
    color: #ffffff;
    font: 600 0.88rem var(--fuente);
    cursor: pointer;
}

.js .menu-boton { display: inline-flex; }

.cabecera-nav-fila { display: block; padding-inline: 0; }
.cabecera-nav { background: transparent; }

.menu
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    background: var(--grad-nav);
}

.menu a
{
    display: block;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
}

.menu a:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }

.menu a[aria-current="page"]
{
    background: linear-gradient(135deg, #02a0b4, #017f97);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 600;
}

.cabecera-envio { display: none; }

.js .menu { display: none; }
.js .menu.abierto { display: flex; flex-direction: column; }

@media (min-width: 56rem)
{
    .cabecera { position: sticky; top: 0; box-shadow: 0 8px 24px -16px rgba(6, 40, 63, 0.5); }

    .cabecera-fila
    {
        grid-template-columns: auto minmax(0, 34rem) 1fr;
        grid-template-areas: "marca buscar acciones";
        gap: 2.5rem;
        padding-block: 0.6rem;
    }

    .marca img { height: 4rem; }

    .nav-util span,
    .carrito-link > span:not(.carrito-cuenta)
    {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    .nav-util,
    .carrito-link { padding-inline: 0.85rem; }

    .menu-boton,
    .js .menu-boton { display: none; }

    .cabecera-nav { background: var(--grad-nav); }

    .cabecera-nav-fila
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-inline: 1.25rem;
    }

    .menu,
    .js .menu
    {
        display: flex;
        flex-direction: row;
        padding: 0.45rem 0;
        background: none;
    }

    .cabecera-envio
    {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0;
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.85rem;
        font-weight: 500;
    }

    .bandera { width: 1.5rem; height: 1rem; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
}

.hero
{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #f7fbff 0%, #e3f0fa 45%, #cfe5f4 100%);
}

.hero-arte
{
    position: absolute;
    inset: auto 0 3.5rem 0;
    z-index: -1;
    height: 13rem;
    background: url("../img/general/hero-fibra.svg") right bottom / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}

.hero-fila
{
    position: relative;
    display: block;
    padding-block: 2.5rem 17.5rem;
}

.hero-texto { max-width: 34rem; }

.hero-antetitulo
{
    margin-bottom: 1rem;
    color: var(--azul);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero h1
{
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero h1 span { display: block; color: var(--teal); }

.hero-descripcion
{
    max-width: 24rem;
    margin-bottom: 1.75rem;
    color: var(--texto);
    font-size: 1.05rem;
}

.hero-lema { display: none; }

@media (min-width: 64rem)
{
    .hero-arte { inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; }

    .hero-fila { min-height: 30rem; padding-block: 3.75rem 7rem; }

    .hero-lema
    {
        position: absolute;
        top: 2.5rem;
        right: 2rem;
        display: block;
        width: 8.5rem;
        margin: 0;
        color: #ffffff;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.24em;
        line-height: 1.9;
        text-transform: uppercase;
    }

    .hero-lema::after
    {
        content: "";
        display: block;
        width: 2.6rem;
        height: 3px;
        margin-top: 0.7rem;
        border-radius: 3px;
        background: #21c3d8;
    }
}

@media (min-width: 80rem) { .hero-fila { min-height: 32rem; } }

.beneficios { position: relative; z-index: 2; margin-top: -3.5rem; }

.beneficios-lista
{
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 50px -26px rgba(6, 40, 63, 0.5);
}

.beneficios-lista li
{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.4rem;
}

.beneficios-lista li + li { border-top: 1px solid var(--linea); }

.beneficios-lista .ico { width: 2.1rem; height: 2.1rem; color: var(--azul); stroke-width: 1.5; }

.beneficios-lista strong { display: block; color: var(--titulo); font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.beneficios-lista span { color: var(--texto-suave); font-size: 0.82rem; }

@media (min-width: 40rem)
{
    .beneficios-lista { grid-template-columns: repeat(2, 1fr); }
    .beneficios-lista li + li { border-top: 0; }
    .beneficios-lista li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
    .beneficios-lista li:nth-child(even) { border-left: 1px solid var(--linea); }
}

@media (min-width: 64rem)
{
    .beneficios-lista { grid-template-columns: repeat(4, 1fr); }
    .beneficios-lista li { padding-block: 1.5rem; }
    .beneficios-lista li:nth-child(n + 3) { border-top: 0; }
    .beneficios-lista li + li { border-left: 1px solid var(--linea); }
}

.seccion { padding-block: 3.5rem; }
.seccion + .seccion { padding-top: 0.5rem; }
main > .seccion:first-child { padding-top: 2.5rem; }

.seccion h1,
.seccion h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

.seccion h2 strong { font-weight: 800; }
.seccion h2 { font-weight: 500; }

.seccion-cabecera
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.seccion-cabecera h1,
.seccion-cabecera h2 { margin: 0; }

.seccion-cabecera > span { color: var(--texto-suave); font-size: 0.9rem; font-weight: 500; }

.vacio
{
    padding: 2rem;
    border: 1.5px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    background: #ffffff;
    color: var(--texto-suave);
    text-align: center;
}

.aviso
{
    position: relative;
    z-index: 100;
    width: min(27rem, calc(100% - 2rem));
    margin: 1rem 1rem 0 auto;
    padding: 1.1rem 1.4rem 1.25rem 4rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-left: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(233, 251, 242, 0.96));
    box-shadow: 0 22px 45px -22px rgba(6, 40, 63, 0.45), 0 0 0 1px rgba(22, 121, 74, 0.08);
    color: #0d6345;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.45;
    animation: aviso-aparece 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    backdrop-filter: blur(14px);
}

.aviso-icon
{
    position: absolute;
    top: 50%;
    left: 1.2rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../img/general/carrito-notificacion.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    stroke: transparent;
    box-shadow: none;
    transform: translateY(-50%);
}

.aviso::after
{
    content: "";
    position: absolute;
    right: 1.4rem;
    bottom: 0.6rem;
    left: 4rem;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #1ca968, #21b6cc);
    transform-origin: left;
    animation: aviso-tiempo 4s linear forwards;
}

.aviso-saliendo,
.admin-alert-saliendo
{
    animation: aviso-desaparece 0.35s ease forwards;
    pointer-events: none;
}

@keyframes aviso-aparece
{
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes aviso-desaparece
{
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-0.35rem); }
}

@keyframes aviso-tiempo
{
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 39.99rem)
{
    .aviso
    {
        width: calc(100% - 1.5rem);
        margin-right: 0.75rem;
        padding-left: 3.6rem;
    }

    .aviso::after { left: 3.6rem; }
}

.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }

.categoria
{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
    box-shadow: var(--sombra-suave);
    color: var(--titulo);
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.categoria:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.categoria-foto
{
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #e4f1f8 100%);
}

.categoria-foto img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; object-fit: contain; mix-blend-mode: multiply; }

.categoria-icono
{
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 1.2rem;
    place-items: center;
    position: relative;
    border: 3px solid #ffffff;
    border-radius: 12px;
    background: var(--grad-boton);
    box-shadow: 0 10px 18px -10px rgba(0, 108, 132, 0.9);
    color: #ffffff;
}

.categoria strong { margin: 0.75rem 1.2rem 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.categoria-texto { margin: 0.3rem 1.2rem 0; color: var(--texto-suave); font-size: 0.86rem; line-height: 1.5; }

.categoria-ir
{
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    margin: auto 0 1.2rem 1.2rem;
    place-items: center;
    align-self: flex-start;
    border-radius: 999px;
    background: var(--grad-boton);
    color: #ffffff;
}

.categoria-texto + .categoria-ir { margin-top: 1rem; }
.categoria-ir .ico { width: 1rem; height: 1rem; }

.btn-accion {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    font: 700 0.8rem/1 var(--fuente);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
    overflow: hidden;
}

.btn-accion:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-accion:active { transform: scale(0.97); }

.btn-accion .btn-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    min-height: 52px;
    flex-shrink: 0;
}

.btn-accion .btn-ico svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-accion .btn-label {
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.25);
}

.btn-accion.btn-primario {
    background: #173861;
    color: #ffffff;
    border-color: #173861;
}

.btn-accion.btn-primario .btn-label { border-color: rgba(255,255,255,0.25); }

.btn-accion.btn-outline-azul {
    background: #ffffff;
    color: #0096c7;
    border-color: #0096c7;
}

.btn-accion.btn-outline-azul .btn-label { border-color: #0096c7; }

.btn-accion.btn-outline-rojo {
    background: #ffffff;
    color: #c0392b;
    border-color: #c0392b;
}

.btn-accion.btn-outline-rojo .btn-label { border-color: #c0392b; }

.btn-accion.btn-neutro {
    background: #ffffff;
    color: #173861;
    border-color: #cdd5e0;
}

.btn-accion.btn-neutro .btn-label { border-color: #cdd5e0; }

.btn-accion.btn-pequeno { min-height: 36px; font-size: 0.75rem; }

.acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.productos-grid-destacados { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }

.producto-card
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
    box-shadow: var(--sombra-suave);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.producto-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.producto-imagen
{
    position: relative;
    display: grid;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    place-items: center;
    background: radial-gradient(circle at 50% 45%, #ffffff 35%, color-mix(in srgb, var(--producto-color, #e4f1f8) 45%, #ffffff) 100%);
    text-decoration: none;
}

.producto-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1.4rem; object-fit: contain; mix-blend-mode: multiply; }

.producto-imagen b { color: var(--teal); font-size: 2.6rem; font-weight: 800; }

.producto-imagen span
{
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 1;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    background: var(--azul);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.producto-info { display: flex; flex: 1; flex-direction: column; padding: 0.4rem 1.2rem 1.2rem; }

.marca-producto { margin-bottom: 0.15rem; color: var(--teal-texto); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; }

.producto-info h3 { margin-bottom: 0.4rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.producto-info h3 a { color: var(--titulo); text-decoration: none; }
.producto-info h3 a:hover { color: var(--teal); }
.producto-modelo { margin: -.2rem 0 .5rem; color: var(--muted, var(--texto-suave)); font-size: .7rem; line-height: 1.35; }
.producto-modelo code { font-family: var(--font-body, "DM Mono", monospace); overflow-wrap: anywhere; }

.producto-resumen
{
    display: -webkit-box;
    margin-bottom: 1rem;
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.83rem;
    line-height: 1.5;
    text-align: justify;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.producto-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: auto; }
.producto-pie form { margin: 0; }

.producto-precio,
.precio-grande
{
    margin: 0;
    color: var(--titulo);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.producto-precio del,
.precio-grande del
{
    display: block;
    margin-top: 0.1rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    font-weight: 500;
}

.boton-carrito
{
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--cielo);
    color: var(--teal-fuerte);
    cursor: pointer;
    transition: background var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out), transform var(--dur-rapida) var(--ease-out);
}

.boton-carrito:hover { background: var(--teal); color: #ffffff; }
.boton-carrito:active { transform: scale(0.9); }

.boton-cotizar
{
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 1px solid rgba(14, 115, 133, 0.48);
    border-radius: 999px;
    background: #ffffff;
    color: var(--deep);
    cursor: pointer;
    transition: background var(--dur-rapida) var(--ease-out), border-color var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out), transform var(--dur-rapida) var(--ease-out);
}

.boton-cotizar:hover { background: rgba(9, 125, 146, 0.08); border-color: var(--teal); color: var(--teal-fuerte); }
.boton-cotizar:active { transform: scale(0.9); }

.filtros
{
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
    box-shadow: var(--sombra-suave);
}

@media (min-width: 48rem) { .filtros { grid-template-columns: 2fr 1fr auto; } }

.page-shell .seccion.catalogo-seccion:first-child
{
    padding: 2rem clamp(1rem, 3vw, 3rem) 4rem;
}

.page-shell .contenedor.catalogo-layout
{
    display: grid;
    grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 2vw, 2rem);
    width: min(100%, 1600px);
}

.catalogo-sidebar
{
    position: sticky;
    top: 6rem;
    padding: 1.25rem;
    border: 1px solid #d5eaf4;
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 83, 112, 0.08);
}

.catalogo-sidebar__count
{
    margin: 0 0 1.35rem;
    color: #226b91;
    font-size: 0.92rem;
    font-weight: 700;
}

.page-shell .catalogo-sidebar .filtros
{
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.catalogo-sidebar .filtros .boton { width: 100%; }
.catalogo-main { min-width: 0; }

.page-shell .catalogo-heading
{
    margin: 0 0 1rem;
    border: 0;
    padding: 0;
}

.page-shell .catalogo-heading .eyebrow { margin-bottom: 0.35rem; }
.page-shell .catalogo-heading h1 { margin: 0; font-size: clamp(2.5rem, 4vw, 3.8rem); line-height: 1; }
.catalogo-main .productos-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.catalogo-paginacion{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;margin:1.5rem 0 0}
.catalogo-paginacion__pagina,.catalogo-paginacion__control{display:inline-flex;min-width:2.6rem;min-height:2.6rem;align-items:center;justify-content:center;padding:.45rem .7rem;border:1px solid #d5eaf4;border-radius:.45rem;background:#fff;color:#226b91;font-size:.88rem;font-weight:700;text-decoration:none}
.catalogo-paginacion__control{padding-inline:.9rem}
.catalogo-paginacion__pagina:hover,.catalogo-paginacion__control:hover{border-color:#226b91;background:#eef7fb}
.catalogo-paginacion__pagina.is-current{border-color:#226b91;background:#226b91;color:#fff}
.catalogo-paginacion__ellipsis{padding:.4rem .15rem;color:#527184}
@media (max-width: 30rem){.catalogo-paginacion{gap:.3rem}.catalogo-paginacion__pagina,.catalogo-paginacion__control{min-width:2.35rem;min-height:2.45rem;padding:.4rem .55rem;font-size:.82rem}.catalogo-paginacion__control{padding-inline:.65rem}}

@media (max-width: 64rem)
{
    .page-shell .contenedor.catalogo-layout { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); }
    .catalogo-main .productos-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
}

@media (max-width: 48rem)
{
    .page-shell .contenedor.catalogo-layout { grid-template-columns: minmax(0, 1fr); }
    .catalogo-sidebar { position: static; }
    .page-shell .catalogo-heading h1 { font-size: 2.5rem; }
}

label { display: grid; gap: 0.4rem; color: var(--titulo); font-size: 0.82rem; font-weight: 600; }

input,
select
{
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--radio-sm);
    background: #ffffff;
    color: var(--texto);
    font: 500 0.95rem var(--fuente);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 132, 154, 0.14); }

.producto-showcase-section { padding-top: 1.6rem; }

.producto-showcase-wrap
{
    max-width: 82rem;
    padding: 0 0.5rem;
}

.producto-showcase
{
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 3vw, 4rem);
    align-items: center;
    padding: clamp(1.25rem, 2vw, 2.3rem);
    border: 1px solid rgba(101, 149, 166, 0.3);
    border-radius: 1.7rem;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 22px 48px rgba(59, 96, 110, 0.08);
}

.producto-showcase::before
{
    content: "";
    position: absolute;
    top: 1rem;
    right: -2.5rem;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background: rgba(110, 211, 239, 0.22);
    filter: blur(12px);
    pointer-events: none;
}

.producto-showcase__media,
.producto-showcase__content
{
    position: relative;
    z-index: 1;
}

.producto-showcase__media
{
    display: grid;
    gap: 1rem;
}

.producto-showcase__main
{
    overflow: hidden;
    border: 1px solid rgba(129, 154, 169, 0.3);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 16px 30px rgba(54, 78, 94, 0.06);
}

.producto-showcase__main .producto-imagen.grande
{
    border: 0;
    border-radius: 0;
    aspect-ratio: 1.42 / 1;
    background: linear-gradient(180deg, rgba(197, 236, 246, 0.35), rgba(255,255,255,0.7));
    box-shadow: none;
}

.producto-showcase__thumbs
{
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.producto-thumb
{
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    padding: 0.25rem;
    border: 2px solid rgba(100, 147, 162, 0.3);
    border-radius: 1rem;
    background: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.producto-thumb.active,
.producto-thumb:hover
{
    border-color: rgba(1, 132, 154, 0.8);
    box-shadow: 0 8px 24px rgba(70, 148, 163, 0.12);
    transform: translateY(-2px);
}

.producto-thumb img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.85rem;
}

.producto-showcase__content { display: grid; gap: .75rem; }

.producto-showcase__content .eyebrow
{
    margin: 0;
    color: var(--teal-fuerte);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.producto-showcase__content h1
{
    margin: 0;
    max-width: 34ch;
    color: var(--navy, #0e516d);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.producto-datos { display: grid; max-width: 34rem; margin: 0; font-size: .92rem; }
.producto-datos__fila { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .4rem 0; border-bottom: 1px solid var(--line, var(--linea)); }
.producto-datos__fila dt { color: var(--muted, var(--texto-suave)); }
.producto-datos__fila dd { display: flex; min-width: 0; align-items: center; gap: .4rem; margin: 0; color: var(--texto); }
.producto-datos__fila dd > a { min-width: 0; color: var(--teal-texto); overflow-wrap: anywhere; }
.producto-datos__fila code { min-width: 0; color: inherit; font-family: var(--font-body, "DM Mono", monospace); overflow-wrap: anywhere; }
.copiar-dato { display: inline-flex; flex: 0 0 auto; min-width: 1.9rem; min-height: 1.9rem; align-items: center; justify-content: center; gap: .3rem; padding: .2rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--teal-texto); cursor: pointer; }
.copiar-dato:hover, .copiar-dato:focus-visible, .copiar-dato.is-copiado { background: var(--cielo); }
.copiar-dato:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.copiar-dato__icono { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.copiar-dato__confirmacion, .copiar-dato__mensaje { display: none; }
.copiar-dato.is-copiado .copiar-dato__icono:first-child { display: none; }
.copiar-dato.is-copiado .copiar-dato__confirmacion, .copiar-dato.is-copiado .copiar-dato__mensaje { display: inline; }
.copiar-dato.is-error .copiar-dato__mensaje { display: inline; color: #b3261e; }
.copiar-dato__mensaje { color: var(--teal-texto); font: 600 .72rem var(--fuente); white-space: nowrap; }

.producto-showcase__description
{
    max-width: 35rem;
    margin: 0;
    color: rgba(18, 54, 73, 0.8);
    font-size: 1rem;
    line-height: 1.6;
}

.producto-showcase__content .precio-grande
{
    margin: 0.2rem 0 0.3rem;
    font-size: 1.9rem;
    color: #0e516d;
}

.producto-showcase__content .precio-grande del
{
    display: inline-block;
    margin-left: 0.8rem;
    font-size: 1.1rem;
    color: rgba(15, 62, 84, 0.6);
}

.producto-showcase__content .disponible
{
    margin: 0;
    color: #1d8d60;
    font-size: 1.1rem;
}

.producto-showcase__form
{
    display: grid;
    gap: 1.4rem;
    margin-top: 0.45rem;
}

.producto-showcase__qty
{
    display: grid;
    gap: 0.8rem;
    width: fit-content;
    min-width: 15rem;
}

.producto-showcase__qty span
{
    color: rgba(16, 71, 94, 0.8);
    font-size: 1.05rem;
    font-weight: 700;
}

.qty-control
{
    display: flex;
    align-items: center;
    gap: 0;
    width: 14rem;
    border: 1.5px solid rgba(90, 128, 143, 0.35);
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
    overflow: hidden;
}

.qty-step
{
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3.2rem;
    border: 0;
    background: transparent;
    color: #0f4f67;
    font-size: 1.7rem;
    font-weight: 500;
    cursor: pointer;
}

.qty-control input
{
    flex: 1;
    min-width: 0;
    min-height: 3.2rem;
    border: 0;
    border-left: 1px solid rgba(90, 128, 143, 0.2);
    border-right: 1px solid rgba(90, 128, 143, 0.2);
    border-radius: 0;
    background: transparent;
    color: #0f4f67;
    font-size: 1.25rem;
    text-align: center;
    box-shadow: none;
}

.qty-control input:focus
{
    box-shadow: none;
    border-color: rgba(90, 128, 143, 0.25);
}

.producto-showcase__actions
{
    display: flex;
    gap: 0.65rem;
    width: 100%;
}

.page-shell .producto-showcase__actions > button.boton
{
    flex: 1 1 0;
    min-width: 0;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    font-family: var(--fuente);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    justify-content: center;
}

.page-shell .producto-showcase__actions > button.boton:not(.secundario)
{
    border: 1px solid #0ba7c7;
    background: linear-gradient(105deg, #0795bd 0%, #078fb8 100%);
    color: #fff;
    box-shadow: 0 9px 18px rgba(10, 123, 161, 0.15);
}

.page-shell .producto-showcase__actions > button.boton:not(.secundario):hover
{
    background: linear-gradient(105deg, #0789b0 0%, #087fa6 100%);
    color: #fff;
}

.page-shell .producto-showcase__actions > button.boton.secundario
{
    border: 1.5px solid #0794bd;
    background: #ffffff;
    box-shadow: none;
    color: #078ab3;
}

.page-shell .producto-showcase__actions > button.boton.secundario::before
{
    content: none;
}

.page-shell .producto-showcase__actions > button.boton.secundario:hover
{
    background: #f3fbfd;
    color: #078ab3;
}

.producto-showcase__actions .ico
{
    width: 1.2rem;
    height: 1.2rem;
}

.producto-showcase__actions .icono-etiqueta
{
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 68.75rem)
{
    .producto-showcase__actions
    {
        flex-direction: column;
    }

    .page-shell .producto-showcase__actions > button.boton
    {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 56rem)
{
    .producto-showcase
    {
        grid-template-columns: 1fr;
        padding: 1.1rem;
    }

    .producto-showcase__actions
    {
        gap: 0.6rem;
    }

    .producto-showcase__content h1
    {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .producto-detalle h1 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
}

@media (max-width: 36rem)
{
    .producto-showcase__actions
    {
        flex-direction: column;
    }

    .producto-showcase__thumbs
    {
        justify-content: flex-start;
    }

    .producto-thumb
    {
        width: 4.5rem;
        height: 4.5rem;
    }
}

    @media (max-width: 22rem)
    {
        .producto-datos__fila { grid-template-columns: 1fr; gap: .15rem; }
    }

.producto-detalle { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; max-width: 70rem; }

@media (min-width: 56rem) { .producto-detalle { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); } }

.producto-detalle-media { display: grid; gap: 0.85rem; }

.producto-regreso
{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.producto-regreso:hover { color: var(--teal-fuerte); }
.producto-regreso .ico { width: 1rem; height: 1rem; transform: rotate(180deg); }

.producto-imagen.grande
{
    aspect-ratio: 1;
    border: 1px solid var(--linea);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 45%, #ffffff 30%, color-mix(in srgb, var(--producto-color, #e4f1f8) 50%, #ffffff) 100%);
    box-shadow: var(--sombra);
}

.producto-imagen.grande img { padding: 2.5rem; }
.producto-imagen.grande span { top: 1.2rem; left: 1.2rem; font-size: 0.8rem; }

.producto-detalle-info { display: grid; gap: .75rem; padding: clamp(0rem, 2vw, 1.5rem) 0; }

.producto-detalle .eyebrow { margin-bottom: 0.75rem; letter-spacing: 0.1em; }
.producto-detalle h1 { max-width: 34ch; color: var(--navy, #0e516d); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.producto-detalle-info > p:not(.eyebrow):not(.especificaciones):not(.disponible) { max-width: 38rem; font-size: 1rem; }
.producto-detalle form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-top: 0.5rem; }

.especificaciones
{
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--cielo-2);
    color: var(--titulo);
    font-size: 0.88rem;
    font-weight: 500;
}

.producto-detalle-info .precio-grande { margin: .2rem 0 .3rem; font-size: 1.9rem; font-weight: 800; }
.precio-grande del { display: inline; margin-left: 0.6rem; font-size: 1.05rem; }

.disponible { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--exito); font-size: 0.9rem; font-weight: 600; }
.disponible .ico { width: 1rem; height: 1rem; }
.disponible.agotado { color: #b3261e; }

.cantidad { display: grid; gap: 0.4rem; margin: 0; }
.cantidad input { width: 5.5rem; text-align: center; }

.producto-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; width: 100%; }
.producto-acciones .boton { flex: 1 1 13rem; }

.divider
{
    position: relative;
    margin: 0.3rem 0 0.3rem;
    border-top: 1px solid rgba(20, 38, 58, 0.18);
    text-align: center;
}

.divider span
{
    position: relative;
    top: -0.7rem;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(20, 38, 58, 0.18);
    border-radius: 50%;
    background: #f3f7fb;
    color: rgba(20, 38, 58, 0.7);
    font-size: 0.8rem;
}

.panel { max-width: 44rem; }
.panel h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.panel .boton { margin-right: 0.5rem; }
.salir { display: inline; margin: 0; }

.pedidos { display: grid; gap: 0.8rem; margin-top: 1.5rem; }

.estado
{
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--cielo);
    color: var(--teal-fuerte);
    font-size: 0.78rem;
    font-weight: 700;
}

.estado-enviada { background: #eef2f5; color: #415466; }
.estado-revision { background: #fff3d8; color: #8a5a00; }
.estado-lista { background: #e1f7e8; color: #1d6b3f; }
.estado-aceptada { background: #e2f7f1; color: #087c62; }
.estado-rechazada { background: #ffe3e6; color: #a52b3b; }
.estado-vencida { background: #eef1f4; color: #5d6b7b; }
.cotizacion-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }

.seccion-cta { padding-block: 1rem 3.5rem; }

.cta
{
    position: relative;
    display: grid;
    gap: 1.75rem;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 3rem);
    border-radius: 24px;
    background: linear-gradient(115deg, #0d6a9a 0%, #0a4b75 55%, #072f4d 100%);
    box-shadow: 0 30px 60px -32px rgba(6, 40, 63, 0.7);
    color: #d6e8f3;
    isolation: isolate;
}

.cta::before
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/general/flujos.svg") center / cover no-repeat;
    opacity: 0.75;
}

.cta-texto { max-width: 34rem; }
.cta .eyebrow { color: #a6e6f2; }
.cta .eyebrow::before { background: #4fd0e4; }
.cta h2 { color: #ffffff; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.cta p:not(.eyebrow) { margin-bottom: 1.5rem; font-size: 1rem; }

.cta-lista
{
    display: grid;
    align-self: center;
    gap: 0.35rem;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(6, 40, 63, 0.38);
    backdrop-filter: blur(6px);
}

.cta-lista li
{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 500;
}

.cta-lista .ico
{
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.55rem;
    border-radius: 999px;
    background: rgba(79, 208, 228, 0.22);
    color: #b9f0f8;
    stroke-width: 1.6;
}

@media (min-width: 56rem)
{
    .cta { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 3rem; }
}

.valores-fibercas
{
    background: linear-gradient(180deg, rgba(7, 34, 59, 0.03), rgba(7, 34, 59, 0.00));
}

.seccion-cabecera-compacta
{
    margin-bottom: 1.75rem;
}

.valores-grid
{
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.valor-card
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.35rem;
    border: 1px solid rgba(17, 42, 71, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(18, 43, 80, 0.06);
}

.valor-card h3
{
    margin: 0;
    color: var(--titulo);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.valor-card p
{
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.96rem;
    line-height: 1.7;
}

.pie
{
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    background: var(--grad-oscuro);
    color: #bcd3e3;
    isolation: isolate;
}

.pie::before
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/general/flujos.svg") center bottom / cover no-repeat;
    opacity: 0.35;
}

.pie a { color: #d6e8f3; text-decoration: none; }
.pie a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.pie-arriba
{
    display: grid;
    gap: 1.75rem;
    padding-block: 2.75rem 2rem;
}

.pie-marca p { max-width: 20rem; margin: 0.9rem 0 0; font-size: 0.92rem; }

.marca-clara img { height: 4.2rem; filter: brightness(0) invert(1); }

.pie-sellos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }

.pie-sellos li
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: #e6f2f9;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.pie-sellos .ico { width: 2rem; height: 2rem; color: #7fdcec; stroke-width: 1.4; }

.pie-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 15rem));
    gap: 1.5rem;
    padding-block: 1.75rem;
    background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) center top / calc(100% - 2.5rem) 1px no-repeat;
}

.pie-grid > div { display: grid; align-content: start; gap: 0.55rem; }
.pie-grid strong { margin-bottom: 0.2rem; color: #ffffff; font-size: 0.88rem; font-weight: 700; }
.pie-grid a { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; }
.pie-grid .ico { width: 1.05rem; height: 1.05rem; color: #7fdcec; }

.pie-legal
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1.1rem 1.6rem;
    background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) center top / calc(100% - 2.5rem) 1px no-repeat;
    color: #9db9cc;
    font-size: 0.8rem;
}

@media (min-width: 56rem)
{
    .pie-arriba { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; }
    .pie-sellos { display: flex; gap: 0; }

    .pie-sellos li { width: 9.5rem; padding-inline: 1rem; }
    .pie-sellos li + li { border-left: 1px solid rgba(255, 255, 255, 0.2); }
}

@media (prefers-reduced-motion: no-preference)
{
    html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after { transition-duration: 0.01ms !important; }
}

@media (max-width: 40rem)
{
    .cabecera-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca boton" "buscar buscar"; }
    .cabecera-acciones { gap: 0.1rem; }
    .marca img { height: 3rem; }
    .menu-boton { justify-self: end; }
    .buscador input { font-size: .82rem; }
    .seccion { padding-block: 2.5rem; }
    .seccion-cabecera { align-items: flex-start; flex-direction: column; margin-bottom: 1.25rem; }
    .seccion-cabecera .enlace-flecha { align-self: flex-start; }
    .producto-detalle-info { padding-top: 0; }
    .producto-acciones .boton { flex-basis: 100%; }
    .modal-auth { padding: .65rem; }
    .modal-auth-panel { max-height: calc(100dvh - 1.3rem); overflow-y: auto; padding: 1.5rem 1rem 1rem; border-radius: 20px; }
    .modal-auth-head h2 { font-size: 1.9rem; }
    .auth-login-tools { gap: .5rem; }
    .auth-remember { font-size: .76rem; }
}

@media (max-width: 40rem)
{
    .modal-auth { padding: 0.75rem; }
    .modal-auth-panel { width: 100%; max-width: 100%; min-width: 0; }
    .modal-auth-panel .modal-form,
    .modal-auth-panel .campo,
    .modal-auth-panel .campo-password { min-width: 0; }
    .modal-auth-panel .modal-form input { width: 100%; min-width: 0; }
    .modal-auth-panel .auth-login-tools,
    .modal-auth-panel .modal-auth-footer { flex-wrap: wrap; }
    .modal-auth-panel .auth-login-tools > *,
    .modal-auth-panel .modal-auth-footer > * { min-width: 0; }
    .modal-auth-panel .auth-login-tools .link-btn,
    .modal-auth-panel .modal-auth-footer .link-btn { max-width: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: no-preference)
{
    .hero-texto
    {
        animation: portada-entrada 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .hero::before
    {
        content: "";
        position: absolute;
        inset: -20% -35%;
        z-index: 1;
        background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.78) 49%, rgba(33, 182, 204, 0.26) 51%, transparent 58%);
        pointer-events: none;
        transform: translateX(-80%);
        animation: hero-barrido 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
    }
}

.hero-modernizado
{
    background: linear-gradient(135deg, #edf9ff 0%, #dff4fb 35%, #ebf5ff 100%);
}

.hero-modernizado .hero-fila
{
    padding-bottom: 5.5rem;
}

.hero-acciones
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.hero-redes
{
    position: absolute;
    inset: auto auto 1.2rem 18%;
    width: 24rem;
    height: 24rem;
    border: 1px solid rgba(13, 96, 136, 0.18);
    border-radius: 50%;
    opacity: 0.65;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(13, 96, 136, 0.1), 0 0 0 24px rgba(33, 182, 204, 0.04);
    animation: redes-flotar 12s ease-in-out infinite alternate;
}

.hero-redes-2
{
    inset: auto 22% 3rem auto;
    width: 18rem;
    height: 18rem;
    animation-delay: 1.2s;
}

.hero-redes-3
{
    inset: 4rem auto auto 55%;
    width: 15rem;
    height: 15rem;
    animation-delay: 2s;
}

@keyframes redes-flotar
{
    0% { transform: translate3d(0, 0, 0) scale(0.98); }
    100% { transform: translate3d(0, -18px, 0) scale(1.04); }
}

.etiqueta-oferta
{
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 1;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    background: #e73d64;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.contacto-layout,
.cotizacion-wrap,
.about-hero
{
    display: grid;
    gap: 2rem;
    align-items: center;
}

.contacto-layout,
.cotizacion-wrap { grid-template-columns: 1fr; }
.about-hero { grid-template-columns: 1.2fr 1fr; }

@media (min-width: 56rem)
{
    .contacto-layout,
    .cotizacion-wrap { grid-template-columns: 1fr 1.1fr; }
}

.contacto-copy,
.cotizacion-copy,
.about-copy
{
    display: grid;
    gap: 1rem;
}

.contacto-tarjetas,
.about-grid
{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.contacto-tarjetas article,
.about-card,
.about-panel
{
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(20, 38, 58, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(13, 96, 136, 0.05);
}

.contacto-tarjetas strong,
.about-card h3,
.about-panel strong
{
    display: block;
    margin-bottom: 0.3rem;
    color: var(--titulo);
}

.contacto-tarjetas a,
.contacto-tarjetas span,
.about-card p,
.about-panel span
{
    color: var(--texto-suave);
    text-decoration: none;
}

.formulario,
.contacto-form,
.cotizacion-form
{
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(20, 38, 58, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(13, 96, 136, 0.06);
}

.formulario textarea,
.formulario input,
.formulario select
{
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(20, 38, 58, 0.18);
    border-radius: 12px;
    background: #f9fbff;
}

.formulario textarea
{
    min-height: 8rem;
    resize: vertical;
}

.cotizacion-lista
{
    display: grid;
    gap: 0.6rem;
    padding-left: 1.2rem;
    color: var(--texto-suave);
    list-style: disc;
}

.about-visual
{
    position: relative;
    display: grid;
    place-items: center;
    min-height: 18rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(13, 96, 136, 0.08), rgba(33, 182, 204, 0.08));
    overflow: hidden;
}

.about-globe
{
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(173, 231, 244, 0.9) 30%, rgba(13, 96, 136, 0.1) 70%, transparent 100%);
    box-shadow: inset 0 0 30px rgba(15, 103, 155, 0.12), 0 0 0 1px rgba(13, 96, 136, 0.08);
}

.about-panel
{
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
}

.about-panel span
{
    color: var(--teal-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.modal-auth
{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-auth.is-open
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-auth-backdrop
{
    position: absolute;
    inset: 0;
    background: rgba(4, 19, 33, 0.52);
    backdrop-filter: blur(3px);
}

.modal-auth-panel
{
    position: relative;
    width: min(30rem, 100%);
    padding: 2rem 1.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 24px 48px -18px rgba(6, 40, 63, 0.4);
}

.modal-auth-head
{
    margin-bottom: 1rem;
}

.modal-auth-head h2
{
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.modal-auth-close
{
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: var(--cielo-2);
    color: var(--titulo);
    font-size: 1.4rem;
    cursor: pointer;
}

.modal-form
{
    display: grid;
    gap: 1rem;
}

.modal-form .campo
{
    display: grid;
    gap: 0.45rem;
    color: var(--titulo);
    font-size: 0.82rem;
    font-weight: 700;
}

.modal-form input
{
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(20, 38, 58, 0.18);
    border-radius: 12px;
    background: #f9fbff;
}

.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 3rem; }
.password-toggle
{
    position: absolute;
    top: 50%;
    right: 0.8rem;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-login-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-remember { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--texto-suave); font-size: 0.85rem; font-weight: 500; }
.auth-remember input { width: 1.1rem; min-height: 1.1rem; accent-color: var(--teal); }
.auth-submit { width: auto !important; min-height: 2.6rem; padding: 0.55rem 1rem; border-radius: 6px; font-size: 0.85rem; }
.auth-login-tools:not(.login) .auth-submit { width: 100% !important; }
.auth-google-block {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
    justify-items: center;
}
.auth-google-native {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: center;
}
.auth-google-button {
    width: 100%;
    border: 1px solid #d9dce1;
    background: #ffffff;
    color: #3c4043;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}
.auth-google-button:hover {
    background: var(--cielo-2);
}
.social-btn.google { border: 1px solid #d9dce1; background: #ffffff; color: #3c4043; font-size: 0.9rem; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12); }
.social-btn.google:hover { background: var(--cielo-2); }
.google-logo
{
    display: inline-grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    -webkit-text-stroke: 2px #ffffff;
    text-shadow: 1px 0 #4285f4, -1px 0 #ea4335, 0 1px #34a853;
}

.cuenta-dropdown {
    position: relative;
    z-index: 1;
}
.cuenta-dropdown-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.cuenta-dropdown-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    width: min(18rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.55rem;
    list-style: none;
    border: 1px solid rgba(23, 56, 97, 0.1);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(13, 45, 69, 0.18), 0 3px 10px rgba(13, 45, 69, 0.06);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}

.cuenta-dropdown-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.6rem 0.7rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(23, 56, 97, 0.1);
}

.cuenta-dropdown-heading__icon {
    display: grid;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: #e4f7fb;
    color: #0788ad;
}

.cuenta-dropdown-heading__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cuenta-dropdown-heading__text { display: grid; min-width: 0; gap: 0.12rem; }
.cuenta-dropdown-heading__text small { color: #718aa1; font-size: 0.68rem; font-weight: 600; }
.cuenta-dropdown-heading__text strong { overflow: hidden; color: #173861; font-size: 0.88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-dropdown.is-open .cuenta-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.cuenta-dropdown:not(.logueado) .cuenta-dropdown-panel {
    display: none;
}
.cuenta-dropdown-panel li a,
.cuenta-dropdown-panel .cuenta-dropdown-salir {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 2.65rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: #284e70;
    font: 600 0.84rem/1.25 var(--display, inherit);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.cuenta-dropdown-panel li a svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: #0788ad;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.cuenta-dropdown-panel li a:hover,
.cuenta-dropdown-panel .cuenta-dropdown-salir:hover {
    background: #eaf8fb;
    color: #087b9c;
}

.cuenta-dropdown-panel li a:focus-visible,
.cuenta-dropdown-panel .cuenta-dropdown-salir:focus-visible {
    outline: 2px solid #0788ad;
    outline-offset: -2px;
}

.cuenta-dropdown-panel li:last-child {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(23, 56, 97, 0.1);
}
.cuenta-dropdown-panel .cuenta-dropdown-salir {
    color: #b4233c;
}

.cuenta-dropdown-panel .cuenta-dropdown-salir:hover {
    background: #fff0ef;
    color: #a12632;
}

.page-shell .cuenta-layout { display: grid; gap: 1.5rem; max-width: 86rem; }
.cuenta-hero { position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.25rem; min-height: 11rem; overflow: hidden; padding: 1.75rem 2.25rem; border: 1px solid #d5eaf4; border-radius: 0.8rem; background: linear-gradient(105deg, #f5fbfd 0%, #e7f7fc 55%, #d9f1fb 100%); box-shadow: 0 8px 22px rgba(28, 119, 158, 0.08); }
.cuenta-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 38%; background: linear-gradient(160deg, transparent 25%, rgba(112, 202, 241, 0.12) 25.2% 48%, transparent 48.2%), linear-gradient(15deg, transparent 45%, rgba(72, 177, 228, 0.11) 45.2% 72%, transparent 72.2%); clip-path: polygon(0 48%, 13% 52%, 27% 24%, 42% 20%, 57% 42%, 70% 37%, 84% 11%, 100% 25%, 100% 100%, 0 100%); pointer-events: none; }
.cuenta-avatar { display: grid; flex: none; width: 6rem; height: 6rem; place-items: center; border-radius: 50%; background: #0795bd; color: #fff; font-size: 1.8rem; font-weight: 700; }
.cuenta-hero__copy { min-width: 0; padding-left: 1.4rem; border-left: 1px solid rgba(7, 136, 173, 0.38); }
.cuenta-hero__copy h1 { margin: 0 0 0.3rem; color: #12477b; font-size: 2.75rem; line-height: 1.08; }
.cuenta-hero__copy p { margin: 0; color: #6687a3; font-size: 1rem; }
.cuenta-hero .cuenta-salir { position: relative; z-index: 1; margin-left: auto; }
.cuenta-hero .cuenta-salir button { min-height: 2.75rem; padding: 0.65rem 1rem; border: 1px solid #0a97b8; border-radius: 999px; background: #0a97b8; box-shadow: 0 8px 18px rgba(10, 123, 161, 0.14); color: #fff; font: 700 0.84rem var(--fuente); }
.cuenta-hero .cuenta-salir button:hover { background: #087fa3; border-color: #087fa3; }
.cuenta-hero .cuenta-salir svg { width: 1rem; height: 1rem; }

.cuenta-accion__icono { display: grid; flex: none; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 50%; background: #e0f5fa; color: #0788ad; }
.cuenta-accion__icono svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.cuenta-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
.cuenta-accion { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "icon arrow" "text arrow"; align-items: center; gap: 0.55rem 0.7rem; min-height: 19rem; overflow: hidden; padding: 1.35rem; border: 1px solid #d5eaf4; border-radius: 0.8rem; background: #fff; box-shadow: 0 6px 16px rgba(28, 119, 158, 0.06); color: inherit; text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.cuenta-accion::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 38%; background: var(--cuenta-onda, #e2f3ff); clip-path: polygon(0 34%, 14% 40%, 30% 66%, 49% 75%, 68% 62%, 83% 34%, 100% 22%, 100% 100%, 0 100%); opacity: 0.85; transition: opacity 0.18s ease; }
.cuenta-accion:hover { transform: translateY(-2px); border-color: #9bd3e2; box-shadow: 0 12px 24px rgba(28, 119, 158, 0.12); }
.cuenta-accion:hover::after { opacity: 1; }
.cuenta-accion:focus-visible { outline: 3px solid #21b6cc; outline-offset: 3px; }
.cuenta-accion--azul { --cuenta-onda: #d8edff; --cuenta-icono-bg: #dcedff; --cuenta-icono: #0878de; }
.cuenta-accion--menta { --cuenta-onda: #c8f1eb; --cuenta-icono-bg: #c9f4ee; --cuenta-icono: #00a9a3; }
.cuenta-accion--lila { --cuenta-onda: #e1ddff; --cuenta-icono-bg: #e1ddff; --cuenta-icono: #6846ed; }
.cuenta-accion--cielo { --cuenta-onda: #d8efff; --cuenta-icono-bg: #dcedff; --cuenta-icono: #0878de; }
.cuenta-accion__icono { grid-area: icon; width: 3.8rem; height: 3.8rem; background: var(--cuenta-icono-bg, #e0f5fa); color: var(--cuenta-icono, #0788ad); }
.cuenta-accion__icono svg { width: 1.8rem; height: 1.8rem; }
.cuenta-accion__texto { display: grid; grid-area: text; align-self: start; gap: 0.25rem; }
.cuenta-accion__texto strong { color: #12477b; font-size: 1.08rem; }
.cuenta-accion__texto small { max-width: 17rem; color: #718aa1; font-size: 0.88rem; line-height: 1.4; }
.cuenta-accion__flecha { display: grid; grid-area: arrow; align-self: end; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 50%; background: var(--cuenta-icono-bg, #e8f7fb); color: var(--cuenta-icono, #0788ad); }
.cuenta-accion__flecha svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cuenta-direcciones { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #d5eaf4; border-radius: 0.8rem; background: #fff; }
.cuenta-direcciones__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cuenta-direcciones__encabezado h2 { margin: 0; color: #12477b; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.cuenta-direcciones__encabezado p:not(.admin-kicker) { margin: 0.25rem 0 0; color: var(--texto-suave); font-size: 0.9rem; }
.cuenta-direcciones__lista { display: grid; gap: 0.75rem; }
.cuenta-direccion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #dceaf1; border-radius: 0.8rem; background: #f9fcfe; }
.cuenta-direccion__datos { min-width: 0; }
.cuenta-direccion__datos > strong { color: #12477b; }
.cuenta-direccion__datos p { margin: 0.3rem 0; color: var(--texto); font-size: 0.9rem; overflow-wrap: anywhere; }
.cuenta-direccion__datos small { color: var(--texto-suave); }
.cuenta-direccion__eliminar { flex: none; padding: 0.55rem 0.85rem; border: 1px solid #d9959a; border-radius: 0.65rem; color: #a9323d; }
.cuenta-direccion__eliminar:hover { background: #fff3f2; }
.cuenta-direcciones__vacias { margin: 0; color: var(--texto-suave); }
.cuenta-salir { display: flex; justify-content: flex-end; margin: 0; }
.cuenta-salir button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 0.9rem; border: 1px solid #e7b9bd; border-radius: 0.7rem; background: #fff; color: #a9323d; font: 600 0.85rem var(--fuente); cursor: pointer; }
.cuenta-salir button:hover { background: #fff3f2; border-color: #d9959a; }
.cuenta-salir svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

@media (max-width: 64rem) { .cuenta-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .cuenta-hero { align-items: flex-start; flex-wrap: wrap; gap: 0.8rem; padding: 1rem; } .cuenta-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.2rem; } .cuenta-hero__copy { flex: 1; padding-left: 0.8rem; } .cuenta-hero__copy h1 { font-size: 1.55rem; } .cuenta-hero__copy p { font-size: 0.82rem; } .cuenta-hero .cuenta-salir { width: 100%; justify-content: flex-end; } .cuenta-hero .cuenta-salir button { min-height: 2.5rem; } .cuenta-acciones { grid-template-columns: 1fr; } .cuenta-accion { min-height: 9rem; } .cuenta-direcciones__encabezado { align-items: flex-start; flex-direction: column; } .cuenta-direccion { align-items: flex-start; flex-direction: column; } }

.modal-form .boton,
.modal-form .social-btn
{
    width: 100%;
}

.link-btn
{
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal-texto);
    font: 600 0.9rem var(--fuente);
    text-align: left;
    cursor: pointer;
}

.modal-auth-footer
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

body.modal-abierto { overflow: hidden; }

/* Tema Fibercas: lenguaje visual de index2.html */
:root
{
    --ink: #173861;
    --paper: #ffffff;
    --acid: #00cfff;
    --deep: #0088b3;
    --mono: "DM Mono", monospace;
    --display: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    --marino: #071322;
    --marino-2: #0c2340;
    --fondo: #eef7fb;
    --superficie: #ffffff;
    --titulo: #173861;
    --texto: #35516c;
    --texto-suave: #7892ac;
    --teal: #00819a;
    --teal-fuerte: #006c84;
    --teal-texto: #00768b;
    --linea: rgba(23, 56, 97, 0.16);
    --linea-fuerte: rgba(23, 56, 97, 0.35);
    --grad-boton: linear-gradient(135deg, #01849a 0%, #006c84 100%);
    --grad-oscuro: linear-gradient(135deg, #06283f 0%, #0a3f63 100%);
    --radio: 16px;
    --radio-sm: 12px;
    --sombra: 0 20px 50px rgba(4, 20, 38, 0.18);
    --sombra-suave: 0 6px 18px -10px rgba(6, 40, 63, 0.28);
}

html { scroll-behavior: smooth; }
body
{
    overflow-x: clip;
    background: var(--fondo);
    color: var(--ink);
    font-family: var(--display);
}

main
{
    padding-inline: 0;
    background: var(--fondo);
}

h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 500; letter-spacing: -0.06em; }
p { line-height: 1.5; }
a { color: inherit; }

.contenedor { width: min(86vw, 78rem); margin-inline: auto; }
.eyebrow, .hero-antetitulo, .marca-producto, .cabecera-envio, .pie-grid strong
{ font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow { color: var(--deep); font-size: 0.68rem; font-weight: 400; }
.eyebrow::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(0, 207, 255, 0.18); }

.cabecera
{
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    background: rgba(255, 255, 255, 0.76);
    border-bottom: 1px solid rgba(23, 56, 97, 0.1);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.cabecera-superior, .cabecera-nav { background: transparent; }
.cabecera-fila
{
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto;
    grid-template-areas: "marca buscar acciones";
    gap: 1.5rem;
    padding-block: 1rem;
}
.marca img { width: auto; height: 2.25rem; }
.buscador
{
    max-width: 20rem;
    justify-self: end;
    border: 1px solid rgba(23, 56, 97, 0.35);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.buscador input { min-height: 2.1rem; padding-left: 0.75rem; border-radius: 0; font: 0.68rem var(--mono); }
.buscador button { width: 2.2rem; height: 2.2rem; border-radius: 0; color: var(--ink); }
.cabecera-acciones { gap: 0.4rem; }
.nav-util, .cotizacion-link, .carrito-link
{ padding: 0.35rem 0.5rem; border-radius: 0; color: var(--ink); font: 0.68rem var(--mono); text-transform: uppercase; }
.nav-util:hover, .cotizacion-link:hover, .carrito-link:hover { background: rgba(0, 207, 255, 0.12); }
.cotizacion-link { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.cotizacion-cuenta { color: var(--deep); }
.cabecera-nav-fila { padding-inline: 0; }
.menu, .js .menu
{
    display: flex;
    justify-content: flex-end;
    gap: 1.35rem;
    padding: 0 0 0.75rem;
    background: transparent;
}
.menu a
{ padding: 0; border-radius: 0; color: rgba(23, 56, 97, 0.72); font: 0.64rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.menu a:hover, .menu a[aria-current="page"] { background: transparent; color: var(--deep); box-shadow: inset 0 -1px var(--acid); }
.cabecera-envio { display: none; }

.hero
{
    min-height: 100svh;
    background: #eef7fb;
}
.hero-modernizado .hero-fila
{
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 9rem 0 5rem;
}
.hero-texto { max-width: 38rem; position: relative; z-index: 2; }
.hero-antetitulo { color: var(--deep); font-size: 0.68rem; font-weight: 400; }
.hero h1
{
    max-width: 42rem;
    margin-bottom: 1.5rem;
    color: var(--ink);
    font-size: clamp(3.1rem, 7vw, 7rem);
    font-weight: 500;
    letter-spacing: -0.08em;
    line-height: 0.88;
}
.hero h1 span { color: var(--deep); }
.hero-descripcion { max-width: 28rem; color: rgba(23, 56, 97, 0.78); font-size: 1rem; }
.hero-acciones { gap: 1.5rem; margin-top: 2rem; }
.boton
{
    min-height: 2.9rem;
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: 0;
    background: #d8f2f4;
    box-shadow: none;
    color: #527b84;
    font: 0.68rem var(--mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.boton:hover { background: #b8e3e8; color: #4f747d; filter: none; transform: translateY(-2px); }
.boton.secundario { border: 0; border-bottom: 1px solid rgba(23, 56, 97, 0.5); background: transparent; color: var(--ink); }
.boton.secundario:hover { background: transparent; color: var(--deep); }
.hero-arte { opacity: 0.35; }
.hero-redes { border-color: rgba(0, 136, 179, 0.22); }
.hero-sombra { opacity: 0.12; }

.beneficios { margin-top: -3.5rem; }
.beneficios-lista
{ border: 1px solid rgba(145, 202, 235, 0.35); border-radius: 0; background: rgba(12, 35, 64, 0.94); box-shadow: 0 24px 45px rgba(4, 20, 38, 0.22); }
.beneficios-lista li { padding: 1.2rem 1.25rem; }
.beneficios-lista li + li { border-color: rgba(145, 202, 235, 0.22); }
.beneficios-lista .ico { color: var(--acid); }
.beneficios-lista strong { color: #ffffff; font: 0.68rem var(--mono); text-transform: uppercase; }
.beneficios-lista span { color: #9bb2c7; font-size: 0.75rem; }

.seccion { padding-block: 7rem; background: var(--marino); color: #ffffff; }
.seccion-blanca { background: #eef7fb; color: var(--ink); }
.seccion h1, .seccion h2 { color: inherit; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 0.9; }
.seccion h2 strong { color: var(--acid); font-weight: 500; }
.seccion-cabecera { border-top: 1px solid rgba(145, 202, 235, 0.25); padding-top: 0.8rem; }
.seccion:not(.seccion-blanca) .eyebrow, .seccion:not(.seccion-blanca) .enlace-flecha { color: var(--acid); }
.seccion-blanca .producto-card { background: #ffffff; }
.seccion:not(.seccion-blanca) .producto-card { background: #f4fbfe; border-color: rgba(145, 202, 235, 0.35); color: var(--ink); }
.productos-grid { gap: 0.65rem; }
.producto-card { border: 1px solid rgba(23, 56, 97, 0.16); border-radius: 0; background: #ffffff; box-shadow: none; }
.producto-card:hover { box-shadow: 0 0 35px rgba(0, 207, 255, 0.16); transform: translateY(-4px); }
.producto-imagen { border-radius: 0; background: #f4fbfe; }
.producto-imagen span, .etiqueta-oferta { border-radius: 0; background: var(--deep); font: 0.62rem var(--mono); text-transform: uppercase; }
.producto-info { padding: 0.8rem 1rem 1rem; }
.marca-producto { color: var(--deep); font-size: 0.6rem; }
.producto-info h3 { font-size: 1.15rem; }
.producto-info h3 a { color: inherit; }
.producto-resumen { color: var(--texto-suave); font-size: 0.78rem; }
.producto-precio, .precio-grande { color: inherit; font: 500 1rem var(--mono); }
.producto-precio del, .precio-grande del { font: 0.68rem var(--mono); }
.boton-carrito { width: 2.4rem; height: 2.4rem; border-radius: 0; background: var(--acid); color: var(--ink); }
.boton-carrito:hover { background: #b8e3e8; color: #527b84; }

.seccion-cta { padding-block: 0; background: var(--ink); }
.cta { min-height: 28rem; border-radius: 0; background: var(--ink); box-shadow: none; }
.cta h2 { font-size: clamp(2.5rem, 6vw, 6rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.86; }
.cta .eyebrow { color: var(--acid); }
.cta-lista { border: 1px solid rgba(145, 202, 235, 0.3); border-radius: 0; background: transparent; }
.cta-lista li { border-radius: 0; border-bottom: 1px solid rgba(145, 202, 235, 0.2); color: #ffffff; font: 0.68rem var(--mono); text-transform: uppercase; }

.pie { margin-top: 0; background: #0c2340; }
.pie::before { opacity: 0.18; }
.pie-arriba, .pie-grid, .pie-legal { border-color: rgba(145, 202, 235, 0.24); }
.pie-grid { background-size: 100% 1px; }
.pie-grid strong { color: var(--acid); font-weight: 400; }
.pie a { color: #d6e8f3; font: 0.7rem var(--mono); }
.pie-marca p, .pie-legal { color: #9bb2c7; font: 0.68rem var(--mono); }
.marca-clara img { height: 2.5rem; }

.filtros, .formulario, .contacto-form, .cotizacion-form, .acceso-form, .contacto-tarjetas article, .about-card, .about-panel, .vacio
{ border: 1px solid rgba(145, 202, 235, 0.25); border-radius: 0; background: #ffffff; box-shadow: none; }
input, select, textarea { border-radius: 0; border-color: rgba(23, 56, 97, 0.35); font-family: var(--mono); }
input:focus, select:focus, textarea:focus { border-color: var(--deep); box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.16); }
.modal-auth-panel { border-radius: 0; background: #eef7fb; }

@media (max-width: 56rem)
{
    .cabecera-fila { grid-template-columns: 1fr auto; grid-template-areas: "marca boton" "buscar buscar"; }
    .cabecera-acciones { display: flex; }
    .buscador { max-width: none; justify-self: stretch; }
    .js .menu { display: none; }
    .js .menu.abierto { display: flex; padding: 0.8rem 0 1rem; }
    .menu-boton { display: inline-flex; border-radius: 0; background: var(--ink); font: 0.65rem var(--mono); text-transform: uppercase; }
    .hero-modernizado .hero-fila { align-items: flex-start; padding-top: 9rem; }
    .seccion { padding-block: 5rem; }
}

@media (max-width: 40rem)
{
    .contenedor { width: min(90vw, 78rem); }
    .cabecera-acciones { gap: 0; }
    .cabecera-acciones .nav-util, .cabecera-acciones .cotizacion-link span, .cabecera-acciones .carrito-link span:not(.carrito-cuenta) { display: none; }
    .hero h1 { font-size: clamp(2.7rem, 13vw, 4.6rem); }
    .hero-acciones { align-items: stretch; flex-direction: column; width: 100%; }
    .hero-acciones .boton { width: 100%; justify-content: space-between; }
    .beneficios { margin-top: -2rem; }
    .seccion h1, .seccion h2 { font-size: clamp(2.7rem, 14vw, 4.5rem); }
}

@media (max-width: 39.99rem)
{
    .hero-redes { display: none; }
    .hero-modernizado .hero-fila { padding-bottom: 2.5rem; }
}

    .hero h1
    {
        clip-path: inset(0 100% 0 0);
        animation: titulo-revelado 0.95s cubic-bezier(0.77, 0, 0.18, 1) 0.35s both;
    }

    .hero-fila,
    .hero-lema
    {
        z-index: 2;
    }

    .hero-descripcion
    {
        animation: texto-flotante 0.7s ease 0.9s both;
    }

    .hero .boton
    {
        animation: boton-impacto 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 1.15s both;
    }

    .hero-arte
    {
        animation: hero-respiro 8s ease-in-out 0.8s infinite alternate;
    }

    .hero-lema
    {
        animation: lema-aparece 1s ease 0.45s both;
    }

    .beneficios-lista
    {
        animation: bloque-aparece 0.7s ease 0.2s both;
    }

    .beneficios-lista li,
    .valor-card,
    .categoria,
    .producto-card
    {
        animation: tarjeta-aparece 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .beneficios-lista li:nth-child(2),
    .valor-card:nth-child(2),
    .categoria:nth-child(2),
    .producto-card:nth-child(2) { animation-delay: 0.08s; }

    .beneficios-lista li:nth-child(3),
    .valor-card:nth-child(3),
    .categoria:nth-child(3),
    .producto-card:nth-child(3) { animation-delay: 0.16s; }

    .beneficios-lista li:nth-child(4),
    .valor-card:nth-child(4),
    .categoria:nth-child(4),
    .producto-card:nth-child(4) { animation-delay: 0.24s; }

    .valor-card:nth-child(5) { animation-delay: 0.32s; }

    .valor-card:hover,
    .categoria:hover,
    .producto-card:hover
    {
        transform: translateY(-6px);
    }


.seccion .producto-showcase__content h1,
.seccion .producto-detalle h1
{
    max-width: 34ch;
    color: var(--navy, #0e516d);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

@media (max-width: 56rem)
{
    .seccion .producto-showcase__content h1,
    .seccion .producto-detalle h1 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
}
    .beneficios-lista .ico
    {
        transition: transform 0.25s ease;
    }

    .beneficios-lista li:hover .ico
    {
        transform: translateY(-3px) rotate(-6deg);
    }

    @keyframes portada-entrada
    {
        from { opacity: 0; transform: translateY(1.5rem); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes hero-respiro
    {
        from { transform: scale(1); }
        to { transform: scale(1.035) translateX(-0.5rem); }
    }

    @keyframes hero-barrido
    {
        from { opacity: 0; transform: translateX(-80%); }
        18% { opacity: 1; }
        to { opacity: 0; transform: translateX(80%); }
    }

    @keyframes titulo-revelado
    {
        from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-1rem); }
        to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
    }

    @keyframes texto-flotante
    {
        from { opacity: 0; transform: translateY(0.8rem); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes boton-impacto
    {
        0% { opacity: 0; transform: translateY(1rem) scale(0.88); }
        65% { opacity: 1; transform: translateY(-0.15rem) scale(1.04); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes lema-aparece
    {
        from { opacity: 0; transform: translateX(1rem); }
        to { opacity: 1; transform: translateX(0); }
    }

    @keyframes bloque-aparece
    {
        from { opacity: 0; transform: translateY(1rem); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes tarjeta-aparece
    {
        from { opacity: 0; transform: translateY(1.25rem); }
        to { opacity: 1; transform: translateY(0); }
    }

.hero
{
    --escena-x: 0deg;
    --escena-y: 0deg;
    --scroll: 0px;
}

.hero-texto,
.hero h1,
.hero-descripcion,
.hero .boton
{
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
}

.hero-escena
{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: 68% 52%;
    transform-style: preserve-3d;
    touch-action: pan-y;
}

.hero-fila,
.hero-lema
{
    z-index: 3;
}

.hero-capa-fondo
{
    z-index: 0;
    transform: translateZ(-180px) translateY(calc(var(--scroll) * -0.35));
    will-change: transform;
}

.hero-plataforma
{
    position: absolute;
    right: 14%;
    bottom: 9%;
    z-index: 1;
    width: 31rem;
    height: 13rem;
    border: 2px solid rgba(127, 220, 236, 0.82);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72) 0 28%, rgba(127, 220, 236, 0.28) 48%, rgba(13, 96, 136, 0.1) 70%, transparent 72%);
    box-shadow: inset 0 0 0 0.55rem rgba(255, 255, 255, 0.62), 0 1.5rem 2rem rgba(6, 40, 63, 0.18);
    transform: translateZ(-35px) rotateX(68deg) translateY(calc(var(--scroll) * 0.18));
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-anillo
{
    position: absolute;
    inset: 12%;
    border: 2px solid rgba(33, 195, 216, 0.8);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.35) translateZ(2px);
    animation: radar-pulso 4s ease-out infinite;
    will-change: transform, opacity;
}

.hero-anillo-2 { animation-delay: 1.3s; }
.hero-anillo-3 { animation-delay: 2.6s; }

.hero-equipo
{
    position: absolute;
    z-index: 3;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-medidor
{
    right: 28%;
    bottom: 17%;
    width: 8rem;
    transform: translateZ(55px) translateY(calc(var(--scroll) * -0.55));
    animation: equipo-flota-medidor 5.4s ease-in-out infinite;
}

.hero-cortadora
{
    right: 13%;
    bottom: 12%;
    width: 11rem;
    transform: translateZ(90px) translateY(calc(var(--scroll) * -0.8));
    animation: equipo-flota-cortadora 5.8s ease-in-out 0.35s infinite;
}

.hero-sombra
{
    position: absolute;
    z-index: 2;
    bottom: 12%;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(6, 40, 63, 0.28);
    opacity: 0.5;
    transform: translateZ(15px) rotateX(68deg) scale(1);
    will-change: transform, opacity;
}

.hero-sombra-medidor
{
    right: 28.5%;
    width: 7rem;
    animation: sombra-respiro-medidor 5.4s ease-in-out infinite;
}

.hero-sombra-cortadora
{
    right: 12%;
    width: 10rem;
    animation: sombra-respiro-cortadora 5.8s ease-in-out 0.35s infinite;
}

.hero-pausado .hero-anillo,
.hero-pausado .hero-equipo,
.hero-pausado .hero-sombra
{
    animation-play-state: paused;
}

.producto-card,
.categoria
{
    --tarjeta-x: 0deg;
    --tarjeta-y: 0deg;
    --mx: 50%;
    --my: 50%;
    transform: perspective(900px) rotateX(var(--tarjeta-y)) rotateY(var(--tarjeta-x));
    transform-style: preserve-3d;
}

.producto-card::after,
.categoria::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 28%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.producto-card:active::after,
.categoria:active::after
{
    opacity: 1;
}

@keyframes radar-pulso
{
    0% { opacity: 0.75; transform: scale(0.35) translateZ(2px); }
    70%, 100% { opacity: 0; transform: scale(1.08) translateZ(2px); }
}

@keyframes equipo-flota-medidor
{
    0%, 100% { transform: translateZ(55px) translateY(calc(var(--scroll) * -0.55)); }
    50% { transform: translateZ(55px) translateY(calc(var(--scroll) * -0.55 - 6px)); }
}

@keyframes equipo-flota-cortadora
{
    0%, 100% { transform: translateZ(90px) translateY(calc(var(--scroll) * -0.8)); }
    50% { transform: translateZ(90px) translateY(calc(var(--scroll) * -0.8 - 6px)); }
}

@keyframes sombra-respiro-medidor
{
    0%, 100% { opacity: 0.5; transform: translateZ(15px) rotateX(68deg) scale(1); }
    50% { opacity: 0.25; transform: translateZ(15px) rotateX(68deg) scale(0.78); }
}

@keyframes sombra-respiro-cortadora
{
    0%, 100% { opacity: 0.5; transform: translateZ(15px) rotateX(68deg) scale(1); }
    50% { opacity: 0.25; transform: translateZ(15px) rotateX(68deg) scale(0.78); }
}

@media (min-width: 64rem)
{
    .hero-escena
    {
        left: 42%;
    }
}

@media (max-width: 63.99rem)
{
    .hero-escena
    {
        top: auto;
        height: 13rem;
        perspective-origin: 50% 55%;
    }

    .hero-plataforma
    {
        right: 4%;
        bottom: 2%;
        width: 19rem;
        height: 8rem;
    }

    .hero-medidor
    {
        right: 29%;
        bottom: 13%;
        width: 5.5rem;
    }

    .hero-cortadora
    {
        right: 8%;
        bottom: 8%;
        width: 7rem;
    }

    .hero-sombra-medidor { right: 29%; width: 5rem; bottom: 7%; }
    .hero-sombra-cortadora { right: 7%; width: 6.5rem; bottom: 3%; }
}

@supports not (transform-style: preserve-3d)
{
    .hero-escena { perspective: none; }
    .hero-plataforma,
    .hero-equipo,
    .hero-sombra { transform: none; }
    .hero-anillo { display: none; }
}

@media (prefers-reduced-motion: reduce)
{
    .hero-escena,
    .producto-card,
    .categoria
    {
        transform: none !important;
    }

    .hero-anillo,
    .hero-equipo,
    .hero-sombra
    {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after
    {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
:root
{
    --seccion-y: clamp(3.5rem, 6vw, 5.5rem);
    --sombra-card: 0 1px 2px rgba(6, 40, 63, 0.05), 0 14px 30px -18px rgba(6, 40, 63, 0.3);
    --sombra-card-hover: 0 2px 4px rgba(6, 40, 63, 0.06), 0 26px 44px -22px rgba(6, 40, 63, 0.42);
    --fondo-imagen: radial-gradient(circle at 50% 42%, #ffffff 38%, #e9f3f9 100%);
}

.seccion { padding-block: var(--seccion-y); }
.seccion + .seccion { padding-top: var(--seccion-y); }
main > .seccion:first-child { padding-top: 2.5rem; }
.aviso + .seccion { padding-top: 2rem; }

.seccion h1,
.seccion h2 { font-weight: 700; }

.seccion h2 strong { color: var(--teal); font-weight: 800; }

.seccion-cabecera { margin-bottom: 2rem; }

.seccion-blanca
{
    background: #ffffff;
    border-block: 1px solid var(--linea);
}

.beneficios
{
    margin-top: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--linea);
}

.beneficios-lista
{
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.beneficios-lista .ico
{
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: var(--cielo-2);
    color: var(--teal);
}

.categoria
{
    border-radius: 20px;
    box-shadow: var(--sombra-card);
}

.categoria:hover { box-shadow: var(--sombra-card-hover); }

.categoria-foto
{
    aspect-ratio: 16 / 10;
    background: var(--fondo-imagen);
}

.categoria-foto img { transition: transform 0.35s ease; }
.categoria:hover .categoria-foto img { transform: scale(1.05); }

.categoria-conteo
{
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 1;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px var(--linea-fuerte);
    color: var(--teal-fuerte);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.categoria-icono
{
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 1.25rem;
    border-radius: 14px;
    background: var(--grad-boton);
    box-shadow: 0 10px 18px -10px rgba(0, 108, 132, 0.9);
    color: #ffffff;
    transition: transform 0.2s ease;
}

.categoria:hover .categoria-icono { transform: rotate(-6deg) scale(1.06); }

.categoria strong { margin: 0.9rem 1.25rem 0; font-size: 1.2rem; }

.categoria-texto
{
    margin: 0.35rem 1.25rem 1.6rem;
    padding-right: 3.5rem;
}

.categoria .categoria-ir
{
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0;
    background: var(--cielo);
    color: var(--teal-fuerte);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.categoria:hover .categoria-ir
{
    background: var(--grad-boton);
    color: #ffffff;
    transform: translateX(3px);
}

.productos-grid-destacados { grid-template-columns: 1fr; }

@media (min-width: 36rem) { .productos-grid-destacados { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .productos-grid-destacados { grid-template-columns: repeat(4, 1fr); } }

.producto-card
{
    border-radius: 20px;
    box-shadow: var(--sombra-card);
}

.producto-card:hover { box-shadow: var(--sombra-card-hover); }

.producto-imagen { background: var(--fondo-imagen); }

.producto-imagen img { transition: transform 0.35s ease; }
.producto-card:hover .producto-imagen img { transform: scale(1.05); }

.producto-imagen span
{
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px var(--linea-fuerte);
    color: var(--teal-fuerte);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.producto-info
{
    padding: 1.1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--linea);
}

.producto-precio
{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.producto-precio del { margin: 0 0 0.1rem; }

.boton-carrito
{
    background: var(--grad-boton);
    box-shadow: 0 10px 18px -10px rgba(0, 108, 132, 0.9);
    color: #ffffff;
}

.boton-carrito:hover { background: var(--grad-boton); filter: brightness(1.1); }

.valores-fibercas { background: var(--fondo); }

.valores-grid
{
    grid-template-columns: 1fr;
    gap: 1.1rem;
    counter-reset: valor;
}

.valor-card
{
    position: relative;
    gap: 0.6rem;
    overflow: hidden;
    padding: 1.9rem 1.6rem 1.7rem;
    border: 1px solid var(--linea);
    border-radius: 20px;
    box-shadow: var(--sombra-card);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.valor-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-card-hover); }

.valor-card::before
{
    content: counter(valor, decimal-leading-zero);
    counter-increment: valor;
    align-self: flex-start;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--cielo);
    color: var(--teal-fuerte);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.valor-card::after
{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-boton);
}

.valor-card h3 { font-size: 1.3rem; }

@media (min-width: 40rem)
{
    .valores-grid { grid-template-columns: repeat(2, 1fr); }
    .valor-card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 64rem)
{
    .valores-grid { grid-template-columns: repeat(6, 1fr); }
    .valor-card { grid-column: span 2; }
    .valor-card:nth-child(n + 4) { grid-column: span 3; }
}

.seccion-cta { padding-block: 0 var(--seccion-y); }
/* =========================================================
   FIX DE MÁRGENES
   Pegar AL FINAL de tienda-general.css (no borres nada).
   ========================================================= */

:root
{
    --ancho: 87.5rem;   /* 1400px: mismo ancho que ya tenías en el carrito */
    --margen: 1.25rem;  /* espacio lateral dentro del contenedor */
}

/* 1. Quita el margen que encogía todo el <main>.
      Era lo que dejaba franjas a los lados del hero y de las bandas blancas,
      mientras el header y el footer sí llegaban al borde. */
main { padding-inline: 0; }

/* 2. Contenedor único para toda la tienda.
      :where() le da especificidad 0, así no pisa a .aviso ni a otras reglas. */
:where(.contenedor)
{
    width: min(100%, var(--ancho));
    margin-inline: auto;
    padding-inline: var(--margen);
}

/* 3. Hero a todo el ancho: el fondo y la imagen llegan a los bordes de la
      pantalla, y el texto sigue alineado con el logo.
      Con esto el lema "Conectividad que impulsa tu futuro" se posiciona
      respecto al hero completo y se queda sobre la imagen oscura. */
.hero-fila { position: static; }

/* Reglas finales del tema para conservar prioridad sobre ajustes heredados. */
.cabecera { position: fixed; top: 0; box-shadow: none; }
.cabecera-fila { padding-inline: 0; }
.producto-card { border-radius: 0; box-shadow: none; }
.producto-card:hover { box-shadow: 0 0 35px rgba(0, 207, 255, 0.16); }
.producto-imagen span { border-radius: 0; background: var(--deep); box-shadow: none; color: #ffffff; }
.boton-carrito { border-radius: 0; background: var(--acid); box-shadow: none; color: var(--ink); }
.boton-carrito:hover { background: #b8e3e8; filter: none; color: #527b84; }
.seccion-cta { padding-block: 0; }
.valor-card { border-radius: 0; box-shadow: none; }
.valor-card::before { border-radius: 0; background: var(--acid); color: var(--ink); font-family: var(--mono); font-weight: 400; }
.valor-card::after { height: 1px; background: var(--acid); }

/* --- Acceso: avisos, contador del código y reenvío --------------------- */
.modal-auth-status { margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.4; border-radius: 8px; }
.modal-auth-status:empty { display: none; }
.modal-auth-status.success,
.modal-auth-status.error { padding: 0.6rem 0.8rem; }
.modal-auth-status.success { background: var(--exito-fondo); color: var(--exito); }
.modal-auth-status.error { background: #fdecec; color: #a4262c; }
.auth-timer { margin: -0.25rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--teal-texto); text-align: center; }
.auth-timer.vencido { color: #a4262c; }
.auth-resend { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; color: var(--texto-suave); }
.auth-resend .link-btn { white-space: nowrap; }
.auth-resend .link-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#auth-code { text-align: center; letter-spacing: 0.45em; font-size: 1.35rem; font-weight: 700; }
.auth-success { display: grid; gap: 0.85rem; text-align: center; color: var(--texto); }
.modal-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

/* Sistema compartido para botones de acción de la tienda. */
body .page-shell button.boton:not(.secundario):not(.boton-claro),
body .page-shell a.boton:not(.secundario):not(.boton-claro),
body .page-shell .btn-accion.btn-primario,
body .page-shell form button[type="submit"]:not([class]):not([name^="cantidades_cotizacion"]),
body .modal-recuperacion button[type="submit"],
body .auth-submit,
body .hero-actions .primary-button,
body .new-product-footer .primary-button,
body .hub-card .hub-boton,
body .hub-cotizacion-boton
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border: 1px solid #078eae;
    border-radius: 0.8rem;
    background: #0799bc;
    box-shadow: 0 10px 22px rgba(0, 116, 150, 0.16);
    color: #ffffff;
    font-family: var(--fuente);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body .page-shell button.boton:not(.secundario):not(.boton-claro):hover,
body .page-shell a.boton:not(.secundario):not(.boton-claro):hover,
body .page-shell .btn-accion.btn-primario:hover,
body .page-shell form button[type="submit"]:not([class]):not([name^="cantidades_cotizacion"]):hover,
body .modal-recuperacion button[type="submit"]:hover,
body .auth-submit:hover,
body .hero-actions .primary-button:hover,
body .new-product-footer .primary-button:hover,
body .hub-card .hub-boton:hover,
body .hub-cotizacion-boton:hover
{
    border-color: #067d9d;
    background: #0785a8;
    box-shadow: 0 12px 24px rgba(0, 116, 150, 0.2);
    color: #ffffff;
    filter: none;
    transform: translateY(-1px);
}

body .page-shell button.boton.secundario,
body .page-shell a.boton.secundario,
body .page-shell .btn-accion.btn-outline-azul,
body .page-shell .btn-accion.btn-neutro,
body .hero-actions .secondary-button,
body .new-product-footer .secondary-button
{
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid #078eae;
    border-radius: 0.8rem;
    background: #ffffff;
    box-shadow: none;
    color: #0788ad;
    font-family: var(--fuente);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
}

body .page-shell button.boton.secundario::before { content: none; }
body .page-shell button.boton.secundario:hover,
body .page-shell a.boton.secundario:hover,
body .page-shell .btn-accion.btn-outline-azul:hover,
body .page-shell .btn-accion.btn-neutro:hover,
body .hero-actions .secondary-button:hover,
body .new-product-footer .secondary-button:hover
{
    border-color: #067d9d;
    background: #f2fbfd;
    color: #067d9d;
    transform: translateY(-1px);
}

body .page-shell .btn-accion,
body .btn-accion
{
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border-width: 1.5px;
    border-radius: 0.8rem;
    font-family: var(--fuente);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

body .page-shell .btn-accion .btn-ico,
body .btn-accion .btn-ico
{
    width: auto;
    height: auto;
    min-height: 0;
}

body .page-shell .btn-accion .btn-label,
body .btn-accion .btn-label
{
    padding: 0;
    border: 0;
}

body .page-shell .btn-accion.btn-primario,
body .btn-accion.btn-primario
{
    border-color: #078eae;
    background: #0799bc;
    color: #ffffff;
}

body .page-shell .btn-accion.btn-outline-azul,
body .page-shell .btn-accion.btn-neutro,
body .btn-accion.btn-outline-azul,
body .btn-accion.btn-neutro
{
    border-color: #078eae;
    background: #ffffff;
    color: #0788ad;
}

body .page-shell .btn-accion.btn-outline-rojo,
body .btn-accion.btn-outline-rojo
{
    border-color: #c0392b;
    background: #ffffff;
    color: #c0392b;
}

body .page-shell .carrito-acciones .boton:not(.secundario),
body .page-shell .cotizacion-panel .boton:not(.secundario),
body .page-shell .cotizacion-form .boton:not(.secundario)
{
    border: 1px solid #078eae;
    border-radius: 1rem;
    background: #0799bc;
    color: #ffffff;
    font: 700 0.95rem/1.2 var(--fuente);
    letter-spacing: 0;
    text-transform: none;
}

body .page-shell .boton-carrito
{
    border: 1px solid #078eae;
    border-radius: 0.85rem;
    background: #0799bc;
    color: #ffffff;
}

body .page-shell .boton-cotizar
{
    border: 1.5px solid #078eae;
    border-radius: 0.85rem;
    background: #ffffff;
    color: #0788ad;
}

body .page-shell .btn-accion.btn-outline-rojo { border-color: #c0392b; background: #ffffff; color: #c0392b; }

@media (max-width: 40rem)
{
    .modal-auth { padding: 0.75rem; }
    .modal-auth-panel
    {
        flex: 0 1 30rem;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .modal-auth-panel .modal-form
    {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }
    .modal-auth-panel .campo,
    .modal-auth-panel .campo-password,
    .modal-auth-panel .auth-google-block,
    .modal-auth-panel .auth-google-native
    {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .modal-auth-panel .modal-form input { width: 100%; min-width: 0; }
    .modal-auth-panel .auth-login-tools,
    .modal-auth-panel .modal-auth-footer { flex-wrap: wrap; }
    .modal-auth-panel .auth-login-tools .link-btn,
    .modal-auth-panel .modal-auth-footer .link-btn
    {
        max-width: 100%;
        white-space: normal;
    }
}