/* =================================================================
   PINTURAS SOLER — Hoja de estilos
   Dirección: "Editorial Serif Cálido" — Fraunces + Inter, reglas
   finas (hairlines), mucho blanco y azul de marca usado con mesura.
   ================================================================= */

:root{
  /* ===== Color de marca (uso comedido) ===== */
  --color-blue: #111184;
  --color-blue-deep: #0C0C5E;
  --color-blue-focus: rgba(17,17,132,0.35);

  /* ===== Superficies ===== */
  --color-white: #FFFFFF;
  --color-paper: #FBFAF7;            /* off-white cálido — hero y about */
  --color-grey: #F7F8FB;            /* gris claro alterno */

  /* ===== Tinta ===== */
  --color-ink: #1E1E1E;
  --color-ink-soft: #5C5C5C;
  --color-muted: #6B6C76;
  --color-hairline: #E7E8EE;
  --color-on-blue: #FFFFFF;
  --color-error: #B00020;

  /* ===== Tipografías ===== */
  --font-display: "Fraunces","Source Serif 4",Georgia,serif;
  --font-body: "Inter","Source Sans 3",system-ui,-apple-system,sans-serif;

  /* ===== Escala tipográfica fluida ===== */
  --fs-h1: clamp(2.6rem, 6vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 4vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.8125rem;
  --fs-overline: 0.75rem;

  /* ===== Ritmo ===== */
  --lh-display: 1.1;
  --lh-body: 1.65;
  --ls-overline: 0.12em;
  --ls-display: -0.01em;

  /* ===== Espaciado (base 8px) ===== */
  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;  --space-6: 4rem;
  --space-7: 6rem;    --space-8: 8rem;  --space-9: 10rem;

  /* ===== Layout ===== */
  --container: 1200px;
  --gutter: 1.5rem;
  --page-margin: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --measure: 64ch;
  --header-h: 72px;

  /* ===== Radios ===== */
  --radius-img: 6px;
  --radius-feature: 8px;
  --radius-ui: 4px;
  --radius-chip: 3px;

  /* ===== Sombras (suaves, nunca azules) ===== */
  --shadow-sm: 0 1px 2px rgba(30,30,30,0.04);
  --shadow-md: 0 1px 2px rgba(30,30,30,0.04), 0 8px 24px rgba(30,30,30,0.06);
  --shadow-lg: 0 12px 32px rgba(30,30,30,0.10);
  --shadow-header: 0 1px 0 rgba(30,30,30,0.06);

  /* ===== Movimiento ===== */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 200ms;
  --dur-hover: 300ms;
  --dur-reveal: 650ms;
}

/* =================================================================
   RESET / BASE
   ================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-ink);
  background:var(--color-white);
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:var(--ls-display); line-height:var(--lh-display); color:var(--color-ink); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--color-blue); color:#fff; }

/* Foco accesible */
:focus-visible{ outline:2px solid var(--color-blue); outline-offset:2px; border-radius:2px; }

/* Enlace "saltar al contenido" */
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:1100;
  background:var(--color-blue); color:#fff; padding:.6rem 1rem;
  border-radius:var(--radius-ui); font-size:var(--fs-small); font-weight:500;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* =================================================================
   UTILIDADES DE LAYOUT
   ================================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--page-margin);
}
main > section{ scroll-margin-top:calc(var(--header-h) + 1rem); }
[id]{ scroll-margin-top:calc(var(--header-h) + 1rem); }

.section-head{ max-width:var(--measure); margin-bottom:var(--space-5); }
.section-title{ font-size:var(--fs-h2); margin-top:var(--space-2); }
.section-intro{ margin-top:var(--space-3); color:var(--color-ink-soft); font-size:var(--fs-body-lg); }

/* Antetítulo (kicker) */
.kicker{
  display:flex; align-items:center; gap:.75rem;
  margin:0; text-transform:uppercase; letter-spacing:var(--ls-overline);
  font-size:var(--fs-overline); font-weight:600; color:var(--color-ink-soft);
}
.kicker__rule{ width:36px; height:2px; background:var(--color-blue); flex:none; }

/* Iconos en línea (trazo fino) */
.icon{ width:1.15em; height:1.15em; flex:none; vertical-align:middle; }
.icon:not(.icon--fill){
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--fill{ fill:currentColor; stroke:none; }
.icon--inline{ width:1.05em; height:1.05em; }

/* Enlace de texto azul con subrayado que engrosa */
.text-link{
  color:var(--color-blue); font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem;
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:border-color var(--dur-fast) var(--ease);
}
.text-link:hover{ border-bottom-width:2px; }
.text-link .icon{ transition:transform var(--dur-fast) var(--ease); }
.text-link:hover .icon{ transform:translateX(4px); }

/* =================================================================
   BOTONES
   ================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:500; font-size:.95rem; line-height:1;
  padding:.9rem 1.5rem; border-radius:var(--radius-ui);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--primary{ background:var(--color-blue); color:#fff; }
.btn--primary:hover{ background:var(--color-blue-deep); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--color-ink); border-color:rgba(30,30,30,.22); }
.btn--ghost:hover{ border-color:var(--color-ink); background:rgba(17,17,132,.03); }
.btn--invert{ background:#fff; color:var(--color-blue); }
.btn--invert:hover{ background:#ececf3; transform:translateY(-1px); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:transparent;
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{
  background:var(--color-white);
  box-shadow:var(--shadow-header);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:var(--space-3);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; flex:none; }
.brand__mark{ width:1.55rem; height:1.55rem; flex:none; color:var(--color-blue); display:block; }
.brand__name{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; letter-spacing:-.01em; color:var(--color-ink); white-space:nowrap; }
.brand__name strong{ font-weight:600; }
.brand--light .brand__name{ color:#fff; }
.brand--light .brand__mark{ color:#fff; }

.nav__list{ display:flex; align-items:center; gap:var(--space-4); }
.nav__link{
  position:relative; font-size:var(--fs-small); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--ls-overline); color:var(--color-ink);
  padding:.4rem 0; transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--color-blue); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.nav__link:hover{ color:var(--color-blue); }
.nav__link.is-active{ color:var(--color-blue); }
.nav__link.is-active::after{ transform:scaleX(1); }

.header__actions{ display:flex; align-items:center; gap:var(--space-3); }
.header__phone{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--color-ink); padding-right:var(--space-3);
  border-right:1px solid var(--color-hairline);
}
.header__phone-icon{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--color-hairline); border-radius:50%; color:var(--color-blue);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.header__phone-icon .icon{ width:1.05rem; height:1.05rem; }
.header__phone:hover .header__phone-icon{ border-color:var(--color-blue); background:rgba(17,17,132,.05); }
.header__phone-text{ display:flex; flex-direction:column; line-height:1.15; }
.header__phone-label{
  font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--color-muted);
}
.header__phone-num{
  font-size:.95rem; font-weight:600; color:var(--color-ink);
  white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:color var(--dur-fast) var(--ease);
}
.header__phone:hover .header__phone-num{ color:var(--color-blue); }

.menu-toggle{
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; background:none; border:0; padding:.4rem;
  cursor:pointer; color:var(--color-ink);
}
.menu-toggle .icon{ width:1.6rem; height:1.6rem; }

/* Menú móvil */
.mobile-menu{
  position:fixed; inset:0; z-index:990;
  background:var(--color-white);
  padding:calc(var(--header-h) + var(--space-4)) var(--page-margin) var(--space-5);
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu ul{ display:flex; flex-direction:column; gap:.4rem; }
.mobile-menu nav a{
  font-family:var(--font-display); font-size:2rem; font-weight:400; color:var(--color-ink);
  display:block; padding:.5rem 0; border-bottom:1px solid var(--color-hairline);
}
.mobile-menu nav a:hover{ color:var(--color-blue); }
.mobile-menu__foot{ margin-top:auto; display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; padding-top:var(--space-4); }
.mobile-menu__phone{ font-size:1.1rem; font-weight:500; color:var(--color-blue); }
.mobile-menu__foot .btn{ width:100%; }

/* =================================================================
   HERO
   ================================================================= */
.hero{ background:var(--color-paper); padding-block:calc(var(--header-h) + var(--space-5)) var(--section-y); }
.hero__grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center;
}
.hero__title{ font-size:var(--fs-h1); margin:var(--space-3) 0; max-width:14ch; }
.hero__title em{ font-style:italic; font-weight:400; }
.hero__lead{ font-size:var(--fs-body-lg); color:var(--color-ink-soft); max-width:48ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem;
  margin-top:var(--space-4); font-size:var(--fs-small); color:var(--color-muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.dot{ width:4px; height:4px; border-radius:50%; background:var(--color-muted); display:inline-block; }

.hero__figure{ margin:0; position:relative; }
.hero__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-feature); box-shadow:var(--shadow-md);
}
.hero__figure figcaption{
  margin-top:.75rem; font-size:var(--fs-small); color:var(--color-muted);
}

@media (min-width:900px){
  .hero__grid{ grid-template-columns:5fr 7fr; gap:var(--space-6); }
  .hero__figure img{ aspect-ratio:4/4.6; }
}

/* =================================================================
   FRANJA DE CONFIANZA
   ================================================================= */
.trust{ background:var(--color-white); border-block:1px solid var(--color-hairline); }
.trust__row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2) var(--space-4);
  padding-block:var(--space-4);
}
.trust__item{
  position:relative; padding-left:1.6rem;
  font-size:var(--fs-small); color:var(--color-ink); font-weight:500;
}
.trust__item::before{
  content:""; position:absolute; left:0; top:.45em; width:.85rem; height:.5rem;
  border-left:2px solid var(--color-blue); border-bottom:2px solid var(--color-blue);
  transform:rotate(-45deg);
}
@media (min-width:900px){
  .trust__row{ grid-template-columns:repeat(4,auto); justify-content:space-between; }
}

/* =================================================================
   SOBRE NOSOTROS
   ================================================================= */
.about{ background:var(--color-paper); padding-block:var(--section-y); }
.about__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center; }
.about__figure{ margin:0; }
.about__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-feature); box-shadow:var(--shadow-sm); }
.about__text p{ margin-top:var(--space-3); color:var(--color-ink-soft); max-width:var(--measure); }
.about__text > p:first-of-type{ color:var(--color-ink); }
.about__points{
  display:grid; grid-template-columns:1fr; gap:.5rem 1.5rem;
  margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-hairline);
}
.about__points li{ position:relative; padding-left:1.4rem; font-size:var(--fs-small); color:var(--color-ink); }
.about__points li::before{
  content:""; position:absolute; left:0; top:.5em; width:6px; height:6px;
  background:var(--color-blue); border-radius:2px;
}
.stats{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-hairline); }
.stats__item{ display:flex; flex-direction:column; }
.stats__num{ font-family:var(--font-display); font-size:2.25rem; font-weight:500; color:var(--color-ink); line-height:1; }
.stats__label{ margin-top:.4rem; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); }
.signature{ margin-top:var(--space-4); font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--color-ink-soft); }

@media (min-width:900px){
  .about__points{ grid-template-columns:1fr 1fr; }
  .stats__num{ font-size:2.75rem; }
}
@media (min-width:1024px){
  .about__grid{ grid-template-columns:5fr 7fr; gap:var(--space-7); }
}

/* =================================================================
   SERVICIOS — índice editorial + imagen acompañante
   ================================================================= */
.services{ background:var(--color-grey); padding-block:var(--section-y); }
.services__layout{ display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:start; }

.svc-list{ border-top:1px solid var(--color-hairline); }
.svc-row{ border-bottom:1px solid var(--color-hairline); }
.svc-row__link{
  display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-3); row-gap:.35rem;
  align-items:baseline; padding:var(--space-3) 0;
  transition:padding-left var(--dur-fast) var(--ease);
}
.svc-row__index{ font-size:var(--fs-small); color:var(--color-muted); font-variant-numeric:tabular-nums; }
.svc-row__name{ font-family:var(--font-display); font-size:1.4rem; font-weight:500; color:var(--color-ink); transition:color var(--dur-fast) var(--ease); }
.svc-row__desc{ grid-column:2; font-size:var(--fs-small); color:var(--color-ink-soft); }
.svc-row__arrow{ display:none; color:var(--color-blue); }
.svc-row__link:hover,
.svc-row__link:focus-visible{ padding-left:.5rem; outline:none; }
.svc-row__link:hover .svc-row__name,
.svc-row__link:focus-visible .svc-row__name{ color:var(--color-blue); }
.svc-row__link:hover .svc-row__arrow{ transform:translateX(6px); }
.svc-row__link:focus-visible{ box-shadow:-.5rem 0 0 var(--color-blue); }

.svc-figure{ display:none; margin:0; }

@media (min-width:1024px){
  .services__layout{ grid-template-columns:1fr 0.85fr; gap:var(--space-6); }
  .svc-row__link{
    grid-template-columns:auto minmax(11rem,1fr) 1.6fr auto;
    align-items:center; column-gap:var(--space-4);
  }
  .svc-row__desc{ grid-column:auto; }
  .svc-row__arrow{ display:block; transition:transform var(--dur-fast) var(--ease); }
  .svc-figure{
    display:block; position:sticky; top:calc(var(--header-h) + var(--space-4));
  }
  .svc-figure img{
    width:100%; aspect-ratio:4/5; object-fit:cover;
    border-radius:var(--radius-feature); box-shadow:var(--shadow-md);
    transition:opacity var(--dur-fast) var(--ease);
  }
  .svc-figure.is-swapping img{ opacity:0; }
}

/* =================================================================
   PROCESO
   ================================================================= */
.process{ background:var(--color-white); padding-block:var(--section-y); }
.process__steps{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--color-hairline); }
.process__step{ padding:var(--space-4) 0; border-bottom:1px solid var(--color-hairline); }
.process__num{ font-family:var(--font-display); font-size:3rem; font-weight:500; color:var(--color-blue); line-height:1; display:block; }
.process__title{ font-size:var(--fs-h3); margin:var(--space-2) 0 .5rem; }
.process__step p{ color:var(--color-ink-soft); font-size:var(--fs-small); max-width:32ch; }

@media (min-width:768px){
  .process__steps{ grid-template-columns:repeat(4,1fr); border-top:0; }
  .process__step{
    padding:var(--space-3) var(--space-3) var(--space-3) 0; border-bottom:0;
    border-top:2px solid var(--color-hairline);
  }
  .process__num{ font-size:clamp(3rem,4.5vw,4rem); }
}

/* =================================================================
   TRABAJOS — antes/después + mosaico
   ================================================================= */
.portfolio{ background:var(--color-grey); padding-block:var(--section-y); }

/* Antes / Después */
.ba{ margin:0 0 var(--space-5); }
.ba__frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius-feature); box-shadow:var(--shadow-md);
  user-select:none; touch-action:pan-y; /* permite el scroll vertical en móvil */
}
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--ba-pos,50%)) 0 0); }
.ba__tag{
  position:absolute; top:var(--space-2); z-index:3;
  font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:.1em;
  background:rgba(30,30,30,.55); color:#fff; padding:.3rem .6rem; border-radius:var(--radius-chip);
  backdrop-filter:saturate(1.2);
}
.ba__tag--before{ left:var(--space-2); }
.ba__tag--after{ right:var(--space-2); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--ba-pos,50%); width:2px; z-index:4;
  background:#fff; transform:translateX(-1px); cursor:ew-resize;
}
.ba__handle .icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.5rem; height:2.5rem; padding:.5rem; color:var(--color-blue);
  background:#fff; border-radius:50%; box-shadow:var(--shadow-md);
}
.ba__range{
  width:100%; margin-top:var(--space-2); accent-color:var(--color-blue); cursor:ew-resize;
}
.ba figcaption{ margin-top:.6rem; font-size:var(--fs-small); color:var(--color-muted); text-align:center; }

/* Galería mosaico */
.gallery{ display:grid; grid-template-columns:1fr; gap:var(--space-3); align-items:start; }
.gallery__item figure{ margin:0; }
.gallery__item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-img); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.gallery__item figure:hover img{ transform:scale(1.02); box-shadow:var(--shadow-lg); }
.gallery__item figcaption{ display:flex; flex-direction:column; gap:.15rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--color-hairline); }
.gallery__item figcaption > span:first-child{ font-size:var(--fs-small); font-weight:500; color:var(--color-ink); }
.gallery__loc{ font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); }

/* Cuadrícula uniforme: todas las fotos con la misma proporción y tamaño */
@media (min-width:600px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .gallery{ grid-template-columns:repeat(3,1fr); gap:var(--space-4) var(--gutter); }
}

.portfolio__more{ margin-top:var(--space-5); }

/* =================================================================
   CTA INTERMEDIA — única franja azul a sangre
   ================================================================= */
.cta-band{ background:var(--color-blue); color:#fff; padding-block:clamp(4rem,8vw,7rem); }
.cta-band__inner{ max-width:46rem; text-align:center; margin-inline:auto; }
.cta-band__title{ color:#fff; font-size:var(--fs-h2); }
.cta-band__text{ margin-top:var(--space-3); color:rgba(255,255,255,.82); font-size:var(--fs-body-lg); }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-top:var(--space-4); }
.cta-band :focus-visible{ outline-color:#fff; }

/* =================================================================
   OPINIONES
   ================================================================= */
.testimonials{ background:var(--color-grey); padding-block:var(--section-y); }
.quotes{ position:relative; }
.quote-track{ min-height:11rem; }
.quote{ margin:0; max-width:54ch; }
.quote[hidden]{ display:none; }
.quote.is-active{ animation:quoteIn var(--dur-reveal) var(--ease); }
.quote blockquote{
  position:relative; margin:0; padding-left:var(--space-3);
  border-left:3px solid var(--color-blue);
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.35; color:var(--color-ink);
}
.quote figcaption{ display:flex; flex-direction:column; gap:.1rem; margin-top:var(--space-3); padding-top:var(--space-2); }
.quote__name{ font-weight:600; font-size:var(--fs-body); }
.quote__meta{ font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); }

.quotes__controls{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-hairline); }
.quotes__rating{ font-size:var(--fs-small); font-weight:500; color:var(--color-ink); }
.quotes__nav{ display:flex; gap:.5rem; }
.quotes__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border:1px solid var(--color-hairline);
  background:#fff; border-radius:var(--radius-ui); color:var(--color-ink); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.quotes__btn:hover{ border-color:var(--color-blue); color:var(--color-blue); }
.quotes__btn .icon{ width:1.25rem; height:1.25rem; }

@keyframes quoteIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* =================================================================
   PRESUPUESTO — formulario
   ================================================================= */
.quote-form{ background:var(--color-white); padding-block:var(--section-y); }
.quote-form__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:start; }
.quote-form__aside p{ margin-top:var(--space-3); color:var(--color-ink-soft); max-width:42ch; }

.contact-list{ display:flex; flex-direction:column; margin-top:var(--space-4); }
.contact-list li{
  display:flex; align-items:center; gap:.85rem; padding:var(--space-2) 0;
  border-top:1px solid var(--color-hairline); font-size:var(--fs-body);
}
.contact-list li:last-child{ border-bottom:1px solid var(--color-hairline); }
.contact-list .icon{ width:1.25rem; height:1.25rem; color:var(--color-blue); }
.contact-list a:hover{ color:var(--color-blue); }
.contact-list--lg li{ font-size:var(--fs-body-lg); padding:var(--space-3) 0; }

/* Formulario */
.form__row{ display:grid; grid-template-columns:1fr; gap:var(--space-3); margin-bottom:var(--space-3); }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--space-3); }
.form__row .field{ margin-bottom:0; }
.field label{
  font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; color:var(--color-ink-soft);
}
.field__hint{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--color-muted); }
.req{ color:var(--color-blue); }
.field input,
.field select,
.field textarea{
  font-family:inherit; font-size:var(--fs-body); color:var(--color-ink);
  background:#fff; border:1px solid var(--color-hairline); border-radius:var(--radius-ui);
  padding:.8rem .9rem; min-height:48px; width:100%;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea{ min-height:auto; resize:vertical; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:#6e6e78; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--color-blue);
  box-shadow:0 0 0 2px var(--color-blue-focus);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-color:var(--color-error); }
.field input[type="file"]{ padding:.6rem .9rem; font-size:var(--fs-small); color:var(--color-ink-soft); }
.field input[type="file"]::file-selector-button{
  font-family:inherit; font-size:var(--fs-small); margin-right:.8rem;
  border:1px solid var(--color-hairline); background:var(--color-grey);
  border-radius:var(--radius-ui); padding:.45rem .8rem; cursor:pointer; color:var(--color-ink);
}
.field__error{ color:var(--color-error); font-size:var(--fs-small); min-height:1em; }

.checkbox{ display:flex; align-items:flex-start; gap:.6rem; margin:var(--space-2) 0 .25rem; font-size:var(--fs-small); color:var(--color-ink-soft); }
.checkbox input{ margin-top:.15rem; width:1.1rem; height:1.1rem; accent-color:var(--color-blue); flex:none; }
.checkbox .text-link{ font-size:inherit; }

/* honeypot oculto */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__submit{ margin-top:var(--space-3); }
.form__success{
  margin-top:var(--space-3); padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--color-blue); background:var(--color-grey);
  color:var(--color-ink); font-size:var(--fs-body);
}
.form__error{
  margin-top:var(--space-3); padding:var(--space-2) var(--space-3);
  border-left:3px solid #b42318; background:#fdf3f2;
  color:var(--color-ink); font-size:var(--fs-body);
}
.form__error a{ color:#b42318; text-decoration:underline; }

/* =================================================================
   PÁGINAS LEGALES (aviso legal, privacidad, cookies)
   ================================================================= */
.legal{ padding-block:var(--section-y); }
.legal__head{ margin-bottom:var(--space-5); }
.legal__head .section-title{ margin-top:.4rem; }
.legal__updated{ color:var(--color-muted); font-size:var(--fs-small); margin-top:var(--space-2); }
.legal__content{ max-width:var(--measure); }
.legal__content h2{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); margin:var(--space-5) 0 var(--space-2); }
.legal__content h3{ font-size:var(--fs-body-lg); margin:var(--space-4) 0 var(--space-1); }
.legal__content p{ color:var(--color-ink-soft); margin:0 0 var(--space-2); }
.legal__content ul{ color:var(--color-ink-soft); margin:0 0 var(--space-2); padding-left:1.25rem; }
.legal__content li{ margin-bottom:.4rem; }
.legal__content a{ color:var(--color-blue); text-decoration:underline; }
.legal__content strong{ color:var(--color-ink); }
.legal__content dl{ margin:0 0 var(--space-2); }
.legal__content dt{ font-weight:600; color:var(--color-ink); margin-top:var(--space-2); }
.legal__content dd{ margin:0; color:var(--color-ink-soft); }
/* Hueco por rellenar con los datos reales del cliente */
.legal-tbd{
  background:#fff5d6; border-bottom:1px dashed #c9a227; border-radius:2px;
  padding:0 .25em; color:#7a5d00; font-style:normal;
}

@media (min-width:600px){
  .form__row{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .quote-form__grid{ grid-template-columns:5fr 7fr; gap:var(--space-7); }
}

/* =================================================================
   CONTACTO
   ================================================================= */
.contact{ background:var(--color-grey); padding-block:var(--section-y); }
.contact__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center; }
.contact__text p{ margin-top:var(--space-3); color:var(--color-ink-soft); max-width:44ch; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.contact__figure{ margin:0; }
.contact__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-feature); box-shadow:var(--shadow-sm); }

@media (min-width:1024px){
  .contact__grid{ grid-template-columns:7fr 5fr; gap:var(--space-7); }
}

/* =================================================================
   FOOTER — ancla azul
   ================================================================= */
.footer{ background:var(--color-blue); color:#fff; padding-block:var(--space-6) calc(var(--space-4) + 64px); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.footer__about{ margin-top:var(--space-3); color:rgba(255,255,255,.72); font-size:var(--fs-small); max-width:34ch; }
.footer__col h3{ font-family:var(--font-body); font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); font-weight:600; margin-bottom:var(--space-2); }
.footer__col ul{ display:flex; flex-direction:column; gap:.55rem; }
.footer__col a,
.footer__col li{ color:rgba(255,255,255,.85); font-size:var(--fs-small); }
.footer__col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__bottom{
  display:flex; flex-direction:column; gap:var(--space-2);
  margin-top:var(--space-5); padding-top:var(--space-3);
  border-top:1px solid rgba(255,255,255,.14);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.footer__legal a{ color:rgba(255,255,255,.7); font-size:var(--fs-small); }
.footer__legal a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__sign{ font-family:var(--font-display); font-style:italic; color:rgba(255,255,255,.6); font-size:var(--fs-small); }
.footer :focus-visible{ outline-color:#fff; }

@media (min-width:700px){
  .footer__grid{ grid-template-columns:2fr 1fr 1fr 1.2fr; gap:var(--space-5); }
  .footer__bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* =================================================================
   WIDGET WHATSAPP FLOTANTE
   ================================================================= */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:940;
  display:inline-flex; align-items:center; gap:0;
  height:56px; padding:0; border-radius:28px;
  background:var(--color-blue); color:#fff; box-shadow:var(--shadow-md);
  overflow:hidden; max-width:56px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:max-width var(--dur-hover) var(--ease), background var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.wa-float.is-visible{ opacity:1; visibility:visible; transform:none; }
.wa-float__icon{ width:26px; height:26px; margin:15px; flex:none; fill:#fff; }
.wa-float__label{ white-space:nowrap; font-size:var(--fs-small); font-weight:500; padding-right:1.2rem; opacity:0; transition:opacity var(--dur-fast) var(--ease); }
.wa-float:hover,
.wa-float:focus-visible{ max-width:320px; background:var(--color-blue-deep); }
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{ opacity:1; }
@supports (padding:max(0px)){
  .wa-float{ bottom:max(1.1rem, env(safe-area-inset-bottom)); }
}

/* =================================================================
   ANIMACIONES DE ENTRADA (scroll reveal)
   ================================================================= */
.reveal{ transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-visible{ opacity:1; transform:none; }
.process__step:nth-child(2){ transition-delay:80ms; }
.process__step:nth-child(3){ transition-delay:160ms; }
.process__step:nth-child(4){ transition-delay:240ms; }
.gallery__item:nth-child(2){ transition-delay:60ms; }
.gallery__item:nth-child(3){ transition-delay:120ms; }
.gallery__item:nth-child(4){ transition-delay:180ms; }
.gallery__item:nth-child(5){ transition-delay:240ms; }
.gallery__item:nth-child(6){ transition-delay:300ms; }

/* =================================================================
   RESPONSIVE — header / móvil
   ================================================================= */
@media (max-width:1080px){
  .nav{ display:none; }
  .header__phone{ display:none; }
  .header__cta{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (max-width:380px){
  .wa-float__label{ display:none; }
}

/* =================================================================
   PREFERENCIA: MENOS MOVIMIENTO
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .gallery__item figure:hover img{ transform:none; }
}