/**
 * Hero del inicio: titular, buscador, calculadora y accesos a categorias.
 * Estructura en app/Views/components/web/heroInicio.php
 *
 * Los colores salen de variables.css, asi que sigue al tema claro/oscuro solo.
 */

/*
 * El hero usaba cuatro variables que no existen en variables.css
 * (--color-surface, --color-text-secondary, --color-bg, --color-bg-secondary),
 * asi que siempre caia en el valor claro de reserva: en modo oscuro las
 * tarjetas salian blancas y, como .dark a pinta de blanco todo enlace con
 * !important, el texto encima quedaba invisible. Aqui se atan a las reales.
 */
.hero-inicio {
    --hero-superficie:   var(--color-bg-white);
    --hero-superficie-2: var(--color-bg-subtle);
    --hero-borde:        var(--color-border-medium);
    --hero-texto:        var(--color-text);
    --hero-texto-2:      var(--color-text-light);
    --hero-texto-3:      var(--color-text-muted);
}

/* En oscuro las superficies suben un escalon sobre el fondo de pagina */
html.dark .hero-inicio {
    --hero-superficie:   #1f2937;
    --hero-superficie-2: #374151;
    --hero-borde:        #374151;
}

.hero-inicio {
    /* Sin padding lateral: el ancho lo pone .container-90, igual que el resto del
       inicio. Con padding propio el hero quedaba 15px mas adentro que las ofertas. */
    padding: 2.25rem 0 1.25rem;
    background:
        radial-gradient(1100px 380px at 12% -10%, rgba(var(--color-primary-rgb), .10), transparent 60%),
        radial-gradient(900px 340px at 88% 0%, rgba(var(--color-primary-rgb), .06), transparent 55%);
}

/* El ancho lo pone .container-90, el mismo que usa el resto del inicio: con un
   max-width propio el hero quedaba mas angosto que las secciones de abajo */
.hero-inicio__caja {
    margin-inline: auto;
}

/* ── Fila del hero: logo y accesos ───────────────────────── */

.hero-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.hero-barra__logo img {
    height: 46px;
    width: auto;
    display: block;
}

.hero-barra__acciones {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.hero-barra__enlace {
    padding: .45rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: .89rem;
    font-weight: 600;
    color: var(--hero-texto-2);
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
}

.hero-barra__enlace:hover {
    background: rgba(var(--color-primary-rgb), .09);
    color: var(--color-primary);
}

/* Instalaciones es el diferenciador: se marca con el borde, sin gritar */
.hero-barra__enlace--destacado {
    border: 1.5px solid var(--color-secondary, #2563eb);
    color: var(--color-secondary, #2563eb);
}

.hero-barra__enlace--destacado:hover {
    background: var(--color-secondary, #2563eb);
    color: #fff;
}

/* Tema, favoritos, carrito y menu: agrupados, igual que en la barra fija */
.hero-barra__iconos {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: .35rem;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
}

html.dark .hero-barra__iconos { background: rgba(255, 255, 255, .07); }

.hero-barra__icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hero-texto-2);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.hero-barra__icono:hover {
    background: var(--hero-superficie);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html.dark .hero-barra__icono:hover { background: rgba(255, 255, 255, .1); }

/* El menu solo hace falta donde los enlaces no caben */
.hero-barra__menu { display: none; }

/* ── Titular ─────────────────────────────────────────────── */

.hero-inicio__texto { text-align: center; margin-bottom: 1.4rem; }

.hero-inicio__titulo {
    margin: 0 0 .4rem;
    font-size: clamp(1.75rem, 4.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--hero-texto);
}

.hero-inicio__bajada {
    margin: 0;
    font-size: clamp(.95rem, 1.6vw, 1.1rem);
    color: var(--hero-texto-2);
}

/* La instalacion es el diferenciador: se enlaza a su pagina sin romper la frase */
.hero-inicio__bajada a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.hero-inicio__bajada a:hover { color: var(--color-primary-dark); }

/* ── Pestanas ────────────────────────────────────────────── */

.hero-inicio__pestanas {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .85rem;
}

.hero-pestana {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-size: .92rem;
    font-weight: 600;
    color: var(--hero-texto-2);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.hero-pestana svg { width: 17px; height: 17px; }

.hero-pestana:hover { color: var(--color-primary); }

.hero-pestana--activa {
    background: var(--hero-superficie);
    border-color: var(--hero-borde);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* ── Paneles ─────────────────────────────────────────────── */

.hero-panel--oculto { display: none; }

/* ── Buscador ────────────────────────────────────────────── */

.hero-buscador {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 880px;
    margin-inline: auto;
    padding: .4rem .4rem .4rem 1rem;
    background: var(--hero-superficie);
    border: 1px solid var(--hero-borde);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.hero-buscador:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 6px 26px rgba(var(--color-primary-rgb), .18);
}

.hero-buscador__lupa {
    width: 20px; height: 20px;
    flex: none;
    color: var(--hero-texto-3);
}

.hero-buscador__campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: .7rem 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--hero-texto);
}

.hero-buscador__campo::placeholder { color: var(--hero-texto-3); }

/* El navegador dibuja su propia X en los input[type=search] */
.hero-buscador__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.hero-buscador__boton {
    flex: none;
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease;
}

.hero-buscador__boton:hover { background: var(--color-primary-dark); }

/*
 * El desplegable de sugerencias cuelga del buscador. Se le acota el alto a lo que
 * queda de pantalla por debajo: el del navbar puede medir 520px porque arranca
 * pegado al borde de arriba, pero aqui el buscador esta a media altura y con ese
 * alto la lista se salia por abajo y no se veia entera.
 */
.hero-buscador .search-suggestions {
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    max-height: min(46vh, 420px);
}

/* ── Calculadora ─────────────────────────────────────────── */

.hero-calc {
    max-width: 880px;
    margin-inline: auto;
}

.hero-calc__campos {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: .9rem 1rem;
    background: var(--hero-superficie);
    border: 1px solid var(--hero-borde);
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.hero-calc__campo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 0;
    min-width: 0;
}

.hero-calc__campo > span {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hero-texto-2);
}

.hero-calc__campo input,
.hero-calc__campo select {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--hero-borde);
    border-radius: 10px;
    background: var(--hero-superficie);
    font-size: .98rem;
    color: var(--hero-texto);
}

.hero-calc__campo input:focus,
.hero-calc__campo select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}

/* La unidad, dentro del campo */
.hero-calc__campo em {
    position: absolute;
    right: .7rem;
    bottom: .62rem;
    font-style: normal;
    font-size: .85rem;
    color: var(--hero-texto-3);
    pointer-events: none;
}

.hero-calc__campo--tipo { flex: 1.5 1 0; }
.hero-calc__campo--tipo em { display: none; }

.hero-calc__por {
    padding-bottom: .65rem;
    font-size: 1.05rem;
    color: var(--hero-texto-3);
}

.hero-calc__boton {
    flex: none;
    padding: .62rem 1.4rem;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, opacity .18s ease;
}

.hero-calc__boton:hover:not(:disabled) { background: var(--color-primary-dark); }
.hero-calc__boton:disabled { opacity: .6; cursor: default; }

.hero-calc__nota {
    margin: .5rem 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--hero-texto-3);
}

/* ── Resultado del calculo ───────────────────────────────── */

.hero-calc__resultado { max-width: 880px; margin: .85rem auto 0; }

.calc-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .6rem;
    padding: .7rem .95rem;
    border-radius: 12px;
    background: rgba(var(--color-primary-rgb), .08);
    font-size: .92rem;
    color: var(--hero-texto);
}

.calc-resumen strong { font-weight: 800; }

.calc-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
    margin-top: .6rem;
}

.calc-item {
    display: flex;
    gap: .65rem;
    padding: .6rem;
    border: 1px solid var(--hero-borde);
    border-radius: 12px;
    background: var(--hero-superficie);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease;
}

.calc-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.calc-item__foto {
    width: 58px; height: 58px;
    flex: none;
    border-radius: 8px;
    object-fit: cover;
    background: var(--hero-superficie-2);
}

.calc-item__datos { min-width: 0; }

.calc-item__nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
}

.calc-item__cajas {
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--hero-texto-2);
}

.calc-item__total {
    margin-top: .15rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--color-primary);
}

.calc-aviso {
    padding: .7rem .95rem;
    border-radius: 12px;
    background: var(--hero-superficie-2);
    font-size: .9rem;
    color: var(--hero-texto-2);
}

.calc-vermas {
    display: inline-block;
    margin-top: .55rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* ── Las cuatro categorias, con sus tipos ────────────────── */

.hero-categorias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem;
    margin-top: 1.5rem;
}

.hero-categoria {
    padding: .95rem 1rem 1rem;
    border: 1px solid var(--hero-borde);
    border-radius: 14px;
    background: var(--hero-superficie);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hero-categoria:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.hero-categoria__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 800;
    color: var(--hero-texto);
}

.hero-categoria__titulo svg {
    width: 21px; height: 21px;
    flex: none;
    color: var(--color-primary);
}

.hero-categoria__titulo:hover { color: var(--color-primary); }

.hero-categoria__tipos {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.hero-categoria__tipos a {
    display: block;
    padding: .18rem 0;
    text-decoration: none;
    font-size: .855rem;
    color: var(--hero-texto-2);
    transition: color .15s ease, padding-left .15s ease;
}

.hero-categoria__tipos a:hover {
    color: var(--color-primary);
    padding-left: .25rem;
}

/* ── Pantallas chicas ────────────────────────────────────── */

@media (max-width: 980px) {
    .hero-categorias { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    /* Los enlaces de texto no caben: quedan en el menu de siempre */
    .hero-barra__enlace { display: none; }
    .hero-barra__menu { display: flex; }
    .hero-barra { margin-bottom: 1.25rem; }
    .hero-barra__logo img { height: 38px; }
}

@media (max-width: 640px) {
    .hero-inicio { padding: 1.5rem 0 1rem; }

    /* Las pestanas en una sola linea: con el padding de escritorio el texto se parte */
    .hero-inicio__pestanas { gap: .25rem; }
    .hero-pestana { padding: .5rem .7rem; font-size: .85rem; white-space: nowrap; }
    .hero-pestana svg { width: 15px; height: 15px; }

    .hero-buscador { padding-left: .85rem; }
    .hero-buscador__campo { font-size: .95rem; }
    .hero-buscador__boton { padding: .7rem 1rem; font-size: .9rem; }

    /* En el telefono los campos se apilan: en fila quedan ilegibles */
    .hero-calc__campos {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
    }
    .hero-calc__campo--tipo { grid-column: 1 / -1; }
    .hero-calc__boton { grid-column: 1 / -1; padding: .75rem; }

    /* En el telefono, una tarjeta por fila: dos columnas dejan los tipos ilegibles */
    .hero-categorias { grid-template-columns: 1fr; gap: .5rem; }
    .hero-categoria { padding: .8rem .9rem; }

    /* Los tipos pasan a fila envolvente, ocupan menos alto */
    .hero-categoria__tipos { flex-direction: row; flex-wrap: wrap; gap: .3rem .5rem; }
    .hero-categoria__tipos a { padding: .1rem 0; font-size: .82rem; }
    .hero-categoria__tipos a:hover { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-categoria:hover,
    .calc-item:hover { transform: none; }
    .hero-categoria__tipos a:hover { padding-left: 0; }
}

/* ──────────────────────────────────────────────────────────
   Enlaces en modo oscuro

   home-minimal.css trae `.dark a { color: #fff !important }` para toda la
   pagina. Sin estas lineas el titulo de cada categoria, sus tipos y el
   enlace de instalacion salen blancos y se pierden.
   ────────────────────────────────────────────────────────── */

html.dark .hero-inicio__bajada a { color: var(--color-primary) !important; }

/* El corazon es un <a> y el tema, el carrito y el menu son <button>: sin esto
   el corazon quedaba mas claro que los otros tres en modo oscuro. */
html.dark .hero-barra__icono,
html.dark a.hero-barra__icono:link,
html.dark a.hero-barra__icono:visited { color: var(--hero-texto-2) !important; }

html.dark .hero-barra__icono:hover,
html.dark a.hero-barra__icono:hover { color: var(--color-primary) !important; }
html.dark .hero-barra__enlace { color: var(--hero-texto-2) !important; }
html.dark .hero-barra__enlace:hover { color: var(--color-primary) !important; }
html.dark .hero-barra__enlace--destacado { color: var(--color-secondary-light) !important; }
html.dark .hero-categoria__titulo { color: var(--hero-texto) !important; }
html.dark .hero-categoria__titulo:hover { color: var(--color-primary) !important; }
html.dark .hero-categoria__tipos a { color: var(--hero-texto-2) !important; }
html.dark .hero-categoria__tipos a:hover { color: var(--color-primary) !important; }
html.dark .calc-item { color: var(--hero-texto) !important; }
html.dark .calc-item__cajas { color: var(--hero-texto-2) !important; }
html.dark .calc-item__total { color: var(--color-primary) !important; }
html.dark .calc-vermas { color: var(--color-primary) !important; }

/* ──────────────────────────────────────────────────────────
   Contraste

   El naranja de marca sobre blanco da 2,8:1 y no llega al minimo legible.
   En claro los textos naranjas van al naranja quemado; en oscuro el naranja
   ya aclara solo y se deja como esta, salvo el boton relleno.
   ────────────────────────────────────────────────────────── */

.hero-inicio__bajada a { color: #c2410c; }
.hero-inicio__bajada a:hover { color: #9a3412; }
.hero-pestana:hover,
.hero-pestana--activa { color: #c2410c; }
.hero-buscador__boton { background: #ea580c; }
.hero-buscador__boton:hover { background: #c2410c; }

html.dark .hero-pestana:hover,
html.dark .hero-pestana--activa { color: var(--color-primary); }
html.dark .hero-buscador__boton { background: #c2410c; }
html.dark .hero-buscador__boton:hover { background: #9a3412; }