/* Tokens de color de la app (ver app-adimat/tailwind.config.js) */
:root {
  --verde: #1f5a3d;
  --verde-claro: #2f8a5b;
  --ambar: #d98a1f;
  /* Variante oscura para texto sobre fondos claros: la original no
     alcanza 4.5:1 de contraste (mismo ajuste que en la app, ver
     app-adimat/tailwind.config.js). */
  --ambar-oscuro: #8d5a14;
  --dorado: #f2b955;
  --arena: #f6f1e7;
  --texto: #16251c;
  --texto-secundario: #4b5a51;
  --contacto: #f2a71b;
  --contacto-texto: #0b3d2e;
  --boton-radio: 14px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--arena);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  padding-bottom: 88px; /* barra de contacto fija en celular */
}

h1,
h2,
h3 {
  font-family: Georgia, Cambria, serif;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

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

a {
  color: inherit;
}

.contenedor {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Botón base: 44px mínimo de alto, foco visible */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--boton-radio);
  border: none;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.boton:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
}

.boton-primario {
  background: var(--verde);
  color: #fff;
}

.boton-primario:hover {
  background: var(--verde-claro);
}

.boton-secundario {
  background: #fff;
  color: var(--verde);
  border: 2px solid var(--verde);
}

.boton-full {
  display: flex;
  width: 100%;
}

/* Portada */
.portada {
  background: var(--verde);
  color: #fff;
  padding: 40px 0 48px;
  text-align: center;
}

.portada .texto-pequeno {
  font-size: 0.85rem;
  color: var(--dorado);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.portada h1 {
  font-size: 1.9rem;
  line-height: 1.25;
}

.portada .subtitulo {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
}

.portada .botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 12px;
}

/* Dentro de la portada el fondo ya es verde, así que el botón primario
   usa dorado para no desaparecer contra el fondo. */
.portada .boton-primario {
  background: var(--dorado);
  color: var(--texto);
}

.portada .boton-primario:hover {
  background: var(--ambar);
}

.portada .enlace-ver-uso {
  display: inline-block;
  color: var(--dorado);
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
}

.franja-datos {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--boton-radio);
  padding: 16px;
  margin-top: 28px;
  text-align: left;
}

.franja-datos ul {
  margin: 0;
  padding-left: 20px;
}

.franja-datos li {
  margin-bottom: 6px;
  font-size: 0.92rem;
}

/* Secciones generales */
section {
  padding: 40px 0;
}

section h2 {
  color: var(--verde);
  font-size: 1.4rem;
}

/* Puertas */
.puertas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.puerta {
  background: #fff;
  border: 2px solid rgba(31, 90, 61, 0.15);
  border-radius: var(--boton-radio);
  padding: 20px;
}

.puerta h3 {
  color: var(--verde);
  font-size: 1.1rem;
}

.puerta p {
  color: var(--texto-secundario);
  font-size: 0.95rem;
}

.puerta .botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.puerta .boton {
  font-size: 0.92rem;
  padding: 10px 16px;
}

/* Cómo funciona */
.pasos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.paso {
  background: #fff;
  border-radius: var(--boton-radio);
  padding: 16px;
  border: 2px solid rgba(31, 90, 61, 0.12);
}

.paso h3 {
  color: var(--ambar-oscuro);
  font-size: 1rem;
  display: inline;
}

.paso p {
  display: inline;
  margin: 0;
}

.donde-lista {
  margin: 12px 0 0;
  padding-left: 20px;
}

.donde-lista li {
  margin-bottom: 6px;
}

/* Recursos */
.recursos-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--boton-radio);
  overflow: hidden;
  border: 2px solid rgba(31, 90, 61, 0.12);
}

.recurso-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  text-decoration: none;
  color: var(--texto);
}

.recurso-item .nombre {
  font-weight: 700;
}

.recurso-item .para {
  font-size: 0.82rem;
  color: var(--texto-secundario);
}

.recursos-nota {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--texto-secundario);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid rgba(31, 90, 61, 0.15);
  padding: 14px 0;
}

.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.faq-item p {
  color: var(--texto-secundario);
  margin-top: 8px;
}

/* Sobre nosotros */
.sobre-nosotros-bloque {
  margin-bottom: 20px;
}

.sobre-nosotros-bloque h3 {
  color: var(--verde);
  font-size: 1rem;
}

/* Pie */
footer {
  text-align: center;
  padding: 32px 20px;
  color: var(--texto-secundario);
  font-size: 0.85rem;
}

/* Barra de contacto fija (celular) / columna (escritorio) — mismo patrón
   que BloqueContacto.tsx de la app. Oculta hasta pasar el hero (regla v1.0
   rev2, 2026-10-20: en el hero ya está el botón central de WhatsApp) —
   script.js agrega la clase "visible" con un IntersectionObserver sobre
   #portada. Se desliza en vez de display:none para que la transición sea
   suave y no salte el layout. */
.contacto-barra {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--arena);
  border-top: 1px solid rgba(31, 90, 61, 0.15);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.contacto-barra.visible {
  transform: translateY(0);
}

.contacto-barra .boton {
  flex: 1;
  background: var(--contacto);
  color: var(--contacto-texto);
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  /* Sin padding-right reservado: el contenido (.contenedor, max-width
     640px, centrado) ya deja margen de sobra a los lados en 1280-1440px
     para que quepa esta columna sin encimarse ni dejar un hueco de color
     arena junto al fondo verde de la portada. */
  .contacto-barra {
    inset-inline: auto;
    right: 24px;
    top: 112px;
    bottom: auto;
    width: 196px;
    flex-direction: column;
    /* Tarjeta propia (no transparente): la columna flota tanto sobre el
       verde de la portada como sobre el arena del resto de la página, así
       que necesita su propio fondo para que "Habla con nosotros" se lea
       siempre, sin importar qué haya detrás. */
    background: var(--arena);
    border: 1px solid rgba(31, 90, 61, 0.15);
    border-radius: var(--boton-radio);
    padding: 16px;
    box-shadow: 0 4px 14px rgba(11, 30, 20, 0.12);
    /* En escritorio se desliza hacia la derecha en vez de hacia abajo. */
    transform: translateX(120%);
  }

  .contacto-barra.visible {
    transform: translateX(0);
  }

  .contacto-barra .titulo-contacto {
    display: block;
    color: var(--verde);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  .puertas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.titulo-contacto {
  display: none;
}

/* Secciones ocultas por bandera (caso/bitácora) */
[hidden] {
  display: none !important;
}