/* ── Tipografías alojadas aquí ──────────────────────────────────────────
   Se sirven desde el propio dominio para no bloquear el pintado con una
   petición externa y para no enviar la IP de cada visitante a Google sin su
   consentimiento. Solo se descarga el subconjunto que hace falta.
   Playfair Display recoge el aire del logotipo; Inter lee bien en párrafo.
   ──────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   LA MUSA — Sistema visual
   Marfil de fondo, marrón para el texto, terracota como acento y mostaza
   para lo que tiene que saltar. Los seis colores salen de la paleta que
   envió la clienta; el resto son mezclas suyas para textos y separadores.
   ========================================================================= */

:root {
  /* --- Paleta de marca (la del documento PALETA DE COLORES) --- */
  --marfil:      #FCDEB6;
  --ocre:        #F0AF48;
  --mostaza:     #FFA700;
  --teja:        #BE4721;
  --terracota:   #AB200A;
  --marron:      #843B00;

  /* --- Derivados para fondos y textos --- */
  --crema:        #FBF4E9;   /* fondo general de la web */
  --crema-hondo:  #F5E9D8;   /* franjas alternas */
  --marfil-suave: #FDEBD0;
  --tinta:        #2A1808;   /* texto principal, marrón muy oscuro */
  --tinta-hondo:  #1B0F05;   /* bloques oscuros */
  --gris:         #7C6449;   /* texto secundario */
  --gris-suave:   #A08A6E;
  --linea:        #E9D9C0;
  --linea-fuerte: #DCC5A4;
  --blanco:       #FFFFFF;
  --terracota-hondo: #8B1806;

  /* --- Área de inteligencia artificial --- */
  --ia-fondo:     #17120E;
  --ia-fondo-2:   #221A13;
  --ia-linea:     #3A2C1F;
  --ia-texto:     #F3E7D5;
  --ia-suave:     #B9A489;
  --ia-acento:    #FFA700;

  /* --- Tipografía --- */
  --tipo-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --tipo-texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Medidas --- */
  --ancho:       1220px;
  --ancho-texto: 66ch;
  --radio:       3px;
  --radio-md:    10px;
  --radio-lg:    20px;
  --cabecera:    74px;

  --sombra-sutil: 0 1px 2px rgba(42,24,8,.04), 0 10px 26px -18px rgba(42,24,8,.22);
  --sombra-media: 0 2px 5px rgba(42,24,8,.06), 0 26px 50px -28px rgba(42,24,8,.35);
  --curva: cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tipo-texto);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:target { scroll-margin-top: calc(var(--cabecera) + 28px); }
::selection { background: var(--mostaza); color: var(--tinta); }

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

/* ------------------------------------------------------------ Tipografía */
h1, h2, h3, h4 {
  font-family: var(--tipo-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.014em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.03; letter-spacing: -.022em; }
h2 { font-size: clamp(1.95rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.008em; }
h4 { font-size: 1.05rem; font-family: var(--tipo-texto); font-weight: 600; letter-spacing: -.004em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--tipo-texto);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--terracota);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--mostaza);
  transform: rotate(45deg);
  flex: none;
}

.entradilla {
  font-size: clamp(1.06rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--gris);
  max-width: var(--ancho-texto);
}

/* ---------------------------------------------------------- Estructura */
.contenedor { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }
.seccion    { padding: clamp(3.6rem, 8vw, 7rem) 0; }
.seccion-corta { padding: clamp(2.6rem, 5vw, 4.2rem) 0; }
.fondo-crema  { background: var(--crema-hondo); }
.fondo-marfil { background: var(--marfil-suave); }
.fondo-tinta  { background: var(--tinta-hondo); color: var(--marfil); }
.fondo-tinta h2, .fondo-tinta h3 { color: var(--marfil); }
.fondo-tinta .eyebrow { color: var(--mostaza); }

.encabezado { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.encabezado-texto { color: var(--gris); font-size: 1.06rem; max-width: var(--ancho-texto); }
.encabezado.centrado { margin-inline: auto; text-align: center; }
.encabezado.centrado .eyebrow { justify-content: center; }
.encabezado.centrado .encabezado-texto { margin-inline: auto; }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--marfil); padding: .8rem 1.2rem;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--tipo-texto); font-size: .93rem; font-weight: 600;
  letter-spacing: -.002em; line-height: 1;
  padding: .92rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background .22s var(--curva), color .22s var(--curva),
              border-color .22s var(--curva), transform .22s var(--curva);
}
.btn .icono { transition: transform .25s var(--curva); }
.btn:hover .icono { transform: translateX(3px); }
.btn-terracota { background: var(--terracota); color: #fff; }
.btn-terracota:hover { background: var(--terracota-hondo); transform: translateY(-1px); }
.btn-tinta { background: var(--tinta); color: var(--marfil); }
.btn-tinta:hover { background: var(--terracota); color: #fff; }
.btn-mostaza { background: var(--mostaza); color: var(--tinta); }
.btn-mostaza:hover { background: var(--ocre); }
.btn-linea { border-color: var(--linea-fuerte); color: var(--tinta); background: transparent; }
.btn-linea:hover { border-color: var(--tinta); background: var(--tinta); color: var(--marfil); }
.btn-claro { background: var(--marfil); color: var(--tinta); }
.btn-claro:hover { background: #fff; }
.btn-pequeno { padding: .68rem 1.15rem; font-size: .86rem; }
.btn-grande  { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--terracota); outline-offset: 3px; border-radius: 4px;
}

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .89rem; font-weight: 600; color: var(--terracota);
}
.enlace-flecha .icono { transition: transform .25s var(--curva); }
a:hover .enlace-flecha .icono { transform: translateX(4px); }

/* ------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,244,233,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.cabecera.pegada { border-bottom-color: var(--linea); box-shadow: 0 6px 24px -22px rgba(42,24,8,.6); }
.cabecera-fila { display: flex; align-items: center; gap: 1.2rem; min-height: var(--cabecera); }

.marca { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.marca-lobo { width: 32px; height: auto; }
.marca-texto {
  font-family: var(--tipo-display); font-size: 1.32rem; font-weight: 700;
  line-height: 1; letter-spacing: .01em; display: block;
}
.marca-texto small {
  display: block; font-family: var(--tipo-texto); font-size: .53rem;
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-suave); margin-top: .3rem;
}

.menu { display: flex; align-items: center; gap: .35rem; }
.menu > a {
  padding: .55rem .8rem; border-radius: 999px;
  font-size: .93rem; font-weight: 500; color: var(--tinta);
  transition: background .2s var(--curva), color .2s var(--curva);
}
.menu > a:hover { background: rgba(171,32,10,.08); color: var(--terracota); }
.menu > a.activo { color: var(--terracota); font-weight: 600; }
.menu .enlace-ia { display: inline-flex; align-items: center; gap: .45rem; }
.punto-ia {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mostaza);
  box-shadow: 0 0 0 3px rgba(255,167,0,.22);
}
.btn-menu-movil { display: none; }
.acciones-cabecera { display: flex; align-items: center; gap: .6rem; }

.boton-menu {
  display: none; width: 42px; height: 42px; border: 1px solid var(--linea-fuerte);
  background: transparent; border-radius: 999px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.boton-menu span { display: block; width: 17px; height: 1.6px; background: var(--tinta); transition: transform .25s var(--curva), opacity .2s; }
.boton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 940px) {
  .boton-menu { display: flex; }
  .acciones-cabecera .btn-pequeno { display: none; }
  .menu {
    position: fixed; inset: var(--cabecera) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--crema); border-bottom: 1px solid var(--linea);
    padding: 1rem 1.2rem 1.6rem;
    transform: translateY(-115%); opacity: 0; pointer-events: none;
    transition: transform .32s var(--curva), opacity .2s;
    max-height: calc(100dvh - var(--cabecera)); overflow-y: auto;
  }
  .menu.abierto { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .menu > a { padding: .85rem .6rem; font-size: 1.05rem; border-radius: var(--radio-md); }
  .btn-menu-movil { display: inline-flex; margin-top: .8rem; }
}

/* ------------------------------------------------------------ Migas */
.migas { border-bottom: 1px solid var(--linea); background: var(--crema); }
.migas ol { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 0; font-size: .82rem; color: var(--gris-suave); }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--linea-fuerte); }
.migas a:hover { color: var(--terracota); }

/* -------------------------------------------------------------- Portada */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5.5rem); }
/* El lobo del logotipo, muy tenue, como marca de agua detrás del titular. */
.hero::before {
  content: ""; position: absolute; right: -6%; top: -12%;
  width: min(52vw, 620px); aspect-ratio: 431/571;
  background: url('../img/marca/lobo-marron.png') no-repeat center / contain;
  opacity: .045; pointer-events: none;
}
.hero-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative;
}
.hero h1 { margin-bottom: .55em; }
.hero h1 .destaca { font-style: italic; color: var(--terracota); }
.hero-texto { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--gris); max-width: 46ch; }
.hero-botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero-figura { position: relative; }
.hero-figura img { border-radius: var(--radio-lg); box-shadow: var(--sombra-media); position: relative; z-index: 1; }
/* Marco desplazado: da profundidad sin cargar la página de sombras. */
.hero-figura::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--terracota); border-radius: var(--radio-lg); z-index: 0;
}
.hero-pie {
  margin-top: 1.6rem; font-size: .8rem; color: var(--gris-suave);
  display: flex; align-items: center; gap: .5rem;
}
.hero-pie::before { content: ""; width: 22px; height: 1px; background: var(--linea-fuerte); }

/* Franja de las cuatro palabras, sobre fotografía a sangre.
   La foto va muy oscurecida y con un velo cálido encima: así el texto se lee
   siempre, ponga el cliente la foto que ponga desde el panel, y la franja
   sigue siendo de la marca y no de la fotografía de turno. */
.valores { position: relative; overflow: hidden; background: var(--tinta-hondo); isolation: isolate; }
.valores-fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* La franja es baja y el recorte se come el centro de la foto. Subiéndolo
     un poco entra el fondo —en la de la plaza, la torre y los edificios—,
     que es lo que hace que se reconozca la ciudad. */
  object-position: center 32%;
}
.valores::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Un solo velo, y uniforme: si se oscurece por zonas, el texto de la última
     columna acaba dependiendo de qué foto ponga el cliente en el panel. */
  background:
    linear-gradient(rgba(27,15,5,.80), rgba(27,15,5,.80)),
    linear-gradient(100deg, rgba(120,32,8,.5) 0%, rgba(27,15,5,.1) 70%);
}
.valores-rejilla {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  counter-reset: valor;
}
.valores-rejilla > div {
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid rgba(252,222,182,.18);
}
.valores-rejilla > div:first-child { border-left: 0; padding-left: 0; }
.valores-rejilla > div::before {
  counter-increment: valor; content: counter(valor, decimal-leading-zero);
  display: block; margin-bottom: .9rem;
  font-family: var(--tipo-display); font-size: .92rem; font-weight: 700;
  letter-spacing: .06em; color: var(--mostaza);
}
.valores h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: .35em; color: var(--marfil); }
.valores p { font-size: .92rem; color: rgba(252,222,182,.76); line-height: 1.62; }

/* -------------------------------------------------------------- Tarjetas */
.rejilla { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); overflow: hidden;
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva);
}
a.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); border-color: var(--linea-fuerte); }
.tarjeta-cuerpo { padding: clamp(1.3rem, 2.4vw, 1.8rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta-cuerpo h3 { margin: 0; }
.tarjeta-texto { color: var(--gris); font-size: .95rem; line-height: 1.62; margin: 0; }
.tarjeta-cuerpo .enlace-flecha { margin-top: auto; padding-top: .8rem; }
.tarjeta-foto { position: relative; aspect-ratio: 3/2; background: var(--marfil-suave); overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
a.tarjeta:hover .tarjeta-foto img { transform: scale(1.035); }

.tarjeta-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marfil-suave); color: var(--terracota);
  border: 1px solid var(--linea); margin-bottom: .35rem;
}
.tarjeta-servicio .tarjeta-destacado {
  font-family: var(--tipo-display); font-style: italic; font-size: 1.02rem;
  color: var(--teja); margin: 0; line-height: 1.4;
}

.pastilla {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--marron); background: var(--marfil-suave);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: .3rem .7rem; margin: 0;
}
.marcador-proyecto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--tipo-display); font-size: 5.5rem; font-weight: 700;
  color: rgba(171,32,10,.16); background: var(--marfil-suave);
}

.tarjeta-proyecto.es-grande { grid-column: span 2; }
.tarjeta-proyecto.es-grande h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
/* En una fila donde una tarjeta va a doble ancho, las de al lado se estiran
   para igualar la altura. En vez de dejar un hueco de fondo dentro de la
   tarjeta, es la foto la que crece y absorbe ese espacio. */
.tarjeta-proyecto .tarjeta-foto { flex: 1 1 auto; aspect-ratio: auto; min-height: 200px; }
.tarjeta-proyecto .tarjeta-cuerpo { flex: 0 0 auto; }
.tarjeta-proyecto.es-grande .tarjeta-foto { min-height: 300px; }

/* Ficha de persona: el retrato es un círculo dentro del cuerpo, así la tarjeta
   mide lo que mide su contenido. La banda de color de arriba la reparte el
   :nth-child, que para cuatro perfiles fijos es más simple que otra columna. */
.tarjeta-persona { position: relative; text-align: left; }
.tarjeta-persona::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--acento-persona, var(--terracota));
}
.tarjeta-persona .tarjeta-cuerpo { padding-top: clamp(1.5rem, 2.6vw, 2rem); gap: .35rem; }
.persona-chip {
  width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .7rem;
  background: var(--fondo-persona, var(--marfil-suave));
  border: 1px solid var(--linea-fuerte);
  font-family: var(--tipo-display); font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: var(--acento-persona, var(--terracota));
}
.persona-chip img { width: 100%; height: 100%; object-fit: cover; }
.persona-rol {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento-persona, var(--terracota)); margin: 0 0 .35rem;
}
.rejilla > .tarjeta-persona:nth-child(4n+1) { --acento-persona: var(--terracota); --fondo-persona: #FBE6DE; }
.rejilla > .tarjeta-persona:nth-child(4n+2) { --acento-persona: var(--teja);      --fondo-persona: #FBEADF; }
.rejilla > .tarjeta-persona:nth-child(4n+3) { --acento-persona: #9A6500;          --fondo-persona: #FFF1D6; }
.rejilla > .tarjeta-persona:nth-child(4n+4) { --acento-persona: var(--marron);    --fondo-persona: #F6E7D2; }

/* Cita a lo ancho, en terracota: parte los dos bloques de texto largo de
   «Quiénes somos» y mete el primer respiro de color de la página. */
.franja-cita {
  background: var(--terracota); color: var(--marfil);
  padding: clamp(2.6rem, 6vw, 4.6rem) 0;
}
.franja-cita blockquote {
  margin: 0; max-width: 24ch;
  font-family: var(--tipo-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.28;
  position: relative; padding-left: clamp(2.2rem, 5vw, 3.6rem);
}
.franja-cita blockquote::before {
  content: "\201C"; position: absolute; left: 0; top: -.12em;
  font-size: clamp(3.4rem, 8vw, 6rem); line-height: 1;
  color: var(--mostaza); font-style: normal;
}

/* Dos columnas de texto: un bloque largo seguido cansa; a dos columnas se lee. */
.texto-doble {
  column-count: 2; column-gap: clamp(2rem, 5vw, 4rem);
  font-size: 1.04rem; max-width: 100%;
}
.texto-doble p { margin-bottom: 1.2em; break-inside: avoid; }
@media (max-width: 820px) { .texto-doble { column-count: 1; max-width: var(--ancho-texto); } }

/* --------------------------------------------------------- Listas y pasos */
.lista-puntos { display: grid; gap: .75rem; margin: 1.4rem 0 0; }
.lista-puntos li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.6; }
.lista-puntos .icono { flex: none; color: var(--terracota); margin-top: .28em; }
.lista-puntos.en-oscuro .icono { color: var(--mostaza); }

.pasos { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: paso; }
.paso { position: relative; padding-top: 2.6rem; border-top: 1.5px solid var(--linea-fuerte); }
.paso::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; top: 1rem; left: 0;
  font-family: var(--tipo-display); font-size: 1.15rem; font-weight: 700;
  color: var(--acento-paso, var(--terracota));
}
.paso { border-top-color: var(--acento-paso, var(--linea-fuerte)); }
.pasos > .paso:nth-child(4n+1) { --acento-paso: var(--terracota); }
.pasos > .paso:nth-child(4n+2) { --acento-paso: var(--teja); }
.pasos > .paso:nth-child(4n+3) { --acento-paso: var(--ocre); }
.pasos > .paso:nth-child(4n+4) { --acento-paso: var(--marron); }
.paso h3 { font-size: 1.16rem; margin-bottom: .4em; }
.paso p { font-size: .93rem; color: var(--gris); line-height: 1.62; margin: 0; }

/* ------------------------------------------------------- Bloques mixtos */
.bloque-doble {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.bloque-doble.invertido .bloque-figura { order: -1; }
.bloque-figura img { border-radius: var(--radio-lg); box-shadow: var(--sombra-sutil); }
.bloque-figura figcaption { margin-top: .9rem; font-size: .82rem; color: var(--gris-suave); }

.cita {
  font-family: var(--tipo-display); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1.34;
  color: var(--terracota); border-left: 2px solid var(--mostaza);
  padding-left: clamp(1.2rem, 3vw, 2.2rem); margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: 24ch;
}
.texto-largo { max-width: var(--ancho-texto); font-size: 1.04rem; }
.texto-largo p { margin-bottom: 1.3em; }

/* ---------------------------------------------------------------- IA */
.tema-ia { background: var(--ia-fondo); color: var(--ia-texto); }
.tema-ia .cabecera { background: rgba(23,18,14,.9); }
.tema-ia .cabecera.pegada { border-bottom-color: var(--ia-linea); }
.tema-ia .marca-texto { color: var(--ia-texto); }
.tema-ia .marca-texto small { color: var(--ia-suave); }
.tema-ia .marca-lobo { content: url('../img/marca/lobo.png'); }
.tema-ia .menu > a { color: var(--ia-texto); }
.tema-ia .menu > a:hover { background: rgba(255,167,0,.14); color: var(--mostaza); }
.tema-ia .menu > a.activo { color: var(--mostaza); }
.tema-ia .btn-tinta { background: var(--mostaza); color: var(--tinta); }
.tema-ia .btn-tinta:hover { background: var(--ocre); }
.tema-ia .boton-menu { border-color: var(--ia-linea); }
.tema-ia .boton-menu span { background: var(--ia-texto); }
.tema-ia .migas { background: var(--ia-fondo); border-bottom-color: var(--ia-linea); color: var(--ia-suave); }
.tema-ia h1, .tema-ia h2, .tema-ia h3 { color: var(--ia-texto); }
.tema-ia .eyebrow { color: var(--mostaza); }
.tema-ia .eyebrow::before { background: var(--mostaza); }
.tema-ia .entradilla, .tema-ia .encabezado-texto, .tema-ia .tarjeta-texto { color: var(--ia-suave); }
.tema-ia .fondo-crema { background: var(--ia-fondo-2); }
.tema-ia .tarjeta { background: var(--ia-fondo-2); border-color: var(--ia-linea); }
.tema-ia .tarjeta-icono { background: rgba(255,167,0,.13); border-color: rgba(255,167,0,.28); color: var(--mostaza); }
.tema-ia .btn-linea { border-color: var(--ia-linea); color: var(--ia-texto); }
.tema-ia .btn-linea:hover { background: var(--ia-texto); color: var(--tinta); border-color: var(--ia-texto); }
.tema-ia .pie { background: var(--ia-fondo-2); border-top-color: var(--ia-linea); }
.tema-ia .paso { border-top-color: var(--ia-linea); }
.tema-ia .paso::before, .tema-ia .paso h3 { color: var(--mostaza); }
.tema-ia .paso p { color: var(--ia-suave); }
.tema-ia .cita { color: var(--mostaza); border-left-color: var(--mostaza); }
.tema-ia .cta { background: var(--ia-fondo-2); }
.tema-ia .cta-caja { border-color: var(--ia-linea); }
.tema-ia .btn-terracota { background: var(--mostaza); color: var(--tinta); }
.tema-ia .btn-terracota:hover { background: var(--ocre); }

.ia-hero { position: relative; padding: clamp(3.4rem, 8vw, 6.5rem) 0 clamp(2.6rem, 5vw, 4rem); }
.ia-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 78% 15%, rgba(255,167,0,.16), transparent 65%),
    radial-gradient(50% 70% at 8% 85%, rgba(171,32,10,.22), transparent 70%);
  pointer-events: none;
}
.ia-hero .contenedor { position: relative; }
.ia-hero h1 { max-width: 18ch; }
.ia-hero .entradilla { font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 56ch; }

.no-hacemos { display: grid; gap: .9rem; margin-top: 1.8rem; }
.no-hacemos li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.2rem; border: 1px solid var(--ia-linea); border-radius: var(--radio-md);
  background: rgba(255,255,255,.02); line-height: 1.6;
}
.no-hacemos .icono { flex: none; color: var(--teja); margin-top: .25em; }

.socio {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
  border: 1px solid var(--ia-linea); border-radius: var(--radio-lg);
  padding: clamp(1.8rem, 4vw, 3rem); background: var(--ia-fondo-2);
}


/* ═══════════════════════════════════ Rejilla de servicios y sus tonos ═══
   Seis columnas: los cuatro servicios principales ocupan media fila y los
   tres secundarios un tercio, así 4 + 3 cierran tres filas exactas.
   Los colores son los seis de la paleta de la clienta; aquí solo se reparten,
   uno por servicio, para que la rejilla deje de ser una fila de cajas beige.
   Qué servicio va grande y de qué color se decide en el panel, no aquí. */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.rejilla-servicios > .tarjeta-servicio           { grid-column: span 2; }
.rejilla-servicios > .tarjeta-servicio.es-grande { grid-column: span 3; }
.rejilla-servicios > .es-grande .tarjeta-cuerpo  { padding: clamp(1.6rem, 3vw, 2.4rem); gap: .6rem; }
.rejilla-servicios > .es-grande h3               { font-size: clamp(1.4rem, 2.3vw, 1.95rem); }
.rejilla-servicios > .es-grande .tarjeta-destacado { font-size: 1.1rem; max-width: 32ch; }
.rejilla-servicios > .es-grande .tarjeta-texto   { max-width: 52ch; }

/* --- Tarjetas de color pleno --- */
.tarjeta-servicio.tono-terracota { background: var(--terracota); border-color: var(--terracota); }
.tarjeta-servicio.tono-terracota h3 { color: #fff; }
.tarjeta-servicio.tono-terracota .tarjeta-destacado { color: var(--marfil); }
.tarjeta-servicio.tono-terracota .tarjeta-texto { color: rgba(255,255,255,.8); }
.tarjeta-servicio.tono-terracota .tarjeta-icono { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.tarjeta-servicio.tono-terracota .enlace-flecha { color: var(--marfil); }
a.tarjeta-servicio.tono-terracota:hover { background: var(--terracota-hondo); border-color: var(--terracota-hondo); }

.tarjeta-servicio.tono-ocre { background: var(--ocre); border-color: var(--ocre); }
.tarjeta-servicio.tono-ocre h3 { color: var(--tinta); }
.tarjeta-servicio.tono-ocre .tarjeta-destacado { color: var(--marron); }
.tarjeta-servicio.tono-ocre .tarjeta-texto { color: rgba(42,24,8,.8); }
.tarjeta-servicio.tono-ocre .tarjeta-icono { background: rgba(42,24,8,.1); border-color: rgba(42,24,8,.2); color: var(--marron); }
.tarjeta-servicio.tono-ocre .enlace-flecha { color: var(--marron); }
a.tarjeta-servicio.tono-ocre:hover { background: var(--mostaza); border-color: var(--mostaza); }

.tarjeta-servicio.tono-tinta { background: var(--tinta-hondo); border-color: var(--tinta-hondo); }
.tarjeta-servicio.tono-tinta h3 { color: var(--marfil); }
.tarjeta-servicio.tono-tinta .tarjeta-destacado { color: var(--mostaza); }
.tarjeta-servicio.tono-tinta .tarjeta-texto { color: rgba(252,222,182,.75); }
.tarjeta-servicio.tono-tinta .tarjeta-icono { background: rgba(255,167,0,.15); border-color: rgba(255,167,0,.32); color: var(--mostaza); }
.tarjeta-servicio.tono-tinta .enlace-flecha { color: var(--mostaza); }
a.tarjeta-servicio.tono-tinta:hover { background: #241408; border-color: #241408; }

/* --- Tarjeta con fotografía a sangre --- */
.tarjeta-servicio.tono-foto { position: relative; background: var(--tinta-hondo); border-color: transparent; }
.tarjeta-servicio.tono-foto .tarjeta-fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--curva);
}
.tarjeta-servicio.tono-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,15,5,.5) 0%, rgba(27,15,5,.72) 38%, rgba(27,15,5,.9) 72%, rgba(27,15,5,.95) 100%);
}
.tarjeta-servicio.tono-foto .tarjeta-cuerpo { position: relative; z-index: 2; justify-content: flex-end; min-height: 300px; }
.tarjeta-servicio.tono-foto h3 { color: #fff; }
.tarjeta-servicio.tono-foto .tarjeta-destacado { color: var(--mostaza); }
.tarjeta-servicio.tono-foto .tarjeta-texto { color: rgba(255,255,255,.82); }
.tarjeta-servicio.tono-foto .tarjeta-icono { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.tarjeta-servicio.tono-foto .enlace-flecha { color: var(--marfil); }
a.tarjeta-servicio.tono-foto:hover .tarjeta-fondo { transform: scale(1.04); }

/* --- Tarjetas claras, con el acento solo en el icono --- */
.tarjeta-servicio.tono-teja    .tarjeta-icono { color: var(--teja);    background: #FBEADF; border-color: #EFCBB6; }
.tarjeta-servicio.tono-marron  .tarjeta-icono { color: var(--marron);  background: #F6E7D2; border-color: var(--linea-fuerte); }
.tarjeta-servicio.tono-mostaza .tarjeta-icono { color: #9A6500;        background: #FFF1D6; border-color: #F3D69C; }
.tarjeta-servicio.tono-teja    .tarjeta-destacado { color: var(--teja); }
.tarjeta-servicio.tono-marron  .tarjeta-destacado { color: var(--marron); }
.tarjeta-servicio.tono-mostaza .tarjeta-destacado { color: #9A6500; }

@media (max-width: 980px) {
  .rejilla-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-servicios > .tarjeta-servicio,
  .rejilla-servicios > .tarjeta-servicio.es-grande { grid-column: span 1; }
}
@media (max-width: 620px) {
  .rejilla-servicios { grid-template-columns: 1fr; }
  .tarjeta-servicio.tono-foto .tarjeta-cuerpo { min-height: 250px; }
}

/* ---------------------------------------------------------------- CTA */
.cta { padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(3.4rem, 7vw, 6rem); }
.cta-caja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  background: var(--tinta-hondo); color: var(--marfil);
  border: 1px solid transparent; border-radius: var(--radio-lg);
  padding: clamp(2rem, 4.5vw, 3.4rem);
}
.cta-caja h2 { color: var(--marfil); margin-bottom: .35em; max-width: 18ch; }
.cta-caja p { color: rgba(252,222,182,.75); max-width: 48ch; margin: 0; }
.cta-botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta .btn-linea { border-color: rgba(252,222,182,.35); color: var(--marfil); }
.cta .btn-linea:hover { background: var(--marfil); color: var(--tinta); border-color: var(--marfil); }

/* ------------------------------------------------------------- Contacto */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .42rem; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
label { font-size: .84rem; font-weight: 600; color: var(--tinta); }
label .opcional { font-weight: 400; color: var(--gris-suave); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; font: inherit; font-size: .96rem; color: var(--tinta);
  background: var(--blanco); border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-md); padding: .78rem .95rem;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--terracota);
  box-shadow: 0 0 0 3.5px rgba(171,32,10,.13);
}
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }
.aviso-privacidad { font-size: .82rem; color: var(--gris-suave); }
.aviso-privacidad a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }

.caja {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: clamp(1.5rem, 3vw, 2.2rem);
}
.caja + .caja { margin-top: 1.2rem; }
.datos-contacto { display: grid; gap: .9rem; margin-top: 1.2rem; }
.datos-contacto li { display: flex; gap: .8rem; align-items: center; font-size: .97rem; }
.datos-contacto .icono { flex: none; color: var(--terracota); }
.datos-contacto a:hover { color: var(--terracota); }

.aviso {
  border-radius: var(--radio-md); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  font-size: .94rem; border: 1px solid;
}
.aviso-ok    { background: #F1F7EC; border-color: #C9DFB6; color: #33551F; }
.aviso-error { background: #FCEDE9; border-color: #F0C0B3; color: #8B1806; }
.aviso-info  { background: var(--marfil-suave); border-color: var(--linea-fuerte); color: var(--marron); }

/* ------------------------------------------------------------------ Pie */
.pie { background: var(--tinta-hondo); color: rgba(252,222,182,.78); border-top: 1px solid transparent; padding: clamp(3rem, 6vw, 4.6rem) 0 2rem; }
.pie-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
.pie-marca img { width: 56px; opacity: .95; }
.pie-nombre { font-family: var(--tipo-display); font-size: 1.6rem; font-weight: 700; color: var(--marfil); margin: .9rem 0 .1rem; }
.pie-lema { font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--mostaza); margin: 0 0 1rem; }
.pie-descripcion { font-size: .92rem; line-height: 1.6; max-width: 40ch; }
.pie-redes { display: flex; gap: .55rem; margin-top: 1.3rem; }
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(252,222,182,.24); color: var(--marfil);
  transition: background .2s var(--curva), border-color .2s var(--curva);
}
.pie-redes a:hover { background: var(--mostaza); border-color: var(--mostaza); color: var(--tinta); }
.pie-columna h2 {
  font-family: var(--tipo-texto); font-size: .72rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mostaza); margin-bottom: 1.1rem;
}
.pie-columna li { margin-bottom: .55rem; font-size: .93rem; }
.pie-columna a:hover { color: var(--marfil); }
.pie-contacto li { display: flex; align-items: center; gap: .55rem; }
.pie-contacto .icono { flex: none; opacity: .7; }
.pie-contacto a { display: flex; align-items: center; gap: .55rem; }
.pie-contacto .sin-enlace { color: rgba(252,222,182,.6); }
.pie-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem;
  margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(252,222,182,.14); font-size: .82rem;
}
.pie-legal p { margin: 0; }
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.pie-legal a:hover { color: var(--mostaza); }
.pie-creditos { margin-left: auto !important; color: rgba(252,222,182,.55); }
.pie-creditos a:hover { color: var(--mostaza); }

/* ------------------------------------------------------- Aparición suave */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } }

/* --------------------------------------------------------- Adaptaciones */
@media (max-width: 1000px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pie-cuerpo { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 880px) {
  .hero-rejilla { grid-template-columns: 1fr; }
  .hero-figura { max-width: 560px; }
  .valores-rejilla { grid-template-columns: repeat(2, 1fr); }
  .valores-rejilla > div { border-left: 0; border-top: 1px solid rgba(252,222,182,.18); padding-inline: 0; }
  .valores-rejilla > div:nth-child(-n+2) { border-top: 0; }
  .valores-rejilla > div:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid rgba(252,222,182,.18); }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bloque-doble { grid-template-columns: 1fr; }
  .bloque-doble.invertido .bloque-figura { order: 0; }
  .contacto-rejilla { grid-template-columns: 1fr; }
  .socio { grid-template-columns: 1fr; }
  .tarjeta-proyecto.es-grande { grid-column: span 2; }
}
@media (max-width: 620px) {
  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .tarjeta-proyecto.es-grande { grid-column: auto; }
  .campo-doble { grid-template-columns: 1fr; }
  .pie-cuerpo { grid-template-columns: 1fr; }
  .pie-creditos { margin-left: 0 !important; }
  .cta-botones { width: 100%; }
  .cta-botones .btn { flex: 1 1 auto; }
}

/* Caja de «Qué incluye»: es lo que ocupa la segunda columna en las fichas de
   servicio que todavía no tienen fotografía. */
.caja-puntos { background: var(--marfil-suave); border-color: var(--linea-fuerte); }
.caja-puntos h2 {
  font-family: var(--tipo-texto); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--terracota);
  margin: 0;
}
.caja-puntos .lista-puntos { margin-top: 1.1rem; }

/* La caja de contacto directo, en oscuro: es la alternativa al formulario y
   conviene que pese, no que desaparezca al lado de la caja blanca. */
.caja-oscura { background: var(--tinta-hondo); border-color: var(--tinta-hondo); color: rgba(252,222,182,.8); }
.caja-oscura h2 { color: var(--marfil); }
.caja-oscura p { color: rgba(252,222,182,.72); }
.caja-oscura .datos-contacto .icono { color: var(--mostaza); }
.caja-oscura .datos-contacto a:hover { color: var(--mostaza); }
.caja-oscura .sin-enlace { color: rgba(252,222,182,.62); }

/* Preguntas frecuentes */
.preguntas { gap: clamp(1.4rem, 3vw, 2.2rem) clamp(2rem, 5vw, 4rem); }
.pregunta { border-top: 1.5px solid var(--acento-pregunta, var(--linea-fuerte)); padding-top: 1.2rem; }
.pregunta h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-bottom: .5em; }
.pregunta p { color: var(--gris); font-size: .96rem; line-height: 1.65; margin: 0; }
.preguntas > .pregunta:nth-child(4n+1) { --acento-pregunta: var(--terracota); }
.preguntas > .pregunta:nth-child(4n+2) { --acento-pregunta: var(--teja); }
.preguntas > .pregunta:nth-child(4n+3) { --acento-pregunta: var(--ocre); }
.preguntas > .pregunta:nth-child(4n+4) { --acento-pregunta: var(--marron); }

/* Franja de fotografías de la portada. Cuatro tiles verticales del mismo alto:
   las fotos vienen en proporciones distintas, así que manda el recorte. */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1rem); }
.mosaico figure { margin: 0; overflow: hidden; border-radius: var(--radio-md); background: var(--marfil-suave); }
.mosaico img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  transition: transform .7s var(--curva);
}
.mosaico figure:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Portadilla del área de IA, ahora con fotografía al lado del titular. */
.ia-hero-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.ia-hero-figura { margin: 0; }
.ia-hero-figura img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border-radius: var(--radio-lg); border: 1px solid var(--ia-linea);
}
@media (max-width: 880px) {
  .ia-hero-rejilla { grid-template-columns: 1fr; }
  .ia-hero-figura { order: -1; }
}


/* ═════════════════════════════════════════ Graduado cálido de las fotos ══
   La paleta de la marca es cálida —marfil, ocre, terracota, marrón— y las
   fotografías llegan de donde llegan: un local con luz azulada o una captura
   con verdes fríos cantan al lado del resto de la página.

   Este graduado tira de todas ellas hacia el mismo terreno: el sepia calienta,
   el saturate devuelve el color que el sepia se lleva y el giro de tono lo
   empuja al naranja en vez de al amarillo. Es deliberadamente flojo: mirando
   una foto suelta casi no se nota, pero la página entera queda cosida.

   Va sobre las fotografías de contenido, no sobre el logotipo ni los iconos.
   Si algún día molesta, se quita borrando este bloque. */
.hero-figura img,
.bloque-figura img,
.ia-hero-figura img,
.mosaico img,
.tarjeta-foto img,
.tarjeta-fondo,
.persona-chip img {
  filter: sepia(.18) saturate(1.22) hue-rotate(-8deg) contrast(1.02);
}

/* La franja de valores ya lleva su propio velo encima: si además se graduara,
   se sumarían dos correcciones y la foto se iría de tono. */
.valores-fondo { filter: none; }