/* =========================================================
   BLACK CELL 504 — Reparación y venta de móviles
   Hoja de estilos principal
   Sistema: minimalista, un solo acento, profundidad 3D sutil
   ========================================================= */

/* ---------- 1. Tokens / variables ---------- */
:root {
  /* Superficies */
  --bg: #08090c;
  --bg-alt: #0b0d12;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Texto */
  --text: #f3f4f6;
  --text-dim: #9aa1ac;
  --text-faint: #838a97;

  /* Marca — un único acento */
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --star: #f2b23c;
  --success: #34c281;

  /* Sombra / profundidad: deliberadamente suaves — la elegancia viene del
     espacio y la tipografía, no de sombras dramáticas. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 8px 20px -14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 20px 44px -22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, 0.58);

  /* Tipografía: una serif editorial para titulares (con personalidad propia,
     nada de la sans genérica que usa cualquier web de plantilla) + una sans
     limpia para el texto de lectura. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --nav-h: 66px;

  /* Movimiento */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  /* Un lavado neutro y muy sutil, sin tinte de color, solo para dar un
     poco de profundidad a la parte superior — el azul de marca queda
     reservado a los acentos puntuales (botones, enlaces, iconos). */
  background:
    radial-gradient(ellipse 60% 34% at 50% -6%, rgba(255, 255, 255, 0.028), transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* Enlace de accesibilidad */
.skip-link {
  position: absolute;
  top: -50px;
  left: 16px;
  background: var(--accent);
  color: #04060a;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 999;
  transition: top 0.25s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ver comentario en main.js: el foco que la intro mueve a #main al
   terminar es programático, no una interacción real, así que no debe
   dejar un contorno de foco trazado alrededor de toda la home. Se anula
   solo aquí, no en la regla general de arriba. */
#main.intro-auto-focus:focus-visible {
  outline: none;
}

/* ---------- 3. Header / navegación ---------- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(8, 9, 12, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--text);
}

.brand-mark {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
}

.brand-name strong {
  display: block;
  font-size: 0.93rem;
}
.brand-name span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text-dim);
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav-mobile {
  display: none;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.87rem;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 12px 24px -12px rgba(59, 130, 246, 0.55);
}
.btn-primary:hover {
  background: #4c8dfa;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(59, 130, 246, 0.6);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px -10px rgba(59, 130, 246, 0.5);
}

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-block { width: 100%; }
.btn-lg { padding: 12px 24px; font-size: 0.92rem; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 80vh, 660px);
  padding-top: var(--nav-h);
  padding-bottom: clamp(32px, 5vw, 60px);
  overflow: hidden;
  isolation: isolate;
}

/* Foto a pantalla completa: el taller real, no una maqueta de producto.
   Un degradado de dos direcciones (izquierda→derecha y abajo→arriba) deja
   el texto siempre legible sin tapar el trabajo de precisión de la foto. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
}
.hero-media img {
  object-fit: cover;
  object-position: 72% 40%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 6, 10, 0.94) 0%, rgba(5, 6, 10, 0.85) 32%, rgba(5, 6, 10, 0.4) 58%, rgba(5, 6, 10, 0.05) 78%),
    linear-gradient(to top, rgba(5, 6, 10, 0.85) 0%, rgba(5, 6, 10, 0.1) 42%, rgba(5, 6, 10, 0) 62%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Panel de lectura: antes el texto se apoyaba solo en el degradado de
   .hero-media::after, que depende de qué zona de la foto (clara u oscura)
   quede debajo — en móvil eso dejaba tramos poco legibles. Este panel
   semi-sólido con desenfoque de fondo garantiza contraste suficiente pase
   lo que pase en la foto, sin perder la textura de la imagen detrás. */
.hero-copy {
  max-width: 560px;
  padding: clamp(16px, 2.4vw, 26px) clamp(18px, 2.8vw, 28px);
  border-radius: var(--radius-lg);
  background: rgba(6, 7, 11, 0.66);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.eyebrow strong { color: var(--text); }

.hero h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 600;
  margin-bottom: 12px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero h1 .accent-word {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

.hero-lead {
  font-size: 0.97rem;
  color: rgba(230, 232, 238, 0.88);
  max-width: 50ch;
  margin-bottom: 20px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 34px);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-stats .stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text);
}
.hero-stats .stat span {
  font-size: 0.74rem;
  color: rgba(216, 219, 226, 0.75);
}

/* Sello de valoración: un dial de progreso (como un indicador de precisión
   de taller) en vez de la típica píldora "estrella + número" que repiten
   casi todas las webs con reseñas de Google. */
.rating-seal {
  position: absolute;
  top: calc(var(--nav-h) + 14px);
  right: clamp(16px, 3vw, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 15px 8px 8px;
  border-radius: 999px;
  background: rgba(12, 14, 20, 0.82);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-md);
}
.rating-seal-dial {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.rating-seal-dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.rating-seal-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 3.5;
}
.rating-seal-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* r=27 → circunferencia 169.6; 4.5/5 = 90% trazado */
  stroke-dasharray: 152.7 169.6;
}
.rating-seal-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--text);
}
.rating-seal-label {
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--text-faint);
}

/* ---------- 6. Secciones generales ---------- */
section {
  position: relative;
  z-index: 1;
  padding: clamp(44px, 6vw, 80px) 0;
}

.section-head {
  max-width: 580px;
  margin-bottom: clamp(26px, 4vw, 40px);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

.section-head h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-bottom: 10px;
}
.section-head p {
  color: var(--text-dim);
  font-size: 0.94rem;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 7. Servicios ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.tilt-card {
  position: relative;
  perspective: 900px;
}

.service-card {
  position: relative;
  height: 100%;
  padding: 22px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tilt-card:hover .service-card,
.tilt-card:focus-within .service-card {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.service-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  margin-bottom: 12px;
  transform: translateZ(28px);
}
.service-icon svg { width: 21px; height: 21px; }

.service-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  transform: translateZ(18px);
}
.service-card p {
  color: var(--text-dim);
  font-size: 0.86rem;
  transform: translateZ(18px);
}

/* ---------- 8. Por qué elegirnos ---------- */
.why {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
}
.why-media {
  position: relative;
}
.why-photo-stack {
  position: relative;
  height: clamp(230px, 26vw, 340px);
}
.why-photo-stack img {
  position: absolute;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.why-photo-1 {
  width: 70%;
  height: 80%;
  top: 0;
  left: 0;
  z-index: 2;
}
.why-photo-2 {
  width: 52%;
  height: 50%;
  bottom: 0;
  right: 0;
  z-index: 3;
  border: 5px solid var(--bg-alt);
}

.why-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.why-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.why-item .num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}
.why-item h4 { font-size: 0.95rem; margin-bottom: 3px; }
.why-item p { color: var(--text-dim); font-size: 0.87rem; }

/* ---------- 9. Proceso ---------- */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.process-step {
  position: relative;
}
.process-step .step-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.process-step .step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.process-step:hover .step-photo {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.process-step:hover .step-photo img { transform: scale(1.04); }
.process-step .step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.process-step h4 { font-size: 0.94rem; margin-bottom: 4px; }
.process-step p { font-size: 0.84rem; color: var(--text-dim); }

/* ---------- 10. Galería ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 8px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: zoom-in;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.35s var(--ease);
}
.gallery-item:hover {
  box-shadow: var(--shadow-md);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }

/* El texto "Ampliar" no tenía ninguna regla propia: se veía como texto
   plano encima de cada foto en vez de una pista que aparece al pasar el
   ratón. Se convierte en una etiqueta discreta, oculta hasta el :hover. */
.gallery-item .zoom-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 9, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}
.gallery-item:hover .zoom-hint,
.gallery-item:focus-visible .zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(4, 5, 7, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-strong);
}
.lightbox-close {
  position: absolute;
  top: 26px;
  right: clamp(20px, 4vw, 48px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close svg { width: 19px; height: 19px; }

/* ---------- 11. Reseñas ---------- */
.reviews {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Una cita grande y editorial en vez de la típica cuadrícula de tres
   tarjetas de testimonio — el mismo contenido real, con más carácter y
   sin repetir el patrón de "kicker + h2 + grid" que ya usan servicios,
   proceso y galería. */
.reviews-feature {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(20px, 3.5vw, 40px);
  align-items: stretch;
}

.review-feature {
  position: relative;
  padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 36px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.6rem;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 14px;
}
.review-feature .stars { color: var(--star); display: flex; gap: 2px; margin-bottom: 16px; }
.review-feature .stars svg { width: 14px; height: 14px; }
.review-feature blockquote { margin: 0 0 24px; }
.review-feature blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 500;
  line-height: 1.42;
  color: var(--text);
}

.reviews-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reviews-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.rating-seal-dial--lg { width: 54px; height: 54px; }
.rating-seal-dial--lg .rating-seal-num { font-size: 1.05rem; }
.reviews-rating-label { font-size: 0.78rem; line-height: 1.45; color: var(--text-dim); }

.reviews-mini { display: grid; gap: 10px; }
.reviews-mini li {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.reviews-mini p { color: var(--text-dim); font-size: 0.82rem; line-height: 1.48; margin-bottom: 4px; }
.reviews-mini b { font-size: 0.76rem; color: var(--text-faint); font-weight: 600; }

.reviews-aside > .btn { align-self: flex-start; }

.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text);
  flex-shrink: 0;
}
.review-author b { display: block; font-size: 0.85rem; }
.review-author span { display: block; font-size: 0.7rem; color: var(--text-faint); }

@media (max-width: 860px) {
  .reviews-feature { grid-template-columns: 1fr; }
}

/* ---------- 12. Contacto / ubicación ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.info-card,
.form-card,
.map-card {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.info-list { display: grid; gap: 14px; margin: 16px 0 20px; }
.info-row { display: flex; gap: 10px; align-items: flex-start; }
.info-row .ic {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-top: 2px;
}
.info-row .ic svg { width: 18px; height: 18px; }
.info-row h4 { font-size: 0.9rem; margin-bottom: 2px; }
.info-row p, .info-row a { color: var(--text-dim); font-size: 0.86rem; }
.info-row a:hover { color: var(--accent); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin-top: 4px;
}
.hours-table td { padding: 5px 0; color: var(--text-dim); border-bottom: 1px dashed var(--border); }
.hours-table td:last-child { text-align: right; color: var(--text); font-weight: 500; }
.hours-table tr:last-child td { border-bottom: none; }

.map-card { padding: 0; overflow: hidden; }
.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  filter: grayscale(0.5) invert(0.92) contrast(0.9);
}

.form-grid { display: grid; gap: 11px; margin-top: 16px; }
.form-row { display: grid; gap: 5px; }
.form-row label { font-size: 0.79rem; color: var(--text-dim); font-weight: 500; }
.form-row input,
.form-row select,
.form-row textarea {
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: border-color 0.2s var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
}
.form-row textarea { resize: vertical; min-height: 84px; }
.form-note { font-size: 0.75rem; color: var(--text-faint); margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-status {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 0.84rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(52, 194, 129, 0.1); border: 1px solid rgba(52, 194, 129, 0.35); color: #6ee7a8; }
.form-status.err { background: rgba(255, 80, 80, 0.1); border: 1px solid rgba(255, 80, 80, 0.35); color: #ff9d9d; }

/* ---------- 13. CTA final ---------- */
.cta-final {
  padding: clamp(44px, 6vw, 72px) 0;
}
.cta-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(34px, 6vw, 56px) clamp(20px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
/* Un cierre con más peso: una foto real del taller de fondo, muy oscurecida
   para que el texto siga siendo perfectamente legible — así el CTA final
   deja de ser una caja plana y hace de "segundo momento" de la home,
   haciendo eco del hero en vez de terminar en un bloque genérico. */
.cta-panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.cta-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, 0.8) 0%, rgba(8, 9, 12, 0.93) 100%),
    radial-gradient(ellipse 75% 95% at 50% 25%, transparent 10%, rgba(8, 9, 12, 0.55) 100%);
}
.cta-panel-content {
  position: relative;
  z-index: 1;
}
.cta-panel h2 {
  font-size: clamp(1.5rem, 2.7vw, 2rem);
  max-width: 600px;
  margin: 0 auto 10px;
}
.cta-panel h2 .accent-word {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}
.cta-panel p {
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 500px;
  margin: 0 auto 20px;
}
.cta-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- 14. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 22px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
.footer-brand p {
  color: var(--text-faint);
  font-size: 0.86rem;
  margin-top: 10px;
  max-width: 32ch;
}
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.footer-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.footer-social svg { width: 14px; height: 14px; }

.footer-col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.footer-col ul { display: grid; gap: 8px; }
.footer-col a { color: var(--text-dim); font-size: 0.86rem; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.76rem;
}
.footer-bottom a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--text-dim); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.76rem;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--text-dim); }

/* ---------- 15. WhatsApp flotante ---------- */
.wa-float {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 150;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 21px; height: 21px; color: #04140a; }

/* ---------- 16. Contador animado ---------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-media { order: 2; }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .reviews-feature { grid-template-columns: 1.3fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
  .brand-name span { display: none; }
  .brand-name strong { font-size: 0.9rem; white-space: nowrap; }
  .brand-mark { width: 30px; height: 30px; }
  .nav-cta { gap: 8px; }
  .site-nav-mobile {
    display: grid;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(8, 9, 12, 0.98);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 16px clamp(20px, 5vw, 40px) 22px;
    gap: 14px;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease);
    z-index: 99;
  }
  .site-nav-mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav-mobile a { font-size: 0.96rem; font-weight: 600; }
  .site-nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--border);
  }
  .process-track { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide { grid-column: span 2; }
  .hero-stats { gap: 18px; }

  .hero { min-height: clamp(440px, 78vh, 580px); align-items: flex-end; }
  .hero-media img { object-position: 50% 30%; }
  .hero-media::after {
    /* En móvil el texto ocupa casi todo el ancho: se prioriza el degradado
       inferior sobre el lateral para no dejar zonas de bajo contraste. */
    background:
      linear-gradient(to top, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.72) 38%, rgba(5, 6, 10, 0.22) 62%, rgba(5, 6, 10, 0.06) 100%);
  }
  /* La valoración ya aparece dentro de .hero-stats en móvil (mismo dato:
     4.5 / 44 reseñas), así que el sello flotante sobra ahí y además
     chocaba visualmente con la píldora "Abierto ahora". */
  .rating-seal { display: none; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 18. Intro: viaje por la placa base ---------- */
/* Oculta por defecto. Solo aparece cuando <html class="show-intro"> está
   presente (ver script inline en <head>). */
.intro-overlay {
  display: none;
}

html.show-intro .intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05060a;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  /* Solo opacity/transform: son las dos únicas propiedades que el
     navegador puede animar íntegramente en la GPU (composición), sin
     recalcular pintura en cada fotograma. Se probó con "filter: blur()"
     pero, sobre una capa a pantalla completa, blur exige repintar toda
     la escena en cada frame — es la causa típica de que una transición
     "de lujo" se note entrecortada, sobre todo en móviles de gama media.
     Este enfoque queda igual de suave en cualquier dispositivo. */
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  will-change: opacity, transform;
}

/* Al salir: se desvanece mientras crece un poco (efecto de "alejarse"),
   para que la transición se sienta como un fundido con movimiento y no
   como un corte brusco — sin usar filtros costosos de pintar. */
html.show-intro .intro-overlay.is-leaving {
  opacity: 0;
  transform: scale(1.045);
  pointer-events: none;
}

/* Viñeta suave para centrar la mirada — se retiró la textura de líneas de
   escaneado y el resplandor tipo "HUD" que sobraban frente al resto de la
   web, de tono mucho más calmado y editorial. */
html.show-intro .intro-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 50%, #05060a 100%);
  pointer-events: none;
}

.intro-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.4);
  z-index: 6;
}
html.show-intro .intro-progress {
  animation: introProgress 1.7s linear forwards;
}

@keyframes introProgress {
  to { width: 100%; }
}

@keyframes introFadeIn {
  to { opacity: 1; }
}

.intro-scene {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.intro-circuits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.28;
}
.intro-circuits .c-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.show-intro .intro-circuits .c-line {
  animation: introDraw 1s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.07s);
}
.intro-circuits .c-line:nth-child(1) { --i: 0; }
.intro-circuits .c-line:nth-child(2) { --i: 1; }
.intro-circuits .c-line:nth-child(3) { --i: 2; }
.intro-circuits .c-line:nth-child(4) { --i: 3; }
.intro-circuits .c-line:nth-child(5) { --i: 4; }
.intro-circuits .c-line:nth-child(6) { --i: 5; }
.intro-circuits .c-line:nth-child(7) { --i: 6; }
.intro-circuits .c-line:nth-child(8) { --i: 7; }

@keyframes introDraw {
  to { stroke-dashoffset: 0; }
}

.intro-circuits .c-pad circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
html.show-intro .intro-circuits .c-pad circle {
  animation: introPad 0.4s ease forwards;
  animation-delay: 0.95s;
}

@keyframes introPad {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}

.intro-layer {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(72vw, 820px);
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.5);
  transform: translateZ(-900px) scale(0.55);
  filter: blur(11px) brightness(0.6);
}
.intro-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Secuencia acortada y con un recorrido de profundidad más contenido: la
   idea de "las fotos del taller se van revelando" se mantiene, pero sin la
   sensación de "salto al hiperespacio" que desentonaba con el resto,
   mucho más sobrio, de la web. */
html.show-intro .intro-layer-1 { animation: introFlyPast 0.75s cubic-bezier(0.3, 0, 0.2, 1) forwards 0s; }
html.show-intro .intro-layer-2 { animation: introFlyPast 0.75s cubic-bezier(0.3, 0, 0.2, 1) forwards 0.25s; }
html.show-intro .intro-layer-3 { animation: introFlyPast 0.75s cubic-bezier(0.3, 0, 0.2, 1) forwards 0.5s; }
html.show-intro .intro-layer-4 { animation: introArrive 0.65s cubic-bezier(0.2, 0, 0.15, 1) forwards 0.78s; }

@keyframes introFlyPast {
  0%   { transform: translateZ(-900px) scale(0.55); opacity: 0; filter: blur(11px) brightness(0.6); }
  18%  { opacity: 1; filter: blur(5px) brightness(0.8); }
  55%  { transform: translateZ(-60px) scale(0.95); opacity: 1; filter: blur(0px) brightness(1); }
  100% { transform: translateZ(380px) scale(1.5); opacity: 0; filter: blur(3px) brightness(1.08); }
}

@keyframes introArrive {
  0%   { transform: translateZ(-900px) scale(0.55); opacity: 0; filter: blur(11px) brightness(0.6); }
  22%  { opacity: 1; filter: blur(4px) brightness(0.8); }
  100% { transform: translateZ(0) scale(1); opacity: 1; filter: blur(0px) brightness(1); }
}

.intro-brand {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.intro-brand svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.75));
  transform: scale(0.5);
}
html.show-intro .intro-brand {
  animation: introBrand 0.45s ease forwards 1.2s;
}
@keyframes introBrand {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
html.show-intro .intro-brand svg {
  animation: introBrandScale 0.45s cubic-bezier(0.25, 1, 0.4, 1) forwards 1.2s;
}
@keyframes introBrandScale {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1.35); }
}

.intro-caption {
  position: absolute;
  bottom: clamp(28px, 6vh, 56px);
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
}
html.show-intro .intro-caption {
  animation: introFadeIn 0.5s ease forwards 0.2s;
}

@media (max-width: 640px) {
  .intro-layer { width: 84vw; }
  .intro-brand svg { width: 52px; height: 52px; }
}

/* Refuerzo: si el sistema pide reducir movimiento, la intro nunca se
   muestra ni anima, aunque por algún motivo se hubiera activado la clase. */
@media (prefers-reduced-motion: reduce) {
  html.show-intro .intro-overlay {
    display: none !important;
  }
}

/* ---------- 19. Aviso de cookies (España: LSSI-CE + RGPD) ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 2vw, 20px);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-card {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(13, 15, 21, 0.92);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-lg);
}
/* flex-grow:0 a propósito: con flex-direction:column en móvil (más abajo),
   un flex-basis con grow:1 aquí estiraba el bloque de texto para llenar
   todo el alto disponible del contenedor — la causa real de que el aviso
   ocupara media pantalla. */
.cookie-copy { flex: 0 1 320px; }
.cookie-copy p {
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.cookie-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-actions .btn { white-space: nowrap; }

/* ---------- 20. Mapa: alternativa estática cuando no hay consentimiento ---------- */
.map-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px 24px;
  min-height: 220px;
  color: var(--text-dim);
}
.map-static .map-pin-big { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.map-static b { color: var(--text); font-family: var(--font-display); font-size: 1.02rem; }
.map-static span { font-size: 0.9rem; }
.map-static .btn { margin-top: 6px; }
.map-static .map-static-note { font-size: 0.78rem; color: var(--text-faint); max-width: 32ch; }

/* ---------- 21. Página legal ---------- */
.legal-page { padding: calc(var(--nav-h) + 48px) 0 100px; }
.legal-container { max-width: 760px; }
.legal-page h1 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  margin: 10px 0 6px;
}
.legal-updated { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 32px; }

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 44px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.legal-toc a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.legal-toc a:hover { color: var(--text); background: var(--surface-strong); }

.legal-section { margin-bottom: 52px; padding-top: 8px; }
.legal-section h2 {
  font-size: 1.4rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.legal-section h3 {
  font-size: 1.02rem;
  margin: 22px 0 8px;
  color: var(--text);
}
.legal-section p {
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: 12px;
}
.legal-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.legal-list { list-style: none; padding: 0; margin: 0 0 16px; }
.legal-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.95rem;
}
.legal-list li:last-child { border-bottom: none; }
.legal-list strong { color: var(--text); font-weight: 600; margin-right: 6px; }

.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(242, 178, 60, 0.08);
  border: 1px solid rgba(242, 178, 60, 0.3);
  color: #e8c27a;
  font-size: 0.85rem;
  line-height: 1.6;
}
.legal-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.legal-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.legal-table th {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .cookie-banner { padding: 0; }
  .cookie-card {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    border-radius: 0;
    border-width: 1px 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  /* En columna, flex-basis pasa a controlar el alto (no el ancho): el
     320px pensado para la fila de escritorio convertía este bloque en un
     rectángulo de 320px de alto. De ahí el hueco enorme. */
  .cookie-copy { flex: none; }
  .cookie-copy p { font-size: 0.8rem; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn {
    flex: 1;
    justify-content: center;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* ---------- 22. Cursor de soldador + humo ---------- */
/* Solo se activa por JS (ver initSolderFX en main.js) cuando el dispositivo
   tiene ratón/trackpad de precisión; en pantallas táctiles no se toca el
   cursor y en su lugar se suelta humo al arrastrar el dedo. Todo el módulo
   se desactiva entero con prefers-reduced-motion. */
html.custom-cursor-active,
html.custom-cursor-active a,
html.custom-cursor-active button,
html.custom-cursor-active input,
html.custom-cursor-active textarea,
html.custom-cursor-active select,
html.custom-cursor-active label,
html.custom-cursor-active .gallery-item {
  cursor: none;
}

/* Un anillo fino + un punto de acento cálido — discreto en reposo, se
   agranda sobre elementos interactivos. Nada de ilustraciones literales:
   los cursores personalizados de sitios cuidados usan formas geométricas
   mínimas, no íconos detallados. */
.solder-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  will-change: transform;
}
.solder-cursor.is-active { opacity: 1; }

.solder-cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1.3px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.solder-cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #ff9a52;
  box-shadow: 0 0 5px 0.5px rgba(255, 154, 82, 0.5);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.solder-cursor.is-hover .solder-cursor-ring {
  transform: scale(1.55);
  border-color: rgba(255, 154, 82, 0.7);
}
.solder-cursor.is-hover .solder-cursor-dot {
  transform: scale(0.35);
  opacity: 0.6;
}
.solder-cursor.is-pressed .solder-cursor-ring { transform: scale(0.8); }

.smoke-puff {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 227, 233, 0.4) 0%, rgba(224, 227, 233, 0) 72%);
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
  animation: smokeRise 1.1s ease-out forwards;
}
@keyframes smokeRise {
  0% { opacity: 0.4; transform: translate3d(0, 0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -44px, 0) scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
  .solder-cursor,
  .smoke-puff {
    display: none !important;
  }
  html.custom-cursor-active,
  html.custom-cursor-active a,
  html.custom-cursor-active button {
    cursor: auto;
  }
}