/* =============================================
   index.css: estilos propios de la portada
   ============================================= */

/* ----- 1. Hero ----- */

.contenedor-hero {
    max-width: 944px;
    margin: 0 auto;
    padding: 80px 24px;
    text-align: center;
}

/* Segunda parte del título: en su propia línea y en azul */
.destacado-cyan {
    display: block;
    margin-top: 16px;
    color: #0A7A90;
}

/* Párrafo del hero: más estrecho que el título, centrado y en gris */
.contenedor-hero p {
    max-width: 768px;
    margin: 0 auto;
    font-size: 1.125rem;
    /* 18px en móvil */
    line-height: 1.55;
    color: #6B7280;
}

/* Parte final del párrafo: seminegrita y casi negra */
.destacado-bold {
    font-weight: 600;
    color: #21242C;
}

/* Separación entre el párrafo y el botón */
.contenedor-hero .boton {
    margin-top: 64px;
}

/* 2. Problemas */

.contenedor-problemas {
    max-width: 944px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Lista de tarjetas: sin viñetas ni sangría, en filas */
.lista-problemas {
    margin: 0 0 64px;
    display: flex;
    flex-wrap: wrap; /* Si no caben en una fila, bajan a la siguiente */
    gap: 24px;
    justify-content: center;
    /* Para que los bloques de abajo estén centrados respecto a los de arriba */
}

/* Caja blanca con borde: la comparten las tarjetas de problemas, las de soluciones y las de los planes */
.tarjeta,
.solucion,
.plan {
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

/* Cada tarjeta: en móvil ocupa todo el ancho (los planes, igual) */
.tarjeta,
.plan {
    width: 100%;
    text-align: center;
}

/* Icono de la tarjeta arriba en el centro*/
.tarjeta img {
    display: block;
    width: 2.5rem;
    margin: 0 auto 16px;
}

.tarjeta p {
    margin: 0;
    line-height: 1.625;
}

/* Frases de cierre del bloque */
.frase-grande {
    margin: 0 0 16px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
}

.frase-final {
    max-width: 672px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.55;
    color: #6B7280;
}

/* 3. Somos DENTAI */

.contenedor-ancho {
    max-width: 1200px;
    /* 1152px de contenido + 24px de padding a cada lado */
    margin: 0 auto;
    padding: 80px 24px;
}

/* En este bloque el título va pegado al subtítulo */
.contenedor-ancho h2 {
    margin-bottom: 16px;
}

.subtitulo-somos {
    max-width: 768px;
    margin: 0 auto 48px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.4;
}

/* Columnas: en móvil, una debajo de otra */
.dos-columnas {
    display: flex;
    flex-direction: column; /* En móvil, las dos columnas una debajo de otra */
    gap: 32px;
}

.texto-somos p {
    margin: 0 0 20px;
    font-size: 1.125rem;
    color: #6B7280;
}

/* Lista con marcas: cada punto en una caja azul clara */
.lista-check li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background-color: #E7F9FD;
    border-radius: 10px;
}

.lista-check img {
    width: 1.25rem;
}

/* 4. Los 3 problemas */

.subtitulo-gris {
    margin: 0 0 48px;
    text-align: center;
    font-size: 1.25rem;
    color: #6B7280;
}

/* Cada tarjeta: icono a la izquierda y textos a la derecha */
.solucion {
    display: flex;
    align-items: flex-start; /*El icono se queda a la altura del titulo en cada bloque*/
    gap: 16px;
    margin-bottom: 16px;
}

/* La última tarjeta no necesita separación por debajo */
.solucion:last-child {
    margin-bottom: 0;
}

/* Icono dentro de un círculo azul claro(IA) */
.icono-circulo {
    flex-shrink: 0;
    width: 2.5rem;
    padding: 0.625rem;
    background-image: radial-gradient(circle closest-side, #E7F9FD 97%, transparent 100%);
}

.solucion h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.solucion p {
    margin: 0;
    font-size: 0.875rem;
    color: #6B7280;
}

/* Dato de pérdida, en rojo */
.solucion .perdida {
    margin-bottom: 8px;
    font-weight: 500;
    color: #DC2626;
}

/* Frase de la solución, en azul */
.solucion .solucion-titulo {
    font-weight: 700;
    color: #0A7A90;
}

/* 5. Planes */

/* Tarjetas en filas, centradas. Hueco: 40px entre filas y 24px entre columnas */
.lista-planes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 24px;
}

/* Cada plan: su contenido va en columna y centrado */
.plan {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Etiqueta: sube hasta quedar montada sobre el borde de la tarjeta.
   24px de padding + 1px de borde + 12px (media etiqueta) = 37px(IA) */
.etiqueta {
    margin: -37px 0 16px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: #E7F9FD;
    color: #0A7A90;
}

/* Icono grande: mismo círculo que .icono-circulo, pero de 64px(Los circulos de la seccion planes son mas grandes que los de la seccion problemas) */
.icono-grande {
    width: 4rem;
    padding: 1rem;
    margin-bottom: 16px;
}

.plan h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

/* Ventajas: lista con marcas, alineada a la izquierda */
.ventajas {
    width: 100%;
    margin: 0 0 24px;
    text-align: left;
}

.ventajas li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ventajas img {
    flex-shrink: 0;
    width: 1.25rem;
    margin-top: 2px;
}

/* Botón del plan: todo el ancho y siempre al fondo de la tarjeta */
.boton-plan {
    width: 100%;
    margin-top: auto;
    padding: 12px 16px;
    font-size: 1rem;
}

/* 6. Por qué la IA */

/* Para que las tarjetas sean más pequeñas en este caso */
.solucion-compacta {
    padding: 16px 20px;
}

.solucion-compacta h3 {
    margin-bottom: 4px;
}

/* Botón centrado al final del bloque */
.pie-bloque {
    margin-top: 48px;
    text-align: center;
}

/* 7. Por qué confiar */

.subtitulo-confianza {
    margin: 0 0 48px;
    text-align: center;
    font-size: 1.5rem;
}

/* "no generalistas": en gris y sin cursiva */
.subtitulo-confianza em {
    font-style: normal;
    color: #6B7280;
}

/* Tarjetas de 2 en 2, en un ancho más estrecho que el contenedor */
.lista-confianza {
    max-width: 896px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

/* Tarjetas mas grandes */
.solucion-amplia {
    width: 100%;
    margin-bottom: 0;
    padding: 32px;
}

.solucion-amplia p {
    font-size: 1rem;
    line-height: 1.625;
}

/* ----- 8. Llamada final ----- */

.contenedor-llamada {
    max-width: 944px;
    margin: 0 auto;
    padding: 96px 24px;
    text-align: center;
}

.contenedor-llamada p {
    max-width: 672px;
    margin: 0 auto 48px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #6B7280;
}

/* ----- Tamaños según el ancho de pantalla(Lo ha hecho la IA) ----- */

@media (min-width: 640px) {
    .contenedor-hero p {
        font-size: 1.25rem;
        /* 20px */
        line-height: 1.4;
    }

    .tarjeta,
    .plan {
        width: calc(50% - 12px);
    }
}

@media (min-width: 1024px) {
    /* El título del inicio es el único que llega a 52px */
    .contenedor-hero h1 {
        font-size: 3.25rem;
        /* 52px */
    }

    .contenedor-hero p {
        font-size: 1.5rem;
        /* 24px */
        line-height: 1.33;
    }

    .tarjeta,
    .plan {
        width: calc((100% - 48px) / 3);
    }

    /* Pantalla grande: las dos columnas una al lado de otra */
    .dos-columnas {
        flex-direction: row;
        align-items: center;
    }

    .dos-columnas>* {
        width: calc(50% - 16px);
    }

    /* 2 tarjetas de confianza por fila */
    .solucion-amplia {
        width: calc(50% - 16px);
    }

    .contenedor-llamada h2 {
        font-size: 3rem;
    }
}