/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-3) var(--espacio-5);
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.boton--whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
}

.boton--whatsapp:hover {
  background: var(--color-whatsapp-hover);
}

.boton--primario {
  background: var(--color-bronce-oscuro);
  color: #fff;
}

.boton--primario:hover {
  background: var(--color-bronce-oscuro-hover);
}

/* Contorno: sobre fondo claro usa bronce oscuro; sobre fondo oscuro, texto claro */
.boton--contorno {
  border-color: currentColor;
  color: var(--color-bronce-oscuro);
}

.boton--contorno:hover {
  background: var(--color-fondo-alt);
}

.seccion--oscura .boton--contorno {
  color: var(--color-texto-claro);
}

.seccion--oscura .boton--contorno:hover {
  background: rgb(246 241 234 / 0.1);
}

.boton--sm {
  padding: var(--espacio-2) var(--espacio-4);
  font-size: var(--texto-sm);
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

@media (max-width: 39.99rem) {
  .botones .boton {
    width: 100%;
  }
}

/* Enlace de texto con flecha y párrafo secundario debajo de los botones */
.enlace-secundario {
  margin: var(--espacio-4) 0 0;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil);
  font-weight: 600;
}

.enlace-flecha .icono {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- Portada (hero) ---------- */

.portada {
  padding-block: var(--espacio-8) var(--espacio-9);
}

.portada__grilla {
  display: grid;
  gap: var(--espacio-7);
  align-items: center;
}

.portada__titulo {
  max-width: 16ch;
  color: var(--color-texto-claro);
}

.portada__texto {
  max-width: 38rem;
  margin-bottom: var(--espacio-6);
  font-size: var(--texto-lg);
  color: var(--color-texto-claro-suave);
}

.portada__claves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
  margin: var(--espacio-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
  color: var(--color-texto-claro-suave);
}

.portada__claves li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.portada__claves .icono {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-bronce-sobre-oscuro);
}

.portada__escudo {
  display: none;
}

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

  .portada__escudo {
    display: block;
    width: clamp(12rem, 22vw, 18rem);
  }
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  height: 100%;
  padding: var(--espacio-5);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta p {
  margin: 0;
  color: var(--color-texto-suave);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio);
  background: var(--color-fondo-alt);
  color: var(--color-bronce);
}

.tarjeta__titulo {
  margin: 0;
}

/* Enlace extendido: toda la tarjeta es clickeable, el nombre accesible es el título */
.tarjeta__enlace {
  color: var(--color-tinta);
  text-decoration: none;
}

.tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tarjeta:has(.tarjeta__enlace:hover) {
  border-color: var(--color-bronce-claro);
  box-shadow: var(--sombra);
}

.tarjeta:has(.tarjeta__enlace:focus-visible) {
  outline: var(--foco);
  outline-offset: 3px;
}

.tarjeta__enlace:focus-visible {
  outline: none;
}

.tarjeta__mas {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  margin-top: auto;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-bronce-oscuro);
}

.tarjeta__mas .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Servicios transversales ---------- */

.transversales {
  margin-top: var(--espacio-7);
  padding: var(--espacio-5);
  border-left: 4px solid var(--color-bronce-claro);
  background: var(--color-fondo);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.transversales__lista {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.transversales__lista li {
  display: flex;
  gap: var(--espacio-2);
}

.transversales__lista .icono {
  margin-top: 0.1em;
  color: var(--color-bronce);
}

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

.transversales__nota {
  margin: var(--espacio-4) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* ---------- Pilares ("Por qué ECAVANT") ---------- */

.pilares {
  display: grid;
  gap: var(--espacio-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pilar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-2) var(--espacio-4);
}

.pilar .tarjeta__icono {
  grid-row: span 2;
}

.pilar h3 {
  margin: 0;
  align-self: center;
}

.pilar p {
  grid-column: 2;
  margin: 0;
  color: var(--color-texto-suave);
}

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

/* ---------- Obra destacada ---------- */

.obra {
  display: grid;
  gap: var(--espacio-5);
  padding: var(--espacio-4);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria li:first-child {
  grid-column: span 2;
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--color-fondo-alt);
}

.galeria li:first-child img {
  aspect-ratio: 16 / 9;
}

.obra__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-4);
  padding: 0;
  list-style: none;
}

.etiqueta {
  display: inline-block;
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: 999px;
  background: var(--color-fondo-alt);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-bronce-oscuro);
}

@media (min-width: 64rem) {
  .obra {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    padding: var(--espacio-5);
  }
}

/* ---------- Páginas de servicio ---------- */

/* Migas de pan */
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-2);
  margin: 0 0 var(--espacio-5);
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
  color: var(--color-texto-claro-suave);
}

.migas li + li::before {
  content: "/";
  margin-right: var(--espacio-2);
  color: var(--color-texto-claro-suave);
}

.portada--servicio {
  padding-block: var(--espacio-7) var(--espacio-8);
}

.portada--servicio .portada__titulo {
  max-width: 20ch;
}

/* Bloques de "Qué incluye" */
.incluye {
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.incluye .tarjeta h3 {
  margin: 0;
}

.lista-check {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-check li {
  display: flex;
  gap: var(--espacio-2);
}

.lista-check .icono {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  color: var(--color-bronce);
}

.nota {
  max-width: 44rem;
  margin: var(--espacio-6) 0 0;
  color: var(--color-texto-suave);
}

/* Galerías con pie de foto: trabajos propios (.galeria-obras) e imágenes
   ilustrativas de stock (.galeria-ilustrativa). Son clases distintas a propósito:
   el validador prohíbe imágenes de stock dentro de .galeria-obras. */
.galeria-obras,
.galeria-ilustrativa {
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria-obras figure,
.galeria-ilustrativa figure {
  margin: 0;
}

.galeria-obras img,
.galeria-ilustrativa img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--color-fondo-alt);
}

.galeria-obras figcaption,
.galeria-ilustrativa figcaption {
  margin-top: var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.galeria-obras figcaption strong {
  display: block;
  color: var(--color-tinta);
}

/* Tarjeta con ícono en lugar de foto (cuando no hay imagen apta) */
.galeria-ilustrativa .tarjeta {
  aspect-ratio: 4 / 3;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Preguntas frecuentes */
.faq {
  max-width: 48rem;
}

.faq details {
  border-bottom: 1px solid var(--color-borde);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--objetivo-tactil);
  padding-block: var(--espacio-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .icono {
  color: var(--color-bronce-oscuro);
  transition: transform var(--transicion);
}

.faq details[open] summary .icono {
  transform: rotate(180deg);
}

.faq details p {
  margin: 0 0 var(--espacio-4);
  color: var(--color-texto-suave);
}

/* ---------- Obras: un caso por obra ---------- */

.casos {
  display: grid;
  gap: var(--espacio-8);
}

.caso__datos {
  max-width: 44rem;
  margin-bottom: var(--espacio-5);
}

.caso__datos h2 {
  margin-bottom: var(--espacio-3);
}

.etiqueta a {
  color: inherit;
}

/* ---------- Nosotros ---------- */

.bloque-texto {
  max-width: 44rem;
}

.bloque-texto + .bloque-texto {
  margin-top: var(--espacio-7);
}

.bloque-texto p {
  font-size: var(--texto-lg);
}

/* ---------- Contacto ---------- */

.contacto {
  display: grid;
  gap: var(--espacio-7);
}

@media (min-width: 64rem) {
  .contacto {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}

.datos-contacto {
  display: grid;
  gap: var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.datos-contacto li {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
}

.datos-contacto .tarjeta__icono {
  flex-shrink: 0;
}

.datos-contacto strong {
  display: block;
}

.horario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-1) var(--espacio-4);
  margin: 0;
}

.horario dt {
  font-weight: 600;
}

.horario dd {
  margin: 0;
}

/* Formulario: arma el mensaje en el navegador; no envía datos a ningún servidor */
.formulario {
  display: grid;
  gap: var(--espacio-5);
  padding: var(--espacio-5);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.campo {
  display: grid;
  gap: var(--espacio-2);
}

.campo label {
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-3);
  border: 1px solid var(--color-texto-suave);   /* 7,73:1: borde de campo visible (WCAG 1.4.11) */
  border-radius: var(--radio);
  background: var(--color-fondo);
  color: var(--color-tinta);
  font: inherit;
}

.campo textarea {
  resize: vertical;
}

.campo [aria-invalid="true"] {
  border: 2px solid var(--color-error);
}

.campo__ayuda,
.formulario__privacidad {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.campo__error {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-error);
}

.formulario__sin-js {
  display: none;
}

@media (scripting: none) {
  .formulario { display: none; }
  .formulario__sin-js { display: block; }
}

/* ---------- Texto legal ---------- */

.texto-legal {
  max-width: 46rem;
}

.texto-legal h2 {
  margin-top: var(--espacio-7);
  font-size: var(--titulo-h3);
}

.texto-legal ul {
  padding-left: var(--espacio-5);
}

/* ---------- Llamada final ---------- */

.cta-final {
  text-align: center;
}

.cta-final .seccion__encabezado {
  margin-inline: auto;
}

.cta-final .botones {
  justify-content: center;
}

.lema {
  margin: var(--espacio-7) 0 0;
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-h3);
  font-weight: 600;
  color: var(--color-bronce-sobre-oscuro);
}

/* ---------- Botón flotante de WhatsApp ---------- */

.wa-flotante {
  position: fixed;
  right: max(var(--espacio-4), env(safe-area-inset-right));
  bottom: max(var(--espacio-4), env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: var(--espacio-3);
  justify-content: center;
  border-radius: 999px;
  background: var(--color-whatsapp);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-alta);
}

.wa-flotante:hover {
  background: var(--color-whatsapp-hover);
}

.wa-flotante .icono {
  width: 1.75rem;
  height: 1.75rem;
}

/* En celular solo el ícono (el texto queda para lectores de pantalla) */
@media (max-width: 47.99rem) {
  .wa-flotante__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Espacio para que el botón flotante no tape el final del pie */
  .pie {
    padding-bottom: calc(var(--espacio-6) + 4.5rem);
  }
}

@media (min-width: 48rem) {
  .wa-flotante {
    padding-inline: var(--espacio-4) var(--espacio-5);
  }
}