/* ===========================================================================
   ALVI · PÁGINAS INFORMATIVAS
   Servicios, ficha de servicio, nosotros, contacto y legales.

   AQUÍ NO HAY NI UN COLOR ESCRITO. Todos salen de theme.css como var(--...).
   =========================================================================== */


/* ===========================================================================
   MIGA DE PAN
   Dice dónde estás y cómo volver. En móvil es la única forma de subir un
   nivel sin usar el botón de atrás del navegador.
   =========================================================================== */

.miga {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

.miga a {
  display: inline-block;
  min-height: var(--touch);
  line-height: var(--touch);
  color: var(--text-brand);
}


/* ===========================================================================
   FICHA DE SERVICIO
   Texto a la izquierda, columna de apoyo a la derecha con lo que incluye y
   el teléfono. En móvil se apilan y el teléfono queda al final, después de
   haber leído de qué va el servicio.
   =========================================================================== */

.ficha {
  display: grid;
  gap: var(--sp-10);
}

@media (min-width: 60rem) {
  .ficha {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.ficha__principal h1 {
  margin-bottom: var(--sp-3);
}

.ficha__foto {
  margin-block: var(--sp-8);
}

.ficha__lado {
  display: grid;
  gap: var(--sp-6);
}


/* --- Tarjeta de la columna de apoyo --------------------------------------- */

.tarjeta-lado {
  padding: var(--sp-6);
  background: var(--bg-alt);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
}

.tarjeta-lado__titulo {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.tarjeta-lado p {
  max-width: none;
}

.tarjeta-lado .destacado__lista {
  margin-bottom: 0;
}

/* La del teléfono va en verde oscuro: es la que tiene que destacar de las
   tres, porque llamar es lo que de verdad queremos que pase. */
.tarjeta-lado--llamada {
  background: var(--bg-inverse);
  border-color: var(--bg-inverse);
  color: var(--text-on-inverse);
}

.tarjeta-lado__acciones {
  margin: var(--sp-4) 0 0;
}


/* ===========================================================================
   CONTACTO
   El teléfono va PRIMERO en el código y primero en pantalla en móvil. Para
   mucha gente el formulario sobra: leen, cogen el teléfono y llaman.
   =========================================================================== */

/* --- Banda de contacto directo -------------------------------------------
   A ancho completo y arriba del todo: la mayoría de esta gente llama, así que
   el teléfono no compite con el formulario por el sitio. */

.contacto-directo {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-8);
  margin-top: var(--sp-8);

  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--r-md);
}

@media (min-width: 48rem) {
  .contacto-directo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-10);
  }
}

.contacto-directo__llamada {
  min-width: 0;
}


/* --- Formulario y datos prácticos ---------------------------------------- */

.contacto {
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
}

@media (min-width: 60rem) {
  .contacto {
    /* Los campos van en UNA sola columna: se rellenan mejor, se escanean mejor
       y dan menos errores. Lo que va al lado no son más campos, son los datos
       prácticos, que tienen una longitud parecida y quitan el hueco que
       quedaba antes a la derecha. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }

  .contacto__datos {
    /* Pegajosa mientras el formulario hace scroll: la dirección y el horario
       siguen a la vista mientras se escribe. */
    position: sticky;
    top: var(--sp-8);
  }
}

.contacto__formulario,
.contacto__datos {
  min-width: 0;
}

/* Los campos se ciñen a la medida de lectura: una caja de texto de 700px de
   ancho se rellena peor que una de 555. */
.contacto__formulario .campo {
  max-width: var(--w-prose);
}

.contacto__datos-titulo {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.contacto__datos .albaran {
  margin-bottom: var(--sp-8);
}

.contacto__zona {
  margin: 0 0 var(--sp-2);
  font-weight: 600;
  max-width: none;
}

.contacto__zona-nota {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  max-width: none;
}


/* --- Casilla de consentimiento -------------------------------------------- */

.campo--casilla {
  margin-top: var(--sp-8);
}

.casilla {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  cursor: pointer;
}

.casilla input {
  /* Grande de verdad: una casilla de 13px es imposible de marcar con el dedo
     y con guantes. */
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15rem;
  accent-color: var(--action-bg);
}

.campo__opcional {
  font-weight: 400;
  color: var(--text-muted);
}


/* ===========================================================================
   AVISOS
   Tres tonos: confirmación, error y "esto está pendiente". Ninguno se apoya
   solo en el color: los tres llevan título escrito.
   =========================================================================== */

.aviso {
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
  border-radius: var(--r-md);
  border-left: 6px solid var(--border-strong);
  background: var(--bg-alt);
}

.aviso p {
  max-width: none;
}

.aviso p:last-child,
.aviso ul:last-child {
  margin-bottom: 0;
}

.aviso__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.aviso--bien {
  background: var(--aviso-bien-bg);
  border-left-color: var(--aviso-bien-linea);
}

.aviso--error {
  background: var(--field-error-bg);
  border-left-color: var(--field-error-border);
  color: var(--field-error);
}

.aviso--error a {
  color: var(--field-error);
}

.aviso--pendiente {
  background: var(--bg-alt);
  border-left-color: var(--border-strong);
  color: var(--text-muted);
}


/* ===========================================================================
   CIERRE DE CONTACTO
   El final de las páginas informativas: el teléfono compuesto, no un botón
   que lleve a otro sitio.
   =========================================================================== */

.cierre__contenido {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 60rem) {
  .cierre__contenido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: center;
  }
}

.cierre__titulo {
  margin: 0 0 var(--sp-3);
}

.cierre__texto {
  margin: 0;
}

.cierre__llamada {
  min-width: 0;
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}


/* ===========================================================================
   LISTA DE FAMILIAS (página temporal de repuestos)
   =========================================================================== */

.familias-lista {
  display: grid;
  /* min() para que en una pantalla estrecha la columna se conforme con lo que
     hay: sin él, las 17rem del mínimo eran más anchas que un móvil de 320. */
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.familias-lista__item {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--border-strong);
}

.familias-lista__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.familias-lista__texto {
  margin: 0;
  color: var(--text-muted);
  max-width: none;
}

/* ==========================================================================
   PÁGINAS DE ERROR · 404 y 500
   Llevan la maquetación del sitio entera —cabecera, teléfono, pie— porque
   quien se equivoca de dirección no deja de ser un cliente.
   ========================================================================== */

.error__enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.error__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--fs-lead);
  font-weight: 600;
}

.error__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.error__horario {
  margin-top: var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-meta);
}

/* Coletilla del final de una página legal: la nota sobre qué versión rige.
   Va en pequeño y apagada, que es información de contexto, no del contrato. */
.legal__fecha {
  margin-top: var(--sp-10);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  max-width: var(--w-prose);
}

/* Nota de la guía de estilos que avisa de algo, no que informa. Solo existe
   en /_estilos, que es una página de desarrollo. */
.es-nota--ojo {
  border-left: 4px solid var(--aviso-linea);
  background: var(--aviso-bg);
  padding: var(--sp-4);
}

/* --- Foto a sangre en una sección ------------------------------------------
   La sección no lleva contenedor: la foto ocupa el ancho de la ventana. Se usa
   en /nosotros, donde la fotografía de la nave es una afirmación y no un
   adorno, y por eso no puede ir centrada con aire por los cuatro lados. */
.foto-sangre {
  padding-inline: 0;
}

.foto-sangre .foto {
  width: 100%;

  /* TOPE DE ALTURA, y es la corrección de un defecto que se veía a la primera.

     Una foto a sangre en 16:9 mide 810px de alto en un escritorio de 1440.
     Con la cabecera puesta, eso es una pantalla entera de fotografía y otra
     de fotografía otra vez al desplazar: la página deja de ser una página y
     pasa a ser un pase de diapositivas. Y lo que se veía en esos 810px era,
     sobre todo, el tejado.

     Ninguna foto a sangre pasa de media pantalla. El tope no estira: si la
     proporción da menos —en móvil da 202px— manda la proporción, así que la
     caja nunca se vuelve más alta que la foto y el recorte sigue siendo
     vertical. */
  max-height: min(40vh, 20rem);
}

/* EN MÓVIL LA FOTO A SANGRE VA EN 3:4, NO EN LA BANDA APAISADA DE ESCRITORIO.

   A 360px, el 16:9 daba una tira de 202px de alto: no se entiende qué se está
   mirando. En vertical hay sitio para que la nave se lea como una nave.

   4:5 y no 3:4 por peso: cuanto más alta es la caja, más ancha tiene que ser
   la imagen que se descarga para cubrirla. Ver el sizes de la plantilla.

   Y esto rompe a propósito la regla de que la caja nunca sea más alta que la
   foto. Con 3:4 el recorte pasa a ser HORIZONTAL —se ve el 42 % del ancho del
   original— y eso está bien AQUÍ y no en el hero, y la diferencia es dónde
   está el asunto de cada foto:

     · en la del hero el rótulo va del 23 % al 100 % del ancho y llega al
       borde, así que cualquier recorte lateral se lo come;
     · en la de la fachada el rótulo de ALVI está centrado, entre el 45 % y el
       57 %, y con la ventana centrada se ve entero: queda a la vista del 30 %
       al 70 % del ancho, medido.

   Por eso la excepción va acompañada SIEMPRE de un --foto-encuadre explícito:
   una caja más alta que la foto sin decir qué parte se conserva es el defecto
   de siempre. RecorteDeFotosTest exige las dos cosas juntas. */
@media (max-width: 47.99rem) {
  .foto-sangre .foto {
    aspect-ratio: 4 / 5;
    max-height: none;

    /* Centrado en los dos ejes: el rótulo de ALVI está en el centro del ancho
       y a media altura de la fachada. */
    --foto-encuadre: 50% 50%;
  }
}

@media (min-width: 60rem) {
  .foto-sangre .foto {
    max-height: min(48vh, 30rem);
  }
}

/* El encuadre de la nave de "quiénes somos".
   Medido sobre la rejilla: el tejado rojo se come del 0 al 35 %, la fachada
   con el rótulo de ALVI va del 38 % al 80 %, y del 80 % para abajo es
   pavimento y grava. El 72 % deja a la vista la fachada entera con el rótulo
   centrado y sin tejado de más. */
.foto-sangre .foto {
  --foto-encuadre: 50% 72%;
}

/* EL PIE NO VA A SANGRE, la foto sí.
   Una línea de pie de 1440px de ancho no se lee: el ojo pierde el renglón. Se
   queda alineado con la columna de texto de la página, que es de donde viene.

   Esta regla vivía en home.css, que /nosotros no carga: el pie salía pegado
   al borde izquierdo de la ventana, a 0px, en vez de alineado con el texto.
   Se veía en la captura y no en el CSS. */
.foto-sangre .foto-pie {
  /* --w-text y no --w-content: el pie se alinea con la COLUMNA DE TEXTO de la
     página, que es la que empieza en el mismo sitio que el titular. Con
     --w-content salía a 72px mientras el texto empezaba a 234px: medido. */
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline: var(--sp-page-x);
}

/* --- Foto que desborda el contenedor de texto ------------------------------
   El mismo recurso que usa la placa del hero para desbordar la foto: usado en
   un solo sitio es una casualidad, usado en dos es un idioma.

   Solo desborda cuando hay sitio de sobra: por debajo de 60rem se queda
   dentro, porque desbordar en una pantalla estrecha es desbordar la pantalla. */
@media (min-width: 60rem) {
  .foto--desborda {
    width: calc(100% + var(--sp-16));
    margin-inline-start: calc(-1 * var(--sp-16));
  }
}

/* La ficha de servicio: la foto no llena la columna, la desborda por fuera.
   La clase va en el MARCO y no en la foto, porque lo que desborda es la copia
   entera —papel, sombra y giro—, no solo la imagen. */
.ficha__foto-marco {
  margin-bottom: var(--sp-6);
}


/* ===========================================================================
   /NOSOTROS

   La página tenía el mejor contenido del sitio y la peor maquetación: cinco
   encabezados seguidos con el mismo tratamiento, una columna de texto pegada a
   la izquierda y medio ancho de pantalla vacío a la derecha.

   Aquí no hay estética nueva. Se usa la que ya existe: los códigos de sección,
   las franjas de color, el papel con giro y —sobre todo— el albarán.
   =========================================================================== */

/* --- 1 · Entrada -----------------------------------------------------------
   El contenedor de texto ya centra; lo que faltaba era que el titular no se
   quedase con todo el vacío a un lado. Con la escalera de medidas puesta, el
   titular llega a --w-text y la entradilla se para en --w-lead. */
.entrada-nosotros h1 {
  max-width: 20ch;
}


/* --- 3 · La empresa como ficha técnica -------------------------------------

   MISMO COMPONENTE QUE LA FICHA DE UNA PIEZA, no uno parecido: la misma
   <dl class="albaran"> y el mismo fragmento filaAlbaran. Lo único propio es la
   referencia de encima, que se compone igual que la de una pieza. */
/* LA FICHA NO OCUPA TODO EL ANCHO DEL CONTENEDOR.
   Con 972px de guía de puntos, la fila deja de leerse como una ficha y pasa a
   parecer una tabla de precios: el ojo pierde de vista la etiqueta antes de
   llegar al dato. A --w-lead (774px) el recorrido es el de una ficha de pieza. */
.empresa__ficha,
.empresa__ref {
  max-width: var(--w-lead);
}

.empresa__ref {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-ref);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}


/* --- 4 · Qué reparamos: texto y fotografía ---------------------------------
   Dos columnas de peso parecido. Por debajo de 60rem se apilan, con la foto
   debajo del texto: en una pantalla estrecha, primero lo que se lee. */
.pareja {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 60rem) {
  .pareja {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
}

/* El marco de la foto no lleva el relleno de arriba: aquí ya lo pone la
   rejilla, y sin esto la foto queda un renglón por debajo del texto. */
.pareja__foto .foto-marco,
.pareja__foto .hueco-marco {
  padding-top: 0;
}


/* --- 5 · De 1996 a hoy: dos columnas enfrentadas ---------------------------
   Enfrentadas de verdad: mismo peso tipográfico las dos, sin que una sea la
   buena y la otra la mala. Lo que ha cambiado y lo que no valen igual. */
.enfrentadas {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 48rem) {
  .enfrentadas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-10);
  }
}

.enfrentadas__titulo {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--border-strong);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.enfrentadas__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  max-width: var(--w-prose);
}

/* La misma marca de raya que usan las listas de "qué incluye" de los
   servicios: un guion largo en el verde que sí puede ser texto. */
.enfrentadas__lista > li {
  position: relative;
  padding-left: var(--sp-6);
}

.enfrentadas__lista > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bullet-marca);
  font-weight: 700;
}


/* --- 6 · Cómo presupuestamos: tres pasos numerados -------------------------

   EL ÚNICO SITIO NUMERADO DE LA PÁGINA. Aquí el número dice algo —no se puede
   presupuestar antes de diagnosticar— y por eso se compone grande. Si se
   numerase también lo demás, dejaría de significar nada. */
.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 60rem) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

.paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 60rem) {
  .paso {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

.paso__numero {
  font-family: var(--font-title);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1;
  color: var(--text-accent);
}

.paso__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.paso__cuerpo p {
  margin: 0;
  max-width: 34ch;
}

/* La coda de los tres pasos. Con una regla fina encima y midiendo lo mismo que
   la ficha, se lee como el remate de la secuencia y no como un párrafo que se
   ha quedado huérfano debajo de la primera columna. */
.pasos__nota {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-hairline);
}

.pasos__nota p {
  max-width: var(--w-lead);
}


/* --- 7 · Qué no hacemos ----------------------------------------------------

   Las negativas van como filas de albarán: etiqueta a la izquierda, veredicto
   a la derecha, guía de puntos en medio. Es el mismo componente que la ficha
   de una pieza, y aquí dice algo distinto con la misma forma.

   EL "No" EN TINTA CLARA, NUNCA EN ROJO. No es un error de validación: es una
   definición del oficio. */
/* Mismo recorrido de guía que la ficha de la empresa: con 972px la fila deja
   de leerse como una ficha. */
.negativas,
.negativas__nota {
  max-width: var(--w-lead);
}

.negativas .albaran__dato {
  font-size: var(--fs-h3);
  color: var(--text-on-inverse);
}

.negativas__nota {
  margin-top: var(--sp-6);
}

.negativas__nota p {
  color: var(--text-on-inverse-muted);
}