/* ============================================================
   Apariciones al hacer scroll, utilidades y radios globales
   ============================================================ */

/* ------------------------------------------------------------
   Aparición al hacer scroll.

   Sólo se oculta si hay JavaScript vivo: la clase .js la pone el propio
   index.html. Sin esa condición, cualquier fallo del script dejaba el
   contenido en opacity:0 para siempre — viewports enteros en blanco.

   220 ms y 14 px de recorrido: con 800 ms y 30 px, más el escalonado por
   elemento, un bloque tardaba hasta 1,2 s en verse. A ritmo normal de
   scroll el visitante llegaba antes que la animación.
   ------------------------------------------------------------ */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .22s ease-out, transform .22s ease-out;
}
.js .reveal.in-view{ opacity:1; transform:none; }

/* Con menos movimiento pedido, el contenido se muestra y punto: no basta
   con acortar la transición, porque igual dependería de que el observador
   dispare. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.pill{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--yellow); border:1px solid var(--yellow); padding:var(--sp-2) var(--sp-3); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); }
.grid-2 > *{ min-width:0; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; gap:var(--sp-16); } }
.marca{ font-weight:700; }
.text-note{ font-family:var(--font-mono); font-size:var(--fs-lbl); color:var(--steel); line-height:1.7; }
.mt-8{ margin-top:var(--sp-2);} .mt-16{ margin-top:var(--sp-4);} .mt-24{ margin-top:var(--sp-6);} .mt-32{ margin-top:var(--sp-8);} .mt-48{ margin-top:var(--sp-12);} .mt-64{ margin-top:var(--sp-16);}

.btn, .form-group input, .form-group select, .form-group textarea,
.form-success, .pill, .prod-row, .flat-block,
.frame-tag, .variant-tag, .ficha-ref, .news-tag{
  border-radius:var(--radius-sm);
}
.form-panel, .split-media, .why-media, .variant-media, .foto img, .photo-strip .foto img, .lb-figure img, .map-embed{
  border-radius:var(--radius);
}
.ficha, .ind-featured, .fx{
  border-radius:var(--radius); overflow:hidden;
}
/* La foto va pegada al borde de la tarjeta: si además se redondea por dentro,
   se ve un doble filo. Manda el radio de la tarjeta. */
.ficha .ficha-media{ border-radius:0; }
/* La pestaña lateral nace fuera de la pantalla: sólo redondea el lado visible. */
.quote-tab{ border-radius:var(--radius) 0 0 var(--radius); }

/* ------------------------------------------------------------
   Utilidades que reemplazan estilos en línea que vivían en los .js.
   Llevan !important a propósito: el estilo en línea ganaba a toda regla
   de componente (incluidas las de móvil, p. ej. p.body-text{max-width:56ch})
   y estas clases deben comportarse exactamente igual.
   ------------------------------------------------------------ */
.mt-0{ margin-top:0 !important; }

.mt-20{ margin-top:var(--sp-5) !important; }
.m-0{ margin:0 !important; }
.mw-none{ max-width:none !important; }
.mw-16ch{ max-width:16ch !important; }
.mw-17ch{ max-width:17ch !important; }
.mw-20ch{ max-width:20ch !important; }
.mw-60ch{ max-width:60ch !important; }
.text-white{ color:var(--white) !important; }

/* Nota en mono sobre fondo oscuro (dirección de Puerto Montt en la portada):
   --steel es un gris para fondo claro; sobre oscuro se usa el de su escala. */
.on-dark .text-note{ color:var(--on-dark-500); }

/* ------------------------------------------------------------
   Área táctil: 44 × 44 px como mínimo sin cambiar el aspecto. Un ::before
   transparente agranda la zona que recibe el toque alrededor del elemento;
   lo que se ve no cambia. Cada valor cuida no pisar al vecino.
   ------------------------------------------------------------ */
.hero-dot, .hero-pausa, .btn-arrow, .filtro, .search-toggle, a.pill-line{ position:relative; }
.hero-dot::before, .hero-pausa::before, .btn-arrow::before, .filtro::before,
.search-toggle::before, a.pill-line::before{ content:""; position:absolute; }
.hero-dot::before{ inset:-21px -4px; }   /* 3 px de alto → 45; a los lados, la mitad del espacio entre puntos */
.hero-pausa::before{ inset:-14px; }      /* 16 → 44 */
.btn-arrow::before{ inset:-11px 0 -12px; } /* 22 → 44 (abajo suma el filete de 1 px) */
.filtro::before{ inset:-5px 0; }         /* 36 → 44 (el ::before se mide desde dentro del borde de 1 px); entre filas hay 8 px */
.search-toggle::before{ inset:-4px; }    /* 38 → 44 con su borde de 1 px */
@media (max-width:1180px){ .search-toggle::before{ inset:-3px; } }   /* aquí pierde el borde */
/* Teléfono, WhatsApp y correo de Contacto (pastillas con enlace): entre
   filas hay 8 px, así que cada una crece 4 px por lado fuera de su borde. */
a.pill-line::before{ inset:-5px 0; }