/* =========================================================
   Torres Tile Co. — versión "referencia"
   Dark, framed layout: content lives in one column bounded by
   hairline rails, every section is separated by a hairline,
   one warm accent. Light mode via [data-theme="light"].
   Breakpoints: 560 / 760 / 900 / 1080.
   ========================================================= */

:root,
:root[data-theme="dark"]{
  /* La paleta oscura es calida y esta por encima de la piedra: la celda
     se lee como azulejo pulido puesto sobre piedra rustica, no como un
     hueco negro. Con el gris neutro anterior (#181818) la celda quedaba
     55% mas oscura que la mediana del marmol. */
  --bg:     #272320;     /* la celda de la reticula */
  --bg-2:   #322D28;     /* hover de celda, banda de CTA, bisel */
  --bg-3:   #3D3730;     /* hueco de imagen, chip activo */
  --line:   #37322C;     /* la junta, calentada para no quedar gris */
  --line-2: #4A443C;
  --head:   #F5F3F0;
  --text:   #C8C5C0;
  --muted:  #9C9892;     /* 4.8:1 sobre el hover de celda, el peor caso */
  --accent: #F0C010;     /* el ambar del logo: la marca manda */
  --accent-t:#F0C010;    /* el acento usado como texto */
  --on-accent:#17120B;   /* texto sobre el ambar: 10.9:1 */
  --accent-h:#FFD43A;
  --input:  #201D1A;     /* el campo se hunde por debajo de la celda */
  --shadow: 0 30px 60px rgba(0,0,0,.45);
  color-scheme: dark;
}
:root[data-theme="light"]{
  /* "Arcilla": calido con rosa. La terracota es barro cocido, que es
     de lo que esta hecho el azulejo, asi que el fondo sale del mismo
     material que el oficio. Nada es blanco puro: ni el fondo, ni las
     superficies, ni los campos de formulario. */
  --bg:     #EFE4DA;
  --bg-2:   #F7EFE7;
  --bg-3:   #E1D3C5;
  --line:   #D7C7B7;
  --line-2: #C3AF9E;
  --head:   #1C1712;     /* 14.2:1 sobre el fondo */
  --text:   #3F372E;     /*  9.3:1 */
  --muted:  #5D5143;     /*  4.9:1 sobre la veta mas oscura de la textura */
  --accent: #F0C010;     /* relleno de boton; el texto encima va oscuro */
  --accent-t:#6C4E03;    /* el ambar como texto: 4.8:1 sobre la veta mas oscura */
  --on-accent:#17120B;
  --accent-h:#D4A90B;
  --input:  #FBF5EF;
  /* la sombra tambien se tinta de barro: una sombra gris sobre un
     fondo calido se ve sucia */
  --shadow: 0 24px 50px rgba(58,36,18,.16);
  color-scheme: light;
}

:root{
  --wa:      #128C4A;
  --wa-dark: #0C6B38;
  --err:     #E0574B;

  /* El papel del QR es claro en los DOS temas: un lector espera tinta
     oscura sobre fondo claro, y un QR invertido falla en varios
     telefonos. Por eso no sale de --bg-2, que cambia con el tema. */
  --paper-qr:#F7EFE7;

  --maxw: 1200px;
  --pad:  clamp(1.1rem, 3vw, 2rem);
  --sec:  clamp(3.5rem, 8vw, 6.5rem);
  --bar-h: 76px;
  --r: 22px;
  --r-s: 4px;

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* vidrio: se usa SOLO donde una superficie flota sobre otra cosa */
  --glass:      color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-deep: color-mix(in srgb, var(--bg) 58%, transparent);
  --glass-edge: color-mix(in srgb, var(--head) 14%, transparent);
  --glass-blur: blur(14px) saturate(1.5);

  /* curvas del sistema: desaceleracion natural, nunca rebote */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);    /* llegadas con conviccion */
  --ease-rise: cubic-bezier(.2, .7, .3, 1);    /* la entrada de la portada */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:1.02rem; line-height:1.65; font-weight:400;
  overflow-x:hidden;
  overflow-x:clip;   /* clip no rompe position:sticky; hidden si */
  transition:background .25s, color .25s;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; color:var(--head); font-weight:500; line-height:1.15; letter-spacing:-.02em; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.i{ width:1.05em; height:1.05em; flex:0 0 auto; }
.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--accent); color:var(--on-accent); padding:.75rem 1rem; }
.skip:focus{ left:0; }
section[id], [id="top"]{ scroll-margin-top:var(--bar-h); }

/* ── The frame: one column bounded by hairline rails ───── */
.wrap{
  max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--pad);
  border-inline:1px solid var(--line);
}
/* sections are separated by full-width hairlines; the vertical
   padding lives on .wrap so the rails run unbroken */
main > section{ border-bottom:1px solid var(--line); }
.sec > .wrap{ padding-block:var(--sec); }

/* ── Utility strip ─────────────────────────────────────── */
.util{ border-bottom:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.util__in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; }
.util p{ margin:0; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.util p > span, .util a{ display:inline-flex; align-items:center; gap:.4rem; }
.util .i{ color:var(--accent-t); width:14px; height:14px; }
.util a{ color:var(--head); text-decoration:none; font-weight:500; }
.util a:hover{ color:var(--accent-t); }

/* ── Header ────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .bar{
    background:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    box-shadow:inset 0 1px 0 var(--glass-edge);
  }
}
.bar__in{ display:flex; align-items:center; gap:2rem; min-height:var(--bar-h); }

.mark{ display:flex; align-items:center; text-decoration:none; color:var(--head); flex:0 0 auto; }
/* El logo va en dos versiones y se turnan segun el tema: el blanco de
   "ABEL" desaparece sobre papel (1.08:1) y el ambar del logo sobre
   papel da 1.6:1, asi que el modo claro necesita su propio archivo. */
.mark__img{ display:block; height:40px; width:auto; }
.mark__img--light{ display:none; }
:root[data-theme="light"] .mark__img--dark{ display:none; }
:root[data-theme="light"] .mark__img--light{ display:block; }
.mark--foot .mark__img{ height:52px; }

.nav{ display:flex; gap:1.9rem; margin-left:auto; }
.nav a{ font-size:.96rem; color:var(--text); text-decoration:none; padding:.4rem 0; transition:color .15s; }
.nav a:hover, .nav a[aria-current="true"]{ color:var(--head); }
.nav a[aria-current="true"]{ box-shadow:inset 0 -1px 0 var(--accent); }

/* bordered control group, like a segmented toolbar */
.bar__act{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--r-s); }
.bar__act > *{ border-left:1px solid var(--line); }
.bar__act > :first-child{ border-left:0; }
.theme{
  display:grid; place-items:center; width:42px; background:none; border-top:0; border-right:0; border-bottom:0;
  color:var(--text); cursor:pointer; padding:0;
}
.theme:hover{ color:var(--head); background:var(--bg-3); }
.theme svg{ width:18px; height:18px; }
:root[data-theme="light"] .theme__moon{ display:none; }
:root:not([data-theme="light"]) .theme__sun{ display:none; }

.lang{ display:flex; align-items:center; padding:0 .3rem; }
.lang__b{
  background:none; border:0; cursor:pointer; font-family:var(--font);
  font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--muted);
  padding:.45rem .45rem;
}
.lang__b:hover{ color:var(--head); }
.lang__b.is-on{ color:var(--head); box-shadow:inset 0 -2px 0 var(--accent); }

.burger{ display:none; background:none; border-top:0; border-right:0; border-bottom:0; padding:0 .7rem; cursor:pointer; }
.burger span{ display:block; width:20px; height:2px; background:var(--head); margin:4px 0; border-radius:2px; transition:transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font); font-weight:500; font-size:1rem; line-height:1;
  padding:.95rem 1.5rem; border-radius:var(--r-s); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.btn--sm{ padding:0 1.1rem; font-size:.9rem; border-radius:0 3px 3px 0; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-h); }
.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:var(--wa-dark); }
.btn--light{ background:var(--accent); color:var(--on-accent); }
.btn--light:hover{ background:var(--accent-h); }
.btn--outline{ border-color:var(--line-2); color:var(--head); }
.btn--outline:hover{ border-color:var(--head); }
/* variante "dato": se ve como boton pero no es accion. Sin cursor de
   mano y sin reaccion al hover, para no prometer un clic que no hay. */
.btn--dato{ cursor:default; }
.btn--dato:hover{ border-color:var(--line-2); }
.btn--wide{ width:100%; padding:1.05rem 1.5rem; }

/* ── Hero ──────────────────────────────────────────────── */
.hero__in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3rem,8vw,6.5rem);
}
.hero h1{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:500; letter-spacing:-.025em;
  line-height:1.08; text-wrap:balance; max-width:17ch;
}
.lede{ margin:1.4rem 0 2.1rem; font-size:clamp(1.02rem,1.3vw,1.14rem); max-width:48ch; color:var(--text); font-weight:300; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__ticks{
  list-style:none; margin:2.2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.92rem; color:var(--muted);
}
.hero__ticks li{ display:flex; align-items:center; gap:.45rem; }
.hero__ticks .i{ color:var(--accent-t); }

/* photo sits in a rounded bezel */
.hero__shot{
  margin:0; position:relative; justify-self:end; width:100%; max-width:520px;
  padding:8px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 6px calc(var(--r) + 8px);
}
.hero__shot img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r) var(--r) 3px var(--r);
}
.hero__badge{
  position:absolute; left:-1.25rem; bottom:1.75rem;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-s);
  box-shadow:var(--shadow); padding:.9rem 1.1rem;
  display:flex; align-items:center; gap:.8rem; max-width:240px; color:var(--text);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .hero__badge{
    background:var(--glass-deep);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border-color:var(--glass-edge);
    box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge);
  }
}
.hero__badge b{ font-size:1.9rem; font-weight:600; color:var(--accent-t); line-height:1; }
.hero__badge span{ font-size:.82rem; line-height:1.35; }

/* ── Stats: cells split by hairlines ───────────────────── */
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); padding-inline:0; }
.stat{ padding:2rem var(--pad); display:flex; flex-direction:column; gap:.2rem; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat b{ font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:500; color:var(--head); letter-spacing:-.02em; }
.stat span{ font-size:.9rem; color:var(--muted); }

/* ── Section heads ─────────────────────────────────────── */
.sec__head{ max-width:640px; margin-bottom:clamp(2.2rem,4vw,3.25rem); }
.sec__head h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.sec__head p{ margin:1rem 0 0; color:var(--muted); font-size:1.05rem; font-weight:300; }
.sec__head--c{ margin-inline:auto; text-align:center; }

/* ── Service cards: a grid of hairline cells ───────────── */
.cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden;
}
.card{ background:var(--bg); display:flex; flex-direction:column; padding:10px; transition:background .2s; }
.card:hover{ background:var(--bg-2); }
.card__img{ aspect-ratio:4/3; overflow:hidden; border-radius:14px 14px 3px 14px; background:var(--bg-3); }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__img img{ transform:scale(1.04); }
.card__b{ padding:1.2rem .8rem 1rem; display:flex; flex-direction:column; flex:1; }
.card__b h3{ font-size:1.22rem; }
.card__b p{ margin:.55rem 0 1.1rem; font-size:.94rem; color:var(--muted); line-height:1.6; }
.card__list{ list-style:none; margin:auto 0 0; padding:1rem 0 0; border-top:1px solid var(--line); display:grid; gap:.4rem; }
.card__list li{ font-size:.9rem; color:var(--text); padding-left:1.1rem; position:relative; }
.card__list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--accent); }

/* ── Why us ────────────────────────────────────────────── */
.why{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.why__head{ margin-bottom:0; }
.feats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden;
}
.feat{
  background:var(--bg); padding:1.75rem;
  display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-content:start;
}
.feat__ico{
  display:grid; place-items:center; width:30px; height:30px;
  color:var(--accent-t); grid-row:span 2; margin:0;
}
.feat__ico svg{ width:22px; height:22px; }
.feat h3{ font-size:1.1rem; }
.feat p{ margin:.5rem 0 0; font-size:.93rem; color:var(--muted); line-height:1.6; }

/* ── Gallery ───────────────────────────────────────────── */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.bond__t{
  position:relative; display:block; padding:8px; cursor:pointer; text-align:left;
  background:var(--bg-2); border:1px solid var(--line); border-radius:22px;
  font-family:var(--font); color:var(--text); transition:border-color .2s;
}
.bond__t:hover, .bond__t:focus-visible{ border-color:var(--line-2); }
.bond__t img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:15px; }
.bond__t span{ display:block; padding:.8rem .5rem .35rem; font-size:.9rem; color:var(--text); }
.bond__t:hover span{ color:var(--head); }

/* ── Process ───────────────────────────────────────────── */
.steps{
  list-style:none; margin:0; padding:0; counter-reset:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden;
}
.steps li{ background:var(--bg); padding:1.8rem 1.5rem 2rem; }
.steps__n{ display:block; font-size:.85rem; font-weight:600; letter-spacing:.1em; color:var(--accent-t); margin-bottom:2.2rem; }
.steps h3{ font-size:1.15rem; }
.steps p{ margin:.55rem 0 0; font-size:.93rem; color:var(--muted); line-height:1.6; }
.sec__head--c + .steps{ text-align:left; }

/* ── FAQ: hairline list ────────────────────────────────── */
.faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.faq .sec__head{ position:sticky; top:calc(var(--bar-h) + 1.5rem); margin-bottom:0; }
.faq__list{ border-top:1px solid var(--line); }
.faq__list details{ border-bottom:1px solid var(--line); }
.faq__list summary{
  font-size:1.06rem; font-weight:500; color:var(--head);
  padding:1.3rem 3rem 1.3rem 0; cursor:pointer; position:relative; list-style:none;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::before, .faq__list summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:1.5px;
  background:var(--accent); transform:translateY(-50%);
}
.faq__list summary::after{ transform:translateY(-50%) rotate(90deg); transition:transform .2s ease; }
.faq__list details[open] summary::after{ transform:translateY(-50%) rotate(0deg); }
.faq__list summary:hover{ color:var(--accent-t); }
.faq__list p{ margin:0; padding:0 3rem 1.5rem 0; color:var(--muted); font-size:.98rem; font-weight:300; }

/* ── CTA band ──────────────────────────────────────────── */
.band{ background:var(--bg-2); }
.band__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:clamp(2.75rem,5vw,4rem); }
.band h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); }
.band p{ margin:.5rem 0 0; color:var(--muted); font-weight:300; }
.band__cta{ display:flex; flex-wrap:wrap; gap:.75rem; flex:0 0 auto; }

/* ── Quote ─────────────────────────────────────────────── */
.quote{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0; align-items:stretch; padding-inline:0; }
.quote__form{ padding:0 clamp(1.1rem,4vw,3.5rem) 0 var(--pad); }
.quote__form h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.quote__sub{ margin:.8rem 0 2.2rem; color:var(--muted); font-weight:300; max-width:52ch; }

.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
.fld{ margin:0 0 1.15rem; display:flex; flex-direction:column; gap:.45rem; }
label{ font-size:.86rem; font-weight:500; color:var(--head); }
input,select,textarea{
  font-family:var(--font); font-size:1rem; color:var(--head);
  background:var(--input); border:1px solid var(--line-2); border-radius:var(--r-s);
  padding:.85rem .9rem; width:100%; transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{ color:var(--muted); opacity:.8; }
select{
  appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238F8B85' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px;
}
textarea{ resize:vertical; min-height:7.5rem; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input.bad,select.bad,textarea.bad{ border-color:var(--err); }
.fe{ font-size:.82rem; color:var(--err); }
.fe[hidden]{ display:none; }

.note{ font-size:.88rem; color:var(--muted); margin:.3rem 0 1.4rem; }
.ferr{ margin:1rem 0 0; font-size:.92rem; color:var(--err); border:1px solid var(--err); border-radius:var(--r-s); padding:.75rem .9rem; }

.sent[hidden]{ display:none; }
.sent:focus{ outline:none; }
.sent__tick{ margin:0 0 1rem; width:54px; height:54px; border-radius:50%; border:1px solid var(--wa); color:var(--wa); display:grid; place-items:center; }
.sent__tick svg{ width:26px; height:26px; }
.sent h3{ font-size:1.5rem; }
.sent > p{ margin:.8rem 0 0; color:var(--muted); }
.sent > p.sent__alt{ margin:2rem 0 .7rem; font-weight:500; font-size:.9rem; color:var(--head); }
.linkish{
  display:block; margin-top:1.2rem; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font); font-size:.9rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.linkish:hover{ color:var(--head); }

.quote__side{ border-left:1px solid var(--line); padding:0 var(--pad) 0 clamp(1.1rem,3vw,2.5rem); }
.quote__side h3{ font-size:1.35rem; }
.quote__side > p{ margin:.7rem 0 1.6rem; color:var(--muted); font-size:.96rem; font-weight:300; }
.contact{ list-style:none; margin:0 0 1.75rem; padding:0; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; }
.contact li + li{ border-top:1px solid var(--line); }
.contact a{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--head); padding:.9rem 1rem; transition:background .15s; }
.contact a:hover{ background:var(--bg-2); }
.contact__ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); color:var(--accent-t); flex:0 0 auto; }
.contact__ico--wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.contact .lbl{ display:block; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.contact .val{ display:block; font-size:.96rem; word-break:break-word; }
.side__dl{ margin:0; display:grid; gap:1rem; }
.side__dl dt{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-t); font-weight:600; }
.side__dl dd{ margin:.2rem 0 0; font-size:.95rem; color:var(--text); }
.place{ font-weight:500; }

/* ── Footer ────────────────────────────────────────────── */
.foot{ font-size:.94rem; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-block:3.5rem; }
.mark--foot{ color:var(--head); }
.foot__brand p{ margin:1rem 0 0; max-width:34ch; color:var(--text); }
.foot h4{ font-size:.86rem; font-weight:400; color:var(--muted); margin-bottom:1rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; color:var(--text); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--head); }
.foot__bot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.2rem; font-size:.84rem; color:var(--muted);
  box-shadow:0 -1px 0 var(--line);
}
.foot__bot p{ margin:0; }
.foot{ border-top:0; }

/* ── Floating WhatsApp / phone bar ─────────────────────── */
.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:45;
  width:56px; height:56px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s, background .2s;
}
.wa-float:hover{ background:var(--wa-dark); transform:scale(1.06); }
.wa-float svg{ width:30px; height:30px; }
.mbar{ display:none; }

/* ── Lightbox ──────────────────────────────────────────── */
.lbox{
  position:fixed; inset:0; z-index:60; background:rgba(12,12,12,.95);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.5rem; padding:1.5rem;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .lbox{
    background:rgba(12,12,12,.72);
    -webkit-backdrop-filter:blur(26px) saturate(1.3);
    backdrop-filter:blur(26px) saturate(1.3);
  }
}
.lbox[hidden]{ display:none; }
.lbox__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.lbox__fig img{ max-width:min(100%,900px); max-height:80vh; object-fit:contain; border-radius:14px; }
.lbox__fig figcaption{ font-size:.9rem; color:#B5B1AB; text-align:center; }
.lbox__x{ position:absolute; top:.75rem; right:1rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; padding:0 0 .18em; z-index:3; transition:background .15s, border-color .15s; }
.lbox__x:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); }
.lbox__nav{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#fff; cursor:pointer; width:50px; height:50px; display:grid; place-items:center; transition:background .15s, border-color .15s; }
.lbox__nav:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .lbox__x, .lbox__nav{ -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); }
}
.lbox__nav svg{ width:24px; height:24px; }

/* ── Entrance ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .hero__text > *{ animation:rise .6s var(--ease-rise) both; }
  .hero__text > h1{ animation-delay:.06s; }
  .hero__text > .lede{ animation-delay:.12s; }
  .hero__text > .hero__cta{ animation-delay:.18s; }
  .hero__text > .hero__ticks{ animation-delay:.24s; }
  .hero__shot{ animation:rise .8s .15s var(--ease-rise) both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px); } }
}
@media (prefers-reduced-motion: reduce){
  body, .card, .card__img img{ transition:none; }
}

/* ── Formulario guiado ─────────────────────────────────── */
/* Tres pasos. Los chips de opcion son celdas de reticula: mismo
   gap:1px sobre fondo junta que el resto del sitio, para que el
   control se lea como parte de la superficie y no como un widget
   pegado encima.                                                   */
.step__of{ margin:0 0 .5rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.step__bar{ list-style:none; display:flex; gap:4px; margin:0 0 2rem; padding:0; }
.step__bar li{ height:2px; flex:1; background:var(--line-2); transition:background .25s; }
.step__bar li.is-on{ background:var(--accent); }

.step{ border:0; padding:0; margin:0; min-width:0; }
.step[hidden]{ display:none; }
.step:focus{ outline:none; }
.step__h{
  padding:0; float:left; width:100%;
  font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:500;
  color:var(--head); letter-spacing:-.02em; line-height:1.2;
}
.step__p{ clear:both; margin:.7rem 0 1.6rem; color:var(--muted); font-weight:300; max-width:52ch; }

.ask{ margin:0 0 1.6rem; }
.ask[hidden]{ display:none; }
.ask__q{ margin:0 0 .6rem; font-size:.94rem; font-weight:500; color:var(--head); }

/* Flex y no grid a proposito: con grid, un grupo cuyo numero de
   opciones no llena la ultima fila deja una celda vacia, y esa celda
   muestra el fondo del contenedor como un bloque solido del color de
   la junta. Con flex, los de la ultima fila se estiran y nunca queda
   hueco.                                                            */
.chips{
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-s); overflow:hidden;
}
.chips--3 .chip{ flex:1 1 calc(33.333% - 1px); }
.chips--2 .chip{ flex:1 1 calc(50% - 1px); }
.chip{
  background:var(--bg); border:0; cursor:pointer;
  font-family:var(--font); font-size:.93rem; font-weight:400; line-height:1.35;
  color:var(--text); padding:1rem .8rem; text-align:left;
  transition:background .18s, color .18s;
}
.chip:hover{ background:var(--bg-2); color:var(--head); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.chip.is-on{ background:var(--bg-3); color:var(--head); font-weight:500; box-shadow:inset 0 -2px 0 var(--accent); }

.step__nav{ display:flex; gap:.75rem; margin-top:2rem; }
.step__nav .btn{ flex:1 1 auto; }
.step__nav .btn--outline{ flex:0 0 auto; }

@media (max-width: 560px){
  .chips--3 .chip{ flex:1 1 calc(50% - 1px); }
  .step__nav{ flex-wrap:wrap; }
  .step__nav .btn{ width:100%; }
}

/* ── Textura de marmol ────────────────────────── */
/* Los dos temas llevan marmol, y las dos texturas salen de LA MISMA
   losa: es la misma piedra con otra iluminacion, no dos piedras. Al
   cambiar de tema la veta se queda en su sitio y solo cambia la luz.

   Va en una capa fija propia y no en background-attachment, que
   repinta en cada scroll. Fija y estatica, el navegador la trata como
   una capa y no vuelve a tocarla al desplazar.

   Las imagenes las procesa scripts/fondo.py: comprime el rango tonal
   y las tiñe. Asi la veta es textura y no dibujo, el contraste del
   texto es casi uniforme, y pesan 9 y 5 KB en vez de 1.5 MB. Para
   hacerlas mas sutiles, suba el primer numero del rango en el script.

   z-index:-1 las deja detras de todo el contenido y delante del color
   de fondo, que queda como respaldo mientras cargan. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--bg);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-image:url("../img/fondo-oscuro.jpg");
  background-image:image-set(url("../img/fondo-oscuro.webp") type("image/webp"),
                             url("../img/fondo-oscuro.jpg")  type("image/jpeg"));
}
:root[data-theme="light"] body::before{
  background-image:url("../img/fondo-claro.jpg");
  background-image:image-set(url("../img/fondo-claro.webp") type("image/webp"),
                             url("../img/fondo-claro.jpg")  type("image/jpeg"));
}

/* ── QR de contacto ────────────────────────────────────── */
/* Puente de escritorio a telefono. En celular no existe: escanear
   la propia pantalla no sirve, y el enlace de WhatsApp ya esta
   arriba. El QR se sirve siempre sobre papel claro con tinta
   oscura, en los dos temas, porque un lector espera ese contraste
   y un QR invertido falla en varios telefonos.                     */
.qr{ display:none; }

@media (min-width: 901px){
  .qr{
    display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
    margin:0 0 1.75rem; padding:.85rem;
    border:1px solid var(--line); border-radius:var(--r-s);
    background:var(--bg-2);
  }
  .qr__img{
    width:168px; height:168px; flex:0 0 auto;
    /* el mismo papel que lleva el SVG adentro, para que no se vea
       un recuadro de otro blanco encima de la tarjeta */
    border-radius:3px; background:var(--paper-qr);
  }
  .qr__t{
    flex:1 1 11rem; margin:0; font-size:.86rem; line-height:1.5;
    color:var(--muted); font-weight:300;
  }
}

/* =========================================================
   Movimiento
   Un solo gesto autoral —la junta que se marca— y, aparte,
   retroalimentacion en los cambios de estado que hasta ahora
   saltaban sin avisar. Nada aqui esconde contenido: si el JS
   no corre o el navegador no soporta la propiedad, la pagina
   se ve exactamente como antes.
   ========================================================= */

/* ── El visor de galeria ───────────────────────────────── */
/* Abria y cerraba de golpe. Ahora entra en 220ms y sale en
   160ms: salir siempre es mas rapido que entrar.            */
.lbox{
  opacity:1;
  transition:opacity .16s ease, display .16s allow-discrete;
}
.lbox[hidden]{ opacity:0; }
.lbox:not([hidden]){ transition-duration:.22s; transition-timing-function:var(--ease-out); }
@starting-style{ .lbox:not([hidden]){ opacity:0; } }

/* ── El menu de celular ────────────────────────────────── */
.nav{ transition:opacity .18s ease, display .18s allow-discrete; }

/* ── La confirmacion del formulario ────────────────────── */
/* El cambio de estado mas importante de la pagina: el
   mensaje se fue. Merece que se note que algo paso.        */
.sent{ opacity:1; transition:opacity .28s var(--ease-out), display .28s allow-discrete; }
.sent[hidden]{ opacity:0; }
@starting-style{ .sent:not([hidden]){ opacity:0; } }

@media (prefers-reduced-motion: no-preference){
  /* El visor se asienta al abrir, en lugar de aparecer plano. */
  .lbox__fig{ transition:transform .28s var(--ease-out); }
  .lbox[hidden] .lbox__fig{ transform:scale(.96); }
  @starting-style{ .lbox:not([hidden]) .lbox__fig{ transform:scale(.96); } }

  /* Al cambiar de foto con las flechas, la nueva entra en 180ms
     para que se lea como un cambio y no como un parpadeo.      */
  .lbox__fig.is-swap img{ animation:swap .18s ease both; }
  @keyframes swap{ from{ opacity:0; transform:translateY(4px); } }

  /* La palomita y el visor son globales; el menu no: solo existe como
     panel desplegable por debajo de 900px, y ahi se le anima la bajada. */

  /* La palomita de confirmacion se dibuja: confirma la accion
     en lugar de solo estar ahi.                               */
  .sent:not([hidden]) .sent__tick path{
    stroke-dasharray:26; stroke-dashoffset:26;
    animation:draw .4s .12s var(--ease-out) forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  /* El FAQ abria de golpe. Solo donde el navegador sabe
     interpolar la altura; donde no, se comporta como antes.  */
  @supports (interpolate-size: allow-keywords){
    :root{ interpolate-size:allow-keywords; }
    .faq__list details::details-content{
      block-size:0; overflow:hidden;
      transition:block-size .3s var(--ease-out), content-visibility .3s allow-discrete;
    }
    .faq__list details[open]::details-content{ block-size:auto; }
  }
}

/* ── El gesto: se marca la junta ───────────────────────── */
/* La capa cubre las juntas con el color de la pagina y se
   retira de izquierda a derecha, como pasar la llana sobre
   un pano recien puesto. Solo existe si el JS la arma, asi
   que sin JS las juntas se ven desde el primer momento.     */
.joint{ position:relative; }
.joint > *{ position:relative; z-index:1; }
.joint.is-armed::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--bg); transform-origin:right center;
  transform:scaleX(1);
}
.joint.is-armed.is-set::before{
  transform:scaleX(0);
  transition:transform .45s var(--ease-out);
}

@media (prefers-reduced-motion: reduce){
  .joint.is-armed::before{ content:none; }
  .lbox__fig.is-swap img{ animation:none; }
}

/* El menu desplegable baja desde el borde de la barra. Acotado al
   breakpoint donde el menu existe como panel; en escritorio el nav
   siempre esta visible y no debe moverse. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .nav{ transition:opacity .18s ease, transform .18s var(--ease-out), display .18s allow-discrete; }
  .nav:not(.is-open){ transform:translateY(-6px); }
  @starting-style{ .nav.is-open{ transform:translateY(-6px); } }
}

/* ── El instalador en la cuerda ────────────────────────── */
/* Solo escritorio ancho. El conjunto vive entero en la canaleta: su
   borde izquierdo se apoya en el riel derecho de .wrap y crece hacia
   afuera, asi nada cruza a la columna de contenido.

   La cuerda esta anclada a un punto del DOCUMENTO: la esquina donde
   la linea superior de la banda de cifras cruza el riel. Al hacer
   scroll se va soltando desde ahi, y el trabajador sale de esa
   esquina. Por eso la posicion la escribe site.js en vez de una
   animacion ligada al scroll: el largo de la cuerda depende de dos
   referencias distintas —una del documento y otra de la ventana— y
   eso no se expresa con un solo keyframe.

   El balanceo no gira al hombre sobre si mismo: inclina el conjunto
   desde el anclaje, que es donde la cuerda esta amarrada. Eso es un
   pendulo de verdad.

   Ancho 120px, asi que necesita 50vw - 600 >= 120: desde 1440px.    */
.cuerda{ display:none; }

@media (min-width: 1440px) and (prefers-reduced-motion: no-preference){
  .cuerda{
    display:block; position:fixed; top:0;
    right:calc(50vw - 600px - 120px);   /* borde izquierdo sobre el riel */
    width:120px; height:100vh;
    z-index:5;                           /* sobre el contenido, bajo la barra */
    pointer-events:none;                 /* jamas intercepta un clic */
  }

  /* Este elemento hace tres trabajos a la vez, y por eso el scroll sale
     barato: se traslada hasta el anclaje, gira sobre el, y recorta con
     overflow lo que quede por encima de su borde. Antes el recorte era
     un clip-path reescrito en cada cuadro, que repinta; ahora el
     recorte es estatico y solo se mueve la caja, que va al compositor.

     Mide 600px mas alto que la ventana. El anclaje se topa en -400px y
     el trabajador baja hasta el 72% de la ventana, asi que su borde
     inferior queda en 0.72*vh + 588. Con +600 la cuenta cierra para
     cualquier alto de ventana; con +400 se recortaba por debajo de
     672px de alto. */
  .cuerda__swing{
    position:absolute; top:0; left:0;
    width:120px; height:calc(100vh + 600px);
    overflow:hidden;
    transform-origin:62px 0;
    will-change:translate, rotate;
    transition:rotate .35s var(--ease-out);
  }

  /* La cuerda: continua la de la foto, mismo grosor y color. Tiene
     altura fija y se estira con scale, no con height: height obliga a
     recalcular layout en cada cuadro, scale no sale del compositor. */
  .cuerda__linea{
    position:absolute; top:0; left:61px; width:2px; height:1000px;
    background:rgb(205,197,194); opacity:.92;
    transform-origin:0 0; scale:1 0;
    will-change:scale;
  }

  .cuerda__rig{
    position:absolute; top:0; left:0; width:120px; height:188px;
    will-change:translate;
  }
  .cuerda__man{ display:block; width:120px; height:188px; opacity:.92; }
  .cuerda__rig picture{ display:block; }

  /* Mientras baja va ladeado, como cualquier cosa que cuelga y se
     mueve. Al soltar el scroll se libera y oscila hasta asentarse;
     el keyframe arranca en el mismo angulo del ladeo, sin salto.    */
  .cuerda.is-moving .cuerda__swing{ rotate:-0.7deg; }

  .cuerda.is-swing .cuerda__swing{
    animation:cuerda-balanceo 3.4s var(--ease-out) both;
  }
  @keyframes cuerda-balanceo{
    0%   { rotate:-0.70deg; }
    14%  { rotate: 1.05deg; }
    32%  { rotate:-0.70deg; }
    50%  { rotate: 0.42deg; }
    68%  { rotate:-0.24deg; }
    84%  { rotate: 0.10deg; }
    100% { rotate: 0deg; }
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:1fr; }
  .faq{ grid-template-columns:1fr; }
  .faq .sec__head{ position:static; margin-bottom:2rem; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .util__hide{ display:none !important; }
}

@media (max-width: 900px){
  .nav{
    display:none; position:absolute; top:100%; left:-1px; right:-1px;
    flex-direction:column; gap:0;
    /* Opaco a proposito: el glass del header dejaba leer el hero
       detras de los enlaces y el menu parecia transparente. */
    background:var(--bg);
    border:1px solid var(--line); border-top:0;
    padding:.25rem var(--pad) .75rem;
    box-shadow:0 18px 34px rgba(0,0,0,.28);
    z-index:30;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav a:last-child{ border-bottom:0; }
  .nav a[aria-current="true"]{ box-shadow:none; color:var(--accent-t); }
  .bar__in{ position:relative; gap:1rem; }
  .bar__act{ margin-left:auto; }
  .burger{ display:block; }

  .hero__in{ grid-template-columns:1fr; }
  .hero__shot{ justify-self:stretch; max-width:none; }
  .hero__shot img{ aspect-ratio:16/10; }
  .hero__badge{ left:1rem; bottom:1rem; }

  .stats__in{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }

  .gallery{ grid-template-columns:repeat(2,1fr); }
  .band__in{ flex-direction:column; align-items:flex-start; }

  .quote{ grid-template-columns:1fr; }
  .quote__form{ padding:0 var(--pad); }
  .quote__side{ border-left:0; border-top:1px solid var(--line); margin-top:var(--sec); padding:var(--sec) var(--pad) 0; }
}

@media (max-width: 760px){
  :root{ --bar-h:64px; }
  .util{ display:none; }
  .bar__cta{ display:none; }

  .cards{ grid-template-columns:1fr; }
  .feats{ grid-template-columns:1fr; }
  .feat{ padding:1.35rem; }

  .mbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:46;
    background:var(--line); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 24px rgba(0,0,0,.22);
  }
  .mbar__b{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:1rem .5rem; text-decoration:none;
    font-family:var(--font); font-weight:500; font-size:1rem;
  }
  .mbar__b svg{ width:20px; height:20px; }
  .mbar__b--wa{ background:var(--wa); color:#fff; }
  .mbar__b--tel{ background:var(--accent); color:var(--on-accent); }
  .wa-float{ display:none; }
  body{ padding-bottom:62px; }

  .lbox{ grid-template-columns:1fr; grid-template-areas:"fig"; padding:1rem; }
  .lbox__fig{ grid-area:fig; }
  .lbox__nav{ grid-area:fig; z-index:2; width:44px; height:44px; background:rgba(12,12,12,.7); }
  .lbox__nav--prev{ justify-self:start; }
  .lbox__nav--next{ justify-self:end; }
  .lbox__fig img{ max-height:70vh; }
}

@media (max-width: 560px){
  .theme{ width:38px; }
  .lang{ padding:0 .1rem; }
  .mark__img{ height:32px; }

  .hero__cta .btn{ width:100%; }
  .hero__ticks{ flex-direction:column; }
  .hero__shot img{ aspect-ratio:1/1; }
  .hero__badge{ padding:.7rem .85rem; max-width:210px; }
  .hero__badge b{ font-size:1.55rem; }

  .stat{ padding:1.4rem 1rem; }

  .gallery{ gap:.6rem; }
  .bond__t{ padding:5px; border-radius:16px; }
  .bond__t img{ border-radius:11px; }
  .bond__t span{ font-size:.8rem; padding:.55rem .3rem .25rem; line-height:1.35; }

  .steps{ grid-template-columns:1fr; }
  .steps__n{ margin-bottom:1rem; }

  .band__cta{ width:100%; }
  .band__cta .btn{ flex:1 1 100%; }

  .f2{ grid-template-columns:1fr; }
  .faq__list summary{ font-size:1rem; }
  .faq__list p{ padding-right:0; }

  .foot__grid{ grid-template-columns:1fr; gap:2rem; padding-block:2.5rem; }
  .foot__bot{ flex-direction:column; gap:.3rem; }
}