/* Estilos globales y los pocos estados que no caben en un atributo `style`.
   El grueso del diseño viaja en estilos inline dentro de index.html, que los
   genera `tools/convert.mjs` desde el archivo de Claude Design: así las
   medidas y los colores nunca se separan de su fuente. Acá va solo lo que
   necesita un selector. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: #EFEDE4;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #0B2E28;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #5DCAA5; color: #0B2E28; }
a { color: #1D9E75; text-decoration: none; }
a:hover { color: #0B2E28; }
input::placeholder, textarea::placeholder { color: #7f968e; }

/* El nav mide unos 60px y es sticky: sin esto, un ancla deja el título tapado. */
[id] { scroll-margin-top: 72px; }

/* Los carruseles se deslizan con el dedo; la barra de scroll estorba. */
[style*="overflow-x:auto"] { scrollbar-width: none; -ms-overflow-style: none; }
[style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* Campos del formulario: el diseño los marcaba con `style-focus`. */
input:focus, textarea:focus { border-color: #5DCAA5 !important; }
button[type="submit"]:hover { background: #74d8b8 !important; }

/* La trampa para bots: fuera de la pantalla, nunca oculta con `display:none`,
   porque un bot que lee CSS descarta los campos escondidos así. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mientras una foto no exista, su marco queda a la vista con el rótulo de lo
   que va ahí. Es el estado normal hasta que entren los assets. */
img.sin-foto {
  background: #d9d5c6;
  position: relative;
}
img.sin-foto::after {
  content: attr(data-marco);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #6d6b5f;
  background: #d9d5c6;
  border-radius: inherit;
}

.faq-respuesta[hidden] { display: none; }

/* El acordeón y el CTA fijo se manejan desde app.js. Sin JavaScript, las
   respuestas quedan todas visibles y el CTA fijo no aparece: la página sigue
   sirviendo y el formulario se puede enviar igual. */
html.sin-js .faq-respuesta[hidden] { display: block; }

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