/* ==========================================================================
   RAHAZO · ostp-feedback.css  (se carga despues de ostp-fx.css)
   Retroalimentacion + emblema 3D · firma OSTP · @echoShift
   Pareja de: assets/js/modules/feedback.js y emblem.js
   Colorimetria: solo tokens de tokens.css (rojo-rahazo, rojo-senal,
   amarillo-seguridad, azul-senal, blanco-hueso, negro-asfalto, acero).
   ========================================================================== */

:root {
  --rz-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rz-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

/* --- 1. CURSOR PROPIO -------------------------------------------------- */
.rz-cursor,
.rz-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.has-cursor .rz-cursor,
.has-cursor .rz-cursor-ring { opacity: 1; }

html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor summary,
html.has-cursor label,
html.has-cursor [role="button"] { cursor: none; }

html.has-cursor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) { cursor: text; }

.rz-cursor::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--rojo-senal);
  box-shadow: 0 0 12px var(--rojo-senal);
  transition: transform 0.25s var(--rz-ease), width 0.25s var(--rz-ease), height 0.25s var(--rz-ease), border-radius 0.25s var(--rz-ease), background 0.25s;
}

.rz-cursor-ring::before {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 243, 239, 0.45);
  background: rgba(245, 243, 239, 0);
  transition:
    width 0.35s var(--rz-ease), height 0.35s var(--rz-ease), margin 0.35s var(--rz-ease),
    border-color 0.25s, background-color 0.25s, transform 0.2s var(--rz-ease), opacity 0.2s;
}

.rz-cursor-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font: 700 0.62rem/1 var(--font-body, 'Inter', sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco-hueso);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

/* enlaces y botones */
.cur-link .rz-cursor-ring::before {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-color: var(--rojo-senal);
  background: rgba(236, 85, 96, 0.12);
}
.cur-link .rz-cursor::before { transform: scale(0.5); }

/* CTA de cotizar: amarillo de seguridad */
.cur-cta .rz-cursor-ring::before {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-color: var(--amarillo-seguridad);
  background: rgba(245, 183, 0, 0.16);
}
.cur-cta .rz-cursor::before { background: var(--amarillo-seguridad); box-shadow: 0 0 14px var(--amarillo-seguridad); }

/* WhatsApp */
.cur-wa .rz-cursor-ring::before {
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-color: var(--whatsapp);
  background: rgba(37, 211, 102, 0.14);
}
.cur-wa .rz-cursor::before { background: var(--whatsapp); box-shadow: 0 0 12px var(--whatsapp); }

/* con etiqueta */
.cur-label .rz-cursor-ring::before {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: rgba(180, 21, 37, 0.55);
  border-color: var(--rojo-senal);
}
.cur-label .rz-cursor-label { opacity: 1; }

/* campos de texto: el punto es una barra */
.cur-text .rz-cursor-ring::before { opacity: 0; transform: scale(0.4); }
.cur-text .rz-cursor::before { width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 1px; }

.cur-down .rz-cursor-ring::before { transform: scale(0.78); }
.cur-hide .rz-cursor,
.cur-hide .rz-cursor-ring { opacity: 0; }

/* --- 2. ONDA AL PRESIONAR ---------------------------------------------- */
.rz-ripple {
  position: fixed;
  z-index: 9998;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--rojo-senal);
  pointer-events: none;
  animation: rz-ripple 0.8s var(--rz-ease) forwards;
}
.rz-ripple--cta { border-color: var(--amarillo-seguridad); }
.rz-ripple--wa { border-color: var(--whatsapp); }
.rz-ripple--idle { border-color: rgba(245, 243, 239, 0.5); border-width: 1px; }

@keyframes rz-ripple {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(11); opacity: 0; }
}

/* --- 3. MAGNETICOS: solo se anuncia el estado -------------------------- */
.is-magnet { will-change: translate; }

/* --- 4. TITULOS POR PALABRAS ------------------------------------------- */
.rz-split .rz-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.rz-split .rz-wi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.85s var(--rz-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.rz-split.is-split-in .rz-wi { transform: none; }

/* --- 5. LOGO DEL HEADER ------------------------------------------------ */
.site-header .brand {
  --rx: 0deg;
  --ry: 0deg;
  --sx: 50%;
  position: relative;
  display: inline-block;
  perspective: 420px;
}
.site-header .brand__logo {
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.25s var(--rz-ease), filter 0.28s ease, height 0.28s var(--rz-ease);
  transform-style: preserve-3d;
}
.site-header .brand::after {
  content: '';
  position: absolute;
  inset: 8% 4%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at var(--sx) 30%, rgba(255, 255, 255, 0.5), transparent 46%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s;
}
.site-header .brand:hover::after { opacity: 1; }

/* --- 6. FORMULARIOS ---------------------------------------------------- */
.rz-shake { animation: rz-shake 0.5s var(--rz-ease); }
@keyframes rz-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.rz-sparks {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
}

/* Aviso: entra con rebote, lleva barra de tiempo y marca de estado */
.toast {
  overflow: hidden;
  padding-left: var(--sp-6);
  transition: transform 0.55s var(--rz-ease), opacity 0.3s;
  box-shadow: var(--shadow-lg), 0 0 28px rgba(180, 21, 37, 0.25);
}
.toast::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--rojo-rahazo), var(--rojo-senal), var(--amarillo-seguridad));
  transform: scaleX(0);
  transform-origin: left;
}
.toast.is-visible::before { animation: rz-toast-time 5s linear forwards; }
@keyframes rz-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Campos: el foco ilumina el borde, no solo lo cambia */
.field:focus-within,
.choice-card:focus-within {
  box-shadow: 0 0 0 1px var(--rojo-senal), 0 0 22px rgba(236, 85, 96, 0.22);
  transition: box-shadow 0.3s var(--rz-ease);
}

/* Seleccion de tarjetas de opcion: pequeno rebote */
.choice-card:has(input:checked),
.choice-pill:has(input:checked) { animation: rz-pop 0.35s var(--rz-ease); }
@keyframes rz-pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Foco por teclado: visible y con la marca */
:focus-visible {
  outline: 2px solid var(--amarillo-seguridad);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(245, 183, 0, 0.18);
}

/* --- 7. TRANSICION DE PAGINA ------------------------------------------- */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background:
    url('/assets/img/brand/rahazo-logo.webp') center / min(220px, 46vw) auto no-repeat,
    radial-gradient(ellipse at 50% 50%, rgba(180, 21, 37, 0.32), transparent 58%),
    var(--negro-asfalto);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.46s var(--rz-ease-io);
}

html::after {
  content: '';
  position: fixed;
  left: 50%;
  top: calc(50% + 62px);
  z-index: 10000;
  width: 150px;
  height: 3px;
  margin-left: -75px;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rojo-senal), var(--amarillo-seguridad), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.2s;
}

html.is-leaving::before { clip-path: inset(0); }
html.is-leaving::after { opacity: 1; animation: rz-load 0.9s linear infinite; transition-delay: 0.25s; }

/* Llegada: arranca cubierta (sin animar) y se recoge hacia arriba */
html.is-arriving::before { clip-path: inset(0); transition: none; }
html.is-arriving::after { opacity: 1; animation: rz-load 0.9s linear infinite; }

@keyframes rz-load { to { background-position: -200% 0; } }

/* --- 8. EMBLEMA --------------------------------------------------------- */
.emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  isolation: isolate;
}

.emblem__img {
  width: min(100%, 760px);
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(180, 21, 37, 0.35));
  transition: opacity 0.5s ease;
}

.emblem__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: pan-y;
  filter: drop-shadow(0 0 46px rgba(180, 21, 37, 0.38));
  transition: opacity 0.6s ease;
}

.emblem.is-gl .emblem__canvas { opacity: 1; }
.emblem.is-gl .emblem__img { opacity: 0; }

/* --- MOVIMIENTO REDUCIDO ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rz-cursor, .rz-cursor-ring, .rz-ripple, .rz-sparks { display: none; }
  html::before, html::after { display: none; }
  .rz-split .rz-wi { transform: none; transition: none; }
  .rz-shake, .choice-card:has(input:checked), .choice-pill:has(input:checked) { animation: none; }
  .toast.is-visible::before { animation: none; transform: scaleX(1); }
}

/* --- TACTIL ------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .rz-cursor, .rz-cursor-ring { display: none; }
}

/* Seguro: si algo falla y la cortina de llegada no se retira, se abre sola */
html.is-arriving::before { animation: rz-failsafe 0.01s 3.5s forwards; }
@keyframes rz-failsafe { to { clip-path: inset(0 0 100% 0); } }

/* --- ZONAS TACTILES (WCAG 2.5.8 - objetivo 44 px) ------------------------
   Solo en pantallas tactiles o angostas: el escritorio con mouse no cambia. */
@media (pointer: coarse), (max-width: 899px) {
  .header-phone { min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar a:not(.topbar__hide-sm) { display: inline-flex; align-items: center; min-height: 36px; }
  .footer__links, .footer__contact { gap: 0; }
  .footer__links a, .footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
  .link-arrow { min-height: 44px; }
  .equip-card .equip-card__dots button { width: 32px; height: 32px; }
  .equip-card .equip-card__dots button::before { inset: 10px; }
}