/*
Theme Name: Detén Estudio
Theme URI: https://detenestudio.com
Author: Detén Estudio
Description: Tema propio de Detén Estudio. Estudio de contenido visual en Girona y la Costa Brava. Sin tema padre, sin CSS heredado, sin código muerto.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Propietario
Text Domain: deten
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Color de marca */
  --azul: #1A2744;
  --dorado: #D4B896;
  --crema: #F7F3EE;
  --grafito: #1A1A1A;

  /* Derivados (solo tintes de los anteriores, sin colores nuevos) */
  --azul-suave: #2B3A5C;
  --crema-linea: #E2D9CD;
  --grafito-suave: #55524E;
  --dorado-tenue: rgba(212, 184, 150, 0.28);

  /* Tipografía */
  --display: "Anton", "Arial Narrow", sans-serif;
  --texto: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Escala tipográfica */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.15rem, 0.4vw + 1rem, 1.375rem);
  --t-lg: clamp(1.5rem, 1.2vw + 1.1rem, 2.125rem);
  --t-xl: clamp(2.25rem, 3.5vw + 1rem, 4rem);
  --t-2xl: clamp(3rem, 8vw + 0.5rem, 8.5rem);

  /* Ritmo */
  --aire: clamp(4.5rem, 9vw, 9rem);
  --aire-corto: clamp(2.5rem, 5vw, 4.5rem);
  --ancho: 1280px;
  --ancho-texto: 62ch;
  --margen: clamp(1.25rem, 5vw, 4rem);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--grafito);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul);
  color: var(--crema);
  padding: 0.9rem 1.4rem;
  z-index: 999;
  font-family: var(--texto);
  font-size: var(--t-sm);
}
.saltar:focus { left: 0; }

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   3. DISPOSITIVO
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.bloque { padding-block: var(--aire); }
.bloque--corto { padding-block: var(--aire-corto); }

.bloque--azul {
  background: var(--azul);
  color: var(--crema);
}
.bloque--azul .rotulo { color: var(--dorado); }

/* Rótulo: eyebrow con el punto dorado del isotipo como marca estructural.
   El punto es el obturador de la marca, no un adorno. */
.rotulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.6rem;
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafito-suave);
}
.rotulo::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dorado);
  flex: none;
}

.titular {
  font-family: var(--display);
  font-size: var(--t-xl);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 18ch;
}

.entradilla {
  font-size: var(--t-md);
  max-width: var(--ancho-texto);
  margin-top: 1.5rem;
  color: var(--grafito-suave);
}
.bloque--azul .entradilla { color: rgba(247, 243, 238, 0.78); }

/* ==========================================================================
   4. CABECERA
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid var(--crema-linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: none;
}
.marca__iso { width: 30px; height: 30px; flex: none; }
.marca__nombre {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--azul);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--grafito);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav .current-menu-item > a { border-bottom-color: var(--dorado); }

@media (max-width: 900px) {
  .nav ul { display: none; }
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  background: var(--azul);
  color: var(--crema);
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--azul);
  transition: background 0.2s ease, color 0.2s ease;
}
.boton:hover { background: var(--azul-suave); border-color: var(--azul-suave); }

.boton--dorado {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--azul);
}
.boton--dorado:hover {
  background: transparent;
  color: var(--dorado);
}

.boton--linea {
  background: transparent;
  color: var(--azul);
}
.boton--linea:hover { background: var(--azul); color: var(--crema); }

.bloque--azul .boton--linea { color: var(--crema); border-color: rgba(247,243,238,0.4); }
.bloque--azul .boton--linea:hover { background: var(--crema); color: var(--azul); border-color: var(--crema); }

/* ==========================================================================
   6. PORTADA — HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(86vh, 820px);
  display: flex;
  align-items: flex-end;
  background: var(--azul);
  overflow: hidden;
}

.hero__medio {
  position: absolute;
  inset: 0;
}
.hero__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__medio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,39,68,0.88) 0%, rgba(26,39,68,0.35) 55%, rgba(26,39,68,0.15) 100%);
}

.hero__texto {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 6rem);
  color: var(--crema);
}

.hero__titular {
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 14ch;
}

.hero__tagline {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 1.8rem;
}

.hero__lugar {
  font-family: var(--texto);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247,243,238,0.7);
  margin: 2.2rem 0 0;
}

/* ==========================================================================
   7. PORTADA — BIFURCACIÓN
   ========================================================================== */

.bifurcacion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--crema-linea);
  border-block: 1px solid var(--crema-linea);
}

.via {
  background: var(--crema);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.25s ease;
}
.via:hover { background: #FFFCF8; }

.via__titulo {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--azul);
}
.via__texto { color: var(--grafito-suave); max-width: 42ch; }
.via__enlace {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul);
  border-bottom: 1px solid var(--dorado);
  align-self: flex-start;
}

@media (max-width: 760px) {
  .bifurcacion { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. SERVICIOS
   ========================================================================== */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--crema-linea);
  margin-top: var(--aire-corto);
  border: 1px solid var(--crema-linea);
}
.bloque--azul .rejilla,
.bloque--azul .rejilla { background: rgba(247,243,238,0.16); border-color: rgba(247,243,238,0.16); }

.servicio {
  background: var(--crema);
  padding: 2.4rem 2rem;
  text-decoration: none;
  display: block;
}
.bloque--azul .servicio { background: var(--azul); }

.servicio__nombre {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.9rem;
}
.bloque--azul .servicio__nombre { color: var(--crema); }

.servicio__texto {
  font-size: var(--t-sm);
  color: var(--grafito-suave);
  margin: 0;
}
.bloque--azul .servicio__texto { color: rgba(247,243,238,0.72); }

/* ==========================================================================
   9. CASOS
   ========================================================================== */

.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--aire-corto);
}

.caso { text-decoration: none; display: block; }

.caso__medio {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--azul);
}
.caso__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.caso:hover .caso__medio img { transform: scale(1.04); }

.caso__sector {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin: 1.3rem 0 0.5rem;
}

.caso__titulo {
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--azul);
}

.caso__resumen {
  font-size: var(--t-sm);
  color: var(--grafito-suave);
  margin-top: 0.7rem;
}

.vacio {
  border: 1px dashed var(--crema-linea);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--grafito-suave);
  font-size: var(--t-sm);
  margin-top: var(--aire-corto);
}

/* ==========================================================================
   10. FRANJA DE DATOS
   ========================================================================== */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.dato__cifra {
  font-family: var(--display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 0.9;
  color: var(--dorado);
}

.dato__texto {
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: rgba(247,243,238,0.78);
  margin-top: 0.9rem;
  max-width: 26ch;
}

/* ==========================================================================
   11. CONTENIDO EDITORIAL
   ========================================================================== */

.editorial { max-width: var(--ancho-texto); }
.editorial h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--azul);
  margin: 2.6rem 0 1rem;
}
.editorial h3 {
  font-family: var(--texto);
  font-weight: 600;
  font-size: var(--t-md);
  margin: 2rem 0 0.7rem;
}
.editorial blockquote {
  margin: 2.4rem 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--dorado);
  font-family: var(--serif);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--azul);
}
.editorial ul, .editorial ol { padding-left: 1.2rem; }
.editorial li { margin-bottom: 0.5rem; }
.editorial a { text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 3px; }
.editorial figure { margin: 2.4rem 0; }
.editorial figcaption {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-top: 0.7rem;
}

/* ==========================================================================
   12. PIE
   ========================================================================== */

.pie {
  background: var(--azul);
  color: var(--crema);
  padding-block: var(--aire-corto);
}

.pie__fila {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) {
  .pie__fila { grid-template-columns: 1fr; }
}

.pie__tagline {
  font-family: var(--texto);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 1.2rem 0 0;
}

.pie__titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 1.1rem;
}

.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.6rem; }
.pie a { text-decoration: none; color: rgba(247,243,238,0.82); font-size: var(--t-sm); }
.pie a:hover { color: var(--dorado); }

.pie__legal {
  margin-top: var(--aire-corto);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(247,243,238,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247,243,238,0.55);
}

/* ==========================================================================
   13. 404
   ========================================================================== */

.error404 .bloque { min-height: 60vh; display: flex; align-items: center; }

/* ==========================================================================
   14. TARIFAS
   ========================================================================== */

.tarifas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--aire-corto);
  align-items: start;
}
.tarifas--dos { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); max-width: 900px; }

.tarifa {
  position: relative;
  background: var(--crema);
  border: 1px solid var(--crema-linea);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bloque--azul .tarifa {
  background: transparent;
  border-color: rgba(247, 243, 238, 0.22);
  color: var(--crema);
}

.tarifa--destacada { border-color: var(--dorado); border-width: 2px; }
.bloque--azul .tarifa--destacada { border-color: var(--dorado); }

.tarifa__sello {
  position: absolute;
  top: -0.75rem;
  left: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--dorado);
  color: var(--azul);
  padding: 0.3rem 0.85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

.tarifa__nombre {
  font-family: var(--display);
  font-size: 1.55rem;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.9rem;
}
.bloque--azul .tarifa__nombre { color: var(--crema); }

.tarifa__precio {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--azul);
  margin: 0 0 1.1rem;
}
.bloque--azul .tarifa__precio { color: var(--dorado); }
.tarifa__precio span {
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tarifa__desde {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-bottom: 0.3rem;
}
.bloque--azul .tarifa__desde { color: rgba(247, 243, 238, 0.6); }

.tarifa__pitch {
  font-size: var(--t-sm);
  color: var(--grafito-suave);
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--crema-linea);
}
.bloque--azul .tarifa__pitch {
  color: rgba(247, 243, 238, 0.72);
  border-bottom-color: rgba(247, 243, 238, 0.18);
}

.tarifa__fase {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 1.4rem 0 0.7rem;
}
.tarifa__fase:first-of-type { margin-top: 0; }

.tarifa__lista {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: var(--t-sm);
}
.tarifa__lista li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.65rem;
  line-height: 1.5;
}
/* El punto dorado del isotipo hace de viñeta en todo el sitio. */
.tarifa__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}

.tarifa__total {
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--grafito-suave);
  border-top: 1px solid var(--crema-linea);
  padding-top: 1.1rem;
  margin-top: 1.2rem;
}
.bloque--azul .tarifa__total {
  color: rgba(247, 243, 238, 0.6);
  border-top-color: rgba(247, 243, 238, 0.18);
}

.tarifa__cta {
  margin-top: auto;
  justify-content: center;
  width: 100%;
}
.tarifa__lista + .tarifa__cta,
.tarifa__total + .tarifa__cta { margin-top: 1.8rem; }

.tarifas__nota {
  margin-top: 2rem;
  font-size: var(--t-sm);
  color: var(--grafito-suave);
  max-width: var(--ancho-texto);
}
.bloque--azul .tarifas__nota { color: rgba(247, 243, 238, 0.66); }

.tarifas__legal {
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--grafito-suave);
  max-width: 80ch;
  margin: 0;
}

/* ==========================================================================
   15. LOGO PROPIO
   ==========================================================================
   Cuando el equipo sube el logo real en Apariencia -> Personalizar -> Identidad,
   el tema lo usa tal cual y no dibuja nada. El SVG de parts/isotipo.php queda
   solo como respaldo mientras no hay archivo subido.
   ========================================================================== */

.marca--propio { display: flex; align-items: center; }
.marca--propio a { display: block; line-height: 0; }

.marca--propio img,
.marca--propio .custom-logo {
  height: 38px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.pie .marca--propio img,
.pie .marca--propio .custom-logo { height: 44px; }

/* El respaldo en azul sobre crema por defecto; en crema sobre azul en el pie. */
.marca { color: var(--azul); }
.marca--claro,
.marca--claro .marca__nombre { color: var(--crema); }

/* Georgia es fuente de sistema: no se descarga, no bloquea el renderizado.
   Se reserva para el contrapunto serif, nunca para texto corrido. */
.serif { font-family: var(--serif); }

/* ==========================================================================
   16. SHOWREEL DEL HERO
   ========================================================================== */

.hero__reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero__reel.esta-listo { opacity: 1; }
.hero__reel[hidden] { display: none; }

/* El degradado va por encima del vídeo, no solo de la foto. */
.hero__texto { z-index: 3; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(26,39,68,0.88) 0%, rgba(26,39,68,0.35) 55%, rgba(26,39,68,0.15) 100%);
}
.hero__medio::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__reel { display: none; }
}

/* ==========================================================================
   17. VÍDEO DE VIMEO EN DIFERIDO
   ========================================================================== */

.vimeo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--azul) center / cover no-repeat;
  cursor: pointer;
  margin-bottom: var(--aire-corto);
  overflow: hidden;
}
.vimeo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 39, 68, 0.32);
  transition: background 0.3s ease;
}
.vimeo:hover::after { background: rgba(26, 39, 68, 0.12); }

.vimeo__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--dorado);
  display: grid;
  place-items: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.vimeo:hover .vimeo__play { transform: translate(-50%, -50%) scale(1.08); }
.vimeo__play::before {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--azul);
  margin-left: 4px;
}

.vimeo.esta-cargado::after,
.vimeo.esta-cargado .vimeo__play { display: none; }

.vimeo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

/* ==========================================================================
   18. VISUAL PORTFOLIO
   ==========================================================================
   El plugin trae su propio CSS y por defecto no se parece en nada a la marca.
   Esto lo reconduce a los tokens del tema.

   IMPORTANTE: en los ajustes del plugin, el origen del contenido debe ser el
   tipo "Casos" del tema. No dejéis activo su tipo "Portfolio" propio o
   acabaréis con dos sitios donde publicar lo mismo.
   ========================================================================== */

.vp-portfolio { --vp-content-gap: clamp(1rem, 2vw, 1.75rem); }

.vp-portfolio__item-overlay,
.vp-portfolio__item-meta { background: rgba(26, 39, 68, 0.9) !important; }

.vp-portfolio__item-meta-title,
.vp-portfolio__item-meta-title a {
  font-family: var(--display) !important;
  font-size: 1.35rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crema) !important;
}

.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-categories a {
  font-family: var(--texto) !important;
  font-size: var(--t-xs) !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado) !important;
}

/* Filtros por sector */
.vp-filter__item a {
  font-family: var(--texto) !important;
  font-size: var(--t-xs) !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-suave) !important;
  border: 1px solid var(--crema-linea) !important;
  border-radius: 0 !important;
  padding: 0.6rem 1.1rem !important;
  background: transparent !important;
}
.vp-filter__item-active a,
.vp-filter__item a:hover {
  color: var(--azul) !important;
  border-color: var(--dorado) !important;
  background: var(--dorado) !important;
}

/* Paginación y botón de cargar más */
.vp-pagination__item a,
.vp-pagination__load-more {
  font-family: var(--texto) !important;
  font-size: var(--t-xs) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
  color: var(--azul) !important;
}

/* Lightbox: fondo de marca en vez del gris del plugin */
.pswp__bg,
.fancybox__backdrop { background: var(--azul) !important; }

/* ==========================================================================
   19. PASOS NUMERADOS
   ==========================================================================
   Solo aquí: el paseo SÍ es una secuencia real (se elige el sitio, se pasea,
   se entrega). Numerar algo que no lleva orden es decoración.
   ========================================================================== */

.paso__num {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--dorado);
  margin: 0 0 0.9rem;
}

/* ==========================================================================
   20. BIFURCACIÓN B2B Y FRANJA SECUNDARIA
   ==========================================================================
   La portada ya no reparte a partes iguales entre negocio y turista.
   Tres vías de negocio arriba; el turista, en una franja discreta abajo.
   ========================================================================== */

.bifurcacion--b2b { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .bifurcacion--b2b { grid-template-columns: 1fr; } }

.franja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--crema-linea);
  border-left: 3px solid var(--dorado);
  text-decoration: none;
  transition: background 0.25s ease;
}
.franja:hover { background: #FFFCF8; }

.franja__rotulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 0.5rem;
}
.franja__texto {
  margin: 0;
  color: var(--grafito-suave);
  max-width: 56ch;
}
.franja__enlace {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul);
  border-bottom: 1px solid var(--dorado);
  flex: none;
}

/* ==========================================================================
   21. CORRECCIONES DE RESPONSIVE
   ==========================================================================
   Tres fallos reales que había:

   1. Debajo de 900 px el menú simplemente se ocultaba y no había nada que lo
      sustituyera. En móvil no existía navegación.
   2. Las rejillas usaban minmax(300px) y minmax(340px). En un móvil de 360 o
      375 px, descontado el margen lateral, no caben: la página se desbordaba
      a lo ancho y se podía arrastrar en horizontal.
   3. No había red de seguridad contra desbordes horizontales.
   ========================================================================== */

/* --- 1. Que nada pueda desbordar a lo ancho --- */
html, body { overflow-x: clip; max-width: 100%; }

/* --- 2. Rejillas que nunca piden más ancho del disponible --- */
.rejilla       { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tarifas       { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tarifas--dos  { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.casos         { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.datos         { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* --- 3. Botón de menú --- */
.hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--azul);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-abierta .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-abierta .hamburguesa span:nth-child(2) { opacity: 0; }
.nav-abierta .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {

  .hamburguesa { display: flex; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--crema-linea);
    padding: 1rem var(--margen) 2rem;
    transform: translateY(-120%);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav-abierta .nav { transform: translateY(0); }

  /* Se reactiva la lista, que en escritorio se ocultaba mal */
  .nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav li { border-bottom: 1px solid var(--crema-linea); }
  .nav ul a {
    display: block;
    padding: 1rem 0;
    font-size: var(--t-md);
    border-bottom: 0;
  }
  .nav > .boton { margin-top: 1.6rem; justify-content: center; }

  .nav-abierta { overflow: hidden; }
}

/* --- 4. Ajustes finos de tipografía en pantallas estrechas --- */
@media (max-width: 560px) {
  .hero { min-height: min(78vh, 640px); }
  .hero__titular { max-width: 100%; }
  .titular { max-width: 100%; }
  .franja { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .tarifa__cta { width: 100%; }
  .vimeo__play { width: 58px; height: 58px; }
  .caso__medio { aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   22. COMPARATIVA DE FAMILIAS (/planes/)
   ========================================================================== */

.comparativa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--crema-linea);
  border: 1px solid var(--crema-linea);
  margin-top: var(--aire-corto);
}

.comparativa__col {
  background: var(--crema);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex;
  flex-direction: column;
}

.comparativa__titulo {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 1.1rem;
}

.comparativa__texto { color: var(--grafito-suave); margin-bottom: 1.6rem; }

.comparativa__pie {
  margin: auto 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--crema-linea);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
}

/* ==========================================================================
   23. EQUIPO
   ========================================================================== */

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--aire-corto);
}

.persona { margin: 0; }

.persona__medio {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--azul);
}
.persona__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.persona:hover .persona__medio img { filter: grayscale(0%); }

.persona__nombre {
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  color: var(--azul);
  margin: 1.2rem 0 0.35rem;
}

.persona__rol {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin: 0;
}

/* ==========================================================================
   24. DATO ENLAZABLE
   ==========================================================================
   El dato de las 3 personas lleva al estudio. La duda de "quiénes son estos"
   aparece después del precio, no al aterrizar: por eso el enlace al equipo
   vive aquí y al final de las páginas de sector, no en un bloque propio.
   ========================================================================== */

.dato--enlace {
  display: block;
  text-decoration: none;
  color: inherit;
}
.dato__enlace {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.dato--enlace:hover .dato__enlace { border-bottom-color: var(--dorado); }

/* ==========================================================================
   25. EQUIPO SIN RETRATO
   ==========================================================================
   Mientras no haya foto, la ficha sale igual con la inicial sobre azul.
   Se lee como una decisión de diseño, no como un hueco.
   ========================================================================== */

.persona__medio--pendiente {
  display: grid;
  place-items: center;
  background: var(--azul);
}
.persona__medio--pendiente span {
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--dorado);
  opacity: 0.55;
}

/* Nombre y función con más presencia: antes se perdían bajo la foto. */
.persona figcaption {
  border-top: 2px solid var(--dorado);
  padding-top: 1rem;
  margin-top: 1.1rem;
}
.persona__nombre {
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
}
.persona__rol {
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  color: var(--grafito);
}

/* ==========================================================================
   26. APARICIÓN AL HACER SCROLL
   ==========================================================================
   Solo se oculta si el JavaScript ha añadido .anima al <html>. Sin JS, todo
   se ve: nunca escondemos contenido a la espera de que algo funcione.

   Corto y discreto a propósito. Una animación que se nota deja de ser una
   transición y pasa a ser un efecto.
   ========================================================================== */

.anima .aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}

.anima .aparece.esta-dentro {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* El hero nunca se anima: es lo primero que se ve y no debe hacer esperar. */
.anima .hero .aparece { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anima .aparece { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   27. TARJETAS DE PRECIO AL PASAR EL RATÓN
   ==========================================================================
   Se marca cuál está señalando, sin moverla. En el punto donde alguien decide
   si gasta 1.100 €, el movimiento distrae de la lectura: lo que tiene que
   hacer es leer la lista de entregables.

   Nada de escalar (desplazaría a las vecinas y en táctil se queda pegado el
   estado) ni de sombras difusas (la marca es plana).
   ========================================================================== */

.tarifa {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.tarifa:hover,
.tarifa:focus-within {
  border-color: var(--dorado);
  background-color: #FFFCF8;
}

.bloque--azul .tarifa:hover,
.bloque--azul .tarifa:focus-within {
  border-color: var(--dorado);
  background-color: rgba(247, 243, 238, 0.05);
}

/* El botón de la tarjeta señalada se adelanta al gesto. */
.tarifa:hover .boton--linea {
  border-color: var(--dorado);
  color: var(--azul);
  background: var(--dorado);
}
.bloque--azul .tarifa:hover .boton--linea {
  background: var(--dorado);
  color: var(--azul);
  border-color: var(--dorado);
}

/* En táctil no hay ratón: el estado se quedaría pegado tras tocar. */
@media (hover: none) {
  .tarifa:hover { border-color: var(--crema-linea); background-color: var(--crema); }
  .tarifa--destacada:hover { border-color: var(--dorado); }
  .bloque--azul .tarifa:hover { background-color: transparent; border-color: rgba(247,243,238,0.22); }
  .tarifa:hover .boton--linea { background: transparent; color: var(--azul); border-color: var(--azul); }
  .bloque--azul .tarifa:hover .boton--linea { color: var(--crema); border-color: rgba(247,243,238,0.4); }
}

/* ==========================================================================
   28. REDES SOCIALES
   ========================================================================== */

.redes {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.redes li { margin: 0; }

.redes a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.redes--pie a { color: rgba(247, 243, 238, 0.7); }
.redes--pie a:hover { color: var(--dorado); border-color: var(--dorado); }

/* En escritorio no salen en la cabecera: el menú tiene un solo CTA dominante
   y los iconos sociales compiten con él llevándose visitas fuera del sitio. */
.redes--nav { display: none; }

@media (max-width: 900px) {
  .redes--nav {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--crema-linea);
  }
  .redes--nav a { color: var(--grafito-suave); }
  .redes--nav a:hover { color: var(--azul); border-color: var(--dorado); }
}

/* ==========================================================================
   29. SUBMENÚS
   ==========================================================================
   El menú estaba limitado a un nivel y los hijos no llegaban a imprimirse.
   Ahora Servicios despliega Inmobiliaria, Hoteles y Marcas.
   ========================================================================== */

.nav li { position: relative; }

.nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 60;
  display: block;
  min-width: 240px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0.6rem 0;
  background: var(--crema);
  border: 1px solid var(--crema-linea);
  border-top: 2px solid var(--dorado);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Puente invisible: sin esto el desplegable se cierra al mover el ratón
   desde el enlace padre hacia el submenú. */
.nav .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Flecha que avisa de que hay más */
.nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.5rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.22s ease;
}
.nav .menu-item-has-children:hover > a::after { transform: translateY(0) rotate(225deg); }

.nav .sub-menu li { border: 0; }
.nav .sub-menu a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: var(--t-sm);
  white-space: nowrap;
  border-bottom: 0;
}
.nav .sub-menu a:hover { background: #FFFCF8; color: var(--azul); }

/* --- En móvil no hay ratón: los hijos se ven siempre, indentados --- */
@media (max-width: 900px) {
  .nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0.5rem;
    margin: 0;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--dorado);
  }
  .nav .sub-menu a { padding: 0.75rem 0 0.75rem 1.2rem; font-size: var(--t-base); }
  .nav .menu-item-has-children > a::after { display: none; }
  .nav .sub-menu li:last-child a { padding-bottom: 0.2rem; }
}

/* ==========================================================================
   30. CONTACTO
   ========================================================================== */

.contacto__foto {
  margin: 0 0 var(--aire-corto);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--azul);
}
.contacto__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .contacto__foto { aspect-ratio: 4 / 3; } }

.vias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--crema-linea);
  border: 1px solid var(--crema-linea);
}

.via-contacto {
  background: var(--crema);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  text-decoration: none;
  display: block;
  transition: background 0.25s ease;
}
.via-contacto:hover { background: #FFFCF8; }

.via-contacto--principal { border-top: 3px solid var(--dorado); }

.via-contacto__rotulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 0.8rem;
}

.via-contacto__dato {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  text-transform: none;
  color: var(--azul);
  margin: 0 0 0.7rem;
  word-break: break-word;
}

.via-contacto__nota {
  font-size: var(--t-sm);
  color: var(--grafito-suave);
  margin: 0;
}

/* Perfiles con nombre, no solo icono: aquí la gente busca a dónde ir */
.perfiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--aire-corto);
}

.perfil {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--crema-linea);
  color: var(--azul);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.perfil:hover { border-color: var(--dorado); background: #FFFCF8; }
.perfil .red__icono { flex: none; }

/* ==========================================================================
   31. FILTRO DE SECTORES
   ========================================================================== */

.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--aire-corto);
}

.filtro__item {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--crema-linea);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.filtro__item:hover { border-color: var(--dorado); color: var(--azul); }
.filtro__item.esta-activo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--crema);
}

/* ==========================================================================
   32. CARRUSEL DE VÍDEO
   ==========================================================================
   Desplazamiento nativo con anclaje, sin librería de carrusel. Las piezas
   verticales y horizontales conviven porque cada una fija su propio ancho:
   forzarlas al mismo formato deja franjas negras en unas u otras.
   ========================================================================== */

.carrusel {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--aire-corto);
  padding: 0 var(--margen) 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--dorado) rgba(247, 243, 238, 0.15);
}
.carrusel::-webkit-scrollbar { height: 4px; }
.carrusel::-webkit-scrollbar-track { background: rgba(247, 243, 238, 0.15); }
.carrusel::-webkit-scrollbar-thumb { background: var(--dorado); }

.carrusel__pieza {
  flex: 0 0 min(560px, 82vw);
  scroll-snap-align: start;
  margin: 0;
}
.carrusel__pieza--vertical { flex-basis: min(300px, 60vw); }

.carrusel__pieza .vimeo {
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  border: 1px solid rgba(247, 243, 238, 0.18);
}
.carrusel__pieza--vertical .vimeo { aspect-ratio: 9 / 16; }

.carrusel__pieza figcaption {
  font-size: var(--t-sm);
  color: rgba(247, 243, 238, 0.85);
}
.carrusel__pieza figcaption a { text-decoration: none; }
.carrusel__pieza figcaption a:hover { color: var(--dorado); }

.carrusel__sector {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 0.4rem;
}

.carrusel__pista {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.5);
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   33. LOGOS DE CLIENTES
   ========================================================================== */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  list-style: none;
  margin: var(--aire-corto) 0 0;
  padding: 0;
}
.logos li { margin: 0; }

.logos img {
  max-height: 46px;
  width: auto;
  /* En una sola tinta conviven logos de estilos muy distintos sin ruido. */
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.35s ease;
}
.logos li:hover img { filter: grayscale(0%) opacity(1); }

/* ==========================================================================
   34. GALERÍAS DENTRO DEL CONTENIDO
   ==========================================================================
   El texto va en columna estrecha porque una línea larga se lee mal. Pero
   eso estrangulaba las galerías pegadas en el editor: salían pequeñas y
   descentradas.

   La columna de texto se centra, y las galerías se salen de ella hasta el
   ancho del contenedor. Ensanchar la columna entera habría arreglado la
   galería y roto la lectura.
   ========================================================================== */

.editorial { margin-inline: auto; }

.editorial .vp-portfolio,
.editorial .vp-portfolio__wrap,
.editorial .wp-block-gallery,
.editorial .wp-block-image.alignwide,
.editorial .wp-block-image.alignfull,
.editorial .alignwide,
.editorial .alignfull {
  width: 100%;
  max-width: var(--ancho);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Las imágenes sueltas anchas también se centran solas. */
.editorial > figure.alignwide,
.editorial > figure.alignfull { margin-inline: 0; }

/* Dentro de la rejilla del plugin, que las piezas llenen su celda. */
.vp-portfolio__item,
.vp-portfolio__item-img,
.vp-portfolio__item-img img {
  width: 100%;
  max-width: none;
}
.vp-portfolio__item-img img { height: auto; object-fit: cover; }

/* El plugin a veces se queda con un ancho mínimo heredado del contenedor. */
.vp-portfolio__items { width: 100%; }

@media (max-width: 900px) {
  .editorial .vp-portfolio,
  .editorial .wp-block-gallery,
  .editorial .alignwide,
  .editorial .alignfull {
    margin-left: 0;
    transform: none;
    max-width: 100%;
  }
}

/* ==========================================================================
   35. NAVEGACIÓN ENTRE PROYECTOS
   ==========================================================================
   Va DESPUÉS del bloque de llamada a la acción, no antes: quien está listo
   para escribir lo hace arriba, y esto recoge a quien todavía está mirando.
   ========================================================================== */

.vecinos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1px;
  background: var(--crema-linea);
  border-block: 1px solid var(--crema-linea);
}

.vecino {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--crema);
  text-decoration: none;
  transition: background 0.25s ease;
}
.vecino:hover { background: #FFFCF8; }

/* El siguiente, cuando va solo, se alinea a la derecha del bloque. */
.vecino:only-child { grid-column: -2; }

.vecino__medio {
  flex: none;
  width: clamp(84px, 12vw, 120px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--azul);
}
.vecino__medio img { width: 100%; height: 100%; object-fit: cover; }

.vecino__etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 0.5rem;
}

.vecino__titulo {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0;
}

.vecino__sector {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   36. REJILLA EN MOSAICO
   ==========================================================================
   Mosaico real: las piezas conservan su proporción original en vez de
   recortarse todas a 4:5. Una fachada apaisada y un interior vertical dejan
   de parecer la misma foto cortada de dos maneras.

   Se hace con columnas CSS, sin JavaScript ni librería: nada que cargar y
   nada que se descoloque mientras carga.
   ========================================================================== */

.casos--mosaico {
  display: block;
  columns: 3 300px;
  column-gap: clamp(1rem, 2vw, 1.75rem);
}

.casos--mosaico .caso {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Sin proporción fija: manda la forma real de la imagen. */
.casos--mosaico .caso__medio { aspect-ratio: auto; }
.casos--mosaico .caso__medio img { height: auto; }

@media (max-width: 700px) {
  .casos--mosaico { columns: 1; }
}

/* Contenedor del diseño del plugin: que no herede anchos del tema. */
.rejilla-vp {
  margin-top: var(--aire-corto);
  width: 100%;
}
.rejilla-vp .vp-portfolio { width: 100%; max-width: none; }