/* ═══════════════════════════════════════════════════════════════════════════
   Pc Arts — Cartagena
   Dirección: "el índice de averías". La portada no es un eslogan, es la lista
   de lo que te puede estar pasando, sobre el trazado de una placa.
   Paleta sacada del material físico del oficio, no del reflejo "tech":
   la bolsa antiestática (gris frío), el estaño, el cobre de las pistas y el
   rosa de las etiquetas ESD.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --esd:#12161A;          /* bolsa antiestatica: casi negro, FRIO */
  --esd-2:#1A2027;        /* superficie levantada */
  --estano:#D6DBDE;       /* soldadura: el texto sobre oscuro */
  --estano-soft:#9BA6AE;  /* secundario (6,4:1 sobre --esd) */
  --cobre:#B87333;        /* las pistas. ESTRUCTURAL: nunca texto de cuerpo */
  --rosa:#FF5D8F;         /* etiqueta ESD: el acento */
  --placa:#E8EDEF;        /* bloque claro, deliberadamente frio (no crema) */
  --tinta:#12161A;
  --tinta-soft:#4E5A63;

  --linea-osc:rgba(214,219,222,.16);
  --linea-cla:rgba(18,22,26,.16);

  --display:"Syne",Georgia,serif;
  --cuerpo:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --maxw:1280px;
  --gutter:clamp(20px,4vw,56px);
  --seccion:clamp(80px,10vw,140px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--esd);color:var(--estano);
  font-family:var(--cuerpo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--rosa);color:var(--esd)}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

.contenedor{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* el header va fijo: sin esto el enlace del menú deja el título debajo de la barra */
[id]{scroll-margin-top:96px}

/* ── tipografía ─────────────────────────────────────────────────────────── */
.titular{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.9rem,8.6vw,8.4rem);   /* hasta 134px: el titular manda */
  line-height:.94;letter-spacing:-.035em;text-wrap:balance;
}
/* cambio de familia DENTRO del titular: la pregunta en grotesk, el sujeto en mono */
.titular em{
  font-family:var(--mono);font-style:normal;font-weight:700;
  font-size:.62em;letter-spacing:-.02em;color:var(--rosa);
}
.titular--m{font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.02}
.titular--s{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.06}
.titular--m em,.titular--s em{font-size:.78em}

.et{
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--estano-soft);
  display:flex;align-items:center;gap:.7em;
}
.et::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.et--rosa{color:var(--rosa)}

.entradilla{
  font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--estano-soft);
  max-width:44ch;text-wrap:pretty;
}

/* ── header en celdas ───────────────────────────────────────────────────── */
.cab{
  position:fixed;inset:0 0 auto;z-index:60;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:stretch;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.cab.scrolled{background:rgba(18,22,26,.86);backdrop-filter:blur(12px) saturate(1.4);border-bottom-color:var(--linea-osc)}
.cab__marca{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px var(--gutter);border-right:1px solid var(--linea-osc)}
.cab__wordmark{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.cab__sitio{font-family:var(--mono);font-size:.75rem;color:var(--estano-soft);letter-spacing:.04em}
.cab__nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding-inline:clamp(16px,3vw,34px)}
.cab__nav a{font-size:.94rem;color:var(--estano-soft);transition:color .2s ease}
.cab__nav a:hover,.cab__nav a.active{color:var(--estano)}
.cab__nav a.active{color:var(--rosa)}
.cab__tel{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:14px clamp(18px,2.4vw,28px);border-left:1px solid var(--linea-osc);transition:background-color .2s ease}
.cab__tel:hover{background:var(--rosa);color:var(--esd)}
.cab__tel-et{font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--estano-soft)}
.cab__tel:hover .cab__tel-et{color:inherit;opacity:.72}
.cab__tel-num{font-family:var(--mono);font-weight:700;font-size:.98rem}
.cab__burger{display:none;width:56px;border-left:1px solid var(--linea-osc);place-items:center;gap:5px}
.cab__burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s ease}
.cab__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.cab__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.cab__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── PORTADA ────────────────────────────────────────────────────────────── */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}

/* la placa: UN solo svg, a sangre, cubriendo el viewport entero */
.placa{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.placa__pistas path{fill:none;stroke:var(--cobre);stroke-opacity:.66;stroke-linecap:square;stroke-linejoin:miter}
.placa__vias circle{fill:none;stroke:var(--cobre);stroke-opacity:.7;stroke-width:1.5}
.placa__pads rect{fill:none;stroke:var(--cobre);stroke-opacity:.4;stroke-width:1}
.placa__grano{opacity:.05;mix-blend-mode:overlay;pointer-events:none}

/* la FIRMA: la pista del síntoma elegido se enciende en rosa y recorre la placa */
.pista--viva{transition:stroke .35s ease,stroke-opacity .35s ease,stroke-width .35s ease}
.pista--viva.encendida{
  stroke:var(--rosa);stroke-opacity:1;stroke-width:3;
  stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo);
  animation:recorre 1.5s var(--ease) forwards;
  filter:drop-shadow(0 0 7px rgba(255,93,143,.5));
}
@keyframes recorre{to{stroke-dashoffset:0}}

/* velo: la placa es textura, el texto tiene que leerse */
.portada::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(18,22,26,.62) 0%,rgba(18,22,26,.2) 30%,rgba(18,22,26,.86) 100%),
    radial-gradient(96% 62% at 14% 74%,rgba(18,22,26,.88) 0%,rgba(18,22,26,0) 64%);
}

/* El titular manda a todo el ancho; debajo, en dos columnas, la acción y el índice.
   Así el titular puede ir grande de verdad SIN empujar el botón fuera de pantalla. */
.portada__rejilla{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(104px,13vh,152px) var(--gutter) clamp(36px,5vh,60px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  grid-template-areas:"titulo titulo" "acciones indice";
  column-gap:clamp(28px,5vw,68px);row-gap:clamp(26px,4vh,44px);
  align-items:start;
}
.portada__titulo{grid-area:titulo}
.portada__acciones{grid-area:acciones;align-self:start}
.portada__indice{grid-area:indice}

.portada__titulo .titular{margin-top:0}
.portada__titulo .titular{margin-bottom:0}
.entradilla{margin-bottom:28px}

.acordar{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.boton{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:16px 26px;background:var(--rosa);color:var(--esd);
  transition:transform .2s var(--ease),box-shadow .2s ease;
}
.boton:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(255,93,143,.9)}
.boton:active{transform:scale(.985)}
.boton__et{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.74}
.boton__frase{font-family:var(--display);font-weight:700;font-size:1.24rem;letter-spacing:-.02em}
.acordar__nota{font-family:var(--mono);font-size:.82rem;color:var(--estano-soft)}
.acordar__nota .sep{color:var(--cobre);padding-inline:.3em}

.nota-google{margin-top:26px;font-size:.94rem;color:var(--estano-soft)}
.nota-google strong{font-family:var(--mono);font-size:1.16rem;color:var(--estano)}

/* el índice */
.portada__indice .et{margin-bottom:14px}
.indice{list-style:none;border-top:1px solid var(--linea-osc)}
.sint{
  width:100%;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:13px 14px 13px 0;text-align:left;
  border-bottom:1px solid var(--linea-osc);
  position:relative;transition:background-color .25s ease,padding-left .25s var(--ease);
}
.sint::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--rosa);
  transition:width .3s var(--ease);
}
.sint__n{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--cobre)}
.sint__cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.sint__que{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:-.02em;line-height:1.14}
.sint__desc{font-size:.9rem;color:var(--estano-soft);text-wrap:pretty}
.sint:hover{background:rgba(255,93,143,.05)}
.sint[aria-pressed="true"]{padding-left:26px;background:rgba(255,93,143,.07)}
.sint[aria-pressed="true"]::before{width:16px}
.sint[aria-pressed="true"] .sint__n{color:var(--rosa)}
.sint[aria-pressed="true"] .sint__que{color:var(--rosa)}

/* ── barra de estado ────────────────────────────────────────────────────── */
.estado{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  padding:16px var(--gutter);background:var(--esd-2);
  border-block:1px solid var(--linea-osc);
  font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;
}
.estado__linea{display:flex;align-items:center;gap:10px}
.estado__sitio{color:var(--estano-soft)}
.punto{width:8px;height:8px;background:var(--estano-soft);flex:none;border-radius:50%}
.punto.open{background:var(--rosa);box-shadow:0 0 0 4px rgba(255,93,143,.2)}
.punto.closed{background:var(--cobre)}

/* ── QUIÉN LO ARREGLA (bloque claro) ────────────────────────────────────── */
.quien{background:var(--placa);color:var(--tinta);padding-block:var(--seccion)}
.quien .et{color:var(--tinta-soft)}
.quien__cabeza{margin-bottom:clamp(38px,6vw,68px)}
.quien__cabeza .et{margin-bottom:18px}
.quien__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(30px,5vw,80px);align-items:start}
.quien__texto p{color:var(--tinta-soft);max-width:46ch}
.quien__texto p+p{margin-top:18px}

.marca-google{display:flex;align-items:center;gap:16px;margin-top:36px;padding-top:26px;border-top:1px solid var(--linea-cla)}
.marca-google__nota{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;letter-spacing:-.04em}
.marca-google__meta{display:flex;flex-direction:column;gap:2px}
.estrellas{color:#F0A500;font-size:1.05rem;letter-spacing:.08em}
.estrellas .media{opacity:.42}
.marca-google__n{font-family:var(--mono);font-size:.75rem;color:var(--tinta-soft)}

.resenas{list-style:none}
.resenas li{padding:18px 0;border-bottom:1px solid var(--linea-cla)}
.resenas li:first-child{padding-top:0}
.resenas blockquote{font-size:1.04rem;text-wrap:pretty}
.resenas blockquote::before{content:"“"}
.resenas blockquote::after{content:"”"}
.resenas cite{display:block;margin-top:5px;font-family:var(--mono);font-size:.75rem;font-style:normal;color:var(--tinta-soft)}

/* ── CÓMO VA ────────────────────────────────────────────────────────────── */
.como{padding-block:var(--seccion)}
.como .et{margin-bottom:18px}
.como .titular--m{margin-bottom:clamp(38px,6vw,64px)}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea-osc);background-clip:content-box}
.paso{background:var(--esd);padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,34px)}
.paso__n{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;color:var(--cobre);margin-bottom:20px}
.paso h3{font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;margin-bottom:10px}
.paso p{color:var(--estano-soft);font-size:.97rem;text-wrap:pretty}

/* ── DÓNDE ESTÁ ─────────────────────────────────────────────────────────── */
.donde{display:grid;grid-template-columns:1.05fr .95fr;border-top:1px solid var(--linea-osc)}
.donde__mapa{min-height:520px;position:relative;background:var(--esd-2)}
.donde__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.45) contrast(1.04) brightness(.84)}
.donde__ficha{padding:var(--seccion) var(--gutter);border-left:1px solid var(--linea-osc);display:flex;flex-direction:column;align-items:flex-start}
.donde__ficha .et{margin-bottom:18px}
.donde__ficha .titular--s{margin-bottom:8px}
.donde__cp{font-family:var(--mono);font-size:.86rem;color:var(--estano-soft);margin-bottom:34px}

.horario{width:100%;max-width:460px;border-top:1px solid var(--linea-osc);margin-bottom:34px}
.horario .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linea-osc);font-size:.94rem}
.horario .row span:last-child{font-family:var(--mono);font-size:.82rem;color:var(--estano-soft);text-align:right}
.horario .row.today{color:var(--rosa)}
.horario .row.today span:last-child{color:var(--rosa)}

.donde__acciones{display:flex;flex-wrap:wrap;gap:12px}
.boton--solido,.boton--linea{
  display:inline-flex;align-items:center;padding:14px 24px;
  font-family:var(--mono);font-size:.86rem;font-weight:700;letter-spacing:.04em;
}
.boton--solido{background:var(--rosa);color:var(--esd)}
.boton--linea{background:none;border:1px solid var(--linea-osc);color:var(--estano)}
.boton--linea:hover{border-color:var(--rosa);color:var(--rosa);box-shadow:none}

/* ── PIE ────────────────────────────────────────────────────────────────── */
.pie{background:var(--esd-2);border-top:1px solid var(--linea-osc);padding-top:clamp(52px,7vw,82px)}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,4vw,48px);padding-bottom:clamp(40px,5vw,62px)}
.pie__wordmark{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;margin-bottom:10px}
.pie__tag,.pie__col p{color:var(--estano-soft);font-size:.94rem}
.pie__t{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--estano);margin-bottom:14px}
.pie__col p+p{margin-top:12px}
.pie__col a:hover{color:var(--rosa)}
.pie__col nav{display:flex;flex-direction:column;gap:9px}
.pie__col nav a{color:var(--estano-soft);font-size:.94rem}

.pie__barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  padding-block:22px;border-top:1px solid var(--linea-osc);
}
.pie__legal{display:flex;gap:18px;font-size:.86rem;color:var(--estano-soft)}
.pie__legal a:hover{color:var(--rosa)}
.pie__copy{font-family:var(--mono);font-size:.78rem;color:var(--estano-soft);margin-left:auto}
.demo-aviso{flex-basis:100%;font-size:.75rem;color:var(--estano-soft);opacity:.62}

/* ── llamada en móvil ───────────────────────────────────────────────────── */
.llamar-movil{
  display:none;position:fixed;inset:auto 0 0;z-index:70;
  align-items:baseline;justify-content:center;gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--rosa);color:var(--esd);
}
.llamar-movil span{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.76}
.llamar-movil strong{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.01em}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .portada__rejilla{grid-template-columns:1fr;grid-template-areas:"titulo" "acciones" "indice";gap:32px}
  .quien__cuerpo{grid-template-columns:1fr}
  .donde{grid-template-columns:1fr}
  .donde__mapa{min-height:340px;order:2}
  .donde__ficha{border-left:0;border-bottom:1px solid var(--linea-osc)}
  .pie__rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .cab{grid-template-columns:1fr auto auto}
  .cab__burger{display:grid}
  .cab__nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;
    background:var(--esd);gap:8px;padding:0 var(--gutter);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  }
  .cab__nav.open{opacity:1;visibility:visible}
  .cab__nav a{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--estano)}
  .cab__tel-et{display:none}
  .pasos{grid-template-columns:1fr}
  .llamar-movil{display:flex}
  body{padding-bottom:64px}
  /* el trazado baja a textura: en pantalla pequeña compite con el texto.
     Y el enlace se retira: aquí el índice va justo debajo del botón, la
     conexión se ve sin dibujarla y cruzaba la entradilla. */
  .placa__pistas path{stroke-opacity:.34}
  .placa__vias circle{stroke-opacity:.36}
  .placa__pads rect{stroke-opacity:.2}
  .pista--enlace{display:none}
  .pista--viva.encendida{stroke-width:2;filter:none;stroke-opacity:.85}
}
@media (max-width:560px){
  .pie__rejilla{grid-template-columns:1fr}
  .pie__copy{margin-left:0}
  .sint{gap:12px;padding-block:12px}
  .marca-google{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .pista--viva.encendida{stroke-dasharray:none;stroke-dashoffset:0}
}

/* el último tramo: lo dibuja el JS desde donde muere la pista hasta el síntoma */
.pista--enlace{fill:none;stroke:var(--rosa);stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}
.pista--enlace:not(.encendida){display:none}