/* ============================================================
   COMPONENTES REUTILIZABLES
   Lenguaje visual de las laminas corporativas: blanco, gris humo
   y negro, esquinas casi rectas y botones rectangulares con flecha.

   Regla: si un estilo se usa en 2+ paginas, vive aqui.
   Si es exclusivo de un proyecto, va en css/proyectos/<slug>/.
   ============================================================ */

/* ------------------------------ Botones ------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  min-height: 50px;
  padding: var(--espacio-3) var(--espacio-6);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  font-weight: 500;
  letter-spacing: var(--interletrado-menu);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-2px); opacity: 1; }
.boton:active { transform: none; }
.boton[disabled],
.boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* La flecha que llevan casi todos los botones de las laminas. */
.boton--flecha::after { content: "\2192"; font-size: 1.05em; line-height: 1; }

.boton--principal { background-color: var(--negro); border-color: var(--negro); color: var(--blanco); }
.boton--principal:hover { background-color: var(--negro-claro); border-color: var(--negro-claro); color: var(--blanco); }

.boton--secundario {
  background-color: transparent;
  border-color: var(--negro);
  color: var(--negro);
}
.boton--secundario:hover { background-color: var(--negro); color: var(--blanco); }

.boton--claro { background-color: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.boton--claro:hover { background-color: var(--humo); border-color: var(--humo); color: var(--negro); }

.boton--contorno-claro {
  background-color: transparent;
  border-color: var(--linea-oscura-fuerte);
  color: var(--blanco);
}
.boton--contorno-claro:hover { background-color: var(--blanco); border-color: var(--blanco); color: var(--negro); }

.boton--acento {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-acento-contraste);
}
.boton--acento:hover { opacity: 0.88; }

.boton--bloque { width: 100%; }

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  color: var(--color-texto);
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}
.boton-icono:hover { background-color: var(--negro); border-color: var(--negro); color: var(--blanco); }

/* Pastilla de dato: el "+20 anos acompanando a familias..." de la
   lamina del programa de referidos. */
.pastilla {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-6);
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radio-redondo);
  color: var(--negro);
  font-size: var(--texto-sm);
  text-align: left;
}
.pastilla strong { font-family: var(--fuente-titulos); font-size: var(--texto-md); font-weight: 400; }

/* ----------------------------- Etiquetas ----------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 6px var(--espacio-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-redondo);
  background-color: transparent;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.etiqueta--disponible { background-color: var(--negro); border-color: var(--negro); color: var(--blanco); }
.etiqueta--vendido { border-style: dashed; color: var(--color-texto-tenue); }
.etiqueta--entrega { border-color: var(--color-borde-fuerte); color: var(--color-texto-suave); }
/* Solo se usa cuando quedan 10 unidades o menos. Ver
   reglas-de-oro/05: la escasez inventada es motivo de sancion. */
.etiqueta--pocas { background-color: var(--color-error); border-color: var(--color-error); color: var(--blanco); }

.ficha__portada .etiqueta,
.tono-oscuro .etiqueta { border-color: var(--linea-oscura-fuerte); color: var(--blanco); }

/* ------------------------------ Tarjetas ----------------------------- */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-media); }

.tarjeta__figura {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--humo);
}
.tarjeta__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}
.tarjeta:hover .tarjeta__figura img { transform: scale(1.05); }

.tarjeta__etiquetas {
  position: absolute;
  inset-block-start: var(--espacio-4);
  inset-inline-start: var(--espacio-4);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.tarjeta__etiquetas .etiqueta {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  color: var(--negro);
}
.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--espacio-6);
}
.tarjeta__titulo { margin-bottom: var(--espacio-1); font-size: var(--texto-lg); }
.tarjeta__titulo a { color: inherit; text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.tarjeta__ubicacion {
  margin-bottom: var(--espacio-4);
  font-size: var(--texto-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0 0 var(--espacio-4);
  padding: var(--espacio-4) 0 0;
  border-top: 1px solid var(--color-borde);
  list-style: none;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.tarjeta__precio {
  margin-top: auto;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  color: var(--negro);
}
.tarjeta__precio small {
  display: block;
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

/* --------------------- Dato con icono de linea ----------------------
   Los datos que las laminas de proyecto muestran bajo cada titular.
   -------------------------------------------------------------------- */
.datos-icono {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--espacio-6);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dato-icono svg { display: block; margin: 0 auto var(--espacio-4); color: currentColor; }
.dato-icono span {
  display: block;
  font-size: var(--texto-xs);
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* ------------------------ Sellos de certificacion -------------------
   "Best Place to Live" y "Empresa B" de la lamina Nosotros.
   -------------------------------------------------------------------- */
.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-6);
  align-items: center;
}
.sello {
  display: grid;
  gap: var(--espacio-2);
  min-width: 128px;
  padding: var(--espacio-4);
  border: 1.5px solid currentColor;
  border-radius: var(--radio-sm);
  font-size: var(--texto-xs);
  line-height: 1.35;
  text-align: center;
}
.sello strong { font-size: var(--texto-md); font-family: var(--fuente-titulos); font-weight: 400; }

/* ---------------------------- Formularios ---------------------------- */
.formulario { display: grid; gap: var(--espacio-5); }
.formulario__fila { display: grid; gap: var(--espacio-5); }
@media (min-width: 640px) { .formulario__fila--dos { grid-template-columns: 1fr 1fr; } }
.formulario__subtitulo {
  margin: var(--espacio-2) 0 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: var(--interletrado-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

.campo { display: grid; gap: var(--espacio-2); }
.campo__etiqueta {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.campo__etiqueta .obligatorio { color: var(--color-error); }
.campo__ayuda { font-size: var(--texto-xs); color: var(--color-texto-tenue); }

.campo__control {
  width: 100%;
  min-height: 50px;
  padding: var(--espacio-3) var(--espacio-4);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__control::placeholder { color: var(--color-texto-tenue); }
.campo__control:focus {
  outline: none;
  border-color: var(--negro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--negro) 14%, transparent);
}
textarea.campo__control { min-height: 130px; resize: vertical; }
select.campo__control {
  appearance: none;
  padding-right: var(--espacio-7);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.campo--error .campo__control { border-color: var(--color-error); }
.campo__error {
  min-height: 1em;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-error);
}

.campo-casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-3);
  align-items: start;
  font-size: var(--texto-xs);
  line-height: 1.6;
  color: var(--color-texto-suave);
}
.campo-casilla input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--negro); }

.campo-trampa {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

.formulario__mensaje {
  padding: var(--espacio-4);
  border: 1px solid;
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
}
.formulario__mensaje--exito { border-color: var(--color-exito); color: var(--color-exito); }
.formulario__mensaje--error { border-color: var(--color-error); color: var(--color-error); }

.cargador {
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Caja blanca que envuelve los formularios en las laminas. */
.formulario-caja {
  padding: var(--espacio-7);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}
@media (max-width: 640px) { .formulario-caja { padding: var(--espacio-5); } }

/* ----------------------------- Acordeon ------------------------------ */
.acordeon { border-top: 1px solid var(--color-borde-fuerte); }
.acordeon__item { border-bottom: 1px solid var(--color-borde); }
.acordeon__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5);
  width: 100%;
  padding: var(--espacio-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  color: var(--color-texto);
  cursor: pointer;
}
.acordeon__titulo::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.acordeon__titulo[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.acordeon__panel {
  max-width: var(--ancho-lectura);
  padding-bottom: var(--espacio-5);
  color: var(--color-texto-suave);
}
.acordeon__encabezado { margin: 0; }

/* ------------------------- Galeria y visor --------------------------- */
.galeria {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.galeria__item {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--radio-md);
  overflow: hidden;
  cursor: zoom-in;
  background-color: var(--humo);
}
.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}
.galeria__item:hover img { transform: scale(1.06); }

.visor {
  max-width: min(1180px, 94vw);
  max-height: 92dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.visor::backdrop { background: var(--velo-fuerte); }
.visor__imagen { width: 100%; border-radius: var(--radio-md); background: var(--negro); }
.visor__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-top: var(--espacio-4);
  color: var(--blanco);
  font-size: var(--texto-sm);
}
.visor__pie p { margin: 0; }
.visor__controles { display: flex; gap: var(--espacio-2); }
.visor .boton-icono { background: transparent; border-color: var(--linea-oscura-fuerte); color: var(--blanco); }
.visor .boton-icono:hover { background-color: var(--blanco); border-color: var(--blanco); color: var(--negro); }

/* --------------------------- Carrusel ------------------------------
   El de la lamina Nosotros: las laminas se deslizan dentro de una caja
   gris redondeada y las flechas van a los lados, fuera de las tarjetas.
   ------------------------------------------------------------------ */
.carrusel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-5) var(--espacio-3);
  background-color: var(--humo);
  border-radius: var(--radio-lg);
}
@media (min-width: 768px) { .carrusel { gap: var(--espacio-4); padding: var(--espacio-6) var(--espacio-4); } }

.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72%, 260px);
  gap: var(--espacio-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .carrusel__pista { grid-auto-columns: minmax(0, 1fr); } }

.carrusel__lamina {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--radio-md);
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--linea);
}
.carrusel__lamina img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.carrusel__lamina:hover img { transform: scale(1.05); }
.carrusel__lamina figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--espacio-7) var(--espacio-4) var(--espacio-4);
  background: linear-gradient(180deg, transparent, var(--velo-fuerte));
  color: var(--blanco);
  font-size: var(--texto-xs);
  line-height: 1.4;
}
.carrusel__lamina figcaption strong { display: block; font-weight: 500; }

.carrusel__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--color-texto-suave);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transicion), transform var(--transicion);
}
.carrusel__flecha:hover { color: var(--negro); }
.carrusel__flecha[disabled] { opacity: 0.25; cursor: default; }

/* -------------------------- Aviso de cookies ------------------------- */
.aviso-cookies {
  position: fixed;
  left: var(--espacio-4);
  right: var(--espacio-4);
  bottom: var(--espacio-4);
  z-index: var(--capa-aviso);
  max-width: 440px;
  padding: var(--espacio-5);
  background-color: var(--negro);
  color: var(--sobre-oscuro-suave);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-media);
  font-size: var(--texto-sm);
}
.aviso-cookies__titulo { margin-bottom: var(--espacio-2); color: var(--blanco); font-size: var(--texto-md); }
.aviso-cookies p { margin-bottom: 0; }
.aviso-cookies a { color: var(--blanco); }
.aviso-cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-5); }
.aviso-cookies .boton--principal { background-color: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.aviso-cookies .boton--secundario { border-color: var(--linea-oscura-fuerte); color: var(--blanco); }
.aviso-cookies .boton--secundario:hover { background-color: var(--blanco); color: var(--negro); }

/* --------------------- Animaciones de aparicion ----------------------
   El estado oculto solo se aplica si el JavaScript esta activo (clase
   .js en <html>). Sin JS, o si el script falla, el contenido se ve.

   Toda clase que aparezca aqui tiene que estar tambien en la lista de
   js/base/animaciones.js, o el contenido se queda a medio animar.
   -------------------------------------------------------------------- */
.js .aparece {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transicion-lenta), transform var(--transicion-lenta);
}
.js .aparece.visible { opacity: 1; transform: none; }

.revela { display: block; overflow: hidden; }
.js .revela > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .revela.visible > span { transform: none; }

.js .descubre { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.js .descubre.visible { clip-path: inset(0 0 0 0); }

/* Zoom lento al descubrir una imagen grande */
.js .acerca img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .acerca.visible img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .aparece, .js .revela > span, .js .descubre, .js .acerca img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* ------------------------------ Miga de pan -------------------------- */
.miga {
  padding-block: var(--espacio-4);
  font-size: var(--texto-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.miga ol { display: flex; flex-wrap: wrap; gap: var(--espacio-2); list-style: none; margin: 0; padding: 0; }
.miga li:not(:last-child)::after { content: "/"; margin-left: var(--espacio-2); opacity: 0.5; }
.miga a { color: inherit; text-decoration: none; }

/* --------------------------- Utilidad de visibilidad -----------------
   Va al final del archivo a proposito: tiene que declararse DESPUES de
   .boton, que fija display:inline-flex. Si se declara antes, pierde la
   cascada y los botones de la cabecera siguen ocupando sitio en movil.
   -------------------------------------------------------------------- */
.oculto-movil { display: none; }
@media (min-width: 1024px) {
  .oculto-movil { display: inline-flex; }
}