/* Web comercial de Recao (Fase 3): estilo Mercado y superficie web.
   Solo el dominio raiz la carga. Va en la capa componentes, que base.css
   declara antes que estilo y marca; no lleva colores a mano, solo tokens. */

@layer componentes {
  /* --- Cabecera y navegacion (6.3 y 6.4) --- */
  .comercial-cabecera {
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
  }
  .comercial-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding-block: .75rem;
  }
  /* Hasta 1120 px de ancho en escritorio (6.4). */
  .comercial-cabecera .contenedor,
  .comercial-portada .contenedor,
  .comercial-seccion .contenedor,
  .comercial-banda .contenedor,
  .comercial-cierre .contenedor,
  .comercial-pie .contenedor {
    width: min(100% - 2rem, 70rem);
  }
  .comercial-marca {
    color: var(--tinta);
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
  }
  .comercial-menu-boton { margin-left: auto; }
  .comercial-cta { margin-left: auto; }
  .comercial-nav { order: 3; flex-basis: 100%; }
  .comercial-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .comercial-nav li + li { margin-top: 0; }
  .comercial-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .35rem .7rem;
    border-radius: var(--radio-s);
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
  }
  .comercial-nav a:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
  .comercial-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--tinta) 12%, transparent);
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  /* --- Portada --- */
  .comercial-portada {
    background: var(--superficie-2);
    padding-block: clamp(1.5rem, 5vw, 3.5rem);
  }
  .comercial-portada-rejilla {
    display: grid;
    gap: 1.5rem 3rem;
    align-items: center;
  }
  .comercial-portada-texto h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
  .comercial-portada-texto .entradilla {
    color: var(--tinta-2);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    max-width: 42ch;
  }
  .comercial-captura { margin: 0; }
  .comercial-captura img,
  .comercial-captura-carta img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
  }
  .comercial-captura img { max-height: 38rem; margin-inline: auto; }

  /* --- Secciones y rejillas --- */
  .comercial-seccion { padding-block: clamp(1.5rem, 4vw, 3rem); }
  .comercial-seccion--alterna { background: var(--superficie-2); }
  .comercial-seccion h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
  .comercial-seccion .contenedor > h2:first-child { margin-top: 0; }
  .comercial-pasos {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 0;
    padding-left: 1.4rem;
  }
  .comercial-pasos h3 { margin-top: 0; }
  .comercial-pasos p { color: var(--tinta-2); }
  .comercial-rejilla { display: grid; gap: 1rem; }
  .comercial-rejilla article {
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie);
  }
  .comercial-rejilla h3 { margin-top: 0; }
  .comercial-rejilla p { color: var(--tinta-2); }

  /* --- Los cuatro estilos --- */
  .comercial-estilos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    padding: 0;
    list-style: none;
  }
  .comercial-estilos li {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
    width: clamp(7rem, 20%, 11rem);
    padding: .5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie);
  }
  .comercial-estilos img {
    width: 100%;
    height: auto;
    border-radius: var(--radio-s);
  }
  .comercial-estilo-nombre { font-weight: 700; }

  /* --- Banda del precio y cierre --- */
  .comercial-banda {
    background: var(--superficie-2);
    border-block: 1px solid var(--linea);
    padding-block: 1rem;
  }
  .comercial-banda-fila,
  .comercial-cierre-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
  }
  .comercial-banda p { margin: 0; }
  .comercial-cierre { padding-block: clamp(1.5rem, 4vw, 3rem); }
  .comercial-cierre h2 { margin: 0; }

  /* --- Paginas interiores --- */
  .comercial-pagina { max-width: 62rem; }
  .comercial-cabecera-pagina { margin-bottom: 1.25rem; }
  .comercial-pagina section { margin-bottom: 1.75rem; }
  .comercial-pagina h2 { margin-top: 1.5rem; }

  /* --- Precios --- */
  .comercial-precio {
    max-width: 36rem;
    margin-block: 1rem 1.5rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--linea);
    border-top: 4px solid var(--marca-relleno);
    border-radius: var(--radio-m);
    background: var(--superficie);
    box-shadow: var(--sombra);
  }
  .comercial-precio h2 { margin-top: 0; }
  .comercial-precio-cifra {
    font-family: var(--fuente-datos);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
  }

  /* --- Calculadora (6.4 y 7.3) --- */
  .comercial-calculadora {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea);
  }
  .comercial-calculadora-campos {
    display: grid;
    gap: .25rem 1rem;
    margin-bottom: .5rem;
  }
  .comercial-calculadora-resultado {
    display: block;
    margin-block: .75rem;
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie-2);
  }
  .comercial-resultado-linea { display: block; font-weight: 600; }
  .comercial-calculadora-ejemplo { color: var(--tinta-2); }

  /* --- Preguntas frecuentes --- */
  .comercial-preguntas details {
    margin-bottom: .5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie);
  }
  .comercial-preguntas summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .7rem 1rem;
    font-weight: 700;
  }
  .comercial-preguntas details[open] summary { border-bottom: 1px solid var(--linea); }
  .comercial-preguntas details p { padding: 0 1rem; color: var(--tinta-2); }

  /* --- Contacto (6.4 y 7.4) --- */
  .comercial-contacto { max-width: 44rem; }
  .comercial-formulario .campo { max-width: none; }
  .comercial-formulario .boton { min-width: 10rem; }
  .comercial-privacidad { margin-top: 1rem; }
  .comercial-pagina .aviso-error a { color: inherit; }

  /* --- "El local" de cada estilo y error --- */
  .comercial-estilo {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--linea);
  }
  .comercial-estilo:last-child { border-bottom: 0; }
  .comercial-captura-panel img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra);
  }
  .comercial-error .codigo-error { margin-bottom: 0; }

  /* --- Pie --- */
  .comercial-pie {
    border-top: 1px solid var(--linea);
    margin-top: 2rem;
    padding-block: 1.5rem;
    color: var(--tinta-2);
    font-size: .95rem;
  }
  .comercial-pie nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: .5rem;
  }
  .comercial-pie a { color: inherit; }
  .comercial-pie p { margin-block: .25rem; }

  /* --- Movil: menu plegable y una columna (6.4) --- */
  @media (max-width: 59.99rem) {
    .comercial-nav[data-plegable="si"][data-abierto="no"] { display: none; }
    .comercial-nav[data-plegable="si"] {
      padding-block: .25rem;
      border-top: 1px solid var(--linea);
    }
    .comercial-nav[data-plegable="si"] ul { flex-direction: column; }
    .comercial-nav a { width: 100%; }
    .comercial-portada-rejilla { grid-template-columns: minmax(0, 1fr); }
    .comercial-captura img { max-height: 32rem; }
    .comercial-estilos li { width: calc(50% - .5rem); }
  }

  /* --- Escritorio desde 60rem --- */
  @media (min-width: 60rem) {
    .comercial-menu-boton { display: none; }
    .comercial-cta { order: 3; margin-left: auto; }
    .comercial-nav { order: 2; flex-basis: auto; margin-left: 1rem; }
    .comercial-portada-rejilla {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }
    .comercial-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .comercial-rejilla--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .comercial-calculadora-campos { grid-template-columns: repeat(2, minmax(0, 14rem)); }
  }

  /* --- Legible a 320 px (8.5) --- */
  @media (max-width: 22rem) {
    .comercial-cta { margin-left: 0; }
    .comercial-estilos li { width: 100%; }
  }
}