/* ==========================================================================
   ÍNDICE DE ARQUITECTURA (CSS LAYERS)
   1. reinicio     -> Reset y normalización (Box-sizing, márgenes).
   2. tema         -> Design Tokens (Variables de color, fuentes, espacios).
   3. base         -> Estilos globales para etiquetas HTML puras (body, h1, a).
   4. estructura   -> Clases de layout (Contenedores, Grids, Sections).
   5. componentes  -> Bloques BEM (Tarjetas, Nav, Hero, Botones).
   6. utilidades   -> Clases "helper" de alta especificidad (Visually hidden, etc).
   ========================================================================== */

@layer reinicio, tema, base, estructura, componentes, utilidades;

/* ==========================================================================
   1. CAPA: REINICIO (RESET)
   Normalización cross-browser y ajustes de comportamiento base.
   ========================================================================== */
@layer reinicio {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overflow-x: hidden;
    scroll-padding: 2rem;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-block-size: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    /* Configuración para Sticky Footer */
    display: flex;
    flex-direction: column;
  }

  main {
    flex-grow: 1;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  ul,
  ol,
  [role="list"] {
    list-style: none;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img {
    max-inline-size: 100%;
    display: block;
  }

  button,
  select,
  input,
  textarea {
    font: inherit;
  }
}

/* ==========================================================================
   2. CAPA: TEMA (DESIGN TOKENS)
   Variables CSS globales. 
   Uso: Primitivas (definición de color) -> Semánticas (uso del color).
   ========================================================================== */
@layer tema {
  :root {
    /* --- Primitivas de Color (Paleta) --- */
    --color-blanco: hsl(0, 0%, 100%);
    --color-gris-claro: hsl(0, 2%, 79%);
    --color-gris-oscuro: hsl(0, 0%, 25%);
    --color-negro: hsl(0, 0%, 0%);

    /* Gama Marrones */
    --color-marron-muy-oscuro: hsl(0, 6%, 13%);
    --color-marron-oscuro: hsl(0, 6%, 15%);
    --color-marron-medio: hsl(9, 7%, 21%);
    --color-marron-claro: hsl(10, 5%, 25%);

    /* Colores Acento */
    --color-rojo-marca: hsl(0, 85%, 15%);
    --color-rojo-alerta: hsl(359, 34%, 24%);
    --color-verde-eco: hsl(143, 38%, 37%);
    --color-naranja: hsl(28, 43%, 28%);
    --color-azul-teal: hsl(186, 42%, 25%);

    /* --- Tipografía --- */
    --fuente-titulos: "Chakra Petch", sans-serif;
    --fuente-cuerpo: "Chakra Petch", sans-serif;

    /* Escala Fluida */
    --t-fuente-xs: 0.875rem;
    --t-fuente-base: 1rem;
    --t-fuente-md: 1.125rem;
    --t-fuente-lg: 1.25rem;
    --t-fuente-xl: 1.5rem;
    --t-fuente-xxl: 2rem;
    --t-fuente-gigante: 2.5rem;

    @media (width > 760px) {
      --t-fuente-md: 1.25rem;
      --t-fuente-lg: 1.5rem;
      --t-fuente-xl: 2rem;
      --t-fuente-xxl: 3rem;
      --t-fuente-gigante: 5rem;
    }

    /* --- UI Tokens --- */
    --radio-pequeno: 0.25rem;
    --radio-medio: 0.5rem;
    --radio-grande: 0.75rem;
  }

  /* --- Variables Semánticas (Alias) --- */
  :root {
    /* Colores de Texto */
    --texto-principal: var(--color-gris-claro);
    --texto-contraste-alto: var(--color-blanco);
    --texto-inverso: var(--color-negro);
    --texto-marca: var(--color-rojo-marca);

    /* Colores de Fondo */
    --fondo-cuerpo: var(--color-negro);
    --fondo-nivel-1: var(--color-marron-muy-oscuro);
    /* Footer */
    --fondo-nivel-2: var(--color-marron-oscuro);
    /* Secciones */
    --fondo-nivel-3: var(--color-marron-medio);
    /* Cards */
    --fondo-nivel-4: var(--color-marron-claro);
    /* Notas/Detalles */
    --fondo-blanco: var(--color-blanco);
    --fondo-hover-tecnico: var(--color-gris-oscuro);

    /* UI & Branding */
    --color-marca-principal: var(--color-rojo-marca);

    /* Estados y Categorías */
    --fondo-eco: var(--color-verde-eco);
    --fondo-calderas: var(--color-naranja);
    --fondo-otros: var(--color-azul-teal);
    --fondo-expertos: var(--color-rojo-alerta);

    /* Mapeo Tipográfico */
    --tamano-titulo-pequeno: var(--t-fuente-lg);
    --tamano-titulo-medio: var(--t-fuente-xl);
    --tamano-titulo-grande: var(--t-fuente-xxl);
    --tamano-hero: var(--t-fuente-gigante);
  }

  @view-transition {
    navigation: auto;
  }
}

/* ==========================================================================
   3. CAPA: BASE
   Estilos globales aplicados directamente a etiquetas HTML.
   ========================================================================== */
@layer base {
  body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-fuente-base);
    color: var(--texto-principal);
    background-color: var(--fondo-cuerpo);
  }

  h1,
  h2,
  h3 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--texto-contraste-alto);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  h1 {
    color: var(--color-marca-principal);
  }

  a {
    color: var(--texto-principal);
    transition: color 0.2s ease;
  }

  a:hover,
  a:focus-visible {
    color: var(--texto-contraste-alto);
  }

  img {
    border-radius: var(--radio-grande);
  }
}

/* ==========================================================================
   4. CAPA: ESTRUCTURA
   Sistemas de layout agnósticos al contenido.
   ========================================================================== */
@layer estructura {

  /* Espaciado vertical (Owl selector) */
  .flow>*+* {
    margin-block-start: var(--espacio-flujo, 1em);
  }

  /* Contenedor central */
  .wrapper {
    --ancho-maximo: 1130px;
    --relleno-lateral: 1rem;

    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--relleno-lateral);
    box-sizing: content-box;
  }

  .wrapper[data-width="narrow"] {
    --ancho-maximo: 720px;
  }

  .wrapper[data-width="wide"] {
    --ancho-maximo: 1330px;
  }

  /* Padding vertical de secciones */
  .section {
    padding-block: 3.75rem;
  }

  @media (width > 760px) {
    .section {
      padding-block: 8rem;
    }

    .section[data-padding="compact"] {
      padding-block: 4.5rem;
    }
  }

  /* Grid automático responsivo */
  .grid-auto-fill {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  }

  /* Columnas iguales (Switch a fila en desktop) */
  .equal-columns {
    display: grid;
    gap: 1rem;
    align-items: start;
  }

  .equal-columns[data-gap="large"] {
    gap: 2rem;
  }

  .equal-columns[data-vertical-alignment="centered"] {
    align-items: center;
  }

  @media (width > 760px) {
    .equal-columns {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }
}

/* ==========================================================================
   5. CAPA: COMPONENTES
   Bloques de UI específicos.
   ========================================================================== */
@layer componentes {

  /* --- Header & Branding --- */
  .logo {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    padding: 0 15px;
    object-fit: contain;
  }

  .site-header {
    padding-block: 1rem;
    position: relative;
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 2rem;
  }

  /* --- Navegación Principal --- */
  .primary-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
  }

  .primary-navigation a {
    text-decoration: none;
  }

  /* --- Menú Móvil & Toggle --- */
  [aria-controls="primary-navigation"] {
    display: none;
  }

  @media (width < 760px) {

    /* Botón Hamburguesa */
    [aria-controls="primary-navigation"] {
      display: block;
      z-index: 100;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    [aria-controls="primary-navigation"] img {
      border-radius: 0;
    }

    /* Panel de Navegación Móvil */
    .primary-navigation {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      padding: 2rem;
      background: var(--fondo-nivel-2);
      border-radius: 0 0 0 var(--radio-grande);
      opacity: 0;
      transition: display 1s allow-discrete, opacity 1s;
    }

    .primary-navigation ul {
      flex-direction: column;
      font-size: var(--tamano-titulo-medio);
      font-family: var(--fuente-titulos);
      font-weight: 700;
      gap: 0;
    }

    /* Animación de items (Stagger) */
    .primary-navigation li {
      opacity: 1;
      translate: 0;
      transition: opacity 300ms, translate 875ms;
      transition-delay: var(--retraso, 125ms);
    }

    .primary-navigation li:nth-child(2) {
      --retraso: 250ms;
    }

    .primary-navigation li:nth-child(3) {
      --retraso: 325ms;
    }

    .primary-navigation li+li {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid var(--fondo-nivel-3);
    }

    /* Estado: Abierto (Gestionado por JS aria-expanded) */
    [aria-expanded="true"]~.primary-navigation {
      display: block;
      opacity: 1;
    }

    /* Hook para animación de entrada (@starting-style) */
    [aria-expanded="true"]~.primary-navigation {
      @starting-style {
        opacity: 0;
      }
    }

    [aria-expanded="true"]~.primary-navigation li {
      translate: 0;
      opacity: 1;
    }

    [aria-expanded="true"]~.primary-navigation li {
      @starting-style {
        translate: 100%;
        opacity: 0;
      }
    }
  }

  /* --- Hero Section --- */
  .hero {
    text-align: center;
    background: var(--fondo-blanco);
    background-size: cover;
    font-size: var(--t-fuente-md);
    color: var(--texto-inverso);
    /* Animación scroll-driven */
    animation: desvanecer linear forwards;
    animation-timeline: view();
    animation-range-start: exit;
  }

  .hero__title {
    font-size: var(--tamano-titulo-grande);
  }

  .hero__title>span {
    display: block;
    font-size: var(--tamano-hero);
    color: var(--texto-inverso);
    word-break: break-word;
    hyphens: auto;
  }

  /* --- Tarjetas (Cards) --- */
  .card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--fondo-nivel-3);
    border-radius: var(--radio-grande);
  }

  .card img {
    border-radius: var(--radio-medio);
  }

  .card__title {
    color: var(--texto-contraste-alto);
    font-size: var(--tamano-titulo-pequeno);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .card__note {
    margin-top: auto;
    background-color: var(--fondo-nivel-4);
    padding: 0.75rem;
    border-radius: var(--radio-medio);
  }

  /* --- Bento Grid (FAQ) --- */
  .faq-bento-grid {
    display: grid;
    gap: 1rem;
    grid-template-areas: "tarjeta-1" "tarjeta-2" "tarjeta-3" "tarjeta-4";
  }

  .faq-bento-grid .card:nth-child(1) {
    grid-area: tarjeta-1;
  }

  .faq-bento-grid .card:nth-child(2) {
    grid-area: tarjeta-2;
  }

  .faq-bento-grid .card:nth-child(3) {
    grid-area: tarjeta-3;
  }

  .faq-bento-grid .card:nth-child(4) {
    grid-area: tarjeta-4;
  }

  .faq-bento-grid .card>img {
    width: 100%;
    object-fit: cover;
  }

  @media (width > 600px) {
    .faq-bento-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "tarjeta-1 tarjeta-2" "tarjeta-3 tarjeta-4";
    }

    .faq-bento-grid .card:nth-child(even) img {
      order: 3;
    }
  }

  @media (width > 900px) {
    .faq-bento-grid {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "tarjeta-1 tarjeta-2 tarjeta-4" "tarjeta-3 tarjeta-3 tarjeta-4";
    }

    .faq-bento-grid .card:nth-child(3) {
      display: grid;
      grid-template-columns: 300px 1fr;
    }

    .faq-bento-grid .card:nth-child(3) img {
      grid-column: 1;
      grid-row: 1 / 3;
    }
  }

  /* --- Sistema de Etiquetas (Tags) --- */
  .tag-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .tag-list>li {
    padding: 0 0.5rem;
    color: var(--texto-contraste-alto);
    font-family: var(--fuente-titulos);
    font-size: var(--t-fuente-xs);
    border-radius: var(--radio-pequeno);
    background-color: var(--fondo-nivel-4);
  }

  /* Variantes por atributo data */
  .tag-list>li[data-eco="eco"] {
    background-color: var(--fondo-eco);
  }

  .tag-list>li[data-eco="expertos"] {
    background-color: var(--fondo-expertos);
  }

  .tag-list>li[data-lista_servicios="electrodomesticos"] {
    background-color: var(--color-marca-principal);
  }

  .tag-list>li[data-lista_servicios="calderas"] {
    background-color: var(--fondo-calderas);
  }

  .tag-list>li[data-lista_servicios="otros"] {
    background-color: var(--fondo-otros);
  }

  /* --- Botones --- 
     Estrategia: Aumento de especificidad encadenando clases para evitar !important 
  */

  /* 1. Botón Base (Default: Negro) */
  .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: var(--t-fuente-md);
    text-decoration: none;
    background-color: var(--fondo-cuerpo);
    color: var(--texto-principal);
    padding: 0.5rem 1rem;
    border-radius: var(--radio-pequeno);
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  /* 2. Hover Base (Se vuelve Rojo) */
  .button:hover,
  .button:focus-visible {
    background: var(--color-marca-principal);
    color: var(--texto-contraste-alto);
  }

  /* 3. Variante "Técnicos" (.button-2) - Sobrescribe con encadenamiento */
  .button.button-2 {
    background-color: var(--color-marca-principal);
    /* Rojo fijo */
    color: var(--texto-contraste-alto);
  }

  /* 4. Hover Variante "Técnicos" (Se vuelve Gris) */
  .button.button-2:hover,
  .button.button-2:focus-visible {
    background-color: var(--fondo-hover-tecnico);
    color: var(--texto-contraste-alto);
    border-color: var(--fondo-hover-tecnico);
  }

  /* --- Elementos de Formulario (Selects) --- */
  select {
    font-family: var(--fuente-titulos);
    background-color: var(--fondo-blanco);
    color: var(--texto-inverso);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border: 0;
    border-radius: var(--radio-medio);
  }

  /* --- Footer --- */
  .site-footer {
    background-color: var(--fondo-nivel-1);
    color: var(--texto-principal);
    padding-block: 3rem;
    text-align: center;
    border-top: 4px solid var(--color-marca-principal);
  }

  .site-footer__title {
    font-family: var(--fuente-titulos);
    font-size: var(--t-fuente-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-contraste-alto);
    margin-bottom: 1rem;
  }

  .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--t-fuente-xs);
  }

  .footer-links a {
    text-decoration: none;
    color: var(--texto-principal);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
  }

  .footer-links a:hover {
    color: var(--texto-contraste-alto);
    border-bottom-color: var(--color-marca-principal);
  }

  .cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--texto-principal);
    color: var(--texto-principal);
    padding: 0.5rem 1rem;
    border-radius: var(--radio-pequeno);
    cursor: pointer;
    font-size: var(--t-fuente-xs);
    font-family: var(--fuente-cuerpo);
    transition: all 0.3s ease;
  }

  .cookie-btn:hover,
  .cookie-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--texto-contraste-alto);
    color: var(--texto-contraste-alto);
  }

  .cookie-btn img {
    width: 20px;
    height: auto;
    object-fit: contain;
  }

  /* Helpers visuales específicos */
  .special {
    color: var(--color-marca-principal);
  }

  .tecnicos {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .faq-textos {
    text-align: justify;
  }
}

/* ==========================================================================
   6. CAPA: UTILIDADES
   Clases finales, accesibilidad y animaciones.
   ========================================================================== */
@layer utilidades {
  [hidden] {
    display: none;
  }

  .section-title {
    font-size: var(--tamano-titulo-medio);
  }

  .background-extra-dark {
    background-color: var(--fondo-nivel-1);
  }

  .font-size-lg {
    font-size: var(--t-fuente-lg);
  }

  /* Solo visible para lectores de pantalla */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  @keyframes desvanecer {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  /* Reducción de movimiento (Accesibilidad) */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }
}