/* Electromaster · hoja de estilos común (las 4 páginas)
   Los valores salen de DESIGN.md. No agregar colores fuera de la paleta. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Color (paleta aprobada) */
  --paper: #F6F5F1;
  --white: #FFFFFF;
  --ink: #14212E;
  --muted: #4A5866;
  --line: #D9D6CC;
  --blue: #1D4E89;
  --green: #0E7A4B;          /* solo botones de WhatsApp */

  /* Estados derivados */
  --blue-deep: #173D6B;
  --green-deep: #0B623C;
  --error: #A3281E;          /* solo si hay formulario */

  /* Tipografía */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-h1: 32px;  --lh-h1: 1.12;
  --fs-h2: 26px;  --lh-h2: 1.2;
  --fs-h3: 20px;  --lh-h3: 1.3;
  --fs-lead: 18px; --lh-lead: 1.5;
  --fs-body: 16px; --lh-body: 1.6;
  --fs-small: 14px;
  --fs-label: 13px;

  /* Espaciado (base 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  --section: 48px;
  --container: 1120px;
  --measure: 68ch;

  /* Forma */
  --radius: 6px;
  --radius-photo: 4px;
  --shadow-float: 0 2px 8px rgba(20, 33, 46, .25);

  /* Tamaños */
  --nav-h: 44px;             /* fila de menú del header en móvil */
  --header-h: 104px;         /* 60 px de logo y teléfono + 44 px de menú (menos de 900 px) */
  --tap: 48px;
  --btn-h: 52px;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) {
  :root {
    --fs-h1: 44px; --fs-h2: 32px; --fs-lead: 19px; --fs-body: 17px;
    --section: 80px;
    --header-h: 72px;
  }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
strong { font-weight: 600; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 680px; }
/* Columna de lectura centrada (secciones de texto) */
.container.col { max-width: calc(680px + 2 * var(--gutter)); }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 30; background: var(--white); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 8px 12px; font-weight: 600; }
.skip:focus { top: 8px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Enlace discreto */
.link, .prose a, .card a, .footer a {
  color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 120ms;
}
.link:hover, .prose a:hover, .card a:hover, .footer a:hover { color: var(--blue-deep); }

/* Header */
.header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); height: var(--header-h); }
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: block; flex: none; }
.logo img { display: block; height: 34px; width: auto; }
@media (min-width: 480px) { .logo img { height: 40px; } }
@media (min-width: 900px) { .logo img { height: 46px; } }
/* Móvil y tableta: el menú va en una segunda fila del header, siempre visible */
@media (max-width: 899px) {
  .header { height: auto; }
  .header .container { height: auto; flex-wrap: wrap; gap: 0 12px; }
  .header .logo { height: calc(var(--header-h) - var(--nav-h)); display: flex; align-items: center; }
  .nav { display: flex; order: 3; flex: 0 0 auto; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); height: var(--nav-h); border-top: 1px solid var(--line); }
  .nav a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding-inline: 4px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; border-bottom: 2px solid transparent; }
  .nav a + a { border-left: 1px solid var(--line); }
  .nav a:hover { color: var(--blue); }
  .nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
}
.tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--blue); border-radius: var(--radius); color: var(--blue);
  font-weight: 600; font-size: var(--fs-body); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color 120ms, background-color 120ms, border-color 120ms;
}
.tel .icon { width: 16px; height: 16px; }
.tel:hover { background: var(--paper); border-color: var(--blue-deep); color: var(--blue-deep); }
@media (max-width: 359px) {
  .logo img { height: 28px; }
  .tel { padding: 8px 10px; gap: 6px; font-size: 15px; }
}
@media (min-width: 900px) {
  .nav { display: flex; gap: 24px; margin-left: auto; margin-right: 24px; }
  .nav a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 8px 0; transition: color 120ms; }
  .nav a:hover { color: var(--blue); }
  .nav a[aria-current="page"] { color: var(--blue); }
}

/* Botones */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: var(--btn-h); padding: 0 20px; border-radius: var(--radius); border: 1.5px solid transparent;
  font: 600 var(--fs-body)/1.2 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: color 120ms, background-color 120ms, border-color 120ms;
}
.btn:active { transform: translateY(1px); }
.btn-wa { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-wa:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn-call { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-call:hover { background: var(--white); }
.btns { display: grid; gap: 12px; }
@media (min-width: 600px) {
  .btns { display: flex; flex-wrap: wrap; }
  .btn { width: auto; white-space: nowrap; }
}

/* Botón flotante (solo móvil) */
.float-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: var(--radius); background: var(--green); color: var(--white);
  font-weight: 600; text-decoration: none; box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 120ms, visibility 120ms, transform 120ms, background-color 120ms;
}
.float-wa.is-on { opacity: 1; visibility: visible; transform: none; }
.float-wa:hover { background: var(--green-deep); }
@media (min-width: 900px) { .float-wa { display: none; } }

/* Secciones */
.section { padding-block: var(--section); }
.section--white { background: var(--white); border-block: 1px solid var(--line); }
.section--flush { padding-top: 0; }
.note { margin-top: var(--s-5); }
.section h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; margin-bottom: var(--s-4); }
.section h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.prose > * + * { margin-top: var(--s-4); }
.prose { max-width: 680px; }
.nw { white-space: nowrap; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.label {
  font: 400 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

/* Hero */
.hero { padding-block: var(--s-5) var(--s-6); }
.hero .label { margin-bottom: var(--s-2); }
.hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; margin-bottom: var(--s-3); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 680px; }
.hero .btns { margin-top: var(--s-5); }
.hero .after { margin-top: var(--s-5); max-width: 680px; }
.hero figure { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-7); }
  .hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
  .hero figure { margin-top: 0; }
}

/* Hero sin foto (secadoras): una sola columna */
.hero--solo .container { display: block; }

/* Datos clave bajo los botones del hero */
.facts { max-width: 680px; margin-top: var(--s-5); }
.facts li { padding-block: 10px; border-top: 1px solid var(--line); font-weight: 600; line-height: 1.35; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li.key { border-left: 4px solid var(--blue); padding-left: var(--s-3); font-size: 18px; }

/* Enlaces rápidos (debajo del hero) */
.quick { padding-bottom: var(--s-5); }
.quick .label { margin-bottom: var(--s-3); }
.quick ul { display: flex; flex-wrap: wrap; gap: 8px; }
.quick a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--blue); border-radius: var(--radius); color: var(--blue);
  font-weight: 600; text-decoration: none; transition: color 120ms, background-color 120ms, border-color 120ms;
}
.quick a:hover { background: var(--white); color: var(--blue-deep); border-color: var(--blue-deep); }

/* Marco de foto */
.frame { background: var(--white); border: 1px solid var(--line); padding: 6px; border-radius: var(--radius-photo); }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.frame--tall img { aspect-ratio: 3 / 4; }
.frame figcaption {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 4px 4px;
  font: 400 var(--fs-small)/1.4 var(--font-sans); color: var(--muted);
}
.frame figcaption .nw { font: 400 var(--fs-label)/1.4 var(--font-mono); }

/* Tira de trabajos */
.strip { padding-bottom: var(--section); }
.strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.strip .frame { padding: 0; }
.strip .frame img { border-radius: 0; }
.strip .frame--tall img { aspect-ratio: 3 / 4; }

/* Tarjetas de servicio */
.cards { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); transition: border-color 120ms; }
.card:hover { border-color: var(--blue); }
.card p { color: var(--muted); margin-block: var(--s-2) var(--s-3); }
.card a::after { content: ""; position: absolute; inset: 0; }
.card:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.card a:focus-visible { outline: none; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Galería */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.more { margin-top: var(--s-4); }
.more summary {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 20px;
  border: 1.5px solid var(--ink); border-radius: var(--radius); font-weight: 600; cursor: pointer; list-style: none;
  transition: background-color 120ms;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; color: var(--blue); font: 400 24px/1 var(--font-mono); }
.more[open] summary::before { content: "–"; }
.more summary:hover { background: var(--white); }
.more[open] .on-closed, .more:not([open]) .on-open { display: none; }
.more .gallery { margin-top: var(--s-4); }
@media (min-width: 600px) { .more summary { display: inline-flex; } }

/* Bloque de precio */
.price { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.price-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); }
.price-box .label { margin-bottom: var(--s-3); }
.big { font-size: 36px; line-height: 1.1; font-weight: 600; }
.price-box .big { margin-bottom: var(--s-1); }
.price-box .big + .small { margin-bottom: var(--s-4); }
.price-box .free { border-left: 4px solid var(--blue); padding-left: var(--s-3); margin-bottom: var(--s-4); font-size: 20px; line-height: 1.35; font-weight: 600; }
.price-box li + li { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mantenimiento + garantía */
.pair { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }

/* Marcas */
.brands { display: flex; flex-wrap: wrap; margin-top: var(--s-5); max-width: 680px; }
.brands li { font-weight: 600; padding: 4px 16px; border-left: 1px solid var(--line); }
.brands li:first-child { padding-left: 0; border-left: 0; }
.brands li { margin-block: 6px; }
.brandline { margin-top: var(--s-5); max-width: 680px; }
.brandline + .brands { margin-top: var(--s-2); }

/* Lista de fallas */
.faults { max-width: 680px; margin-top: var(--s-4); }
.faults li { padding-block: var(--s-3); border-top: 1px solid var(--line); }
.faults li:last-child { border-bottom: 1px solid var(--line); }
.faults strong { display: block; }

/* Cómo agendar */
.steps { counter-reset: paso; max-width: 680px; margin-top: var(--s-5); }
.steps li { counter-increment: paso; display: grid; grid-template-columns: 40px 1fr; gap: 4px; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(paso, decimal-leading-zero); font: 400 var(--fs-label)/1.9 var(--font-mono); color: var(--blue); }

/* Preguntas frecuentes */
.faq { max-width: 680px; margin-top: var(--s-5); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); cursor: pointer; list-style: none;
  padding: var(--s-4) 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--blue); font: 400 24px/1 var(--font-mono); }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline-offset: 0; }
.faq .answer { padding: 0 0 var(--s-4); color: var(--muted); }

/* Franja de cierre */
.closing { background: var(--white); border-block: 1px solid var(--line); padding-block: var(--s-7); }
.closing p { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 680px; margin-bottom: var(--s-5); }

/* Footer */
.footer { background: var(--white); padding-block: var(--s-7); }
.footer .container { display: grid; gap: var(--s-6); }
.footer .logo img { height: 40px; }
.footer address { font-style: normal; display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.footer .zone { color: var(--muted); }
.footer ul { display: grid; gap: var(--s-2); }
@media (min-width: 900px) { .footer .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contenido técnico (Cambio 19): tabla de síntomas, listas de comprobación y avisos de seguridad */
.prose h3 { margin-top: var(--s-5); }
.checks { max-width: 680px; margin-top: var(--s-4); }
.checks li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; background: var(--blue); }
.callout { max-width: 680px; margin-top: var(--s-4); border-left: 4px solid var(--blue); padding-left: var(--s-3); font-weight: 600; }
.ptable { width: 100%; max-width: 680px; margin-top: var(--s-4); border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.ptable caption { text-align: left; color: var(--muted); padding-bottom: var(--s-2); }
.ptable thead { position: absolute; left: -9999px; }
.ptable tr { display: block; border-top: 1px solid var(--line); padding-block: var(--s-3); }
.ptable tr:last-child { border-bottom: 1px solid var(--line); }
.ptable th[scope="row"] { display: block; text-align: left; font-size: var(--fs-body); font-weight: 600; padding-bottom: var(--s-2); }
.ptable td { display: block; padding-block: var(--s-1); }
.ptable td::before { content: attr(data-label); display: block; font: 400 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
@media (min-width: 720px) {
  .ptable thead { position: static; }
  .ptable { table-layout: fixed; }
  .ptable tr { display: table-row; padding: 0; border: 0; }
  .ptable th, .ptable td { display: table-cell; padding: var(--s-3); vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
  .ptable thead th { font: 400 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 0; }
  .ptable thead th:nth-child(1) { width: 22%; }
  .ptable thead th:nth-child(2), .ptable thead th:nth-child(3) { width: 39%; }
  .ptable th[scope="row"] { display: table-cell; font-size: var(--fs-small); padding: var(--s-3); }
  .ptable td::before { display: none; }
  .ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 1px solid var(--line); }
}