/* ═══════════════════════════════════════════════════════════
   Electrihuelva — claro, sobrio y profesional.
   Azul petróleo (confianza, ingeniería) + ámbar (luz, energía).
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#0F3A57;
  --navy-700:#0B2B41;
  --navy-50:#EDF3F7;
  --amber:#F5A524;        /* decoración: bombilla, subrayados, bordes */
  --amber-ink:#9A5F00;    /* texto: 5,2:1 sobre blanco, cumple WCAG AA */
  --amber-50:#FEF5E4;
  --wa:#25D366;
  --mail:#F5A524;        /* ámbar: el email deja de ser el botón triste */
  --mail-ink:#101922;

  --ink:#101922;
  --body:#414D5A;
  --muted:#64707E;
  --paper:#FFFFFF;
  --mist:#F6F8FA;
  --line:#E4E9EF;

  --r:12px;
  --r-lg:18px;
  --pad:clamp(1.25rem,5vw,2rem);
  --sec-y:clamp(4rem,9vw,7rem);
  --bar-h:68px;

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sh-sm:0 1px 2px rgba(16,25,34,.05),0 2px 8px -4px rgba(16,25,34,.08);
  --sh-md:0 4px 12px -4px rgba(16,25,34,.1),0 16px 32px -18px rgba(16,25,34,.22);
  --sh-lg:0 8px 20px -8px rgba(16,25,34,.14),0 28px 56px -28px rgba(16,25,34,.3);
}

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .16vw,1.06rem);
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}

img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);color:var(--ink);
  line-height:1.13;letter-spacing:-.028em;margin:0;text-wrap:balance;
}
h1,h2{font-weight:800}
h3{font-weight:700}
h2{font-size:clamp(1.7rem,1.25rem + 2.1vw,2.75rem)}
h3{font-size:clamp(1.08rem,1rem + .4vw,1.22rem);letter-spacing:-.018em;line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-style:normal}

.wrap{width:min(1180px,100% - var(--pad) * 2);margin-inline:auto}
.wrap--narrow{width:min(780px,100% - var(--pad) * 2)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:300;background:var(--navy);color:#fff;padding:.7rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ─── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:1rem 1.5rem;border-radius:var(--r);
  text-decoration:none;white-space:nowrap;border:1.5px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.6rem 1rem;font-size:.94rem;border-radius:10px}
.ico{width:20px;height:20px;flex:none}

.btn--primary{background:var(--navy);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--navy-700);box-shadow:var(--sh-md)}

.btn--wa{background:var(--wa);color:#fff;box-shadow:0 4px 14px -4px rgba(37,211,102,.5)}
.btn--wa:hover{background:#1FBE5B;box-shadow:0 10px 26px -8px rgba(37,211,102,.6)}

.btn--tel{
  background:var(--navy);color:#fff;
  box-shadow:0 4px 14px -4px rgba(15,58,87,.55);
}
.btn--tel:hover{background:var(--navy-700);box-shadow:0 10px 26px -8px rgba(15,58,87,.65)}

.btn--line{background:#fff;color:var(--navy);border-color:#C6D3DD;box-shadow:var(--sh-sm)}
.btn--line:hover{border-color:var(--navy);box-shadow:var(--sh-md)}

/* La flecha se adelanta al pasar el ratón */
.ico--arrow{transition:transform .3s var(--ease)}
.btn:hover .ico--arrow{transform:translateX(4px)}

/* ─── Cabecera ────────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.hdr.is-stuck{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line),var(--sh-sm)}
.hdr__in{display:flex;align-items:center;gap:1.25rem;padding:.7rem 0}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand__mark{width:40px;height:40px;flex:none;border-radius:11px}
.brand__txt{display:flex;flex-direction:column;line-height:1.2}
.brand__txt b{
  font-family:var(--display);font-weight:800;color:var(--navy);
  font-size:clamp(1rem,.92rem + .35vw,1.15rem);letter-spacing:-.03em;
}
.brand__txt b span{font-weight:500;color:var(--ink)}
.brand__txt i{font-style:normal;font-size:.72rem;color:var(--muted);letter-spacing:.01em}

.hdr__nav{display:none;gap:1.6rem;font-size:.94rem;font-weight:500}
.hdr__nav a{text-decoration:none;color:var(--body);transition:color .18s}
.hdr__nav a:hover{color:var(--navy)}
@media (min-width:1000px){ .hdr__nav{display:flex} }

.hdr__cta{display:none}
@media (min-width:600px){ .hdr__cta{display:inline-flex} }

/* Línea de progreso: la versión discreta de la bombilla, para móvil */
.hdr__progress{
  height:2px;width:0;
  background:linear-gradient(90deg,var(--navy),var(--amber));
  transition:width .1s linear;
}

/* ─── Bombilla de progreso (solo escritorio) ──────────────── */
.rail{
  display:none;
  position:fixed;left:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  z-index:90;flex-direction:column;align-items:center;gap:1rem;
}
/* 1180px de contenido + 100px de margen a cada lado: por debajo de
   1380px no cabe sin pisar el texto, así que no se muestra. */
@media (min-width:1380px){ .rail{display:flex} }

.bulb{width:50px;height:62px;overflow:visible}

/* El nivel lo fijan los atributos y/height del <rect> desde el JS:
   el transform de CSS se ignora sobre un <rect> de SVG. */
.bulb__fill{transition:y .18s linear,height .18s linear}

.bulb__glass{
  fill:rgba(255,255,255,.45);
  stroke:#A9BAC7;stroke-width:1.7;stroke-linejoin:round;
  transition:stroke .5s var(--ease);
}
.bulb__shine{
  fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.7;
}
.bulb__bolt{
  fill:var(--navy);opacity:.28;
  transition:fill .5s var(--ease),opacity .3s linear,filter .5s var(--ease);
}
.bulb__bloom{opacity:0;transition:opacity .4s var(--ease)}
.bulb__rays{
  fill:none;stroke:#DF8B00;stroke-width:2.2;stroke-linecap:round;
  opacity:0;transform-origin:24px 19px;transform:scale(.82);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

/* Encendida del todo: el filamento se pone al blanco y salen los rayos */
.rail.is-lit .bulb__glass{stroke:#E0A94F}
.rail.is-lit .bulb__bolt{
  fill:#FFF6E0;opacity:1;
  filter:drop-shadow(0 0 4px rgba(255,214,132,.95));
}
.rail.is-lit .bulb__rays{opacity:.9;transform:scale(1)}

.rail__track{
  position:relative;width:2px;height:190px;background:var(--line);border-radius:2px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.rail__fill{
  position:absolute;top:0;left:0;width:100%;
  height:0;
  background:linear-gradient(180deg,var(--amber),var(--navy));
  border-radius:2px;transition:height .12s linear;
}
.rail__dot{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);
  transition:border-color .25s,background .25s,transform .25s;
}
.rail__dot::after{
  content:attr(data-label);
  position:absolute;left:20px;top:50%;transform:translateY(-50%) translateX(-6px);
  background:var(--navy);color:#fff;font-size:.75rem;font-weight:500;
  padding:.3rem .6rem;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.rail__dot:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.rail__dot.is-active{background:var(--amber);border-color:var(--amber);transform:scale(1.35)}

/* ─── Contacto lateral (solo escritorio) ─────────────────── */
.side{
  display:none;
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:110;flex-direction:column;gap:.4rem;
}
/* Los botones flotan sobre el contenido a propósito, como cualquier
   burbuja de WhatsApp: no hace falta esperar a tener margen libre. */
@media (min-width:1100px){ .side{display:flex} }

.side__btn{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1rem;text-decoration:none;color:#fff;
  border-radius:12px 0 0 12px;box-shadow:var(--sh-md);
  max-width:52px;overflow:hidden;
  transition:max-width .32s var(--ease),filter .18s;
}
.side__btn span{
  font-family:var(--display);font-weight:600;font-size:.92rem;white-space:nowrap;
  opacity:0;transition:opacity .2s .06s;
}
.side__btn:hover{max-width:190px}
.side__btn--wa:hover{box-shadow:-6px 8px 26px -8px rgba(37,211,102,.7)}
.side__btn--tel:hover{box-shadow:-6px 8px 26px -8px rgba(15,58,87,.6)}
.side__btn--mail:hover{box-shadow:-6px 8px 26px -8px rgba(245,165,36,.75)}
.side__btn:hover span{opacity:1}
.side__btn--wa{background:var(--wa)}
.side__btn--tel{background:var(--navy)}
.side__btn--mail{background:var(--mail);color:var(--mail-ink)}

/* ─── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(5.5rem,4.5rem + 6vw,9rem) 0 clamp(2.5rem,5vw,4.5rem);
  background:
    radial-gradient(ellipse 70% 60% at 78% 0%,var(--amber-50),transparent 62%),
    radial-gradient(ellipse 80% 70% at 8% 8%,var(--navy-50),transparent 60%),
    var(--paper);
}
/* ─── Esquema eléctrico de fondo ─────────────────────────── */
.circuit{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;
}
/* En móvil se recorta mucho: bajamos intensidad para que no compita
   con el texto, que es lo que de verdad hay que leer. */
@media (max-width:700px){ .circuit{opacity:.5} }

.cir__base{fill:none;stroke:#D3DDE6;stroke-width:1.6;stroke-linecap:round}
.cir__live{
  fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;      /* el JS lo va soltando */
  filter:drop-shadow(0 0 5px rgba(245,165,36,.55));
  transition:stroke-dashoffset .45s var(--ease);
}
.panel{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;opacity:.45}

.lamp__halo{fill:url(#haloGrad);opacity:0;transition:opacity .55s var(--ease)}
.lamp__ring{fill:none;stroke:#C3D0DB;stroke-width:1.6;transition:stroke .45s var(--ease)}
.lamp__core{fill:#E4EBF1;transition:fill .45s var(--ease),filter .45s var(--ease)}

.lamp.is-on .lamp__halo{opacity:1}
.lamp.is-on .lamp__ring{stroke:var(--amber)}
.lamp.is-on .lamp__core{fill:#FFCF6B;filter:drop-shadow(0 0 6px rgba(245,165,36,.95))}

@media (prefers-reduced-motion:reduce){
  .cir__live{stroke-dashoffset:0}
  .lamp__halo{opacity:1}
  .lamp__ring{stroke:var(--amber)}
  .lamp__core{fill:#FFCF6B}
}

/* Velo tras el texto: el esquema se ve, pero nunca compite con lo que
   hay que leer. */
.hero__in{max-width:860px;position:relative}
.hero__in::before{
  content:"";position:absolute;z-index:-1;
  inset:-2.5rem -4rem;
  background:radial-gradient(ellipse 60% 76% at 20% 46%,
             rgba(255,255,255,.97) 32%,rgba(255,255,255,.66) 56%,transparent 76%);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.45rem 1rem;margin:0 0 1.5rem;box-shadow:var(--sh-sm);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--amber-50)}

.hero__h1{
  font-size:clamp(1.95rem,1.2rem + 4.2vw,4.1rem);
  letter-spacing:-.04em;margin-bottom:1.15rem;
}
.hero__h1 em{
  color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--amber);
  text-decoration-thickness:.07em;text-underline-offset:.11em;
}

.hero__sub{
  font-size:clamp(1.03rem,.97rem + .45vw,1.22rem);
  color:var(--body);max-width:62ch;margin-bottom:2rem;line-height:1.6;
}
.hero__sub strong{color:var(--ink);font-weight:600}

.cta{display:flex;flex-wrap:wrap;gap:.75rem}
.cta--center{justify-content:center}
.cta .btn{flex:1 1 auto}
@media (min-width:560px){ .cta .btn{flex:0 0 auto} }

.chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;
  margin:2.2rem 0 0;padding:0;
}
.chips li{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-size:.88rem;color:var(--body);box-shadow:var(--sh-sm);
}
.chips b{color:var(--navy);font-weight:700;font-family:var(--display)}

/* ─── Secciones ───────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0}
.sec--mist{background:var(--mist);border-block:1px solid var(--line)}

.sec__head{max-width:60ch;margin-bottom:clamp(2.2rem,4.5vw,3.2rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__lead{margin-top:1.1rem;color:var(--muted);font-size:1.05rem}

.kicker{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 .75rem;
}

.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}

/* ─── Bloque diferencial ─────────────────────────────────── */
.feat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.8rem 1.6rem;box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.feat__ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:13px;
  background:var(--navy-50);color:var(--navy);margin-bottom:1.1rem;
}
.feat__ico svg{width:24px;height:24px}
.feat h3{margin-bottom:.5rem}
.feat p{font-size:.97rem;color:var(--muted)}
.feat em{font-style:italic;color:var(--navy);font-weight:500}

/* ─── Tarjetas de servicio ───────────────────────────────── */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.5rem;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--amber),var(--navy));
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#D6DEE7}
.card:hover::before{transform:scaleY(1)}
.card__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--amber-50);color:var(--navy);margin-bottom:1.05rem;
}
.card__ico svg{width:23px;height:23px}
.card h3{margin-bottom:.5rem}
.card p{font-size:.96rem;color:var(--muted);line-height:1.58}

/* ─── Pasos ──────────────────────────────────────────────── */
.steps{
  list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.step{border-top:2px solid var(--line);padding-top:1.4rem;position:relative}
.step::before{
  content:"";position:absolute;top:-2px;left:0;width:38px;height:2px;background:var(--amber);
}
.step__n{
  font-family:var(--display);font-weight:800;font-size:1rem;
  color:var(--amber-ink);display:block;margin-bottom:.7rem;letter-spacing:.02em;
}
.step h3{margin-bottom:.45rem}
.step p{font-size:.95rem;color:var(--muted)}

/* ─── Compromisos ────────────────────────────────────────── */
.promises{
  list-style:none;margin:2rem 0 0;padding:1.6rem;
  background:var(--navy);border-radius:var(--r-lg);
  display:grid;gap:.7rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  color:#DDE7EE;font-size:.96rem;
}
.promises li{display:flex;align-items:flex-start;gap:.6rem;line-height:1.45}
.promises li::before{
  content:"";width:16px;height:16px;flex:none;margin-top:.22em;border-radius:50%;
  background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='%230F3A57' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.03rem;
  padding:1.2rem 2.6rem 1.2rem 0;position:relative;transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy)}
.faq summary::after{
  content:"";position:absolute;right:.6rem;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 1rem 1.4rem 0;color:var(--muted);margin:0;font-size:.98rem}

/* ─── Contacto ───────────────────────────────────────────── */
.ways{gap:1rem}
.way{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;text-decoration:none;box-shadow:var(--sh-sm);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
}
.way:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.way__ico{
  display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  color:#fff;margin-bottom:.9rem;
}
.way__ico svg{width:25px;height:25px}
.way--wa .way__ico{background:var(--wa)}
.way--tel .way__ico{background:var(--navy)}
.way--mail .way__ico{background:var(--mail);color:var(--mail-ink)}
.way--wa:hover{border-color:var(--wa)}
.way--tel:hover{border-color:var(--navy)}
.way--mail:hover{border-color:var(--mail)}
.way b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.05rem}
.way__val{
  font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:1.02rem;word-break:break-word;
}
.way__hint{font-size:.88rem;color:var(--muted);margin-top:.35rem}

.contact__tip{
  margin:2rem auto 0;max-width:60ch;text-align:center;
  background:var(--amber-50);border:1px solid #F5DFB4;border-radius:var(--r);
  padding:1.1rem 1.3rem;font-size:.96rem;color:#6B4E14;
}
.contact__tip b{color:#4A360C}

/* ─── Pie ────────────────────────────────────────────────── */
.ft{background:var(--mist);border-top:1px solid var(--line);padding:3.2rem 0 3rem;font-size:.94rem}
.ft__in{display:grid;gap:2rem}
@media (min-width:820px){
  .ft__in{grid-template-columns:1.6fr 1fr 1fr;align-items:start}
  .ft__legal{grid-column:1/-1;padding-top:1.8rem;border-top:1px solid var(--line)}
}
.ft__brand{display:flex;gap:.8rem;align-items:flex-start}
.ft__brand img{width:40px;height:40px;border-radius:11px;flex:none}
.ft__name{font-family:var(--display);font-weight:800;color:var(--navy);font-size:1.1rem;margin:0 0 .15rem;letter-spacing:-.02em}
.ft__meta{margin:0;color:var(--muted)}
.ft__col{display:flex;flex-direction:column;gap:.35rem;color:var(--muted)}
.ft__h{font-family:var(--display);font-weight:700;color:var(--ink);margin:0 0 .3rem;font-size:.95rem}
.ft__col a{text-decoration:none;color:var(--body);transition:color .18s}
.ft__col a:hover{color:var(--navy)}
.ft__legal{margin:0;color:var(--muted);font-size:.86rem}
.ft__legal a{color:var(--muted)}
.ft__legal a:hover{color:var(--navy)}

/* ─── Barra inferior — nunca desaparece ──────────────────── */
.bar{
  position:fixed;z-index:130;inset:auto 0 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid var(--line);
}
.bar__btn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  padding:.85rem .4rem;border-radius:11px;text-decoration:none;color:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .18s;
}
.bar__btn:active{transform:scale(.96)}
.bar__btn .ico{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

/* Solo en dispositivos con ratón: en el móvil no hay "encima" y
   dejaría los botones pegados al estado de hover tras cada toque. */
@media (hover:hover){
  .bar__btn:hover{transform:translateY(-4px) scale(1.04)}
  .bar__btn--tel:hover{box-shadow:0 12px 26px -8px rgba(15,58,87,.75)}
  .bar__btn--wa:hover{box-shadow:0 12px 26px -8px rgba(37,211,102,.8)}
  .bar__btn--mail:hover{box-shadow:0 12px 26px -8px rgba(245,165,36,.85)}

  /* El teléfono suena, el sobre despega, WhatsApp saluda */
  .bar__btn--tel:hover .ico{animation:sonar .7s var(--ease)}
  .bar__btn--wa:hover  .ico{transform:scale(1.2) rotate(-9deg)}
  .bar__btn--mail:hover .ico{transform:translateY(-3px) scale(1.15)}
}

@keyframes sonar{
  0%,100%{transform:rotate(0) scale(1)}
  15%{transform:rotate(-15deg) scale(1.12)}
  30%{transform:rotate(13deg) scale(1.12)}
  45%{transform:rotate(-10deg) scale(1.1)}
  60%{transform:rotate(8deg) scale(1.07)}
  75%{transform:rotate(-4deg) scale(1.04)}
}
.bar__btn--tel{background:var(--navy)}
.bar__btn--wa{background:var(--wa)}
.bar__btn--mail{background:var(--mail);color:var(--mail-ink)}

/* En escritorio se convierte en una píldora flotante y discreta */
@media (min-width:1000px){
  :root{--bar-h:78px}
  .bar{
    inset:auto 0 1.25rem 0;
    width:max-content;margin-inline:auto;
    grid-template-columns:repeat(3,auto);gap:.35rem;
    padding:.35rem;border:1px solid var(--line);border-radius:999px;
    box-shadow:var(--sh-lg);background:rgba(255,255,255,.9);
  }
  .bar__btn{border-radius:999px;padding:.72rem 1.35rem;font-size:.95rem}
}

/* ─── Aparición al hacer scroll ──────────────────────────── */
.reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} }

/* Los anclajes no quedan bajo la cabecera fija */
section[id],main[id]{scroll-margin-top:86px}

/* ─── Páginas legales ────────────────────────────────────── */
.legal{padding:calc(6rem + 2vw) 0 4rem}
.legal h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem);margin-bottom:.5rem}
.legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:2.5rem}
.legal h2{font-size:clamp(1.12rem,1rem + .6vw,1.4rem);margin:2.4rem 0 .7rem}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal .back{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;
  font-family:var(--display);font-weight:700;text-decoration:none;
  font-size:.95rem;color:var(--navy);
}
.legal .box{
  background:var(--amber-50);border:1px solid #F5DFB4;border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:1.2rem 0;font-size:.95rem;color:#6B4E14;
}

/* ─── Formulario de contacto ─────────────────────────────── */
.form{
  margin:2.5rem auto 0;max-width:660px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,4vw,2.2rem);box-shadow:var(--sh-md);
}
.form__head{margin-bottom:1.5rem}
.form__head h3{margin-bottom:.35rem}
.form__head p{color:var(--muted);font-size:.96rem}

.form__row{display:grid;gap:1rem}
@media (min-width:560px){ .form__row{grid-template-columns:1fr 1fr} }

.field{display:block;margin-bottom:1rem}
.field > span{
  display:block;margin-bottom:.4rem;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink);
}
.field > span b{color:var(--amber-ink);font-weight:700}
.field > span i{font-style:normal;font-weight:400;color:var(--muted);font-size:.85rem}

.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--mist);border:1.5px solid var(--line);border-radius:var(--r);
  padding:.8rem .9rem;transition:border-color .18s,background .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#96A0AC}
.field input:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(15,58,87,.1);
}
/* Solo marcamos en rojo lo que el usuario ya ha tocado y ha dejado mal */
.form.is-checked .field input:invalid,
.form.is-checked .field textarea:invalid{border-color:#C0392B;background:#FDF3F2}

/* Trampa antispam */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.check{display:flex;align-items:flex-start;gap:.6rem;margin:.4rem 0 1.4rem;font-size:.92rem;color:var(--muted)}
.check input{width:19px;height:19px;flex:none;margin-top:.15em;accent-color:var(--navy)}
.check a{color:var(--navy);font-weight:500}

.form__send{width:100%;padding:1.05rem 1.5rem}
.form__send[disabled]{opacity:.6;pointer-events:none}

.form__status{
  margin:1rem 0 0;font-size:.94rem;text-align:center;
  padding:0;min-height:0;transition:padding .2s;
}
.form__status:not(:empty){padding:.9rem 1rem;border-radius:var(--r)}
.form__status.is-ok{background:#E8F6ED;color:#1B5E33;border:1px solid #B9E3C8}
.form__status.is-error{background:#FDF0EE;color:#8C2E22;border:1px solid #F2CFC9}
.form__status.is-error a{color:#8C2E22;font-weight:600}

/* Cuando se envía bien, el formulario sobra */
.form.is-sent .form__row,
.form.is-sent .field,
.form.is-sent .check,
.form.is-sent .form__send{display:none}

/* ─── Horario dentro de las tarjetas de contacto ─────────── */
.way__hours{
  margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line);
  width:100%;font-size:.85rem;font-weight:500;color:var(--navy);
}

/* ─── Aviso para el cierre de la landing ─────────────────── */
.contact__form-cta{
  margin:2.2rem auto 0;max-width:640px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;text-align:left;
  background:var(--navy);color:#DDE7EE;border-radius:var(--r-lg);
  padding:1.5rem clamp(1.3rem,4vw,2rem);
}
.contact__form-cta p{margin:0;font-size:.98rem}
.contact__form-cta b{color:#fff}
.contact__form-cta .btn{flex:none}

/* ─── Opiniones ──────────────────────────────────────────── */
.gcard{
  max-width:720px;margin-inline:auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.6rem,4vw,2.4rem);box-shadow:var(--sh-md);
}
.gcard__stars{
  font-size:1.5rem;letter-spacing:.16em;color:var(--amber);margin:0 0 .6rem;
}
.gcard__h{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.2rem;margin-bottom:.5rem}
.gcard__p{color:var(--muted);font-size:.98rem;max-width:48ch;margin-inline:auto}
.gcard__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}

.reviews{margin-bottom:2rem}
.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;box-shadow:var(--sh-sm);
}
.review__stars{color:var(--amber);letter-spacing:.1em;margin-bottom:.6rem}
.review__txt{color:var(--body);font-size:.97rem;margin-bottom:.9rem}
.review__who{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:.9rem;margin:0;
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA DE CONTACTO
   ═══════════════════════════════════════════════════════════ */

.phead{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6rem,5rem + 6vw,9rem) 0 clamp(2.5rem,5vw,3.5rem);
  background:
    radial-gradient(ellipse 70% 70% at 85% 0%,var(--amber-50),transparent 60%),
    radial-gradient(ellipse 80% 80% at 5% 10%,var(--navy-50),transparent 58%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.phead__in{max-width:760px}
.phead h1{
  font-size:clamp(2.1rem,1.4rem + 3.2vw,3.4rem);
  letter-spacing:-.038em;margin-bottom:1rem;
}
.phead__sub{font-size:clamp(1.02rem,.97rem + .4vw,1.18rem);color:var(--body);max-width:58ch}
.phead .chips{margin-top:1.6rem}

.crumb{font-size:.86rem;color:var(--muted);margin-bottom:1rem}
.crumb a{color:var(--navy);text-decoration:none;font-weight:500}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{margin:0 .35rem;opacity:.6}

.ccols__in{display:grid;gap:2.5rem;align-items:start}
@media (min-width:960px){
  .ccols__in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem}
}
.ccols__h{
  font-size:1.15rem;font-family:var(--display);font-weight:800;
  color:var(--ink);margin-bottom:1rem;
}
.ccols__aside{display:flex;flex-direction:column;gap:.9rem}
.ccols__aside .way{width:100%}

/* En la página de contacto el formulario ya es el protagonista:
   no necesita tarjeta flotante encima de otra tarjeta. */
.form--page{margin-top:0;max-width:none;box-shadow:var(--sh-sm)}
.form--page .form__head h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);margin-bottom:.4rem}

/* ─── Qué pasa después ───────────────────────────────────── */
.after{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.after li{display:flex;gap:.8rem;align-items:flex-start}
.after__n{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.85rem;
}
.after b{font-family:var(--display);color:var(--ink);font-size:.98rem;display:block;margin-bottom:.1rem}
.after p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.45}

/* ─── Aviso lateral ──────────────────────────────────────── */
.note{
  background:var(--amber-50);border:1px solid #F5DFB4;border-radius:var(--r);
  padding:1.1rem 1.3rem;font-size:.93rem;color:#6B4E14;line-height:1.55;
}
.note b{color:#4A360C}