/* ============================================================
   LOVE & SIESTA — main.css
   Editorial mediterráneo · Fraunces + DM Sans
   Paleta: crema #FAF7F2 · carbón #2B333C · terracota #C4693B
   ============================================================ */

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
  /* Color */
  --crema: #FAF7F2;
  --crema-2: #F3EDE3;
  --arena: #E9E2D6;
  --carbon: #2B333C;
  --carbon-2: #1E242B;
  --carbon-3: #23292F;
  --terracota: #C4693B;
  --terracota-2: #A9552C;
  --hueso: #FDFBF7;
  --linea: rgba(43, 51, 60, .14);
  --linea-clara: rgba(250, 247, 242, .18);
  --overlay-hero: rgba(20, 18, 15, .45);

  /* Tipografía */
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", -apple-system, Helvetica, sans-serif;

  /* Escala */
  --fs-h1: clamp(3rem, 7.5vw, 6.5rem);
  --fs-h2: clamp(2.1rem, 4.6vw, 3.9rem);
  --fs-h3: clamp(1.35rem, 2.2vw, 1.8rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-kicker: .8125rem;

  /* Espaciado */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-7: clamp(5rem, 11vw, 10rem);

  /* Layout */
  --ancho: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .3s;

  /* Z-index */
  --z-nav: 100;
  --z-menu: 200;
  --z-modal: 1000;
  --z-whatsapp: 90;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--carbon);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--terracota); color: var(--crema); }

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

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--carbon); color: var(--crema);
  padding: .75rem 1.25rem; z-index: 9999; font-size: var(--fs-small);
}
.skip-link:focus { left: 0; }

/* ---------- UTILIDADES ---------- */
.container {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota-2); /* AA: terracota puro no llega a 4.5:1 en texto pequeño */
}
.kicker::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  flex-shrink: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease-out) .15s;
}
.kicker.is-inview::before { transform: scaleX(1); }
html.no-js .kicker::before { transform: scaleX(1); }

h1, h2, h3 { font-family: var(--serif); font-weight: 420; line-height: 1.06; letter-spacing: -.015em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h1 em, h2 em { font-style: italic; font-weight: 380; color: var(--terracota); }

.section { padding-block: var(--sp-7); }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 2.1rem;
  min-height: 44px;
  background: var(--carbon);
  color: var(--crema);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease-out);
  z-index: 0;
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn > * { position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }

.btn--claro { background: var(--crema); color: var(--carbon); }
.btn--claro:hover { color: var(--crema); }

.btn--linea {
  background: transparent;
  color: var(--carbon);
  box-shadow: inset 0 0 0 1.5px var(--carbon);
}
.btn--linea:hover { color: var(--crema); }
.btn--linea::after { background: var(--carbon); }

/* Enlace subrayado animado */
.link-u {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 500;
}
.link-u::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.link-u:hover::after, .link-u:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Flecha inline */
.flecha {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
a:hover .flecha { transform: translateX(6px); }

/* ---------- SISTEMA DE PLACEHOLDERS ---------- */
.ph { width: 100%; height: 100%; object-fit: cover; }
.ph-missing {
  aspect-ratio: 1/1;
  background: var(--arena);
  position: relative;
  object-fit: contain;
  color: transparent;      /* oculta el alt y el icono de imagen rota */
  overflow: hidden;
}
.ph-missing::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 2.5rem/1 "DM Sans", sans-serif;
  color: var(--carbon);
  letter-spacing: .1em;
}
.r-169 .ph-missing, .ph-missing.r-169 { aspect-ratio: 16/9; }
.r-45 .ph-missing, .ph-missing.r-45 { aspect-ratio: 4/5; }
.r-34 .ph-missing, .ph-missing.r-34 { aspect-ratio: 3/4; }

/* Marco de imagen editorial */
.marco {
  overflow: hidden;
  background: var(--arena);
}
.marco img { transition: transform .9s var(--ease-out); }
.marco:hover img:not(.ph-missing) { transform: scale(1.045); }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.nav__inner {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__logo img { height: 42px; width: auto; }
.nav__logo .logo-oscuro { display: none; }

/* Estado sólido (al hacer scroll o en páginas interiores) */
.nav.is-solid {
  background: rgba(250, 247, 242, .94);
  backdrop-filter: saturate(1.1) blur(8px);
  box-shadow: 0 1px 0 var(--linea);
}
.nav.is-solid .nav__logo .logo-blanco { display: none; }
.nav.is-solid .nav__logo .logo-oscuro { display: block; }
.nav.is-hidden { transform: translateY(-100%); }

/* Nav por encima del menú móvil cuando está abierto (el burger hace de botón de cierre) */
.nav:has(.nav__burger[aria-expanded="true"]) {
  z-index: calc(var(--z-menu) + 1);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.nav:has(.nav__burger[aria-expanded="true"]) .nav__logo .logo-blanco { display: block; }
.nav:has(.nav__burger[aria-expanded="true"]) .nav__logo .logo-oscuro { display: none; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.nav__link {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--crema);
  padding: .5rem 0;
  transition: color var(--dur);
}
.nav.is-solid .nav__link { color: var(--carbon); }
.nav__link:hover { color: var(--terracota); }
.nav__link[aria-current="page"] { color: var(--terracota); }

/* Dropdown servicios */
.nav__item--drop { position: relative; }
.nav__drop {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  box-shadow: 0 24px 60px -24px rgba(43, 51, 60, .25);
  padding: .6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__drop a {
  display: block;
  padding: .6rem 1.4rem;
  font-size: var(--fs-small);
  color: var(--carbon);
  transition: background var(--dur), color var(--dur), padding-left var(--dur);
}
.nav__drop a:hover { background: var(--crema-2); color: var(--terracota); padding-left: 1.7rem; }

.nav__drop--cols {
  display: flex;
  min-width: 520px;
  padding: 1.4rem 0;
  gap: 0;
}
.nav__drop-col { flex: 1; padding: 0 1.4rem; }
.nav__drop-col + .nav__drop-col { border-left: 1px solid var(--linea); }
.nav__drop-heading {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(43, 51, 60, .55);
  padding: .3rem 1.4rem .6rem;
}
.nav__drop--cols a { padding: .55rem 1.4rem; }

.nav__idioma {
  display: flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.nav__idioma a { color: var(--crema); padding: .4rem .5rem; transition: color var(--dur); }
.nav.is-solid .nav__idioma a { color: var(--carbon); }
.nav__idioma a:hover { color: var(--terracota); }

.nav__cta { flex-shrink: 0; padding: .8rem 1.6rem; }

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  align-items: center;
  z-index: calc(var(--z-menu) + 1);
}
.nav__burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--crema);
  transition: transform .35s var(--ease-out), opacity .25s, background .3s;
}
.nav.is-solid .nav__burger span { background: var(--carbon); }
.nav__burger[aria-expanded="true"] span { background: var(--crema); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menú móvil fullscreen */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--carbon-2);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
  overflow-y: auto;
}
.menu-movil.is-open { clip-path: inset(0 0 0 0); }
.menu-movil__lista { display: flex; flex-direction: column; gap: .4rem; }
.menu-movil__lista > li > a,
.menu-movil__lista > li > button {
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.2;
  color: var(--crema);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: color var(--dur);
}
.menu-movil__lista > li > a:hover { color: var(--terracota); }
.menu-movil__sub {
  display: none;
  padding: .8rem 0 1rem 1.5rem;
  flex-direction: column;
  gap: .55rem;
}
.menu-movil__sub.is-open { display: flex; }
.menu-movil__sub a { font-size: 1.05rem; color: rgba(250, 247, 242, .75); }
.menu-movil__sub a:hover { color: var(--terracota); }
.menu-movil__pie {
  margin-top: 3rem;
  font-size: var(--fs-small);
  color: rgba(250, 247, 242, .55);
}
.menu-movil__pie a { color: var(--crema); }

/* ============================================================
   HERO HOME (vídeo loop)
   ============================================================ */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: var(--crema);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--carbon-2);
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media video { z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 18, 15, .62) 0%, var(--overlay-hero) 45%, rgba(20, 18, 15, .3) 100%);
}
.hero__inner {
  width: 100%;
  padding-block: 7.5rem var(--sp-5);
}
.hero h1 { max-width: 17ch; color: var(--crema); }
.hero__sub {
  max-width: 46ch;
  margin-top: var(--sp-3);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgba(250, 247, 242, .88);
}
.hero__acciones {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero__nota {
  display: block;
  margin-top: .9rem;
  font-size: .85rem;
  letter-spacing: .04em;
  color: rgba(250, 247, 242, .65);
}

/* Botón play showreel */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--crema);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .05em;
}
.btn-play__circulo {
  width: 62px; height: 62px;
  border: 1.5px solid rgba(250, 247, 242, .6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .35s var(--ease-out), border-color .35s, transform .35s var(--ease-out);
  flex-shrink: 0;
}
.btn-play svg { width: 16px; height: 16px; fill: var(--crema); margin-left: 3px; transition: fill .35s; }
.btn-play:hover .btn-play__circulo {
  background: var(--terracota);
  border-color: var(--terracota);
  transform: scale(1.08);
}

.hero .kicker { color: var(--crema); text-shadow: 0 1px 12px rgba(20,18,15,.35); }

/* Indicador scroll */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-4);
  writing-mode: vertical-rl;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, .55);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 52px;
  background: rgba(250, 247, 242, .4);
  animation: scroll-linea 2.2s var(--ease-out) infinite;
}
@keyframes scroll-linea {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   MODAL VÍDEO (showreel)
   ============================================================ */
.modal-video {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(20, 18, 15, .92);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.modal-video.is-open { opacity: 1; visibility: visible; }
.modal-video__caja {
  width: min(1080px, 100%);
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  transform: scale(.94);
  transition: transform .4s var(--ease-out);
}
.modal-video.is-open .modal-video__caja { transform: scale(1); }
.modal-video__caja video { width: 100%; height: 100%; }
.modal-video__ph {
  position: absolute; inset: 0;
  background: var(--arena);
  display: grid; place-items: center;
  font: 700 2.5rem/1 var(--sans);
  color: var(--carbon);
  letter-spacing: .1em;
}
.modal-video__cerrar {
  position: absolute;
  top: -52px; right: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--crema);
  transition: transform .3s var(--ease-out), color .3s;
}
.modal-video__cerrar:hover { transform: rotate(90deg); color: var(--terracota); }
.modal-video__cerrar svg { width: 22px; height: 22px; }

/* ============================================================
   SECCIÓN INTRO (problema)
   ============================================================ */
.intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-5);
  align-items: start;
}
.intro h2 { max-width: 15ch; }
.intro__texto {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.7;
  max-width: 56ch;
}
.intro__texto strong { font-weight: 600; color: var(--carbon-2); }
.intro__texto .destacado { color: var(--terracota); font-weight: 500; }

/* ============================================================
   TABLA DE SERVICIOS (7 filas numeradas)
   ============================================================ */
.servicios-tabla { border-top: 1px solid var(--linea); }
.fila-servicio {
  display: grid;
  grid-template-columns: 90px 1.15fr 1.6fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--linea);
  position: relative;
  transition: padding-left .4s var(--ease-out);
}
a.fila-servicio:hover { padding-left: 1.25rem; }
a.fila-servicio::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(196, 105, 59, .07), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
a.fila-servicio:hover::before { opacity: 1; }
.fila-servicio__num {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--terracota);
}
.fila-servicio__nombre {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 440;
  line-height: 1.15;
}
.fila-servicio__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(43, 51, 60, .78);
  max-width: 52ch;
}
.fila-servicio__desc strong { color: var(--terracota); font-weight: 600; }
.fila-servicio__flecha {
  width: 48px; height: 48px;
  border: 1.5px solid var(--linea);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .35s var(--ease-out), border-color .35s, transform .35s var(--ease-out);
}
.fila-servicio__flecha svg { width: 17px; height: 17px; stroke: currentColor; transition: stroke .35s; }
a.fila-servicio:hover .fila-servicio__flecha {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--crema);
  transform: rotate(-45deg);
}

/* Cabecera de sección editorial */
.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.cabecera h2 { max-width: 16ch; margin-top: 1.1rem; }
.cabecera__aside {
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: rgba(43, 51, 60, .72);
  padding-bottom: .5rem;
}

/* ============================================================
   PROYECTOS (grid editorial)
   ============================================================ */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4) var(--sp-3);
}
.proyecto-card { display: block; }
.proyecto-card:nth-child(6n+1) { grid-column: span 7; }
.proyecto-card:nth-child(6n+2) { grid-column: span 5; margin-top: var(--sp-6); }
.proyecto-card:nth-child(6n+3) { grid-column: span 5; }
.proyecto-card:nth-child(6n+4) { grid-column: span 7; margin-top: var(--sp-5); }
.proyecto-card:nth-child(6n+5) { grid-column: span 6; }
.proyecto-card:nth-child(6n+6) { grid-column: span 6; margin-top: var(--sp-5); }
.proyecto-card .marco { aspect-ratio: 4/3; }
.proyecto-card:nth-child(6n+2) .marco,
.proyecto-card:nth-child(6n+5) .marco { aspect-ratio: 4/5; }
.proyecto-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}
.proyecto-card__tipo {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracota);
  font-weight: 500;
}
.proyecto-card__nombre {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 440;
  margin-top: .2rem;
}
.proyecto-card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: rgba(43, 51, 60, .45);
}

/* ============================================================
   QUIÉNES SOMOS (2 col + historia)
   ============================================================ */
.somos { background: var(--crema-2); }
.somos__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--sp-6);
  align-items: start;
}
.somos__texto h2 { max-width: 14ch; margin-top: 1.1rem; }
.somos__texto > p { margin-top: var(--sp-3); max-width: 52ch; }
.somos__imgs {
  display: grid;
  gap: var(--sp-3);
  position: relative;
}
.somos__imgs .marco:nth-child(1) {
  aspect-ratio: 4/5;
  width: 82%;
  justify-self: end;
}
.somos__imgs .marco:nth-child(2) {
  aspect-ratio: 4/5;
  width: 68%;
  margin-top: -28%;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 60px -30px rgba(43, 51, 60, .35);
}

/* Historia (timeline editorial) */
.historia { margin-top: var(--sp-6); border-top: 1px solid var(--linea); padding-top: var(--sp-5); }
.historia__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.historia__hito { position: relative; padding-top: 1.4rem; }
.historia__hito::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--linea);
}
.historia__hito::after {
  content: "";
  position: absolute;
  top: -3.5px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracota);
}
.historia__etiqueta {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota);
  font-weight: 500;
}
.historia__hito h3 { margin-top: .7rem; font-size: 1.3rem; }
.historia__hito p { margin-top: .6rem; font-size: var(--fs-small); color: rgba(43, 51, 60, .78); }

/* ============================================================
   VALOR ÚNICO (3 columnas 01/02/03)
   ============================================================ */
.valores__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  border-top: 1px solid var(--linea);
}
.valor {
  padding-top: var(--sp-4);
  position: relative;
}
.valor__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  color: var(--arena);
  -webkit-text-stroke: 1px var(--terracota);
  line-height: 1;
}
.valor h3 { margin-top: 1.3rem; }
.valor p { margin-top: .9rem; font-size: var(--fs-small); line-height: 1.7; color: rgba(43, 51, 60, .8); }

/* ============================================================
   CONTADORES (sección oscura)
   ============================================================ */
.metricas {
  background: var(--carbon-2);
  color: var(--crema);
}
.metricas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.metrica { text-align: left; border-left: 1px solid var(--linea-clara); padding-left: var(--sp-3); }
.metrica__num {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: 380;
  line-height: 1;
  color: var(--crema);
}
.metrica__num sup { font-size: .35em; color: var(--terracota); font-style: italic; }
.metrica__etiqueta {
  margin-top: .9rem;
  font-size: var(--fs-small);
  color: rgba(250, 247, 242, .65);
  max-width: 20ch;
}

/* ============================================================
   LOGOS DE CONFIANZA
   ============================================================ */
.confianza { padding-block: var(--sp-5); border-bottom: 1px solid var(--linea); }
.confianza__titulo {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(43, 51, 60, .55);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.confianza__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  flex-wrap: wrap;
}
.confianza__fila img {
  height: 48px;
  width: auto;
  filter: grayscale(1) opacity(.6);
  transition: filter .4s var(--ease-out);
}
.confianza__fila img:hover { filter: grayscale(0) opacity(1); }

.logo-texto {
  font-family: "Fraunces", serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 500;
  color: rgba(43, 51, 60, .6);
  white-space: nowrap;
  transition: color .4s var(--ease-out);
}
.logo-texto:hover { color: var(--carbon); }
.logo-texto--tech {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -.01em;
}
.confianza__fila--clientes { gap: clamp(1.6rem, 4.5vw, 4rem); row-gap: 1.4rem; }

/* Reseñas */
.resenas {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.resena {
  border-top: 1px solid var(--linea);
  padding-top: var(--sp-3);
}
.resena blockquote {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
}
.resena figcaption {
  margin-top: 1.1rem;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(43, 51, 60, .6);
}
.resena__estrellas { color: var(--terracota); letter-spacing: .15em; font-size: .9rem; margin-bottom: .8rem; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final { background: var(--carbon-2); color: var(--crema); position: relative; overflow: hidden; }
.cta-final__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-5);
  align-items: end;
}
.cta-final h2 { color: var(--crema); max-width: 14ch; margin-top: 1.1rem; }
.cta-final__texto p { color: rgba(250, 247, 242, .75); max-width: 44ch; }
.cta-final__texto .btn { margin-top: var(--sp-4); }
.cta-final__marca {
  position: absolute;
  right: -2%;
  bottom: -6%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 1;
  color: rgba(250, 247, 242, .04);
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--carbon-3);
  color: rgba(250, 247, 242, .78);
  font-size: var(--fs-small);
}
.footer a { transition: color var(--dur); }
.footer a:hover { color: var(--terracota); }
.footer__grid {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 2fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6) var(--sp-5);
}
.footer__logo img { height: 36px; width: auto; }
.footer__col p { margin-top: 1.4rem; line-height: 1.8; }
.footer__col h2 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--crema);
  margin-bottom: 1.4rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer__legal {
  border-top: 1px solid var(--linea-clara);
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(250, 247, 242, .5);
}
.footer__legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__idioma { display: flex; gap: .35rem; align-items: center; }
.footer__idioma a[aria-current] { color: var(--crema); font-weight: 600; }
.footer__idioma span { opacity: .4; }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.whatsapp__burbuja {
  background: var(--hueso);
  border: 1px solid var(--linea);
  padding: .65rem 1.1rem;
  font-size: .85rem;
  box-shadow: 0 12px 32px -12px rgba(43, 51, 60, .3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.whatsapp.is-visible .whatsapp__burbuja { opacity: 1; transform: translateY(0); }
.whatsapp__boton {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #199347; /* AA: #25D366 con icono blanco no llega a 3:1 */
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px -10px rgba(25, 147, 71, .55);
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.whatsapp__boton svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp__boton:hover { background: #147B3A; transform: scale(1.08); }

/* ============================================================
   PÁGINAS INTERIORES (hero corto, breadcrumbs, FAQ, formulario)
   ============================================================ */
.hero-int {
  padding-top: clamp(9rem, 16vh, 12rem);
  padding-bottom: var(--sp-5);
}
.hero-int__migas {
  display: flex;
  gap: .6rem;
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(43, 51, 60, .55);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.hero-int__migas a:hover { color: var(--terracota); }
.hero-int h1 { max-width: 18ch; margin-top: 1.1rem; }
.hero-int__sub {
  margin-top: var(--sp-3);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  max-width: 58ch;
}
.hero-int__sub strong { font-weight: 600; }

/* FAQ acordeón accesible */
.faq { max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--linea);
}
.faq details:first-of-type { border-top: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 440;
}
.faq summary .faq__icono {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--linea);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform .35s var(--ease-out), background .35s, border-color .35s;
  position: relative;
}
.faq__icono::before, .faq__icono::after {
  content: "";
  position: absolute;
  background: var(--carbon);
  transition: background .35s, transform .35s var(--ease-out);
}
.faq__icono::before { width: 14px; height: 1.5px; }
.faq__icono::after { width: 1.5px; height: 14px; }
.faq details[open] .faq__icono { background: var(--carbon); border-color: var(--carbon); }
.faq details[open] .faq__icono::before { background: var(--crema); }
.faq details[open] .faq__icono::after { background: var(--crema); transform: rotate(90deg); }
.faq details p, .faq details div {
  padding: 0 0 1.8rem;
  max-width: 65ch;
  color: rgba(43, 51, 60, .85);
}

/* Enlaces de contenido: naranja + línea que crece al pasar */
.intro__texto a, .faq details a, .plan a, .historia__hito a,
.hero-int__sub a, .lista-check a, .contacto__bloque a, .sintomas a {
  color: var(--terracota);
  font-weight: 500;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(196, 105, 59, .3), rgba(196, 105, 59, .3));
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s var(--ease-out);
}
.intro__texto a:hover, .faq details a:hover, .plan a:hover, .historia__hito a:hover,
.hero-int__sub a:hover, .lista-check a:hover, .contacto__bloque a:hover, .sintomas a:hover {
  background-size: 100% 2px, 100% 1px;
}
.plan--destacado a { color: #E0956B; }

/* Formulario contacto */
.form { display: grid; gap: 1.6rem; }
.form__campo { display: flex; flex-direction: column; gap: .5rem; }
.form__campo label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.form__campo label span { color: var(--terracota); }
.form input, .form textarea {
  font: inherit;
  padding: .95rem 1.1rem;
  min-height: 44px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  color: var(--carbon);
  transition: border-color var(--dur);
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--terracota);
}
.form textarea { min-height: 150px; resize: vertical; }
.form__ayuda { font-size: .82rem; color: rgba(43, 51, 60, .6); }

.form-feedback { font-size: .9rem; font-weight: 500; min-height: 1.4em; }
.form-feedback.success { color: #4a7c59; }
.form-feedback.error { color: #b34a3f; }

.cta-doble { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0; }
.precio-nota { font-size: var(--fs-small); color: rgba(43, 51, 60, .75); margin-top: .5rem; }
.tabla-planes { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: var(--fs-small); }
.tabla-planes th, .tabla-planes td { padding: .8rem 1rem; border: 1px solid var(--linea); text-align: left; }
.tabla-planes th { background: var(--crema-2); font-weight: 600; }
.tabla-planes td[data-check="si"] { color: #4a7c59; font-weight: 600; }
.tabla-planes td[data-check="no"] { color: rgba(43, 51, 60, .35); }

/* ============================================================
   COMPONENTES DE SERVICIO (imagen destacada, listas, planes)
   ============================================================ */
.destacada { aspect-ratio: 21/9; }
.destacada .ph-missing { aspect-ratio: 21/9; }

.historia__grid.grid-2 { grid-template-columns: repeat(2, 1fr); }

.lista-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 3rem;
  margin-top: var(--sp-4);
  max-width: 60rem;
}
.lista-check li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-small);
  line-height: 1.65;
}
.lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--terracota);
  font-weight: 600;
}
.lista-check--inline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  max-width: none;
  margin-top: var(--sp-3);
}
.lista-check--inline li { padding-left: 1.6rem; }
.lista-check--inline li::before { color: var(--crema); }
.nav.is-solid .lista-check--inline li::before,
.hero-int .lista-check--inline li::before { color: var(--terracota); }

.sintomas {
  margin-top: var(--sp-4);
  max-width: 46rem;
  display: grid;
  gap: 1.1rem;
}
.sintomas li { position: relative; padding-left: 2.1rem; line-height: 1.6; }
.sintomas li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--terracota);
  font-weight: 600;
}
.sintomas__cierre { margin-top: var(--sp-3); font-weight: 600; max-width: 46rem; }

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.plan {
  border: 1px solid var(--linea);
  background: var(--hueso);
  padding: 2.6rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.plan--destacado { background: var(--carbon-2); color: var(--crema); border-color: var(--carbon-2); }
.plan--destacado h3 { color: var(--crema); }
.plan__nombre {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota);
}
.plan__precio { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; font-weight: 400; }
.plan__precio span { font-size: .38em; font-style: italic; color: var(--terracota); }
.plan ul { display: grid; gap: .7rem; margin-top: .4rem; }
.plan li { position: relative; padding-left: 1.8rem; font-size: var(--fs-small); line-height: 1.6; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--terracota); font-weight: 600; }
.plan--destacado li { color: rgba(250, 247, 242, .85); }
.plan__nota { font-size: .85rem; color: rgba(43, 51, 60, .6); }
.plan--destacado .plan__nota { color: rgba(250, 247, 242, .55); }

.precio-tag {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: .6rem 1.2rem;
  border: 1.5px solid var(--terracota);
  color: var(--terracota);
  font-weight: 600;
  letter-spacing: .08em;
  font-size: var(--fs-small);
  text-transform: uppercase;
}

/* Contacto */
.contacto__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-6);
  align-items: start;
}
.contacto__aside { display: grid; gap: var(--sp-4); }
.contacto__bloque h2 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.contacto__bloque p { line-height: 1.8; }
.btn--whatsapp {
  background: var(--terracota-2); /* AA: terracota puro no llega a 4.5:1 con texto blanco */
  color: #fff;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 600;
  font-size: 1rem;
}
.btn--whatsapp, .btn--whatsapp span { color: #fff; }
.btn--whatsapp:hover, .btn--whatsapp:hover span { color: #fff; }
.btn--whatsapp::after { background: var(--carbon); }
.btn--whatsapp::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 1.25em; height: 1.25em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2m0 1.67c2.2 0 4.26.86 5.82 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.17-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24m-3.53 4.3c-.16 0-.43.06-.66.31-.22.25-.87.85-.87 2.07 0 1.22.89 2.4 1 2.56.13.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28-.25-.13-1.46-.72-1.69-.8-.22-.09-.39-.13-.55.12-.17.25-.64.8-.78.97-.14.16-.29.18-.53.06-.25-.13-1.05-.39-2-1.23-.73-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.09-.16.04-.31-.02-.43-.06-.13-.55-1.35-.77-1.84-.2-.48-.4-.42-.55-.43h-.49z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2m0 1.67c2.2 0 4.26.86 5.82 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.17-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24m-3.53 4.3c-.16 0-.43.06-.66.31-.22.25-.87.85-.87 2.07 0 1.22.89 2.4 1 2.56.13.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28-.25-.13-1.46-.72-1.69-.8-.22-.09-.39-.13-.55.12-.17.25-.64.8-.78.97-.14.16-.29.18-.53.06-.25-.13-1.05-.39-2-1.23-.73-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.09-.16.04-.31-.02-.43-.06-.13-.55-1.35-.77-1.84-.2-.48-.4-.42-.55-.43h-.49z"/></svg>') center / contain no-repeat;
}

/* Formulario de contacto: mismo lenguaje que /contacto/, en dos columnas */
.form-contacto {
  grid-template-columns: 1fr 1fr;
  border-top: 3px solid var(--terracota);
  padding-top: 2rem;
}
.form-contacto .form__campo:has(textarea),
.form-contacto button[type="submit"],
.form-contacto .form-feedback {
  grid-column: 1 / -1;
}
.form-contacto button[type="submit"] { justify-self: start; }
@media (max-width: 640px) {
  .form-contacto { grid-template-columns: 1fr; }
}
.mapa .ph-missing { aspect-ratio: 4/3; }

/* Hero interior con imagen */
.hero-int__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-5);
  align-items: end;
}
.hero-int__grid .marco { aspect-ratio: 4/5; max-width: 460px; justify-self: end; }

/* Sección banda de acento (rompe el fondo plano) */
.banda {
  background: #F4E6D8;
  border-block: 1px solid rgba(196, 105, 59, .22);
  position: relative;
  overflow: hidden;
}
.banda__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-5);
  align-items: center;
}
.banda .intro__texto {
  border-left: 3px solid var(--terracota);
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
}
.banda__img .marco {
  aspect-ratio: 4/5;
  max-width: 440px;
  justify-self: end;
  box-shadow: 0 30px 60px -30px rgba(43, 51, 60, .35);
}
.banda__marca {
  position: absolute;
  right: -1%;
  bottom: -12%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 1;
  color: rgba(196, 105, 59, .08);
  pointer-events: none;
  white-space: nowrap;
}

/* Acento lateral para secciones planas sin banda */
.intro--acento .intro__texto {
  border-left: 3px solid var(--terracota);
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
}

/* Marquee editorial */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--linea);
  padding-block: 1.5rem;
}
.marquee__pista {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee__pista span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  white-space: nowrap;
}
.marquee__pista .sep { color: var(--terracota); font-style: normal; font-size: 1.1rem; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

@media (max-width: 1024px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .historia__grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
  .banda__grid, .hero-int__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .banda__img .marco, .hero-int__grid .marco { justify-self: start; max-width: 420px; }
}
@media (max-width: 640px) {
  .lista-check { grid-template-columns: 1fr; }
  .historia__grid.grid-2 { grid-template-columns: 1fr; }
  .destacada, .destacada .ph-missing { aspect-ratio: 16/10; }
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5) var(--sp-3);
}
.post-card { display: block; }
.post-card .marco { aspect-ratio: 16/10; }
.post-card .ph-missing { aspect-ratio: 16/10; }
.post-card__fecha {
  margin-top: 1.1rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracota);
  font-weight: 500;
}
.post-card__titulo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 440;
  line-height: 1.25;
  margin-top: .45rem;
}
.post-card__extracto {
  margin-top: .6rem;
  font-size: var(--fs-small);
  color: rgba(43, 51, 60, .75);
  line-height: 1.6;
}

.articulo { max-width: 740px; margin-inline: auto; }
.articulo__meta {
  display: flex;
  gap: 1rem;
  font-size: .85rem;
  letter-spacing: .06em;
  color: rgba(43, 51, 60, .6);
  margin-bottom: var(--sp-4);
}
.articulo h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: var(--sp-5); }
.articulo h3 { margin-top: var(--sp-4); }
.articulo p { margin-top: 1.2rem; }
.articulo ul, .articulo ol { margin-top: 1.2rem; display: grid; gap: .6rem; }
.articulo ul li { position: relative; padding-left: 1.7rem; }
.articulo ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--terracota);
  font-weight: 600;
}
.articulo ol { padding-left: 1.4rem; list-style: decimal; }
.articulo ol li::marker { color: var(--terracota); font-weight: 600; }
.articulo blockquote {
  border-left: 3px solid var(--terracota);
  padding-left: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: var(--sp-4);
}
.articulo img { margin-top: var(--sp-4); width: 100%; }
.articulo a {
  color: var(--terracota);
  font-weight: 500;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(196, 105, 59, .3), rgba(196, 105, 59, .3));
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s var(--ease-out);
}
.articulo a:hover { background-size: 100% 2px, 100% 1px; }

/* ============================================================
   ANIMACIONES (estados iniciales — JS los revela)
   ============================================================ */
.anim-reveal { opacity: 0; transform: translateY(40px); }
.anim-linea .line { overflow: hidden; }
html.no-js .anim-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-reveal { opacity: 1 !important; transform: none !important; }
  .kicker::before { transform: scaleX(1); }
  .marquee__pista { animation: none; }
  .hero__scroll::after { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }

  .intro__grid, .somos__grid, .cta-final__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .metricas__grid, .historia__grid { grid-template-columns: repeat(2, 1fr); }
  .valores__grid, .resenas { grid-template-columns: 1fr; gap: var(--sp-3); }
  .valor { padding-top: var(--sp-3); }

  .fila-servicio { grid-template-columns: 56px 1fr auto; }
  .fila-servicio__num { grid-column: 1; grid-row: 1; }
  .fila-servicio__nombre { grid-column: 2; grid-row: 1; justify-self: start; }
  .fila-servicio__desc { grid-column: 2 / 3; grid-row: 2; }
  .fila-servicio__flecha { grid-column: 3; grid-row: 1 / 3; align-self: center; }

  .proyecto-card { grid-column: span 6 !important; margin-top: 0 !important; }
  .somos__imgs .marco:nth-child(1) { width: 90%; }
  .somos__imgs .marco:nth-child(2) { width: 75%; margin-top: -30%; }
}

@media (max-width: 640px) {
  :root { --fs-body: 1rem; }

  .hero { min-height: 88svh; }
  .hero__acciones { gap: 1.4rem; }
  .hero__scroll { display: none; }

  .fila-servicio { grid-template-columns: 40px 1fr; padding: 1.6rem 0; }
  .fila-servicio__flecha { display: none; }
  a.fila-servicio:hover { padding-left: 0; }

  .proyecto-card { grid-column: span 12 !important; }
  .metricas__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .metrica { padding-left: 1rem; }
  .historia__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .confianza__fila img { height: 34px; }
  .modal-video__cerrar { top: auto; bottom: -56px; }
  .whatsapp__burbuja { display: none; }
}

/* ============================================================
   BLOQUE JUNTA DE ANDALUCÍA (footer) + BANNER DE COOKIES
   ============================================================ */
.footer__junta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--linea-clara);
}
.footer__junta img { height: 50px; width: auto; flex-shrink: 0; }
.footer__junta p { font-size: .8rem; color: rgba(250, 247, 242, .65); max-width: 62ch; margin: 0; }
@media (max-width: 640px) {
  .footer__junta { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

.cookies-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(94vw, 820px);
  z-index: calc(var(--z-modal) + 1);
  background: var(--carbon);
  color: var(--crema);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .5);
}
.cookies-banner[hidden] { display: none; }
.cookies-banner p { font-size: .85rem; line-height: 1.5; margin: 0; flex: 1; }
.cookies-banner a { text-decoration: underline; text-underline-offset: 2px; }
.cookies-banner__acciones { display: flex; gap: .6rem; flex-shrink: 0; }
.cookies-banner .btn { padding: .65rem 1.2rem; font-size: .78rem; }
.cookies-banner .btn:not(.btn--claro) { box-shadow: inset 0 0 0 1.5px var(--crema); }
@media (max-width: 640px) {
  .cookies-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookies-banner__acciones { justify-content: flex-end; }
}

/* Badge de reseñas de Google */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
  padding: .6rem 1.1rem;
  background: var(--hueso);
  border: 1px solid var(--linea);
}
.google-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
.google-badge__estrellas { color: #F4B400; font-size: 1.1rem; letter-spacing: .1em; }
.google-badge__nota { font-weight: 600; font-size: .95rem; }