/* Todas las cajas miden su ancho contando padding y borde */
* {
    box-sizing: border-box;
}

/* Texto de toda la web en Figtree (si no carga, la del sistema) */
body {
    margin: 0;
    font-family: "Figtree", system-ui, "Segoe UI", Arial, sans-serif;
    color: #21242C;
}

/* Listas sin viñetas, números ni sangría: así son todas las de la web.
   El número de los 3 problemas ya va escrito en cada título, y las viñetas
   solo vuelven en el índice de la FAQ */
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Imágenes adaptables (apuntes de responsive): nunca más anchas que su caja.
   Sus tamaños van aquí, en el CSS, y en rem: unidad relativa */
img {
    max-width: 100%;
}

/* Títulos, logo y frases grandes en Unbounded */
h1,
h2,
h3,
h4,
legend,
.marca,
.frase-grande {
    font-family: "Unbounded", system-ui, sans-serif;
}

/* Título principal: tamaño para móvil (30px) */
h1 {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 32px;
}

/* Títulos de sección: centrados, tamaño para móvil (26px) */
h2 {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 48px;
}

/* Títulos de tarjeta */
h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Texto destacado dentro de un párrafo */
strong {
    font-weight: 600;
    color: #21242C;
}

/* Palabras en azul dentro de un título (se usa en las 3 páginas) */
.frase-azul {
    color: #0A7A90;
}

/* Enlace con aspecto de botón (se reutiliza en toda la web).
   Todos llevan borde, así todas las variantes miden lo mismo */
.boton {
    display: inline-block;
    padding: 24px 32px;
    background-color: #0A7A90;
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
    text-decoration: none;
    border: 2px solid #0A7A90;
    border-radius: 10px;
}

/* Al pasar el ratón por encima, el botón se oscurece */
.boton:hover {
    background-color: #08697C;
    border-color: #08697C;
}

/* Variante con borde: fondo blanco y texto azul */
.boton-borde {
    background-color: #FFFFFF;
    color: #0A7A90;
}

.boton-borde:hover {
    background-color: #E7F9FD;
    border-color: #0A7A90;
}

/* Variante blanca: borde gris y texto oscuro */
.boton-blanco {
    background-color: #FFFFFF;
    border-color: #E5E7EB;
    color: #21242C;
}

.boton-blanco:hover {
    background-color: #F3F4F6;
    border-color: #E5E7EB;
}

/* Icono dentro de un botón, alineado con el texto */
.icono-boton {
    width: 1.25rem;
    margin-right: 12px;
    vertical-align: middle;
}

/* Botones en fila; si no caben, bajan a la siguiente línea centrados */
.fila-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* En móvil, cada botón ocupa todo el ancho */
.fila-botones .boton {
    width: 100%;
}

/* A partir de 640px de ancho: títulos más grandes */
@media (min-width: 640px) {
    h1 {
        font-size: 2.5rem;
        /* 40px */
        line-height: 1.15;
    }

    h2 {
        font-size: 2rem;
        /* 32px */
    }

    .fila-botones .boton {
        width: auto;
    }
}

/* A partir de 1024px de ancho: tamaño final de los títulos */
@media (min-width: 1024px) {
    h2 {
        font-size: 2.5rem;
        /* 40px */
        line-height: 1.15;
    }
}