/* Apex — landing page
   Paleta clara por defecto; la oscura se define abajo con los mismos tokens. */
:root{
  color-scheme:light;
  --ink:#0d1117;
  --ink-2:#3d444d;
  --ink-3:#6b7280;
  --line:#e6e8eb;
  --bg:#ffffff;
  --bg-alt:#f7f8fa;
  --surface:#ffffff;
  --field-bg:#ffffff;
  --accent:#0066ff;
  --btn-bg:#0d1117;
  --btn-fg:#ffffff;
  --btn-bg-hover:#000000;
  --nav-bg:rgba(255,255,255,.85);
  --focus-ring:rgba(0,102,255,.16);
  --danger:#d1242f;
  --danger-ring:rgba(209,36,47,.12);
  --ok:#1a7f37;
  /* El azul de marca aclarado, para cuando va sobre fondo oscuro (el hero lo
     es en los dos temas). Es el mismo valor que toma --accent en modo oscuro. */
  --accent-oscuro:#3d8bff;
  --radius:12px;
  --wrap:1080px;
  --shadow:0 1px 2px rgba(13,17,23,.04), 0 8px 24px rgba(13,17,23,.05);
  --shadow-lg:0 24px 60px -28px rgba(13,17,23,.55);
}

/* Modo oscuro: automático si el sistema lo pide y el visitante no eligió otra cosa… */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#e9eef5;
    --ink-2:#a9b4c2;
    --ink-3:#7c8797;
    --line:#222932;
    --bg:#0a0d12;
    --bg-alt:#0f141b;
    --surface:#11171f;
    --field-bg:#0d1218;
    --accent:#3d8bff;
    --btn-bg:#e9eef5;
    --btn-fg:#0a0d12;
    --btn-bg-hover:#ffffff;
    --nav-bg:rgba(10,13,18,.82);
    --focus-ring:rgba(61,139,255,.24);
    --danger:#ff6b6b;
    --danger-ring:rgba(255,107,107,.18);
    --ok:#4ade80;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 24px 60px -28px rgba(0,0,0,.8);
  }
}
/* …y siempre que lo elija con el botón de la barra */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e9eef5;
  --ink-2:#a9b4c2;
  --ink-3:#7c8797;
  --line:#222932;
  --bg:#0a0d12;
  --bg-alt:#0f141b;
  --surface:#11171f;
  --field-bg:#0d1218;
  --accent:#3d8bff;
  --btn-bg:#e9eef5;
  --btn-fg:#0a0d12;
  --btn-bg-hover:#ffffff;
  --nav-bg:rgba(10,13,18,.82);
  --focus-ring:rgba(61,139,255,.24);
  --danger:#ff6b6b;
  --danger-ring:rgba(255,107,107,.18);
  --ok:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-wrap:break-word;
}
img{max-width:100%}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Tipografía */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.15;font-weight:600}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3.2vw,2.15rem);margin-bottom:2.25rem}
h3{font-size:1.02rem;font-weight:600}
p{margin:0}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.75rem;
}
.lead{color:var(--ink-2);font-size:1.06rem;max-width:56ch}
.note{color:var(--ink-3);font-size:.85rem;margin-top:1rem}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border:1px solid var(--btn-bg);border-radius:8px;
  background:var(--btn-bg);color:var(--btn-fg);font-size:.95rem;font-weight:500;
  text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;
  font-family:inherit;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-alt);border-color:var(--ink-3)}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Nav */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:2rem;height:68px}
.brand{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;
}
.brand-mark{width:22px;height:22px;fill:var(--accent)}
.nav-links{display:flex;gap:1.75rem;margin-left:auto;font-size:.92rem}
.nav-links a{color:var(--ink-2);text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-toggle svg{width:18px;height:18px}
.icon-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icon-sun{display:block}
  :root:not([data-theme="light"]) .icon-moon{display:none}
}
:root[data-theme="dark"] .icon-sun{display:block}
:root[data-theme="dark"] .icon-moon{display:none}
:root[data-theme="light"] .icon-sun{display:none}
:root[data-theme="light"] .icon-moon{display:block}

/* Hero con foto de fondo.
   El hero es oscuro en los dos temas, como el panel de servicios: sobre una
   foto de un taller a media luz el texto tiene que ir en claro si o si. Por eso
   aca los colores son fijos y no salen de los tokens. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(5rem,11vw,8.5rem) 0 clamp(6.5rem,12vw,9rem);
  background:#080b11;color:#fff;
}

/* Capa 1: la foto. El desenfoque es minimo, solo para bajar el ruido de los
   detalles; el scale tapa el borde transparente que deja el blur. */
.hero-media{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:64% 50%;
  filter:blur(2px) brightness(.82) contrast(1.06) saturate(1.1);
  transform:scale(1.05);
}

/* Capa 2: oscurecido general, degradado hacia el lado del texto y una vineta
   muy suave. Van juntos en un mismo elemento para no apilar divs de adorno. */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(97deg,
      rgba(6,9,14,.90) 0%,
      rgba(6,9,14,.78) 30%,
      rgba(6,9,14,.48) 58%,
      rgba(6,9,14,.20) 82%,
      rgba(6,9,14,.12) 100%),
    radial-gradient(125% 95% at 50% 45%, transparent 52%, rgba(0,0,0,.38) 100%);
}

/* Capa 3: la base se funde con el fondo de la seccion siguiente, sea el tema
   que sea, para que no se vea el corte entre una y otra. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  z-index:1;pointer-events:none;
  /* La primera sirve de respaldo si el navegador no entiende color-mix */
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%);
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--bg) 14%, transparent) 46%,
    color-mix(in srgb, var(--bg) 52%, transparent) 76%,
    var(--bg) 100%);
}

.hero-inner{position:relative;z-index:2;max-width:820px}
.hero .eyebrow{color:var(--accent-oscuro)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lead{margin-top:1.25rem;font-size:1.12rem;color:rgba(255,255,255,.82)}

/* Los botones del hero llevan colores fijos por el mismo motivo que el texto */
.hero .btn{background:#fff;color:#0d1117;border-color:#fff}
.hero .btn:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.hero .btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(6px);
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.hero :focus-visible{outline-color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.trust{
  display:flex;list-style:none;
  margin:3rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem;color:rgba(255,255,255,.84);
}
/* Los tres reparten el ancho en partes iguales, con una linea fina en el medio.
   El texto nunca se parte: si deja de entrar en una linea, mas abajo se apilan. */
.trust li{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  flex:1 1 0;min-width:0;padding:.15rem 1rem;
}
.trust li:first-child{justify-content:flex-start;padding-left:0}
.trust li:last-child{justify-content:flex-end;padding-right:0}
.trust li+li{border-left:1px solid rgba(255,255,255,.16)}
.trust span{white-space:nowrap}
.trust svg{width:26px;height:26px;flex:none;color:var(--accent-oscuro)}

/* Secciones */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section-alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Servicios — selector interactivo */
.section-hint{color:var(--ink-3);font-size:.9rem;margin:-1.75rem 0 1.75rem}

.svc-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.75rem;margin-bottom:1.25rem;
}
.svc{
  display:flex;align-items:center;gap:.7rem;text-align:left;
  padding:.9rem 1.05rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.svc svg{width:19px;height:19px;flex:none;color:var(--ink-3);transition:color .2s ease}
.svc:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
.svc:hover svg{color:var(--accent)}
.svc[aria-selected="true"]{
  background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);
  box-shadow:var(--shadow);
}
.svc[aria-selected="true"] svg{color:var(--btn-fg)}

.svc-panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:16px;background:#0d1117;color:#fff;
  box-shadow:var(--shadow-lg);
}
/* Fondo difuminado. Para usar fotos reales: cambiá el valor de --mesh de cada
   tinte por url('img/reparacion.jpg') y bajá --bg-blur a unos 14px. */
.svc-bg{
  position:absolute;inset:-20%;z-index:0;
  background-image:var(--mesh);background-size:cover;background-position:center;
  filter:blur(var(--bg-blur,70px)) saturate(150%);
  opacity:.9;transition:background-image .45s ease,opacity .45s ease;
}
.svc-panel[data-tint="1"]{--mesh:radial-gradient(65% 85% at 84% 20%,#0066ff 0%,transparent 62%),radial-gradient(55% 75% at 66% 96%,#0a3ea8 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#0a1f4d 0%,transparent 70%)}
.svc-panel[data-tint="2"]{--mesh:radial-gradient(65% 85% at 84% 20%,#8b5cf6 0%,transparent 62%),radial-gradient(55% 75% at 66% 96%,#4527a0 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#231046 0%,transparent 70%)}
.svc-panel[data-tint="3"]{--mesh:radial-gradient(65% 85% at 84% 20%,#2dd4bf 0%,transparent 62%),radial-gradient(55% 75% at 66% 96%,#0e7490 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#08303a 0%,transparent 70%)}
.svc-panel[data-tint="4"]{--mesh:radial-gradient(65% 85% at 84% 20%,#4ade80 0%,transparent 62%),radial-gradient(55% 75% at 66% 96%,#15803d 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#07301a 0%,transparent 70%)}
.svc-panel[data-tint="5"]{--mesh:radial-gradient(65% 85% at 84% 20%,#fbbf24 0%,transparent 60%),radial-gradient(55% 75% at 66% 96%,#b45309 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#3d1c04 0%,transparent 70%)}
.svc-panel[data-tint="6"]{--mesh:radial-gradient(65% 85% at 84% 20%,#fb7185 0%,transparent 60%),radial-gradient(55% 75% at 66% 96%,#9f1239 0%,transparent 62%),radial-gradient(75% 95% at 12% 35%,#420a18 0%,transparent 70%)}

/* Grano sutil + degradado para que el texto siempre lea bien */
.svc-panel::before,.svc-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.svc-panel::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.07;mix-blend-mode:overlay;
}
.svc-panel::after{background:linear-gradient(100deg,rgba(13,17,23,.94) 0%,rgba(13,17,23,.78) 45%,rgba(13,17,23,.35) 100%)}

.svc-detail{position:relative;z-index:2;padding:clamp(1.75rem,4.5vw,3rem);max-width:680px}
.svc-detail:not(.is-active){display:none}
.svc-detail.is-active{animation:svc-in .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes svc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.svc-detail h3{font-size:clamp(1.35rem,2.8vw,1.9rem);letter-spacing:-.025em;margin-bottom:.85rem}
.svc-detail p{color:rgba(255,255,255,.74);font-size:1rem;max-width:54ch}
.svc-list{list-style:none;margin:1.5rem 0 2rem;padding:0;display:grid;gap:.6rem;font-size:.93rem;color:rgba(255,255,255,.88)}
.svc-list li{display:flex;gap:.65rem;align-items:flex-start}
.svc-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;opacity:.55;margin-top:.6rem;flex:none}
/* El panel es oscuro en los dos temas, así que este botón lleva colores fijos */
.btn-light{background:#fff;color:#0d1117;border-color:#fff}
.btn-light:hover{background:rgba(255,255,255,.88);border-color:transparent}
.svc-panel :focus-visible{outline-color:#fff}

/* Proceso */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.steps li{border-top:2px solid var(--ink);padding-top:1.25rem}
.step-n{display:block;font-size:.8rem;font-weight:600;color:var(--accent);letter-spacing:.1em;margin-bottom:.6rem}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--ink-2);font-size:.93rem}

/* Precios */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.price{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.35rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.price-label{font-size:.86rem;color:var(--ink-3)}
.price-val{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}

/* Formulario */
.form-wrap{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.form-intro h2{margin-bottom:1rem}
.contact-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.85rem;font-size:.93rem;color:var(--ink-2)}
.contact-list strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600}
.contact-list a{
  display:inline-block;padding:.2rem 0;overflow-wrap:anywhere;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
}
.contact-list a:hover{border-color:var(--accent)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem;box-shadow:var(--shadow);
}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0;border:0;padding:0;margin:0}
.field-full{grid-column:1 / -1}
.field label,.field legend{font-size:.82rem;font-weight:500;color:var(--ink-2);padding:0}
input,select,textarea{
  font-family:inherit;font-size:.94rem;color:var(--ink);
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);
  transition:border-color .15s ease,box-shadow .15s ease;width:100%;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);
}
input.invalid,select.invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
.radios{display:flex;flex-wrap:wrap;gap:1.25rem;padding-top:.15rem}
.radio{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink);cursor:pointer;font-weight:400}
.radio input{width:auto;accent-color:var(--accent)}
.form-foot{grid-column:1 / -1;display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}
.form-foot .btn{width:100%}
.form-foot .note{margin-top:.6rem;text-align:center}
.form-foot .note.error{color:var(--danger)}
.form-foot .note.ok{color:var(--ok)}

/* FAQ */
.faq{border-top:1px solid var(--line);max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-weight:500;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:1.25rem;font-weight:400;
}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);font-size:.94rem;padding-bottom:1.25rem;max-width:65ch}

/* Opiniones */
.reviews{display:grid;justify-items:center;gap:2rem}

.reviews-score{display:grid;justify-items:center;gap:.45rem;margin-top:-.5rem}
.score-avg{font-size:2.5rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.score-count{font-size:.85rem;color:var(--ink-3)}

/* Dos capas de estrellas recortadas con mask: la de abajo apagada y la de
   arriba en color, con el ancho justo del puntaje. Asi el 4,8 muestra la
   ultima estrella llena solo hasta donde corresponde. */
.stars{
  --star:17px;--rating:5;
  --star-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.47l-5.9 3.11 1.13-6.58L2.45 9.34l6.6-.96z'/%3E%3C/svg%3E");
  position:relative;display:block;flex:none;
  width:calc(var(--star) * 5);height:var(--star);
}
.stars::before,.stars::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  -webkit-mask-image:var(--star-svg);mask-image:var(--star-svg);
  -webkit-mask-size:var(--star) var(--star);mask-size:var(--star) var(--star);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
.stars::before{right:0;background:currentColor;opacity:.2}
.stars::after{width:calc(var(--rating) / 5 * 100%);background:var(--accent)}
.stars-lg{--star:23px}

.review-box{display:flex;align-items:center;gap:.75rem;width:100%;max-width:760px}
.review-box:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:16px}

/* Todas las tarjetas comparten la misma celda de la grilla: se cruzan sin
   saltos y la altura la fija la opinion mas larga. */
.review-stack{display:grid;flex:1;min-width:0}
.review{
  grid-area:1/1;display:grid;justify-items:center;text-align:center;gap:.8rem;
  padding:2.5rem 1.75rem;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.review.is-active{opacity:1;transform:none;pointer-events:auto}

.review-avatar{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--av);color:#fff;font-size:1.6rem;font-weight:600;line-height:1;
  box-shadow:0 10px 24px -10px var(--av);
}
.review[data-color="1"]{--av:#0066ff}
.review[data-color="2"]{--av:#7c3aed}
.review[data-color="3"]{--av:#0d9488}
.review[data-color="4"]{--av:#e11d48}
.review[data-color="5"]{--av:#d97706}
.review[data-color="6"]{--av:#2563eb}

.review-name{font-weight:600;font-size:1rem;margin:0}
.review-text{margin:0;color:var(--ink-2);font-size:1.04rem;line-height:1.65;max-width:46ch}
.review-meta{
  margin:0;font-size:.75rem;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}

.review-nav{
  display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--ink-2);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.review-nav:hover{color:var(--ink);border-color:var(--ink-3)}
.review-nav svg{width:18px;height:18px}

.review-dots{display:flex;gap:.1rem}
/* El punto se ve de 9 px pero el boton mide 24: en el celular hay que poder
   pegarle con el dedo sin apuntar */
.review-dots button{
  position:relative;width:24px;height:24px;padding:0;border:0;
  background:none;cursor:pointer;
}
.review-dots button::before{
  content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--ink-3);opacity:.3;
  transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.review-dots button:hover::before{opacity:.6}
.review-dots button[aria-current="true"]::before{background:var(--accent);opacity:1;transform:scale(1.3)}

/* Dejar una opinion */
.solo-lectores{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.opinar{width:100%;max-width:520px;text-align:center}
.opinar summary{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.6rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-2);
  font-size:.88rem;font-weight:500;
  transition:color .15s ease,border-color .15s ease;
}
.opinar summary::-webkit-details-marker{display:none}
.opinar summary::before{content:"+";font-size:1.1rem;line-height:1;color:var(--accent)}
.opinar[open] summary::before{content:"–"}
.opinar summary:hover{color:var(--ink);border-color:var(--ink-3)}

.form-opinion{grid-template-columns:1fr;margin-top:1.25rem;text-align:left}
.form-opinion .form-foot .note{font-size:.8rem}

/* Puntaje: el orden del HTML va de 5 a 1 y la fila se invierte, asi al elegir
   una estrella se pintan tambien las de su izquierda con un selector hermano */
.estrellas-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.3rem}
.estrellas-input input{position:absolute;width:1px;height:1px;opacity:0}
.estrellas-input label{cursor:pointer;color:var(--ink-3);opacity:.3;transition:color .15s ease,opacity .15s ease}
.estrellas-input label svg{width:28px;height:28px;display:block;fill:currentColor}
.estrellas-input input:checked ~ label,
.estrellas-input label:hover,
.estrellas-input label:hover ~ label{color:var(--accent);opacity:1}
.estrellas-input input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.estrellas-input.invalid label{color:var(--danger);opacity:.55}

/* Footer */
.footer{border-top:1px solid var(--line);padding:2.5rem 0;background:var(--bg)}
.footer-inner{display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}
.footer .brand{text-decoration:none;margin-bottom:.25rem}
.footer-copy{font-size:.85rem;color:var(--ink-3)}

/* WhatsApp flotante */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;box-shadow:0 6px 20px rgba(13,17,23,.18);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* Responsive */
@media (max-width:1000px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .svc-tabs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:1.6rem}
}

/* La foto se recorta distinto segun la forma de la pantalla: en tablet corro
   el encuadre al centro y en el celular uso una version vertical apuntada al
   escritorio, para no cortar lo importante */
@media (max-width:1000px){
  .hero-media img{object-position:58% 50%}
}
@media (max-width:700px){
  .hero-media img{object-position:50% 42%}
  .hero-media::after{
    background:
      linear-gradient(178deg,
        rgba(6,9,14,.80) 0%,
        rgba(6,9,14,.60) 34%,
        rgba(6,9,14,.72) 72%,
        rgba(6,9,14,.88) 100%),
      radial-gradient(120% 80% at 50% 40%, transparent 46%, rgba(0,0,0,.40) 100%);
  }
}

/* Abajo de este ancho los tres datos ya no entran en una linea sin apretarse,
   asi que se apilan y las lineas verticales no van mas */
@media (max-width:800px){
  .trust{flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:1.2rem}
  .trust li{flex:none;justify-content:flex-start;padding:0}
  .trust li:last-child{justify-content:flex-start}
  .trust li+li{border-left:0}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .form-wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .review-nav{display:none}
  .review{padding:2rem 1.2rem}
  .review-text{font-size:.98rem}
  .form{grid-template-columns:1fr;padding:1.35rem}
  .hero-cta .btn{flex:1 1 100%}

  /* iPhone hace zoom solo al tocar un campo de menos de 16 px y despues deja
     la pagina corrida. Con 16 no pasa. */
  input,select,textarea{font-size:16px}
  .svc-tabs{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  .wrap{padding:0 18px}
  .price{padding:1.15rem 1.2rem}
  .wa-float{width:48px;height:48px;right:14px;bottom:14px}
  .wa-float svg{width:25px;height:25px}
}

/* Celular acostado: la pantalla mide poco de alto y el respiro de siempre
   dejaba el titulo solo, sin nada mas a la vista */
@media (max-height:560px) and (orientation:landscape){
  .nav-inner{height:56px}
  html{scroll-padding-top:70px}
  .hero{padding:2.25rem 0 2rem}
  .section{padding:2.75rem 0}
  .hero h1{font-size:clamp(1.75rem,4.4vw,2.3rem)}
  .hero .lead{font-size:1rem;margin-top:.9rem}
  .hero-cta{margin-top:1.5rem}
  .trust{margin-top:1.5rem}
}

/* Monitores grandes o navegador alejado con el zoom: sin esto la pagina queda
   como una columna finita en el medio de un desierto. Se agranda todo junto
   porque las medidas estan en rem, y el % respeta la letra que eligio la persona. */
@media (min-width:1600px){
  :root{--wrap:1240px;font-size:108%}
}
@media (min-width:2100px){
  :root{--wrap:1380px;font-size:118%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}