/* Paleta "Mar y Coral" (brand/02-visual-identity.md). Blanco sobre turquesa solo en tamaños grandes. */
:root {
  --turquesa: #17A398;
  --turquesa-oscuro: #0F7A72;
  --coral: #FF6F61;
  --coral-texto: #C0453A; /* coral oscurecido para texto: 4.7:1 sobre crema (WCAG AA) */
  --sol: #FFC83D;
  --tinta: #2A2B4A;
  --crema: #FFF7E8;
  --blanco: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 17px/1.55 "Nunito", system-ui, sans-serif;
}

h1, h2, .tagline, .boton, .sello { font-family: "Fredoka", "Nunito", sans-serif; }

h2 {
  margin: 0 0 .5rem;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--turquesa-oscuro);
}

a { color: var(--turquesa-oscuro); }

img { max-width: 100%; height: auto; }

.hero, main, footer {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero { padding-top: 2.5rem; text-align: center; }
.hero h1 { margin: 0; font-weight: 500; }
.logo { display: block; width: 15rem; margin: 0 auto; }
.tagline { display: block; margin: .25rem 0 1rem; font-size: 1.2rem; color: var(--coral-texto); }
.amigos { display: flex; justify-content: center; gap: .5rem; }
.amigos img { width: 6.5rem; }
.intro { font-size: 1.1rem; }
.chico { font-size: .9rem; opacity: .8; }

.boton {
  display: inline-block;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--coral);
  color: var(--tinta);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(42, 43, 74, .18);
}
.boton:hover, .boton:focus-visible { background: var(--sol); }

section {
  margin: 1.25rem 0;
  padding: 1.25rem;
  background: var(--blanco);
  border-radius: 1.25rem;
}

.pasos, .lista { margin: 0; padding-left: 1.25rem; }
.pasos li, .lista li { margin: .35rem 0; }

.nosotros { display: flex; gap: 1rem; align-items: flex-start; }
.nosotros img { width: 5.5rem; flex: none; }
.sello { margin-bottom: 0; font-weight: 600; color: var(--coral-texto); }

footer { padding-top: 1rem; padding-bottom: 2.5rem; text-align: center; font-size: .95rem; }
.redes { display: flex; justify-content: center; gap: .5rem; margin: 1rem 0 .25rem; font-weight: 700; }
/* Áreas táctiles de al menos 44 px */
.redes a, footer p a { display: inline-block; padding: .65rem .5rem; }

a:focus-visible, .boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

@media (max-width: 400px) {
  .nosotros img { width: 4rem; }
}

/* Página legal */
.legal { padding-top: 2rem; }
.legal .logo { width: 9rem; }
.legal h1 { font-size: 1.7rem; font-weight: 600; color: var(--turquesa-oscuro); margin: 1rem 0; }
.legal dl { margin: 0; }
.legal dt { font-weight: 700; }
.legal dd { margin: 0 0 .6rem; }