/* Cotizador. Hereda los roles de tokens.css, así que la misma hoja sirve en la
   rama clara y en la oscura: sólo cambian los tokens. */

/* El nav es fijo y mide ~74px, pero crece a ~110px cuando el CTA se va a una
   segunda línea en pantallas angostas. El margen superior cubre el caso malo:
   sin esto, el título del paso 1 quedaba debajo de la barra. */
.coti { padding-block: clamp(7.5rem, 16vh, 9.5rem) clamp(3rem, 10vh, 6rem); }
.coti__paso {
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .6rem;
}
.coti__titulo { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.1; }
.coti__entrada {
  color: var(--texto-suave); max-width: 46ch; margin-top: .8rem; line-height: 1.6;
}

/* ── Tarjetas de elección ────────────────────────────────────── */
.opciones {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.opcion {
  display: grid; gap: .5rem; text-align: left;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: 4px;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .2s var(--e-suave), transform .2s var(--e-suave);
}
.opcion:hover, .opcion:focus-visible {
  border-color: var(--acento); transform: translateY(-2px);
}
.opcion__titulo { font-family: var(--f-display); font-size: var(--t-lg); }
.opcion__texto { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; }

/* Va arriba, justo debajo del indicador de paso: al final de un formulario
   largo nadie lo encontraba, y volver es algo que se decide al entrar a la
   pantalla, no después de recorrerla entera. */
.coti__volver {
  justify-self: start;
  margin: .1rem 0 .7rem; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--texto-suave); font-size: var(--t-sm); padding: .25rem 0;
}
.coti__volver:hover { color: var(--acento); }

/* ── Formulario ──────────────────────────────────────────────── */
.coti__form { margin-top: 2.4rem; display: grid; gap: 2.4rem; }
.bloque { display: grid; gap: 1.1rem; }
.bloque__titulo {
  font-family: var(--f-display); font-size: var(--t-lg);
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea);
}

.campo { display: grid; gap: .4rem; }
.campo--grupo { border: 0; padding: 0; margin: 0; }
.campo__eti {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}
.campo__nota { font-size: var(--t-xs); color: var(--texto-suave); line-height: 1.5; }
/* El :not() es necesario, no cosmético: sin él esta regla también le pegaba a
   los radios y casillas de los grupos, que son <input> dentro de un .campo.
   Les ponía width:100% y padding, así que el círculo ocupaba toda la línea y
   el texto de la opción quedaba exprimido en una columna de una palabra. */
.campo input:not([type="radio"]):not([type="checkbox"]),
.campo select, .campo textarea {
  font: inherit; color: var(--texto);
  background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: 3px;
  padding: .75rem .9rem;
  /* 16px reales: con menos, Safari en iPhone hace zoom al enfocar el campo. */
  font-size: max(1rem, 16px);
  width: 100%;
}
.campo textarea { min-height: 5.5rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent;
}

.opcs { display: grid; gap: .5rem; }
.opc {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .85rem; border: 1px solid var(--linea); border-radius: 3px;
  cursor: pointer; font-size: var(--t-sm); line-height: 1.45;
  transition: border-color .15s var(--e-suave);
}
.opc input {
  flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0;
  accent-color: var(--acento);
}
.opc span { flex: 1; min-width: 0; }
.opc:has(input:checked) { border-color: var(--acento); background: var(--fondo-alt); }
.opc:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

.coti__pie { display: grid; gap: .9rem; justify-items: start; }
.coti__legal { font-size: var(--t-xs); color: var(--texto-suave); }
.coti__aviso { font-size: var(--t-sm); color: var(--acento); min-height: 1.4em; margin-top: 1rem; }
.coti__aviso[data-error] { color: #b3261e; }

.coti__fin { display: grid; gap: 1.2rem; justify-items: start; max-width: 46ch; }

@media (min-width: 48rem) {
  .coti__form { max-width: 42rem; }
  .opciones--tres { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tema por rama ──────────────────────────────────────────────
   El cotizador atiende los dos negocios, así que se repinta según lo que
   elija el visitante: claro y dorado para invitaciones, oscuro y azul para
   desarrollo. Se redefinen sólo los roles —igual que hace web.css— y por eso
   los componentes de base.css se adaptan solos.

   Los valores se repiten aquí en vez de cargar web.css entero porque esa hoja
   trae además reglas de .nav, .pie y .wh__* que se aplicarían a esta página. */
body[data-tema="desarrollo"] {
  --fondo:       #08070d;
  --fondo-alt:   #141327;
  --texto:       #eceafd;
  --texto-suave: #9d9cc4;
  --linea:       rgba(236, 234, 253, .14);
  --acento:      #6b8cff;
  background: var(--fondo);
  color: var(--texto);
}
body[data-tema="desarrollo"] .nav.es-fija {
  background: rgba(8, 7, 13, .88);
  box-shadow: 0 1px 0 var(--linea);
}
body[data-tema="desarrollo"] .marca__nombre { color: var(--texto); }
body[data-tema="desarrollo"] .marca__studio { color: #a78bfa; }
body[data-tema="desarrollo"] .marca__sub { color: var(--texto-suave); }
/* El botón claro de base.css es negro sobre blanco: sobre fondo oscuro
   desaparece, así que se invierte. */
body[data-tema="desarrollo"] .btn--claro {
  --btn-fondo: transparent; --btn-texto: var(--texto); --btn-borde: var(--linea);
}
body[data-tema="desarrollo"] .btn--claro:hover {
  --btn-fondo: var(--acento); --btn-texto: #08070d; --btn-borde: var(--acento);
}
body[data-tema="desarrollo"] .btn:not(.btn--claro) {
  --btn-fondo: var(--acento); --btn-texto: #08070d; --btn-borde: var(--acento);
}
body[data-tema="desarrollo"] .coti__aviso[data-error] { color: #ff8a80; }
body[data-tema="invitaciones"] { background: var(--fondo); }

/* La transición evita que el cambio de rama se sienta como un parpadeo. */
body { transition: background-color .3s var(--e-suave), color .3s var(--e-suave); }

/* ── Fondo de partículas ────────────────────────────────────────
   Fijo y detrás de todo. `pointer-events:none` no es opcional: sin eso el
   lienzo se come los clics del formulario entero. */
.particulas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* El contenido vive encima del lienzo. */
.nav, .coti { position: relative; z-index: 1; }

/* ── Botón de música ────────────────────────────────────────────
   Vive en el nav, pegado al botón de volver. Flotando sobre el formulario
   tapaba campos y se leía como un elemento perdido en la página. */
.nav__acciones { display: flex; align-items: center; gap: .7rem; }
.musica {
  position: relative;
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
  background: transparent;
  border: 1px solid var(--linea);
  transition: color .2s var(--e-suave), border-color .2s var(--e-suave);
}
.musica:hover { color: var(--acento); border-color: var(--acento); }
.musica:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.musica.es-sonando { color: var(--acento); border-color: var(--acento); }
.musica.es-sonando::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--acento);
  opacity: .45; animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  to { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .musica.es-sonando::after { animation: none; }
}