/* =============================================
   VARIABLES GLOBALES
   Aquí viven los colores y valores que usamos
   en toda la página. Si quieres cambiar algo
   de forma global, empieza por aquí.
============================================= */
:root {
    color-scheme: light;
    --bg: #ffffff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --border: rgba(0, 0, 0, 0.10);
    --text: #000000;
    --muted: #000000;
    --accent: #f2f3f5;
    --azul: #1a3a6b;          /* el azul principal de la marca */
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.12);
    --radius: 24px;
}
 
/* Reset básico — borramos márgenes y paddings
   por defecto del navegador para partir de cero */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
/* Fondo blanco para todas las páginas */
html,
body {
    min-height: 100%;
    background: #ffffff;
    color: var(--text);
    font-family: "Cinzel", serif;
    line-height: 1.5;
}
 
body {
    overflow-x: hidden;
}
 
/* nosotros y packs usan Inter, más legible para textos largos */
body.nosotros,
body.packs {
    font-family: "Inter", system-ui, sans-serif;
}
 
img {
    display: block;
    max-width: 100%;
    height: auto;
}
 
/* Reset de botones — quitamos el estilo por defecto
   del navegador para estilizarlos nosotros a mano */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
 
button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
}
 
 
/* =============================================
   BARRA DE NAVEGACIÓN SUPERIOR
   Se queda pegada arriba al hacer scroll (sticky).
   Fondo azul de la marca.
============================================= */
#main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;
    position: sticky;
    top: 0;
    backdrop-filter: blur(12px);
    background: var(--azul);
    z-index: 10;
}
 
/* El logo dentro del nav — cajita redondeada semitransparente */
.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
 
.logo img {
    height: 72px;
    width: auto;
}
 
/* Contenedor de los botones del menú */
.menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
 
/* Botones del menú y del footer — blancos con letra azul.
   Al hacer hover se invierten: fondo semitransparente, letra blanca */
.menu button,
.footer-links button {
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    border: 1px solid #ffffff;
    background: #ffffff;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: all 0.25s ease;
}
 
.menu button:hover,
.footer-links button:hover {
    color: #ffffff;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}
 
 
/* =============================================
   HERO — la sección grande de portada del index
   Ocupa casi toda la pantalla al entrar
============================================= */
#hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}
 
/* La tarjeta grande con la imagen de fondo */
.hero-card {
    position: relative;
    width: min(1080px, 98vw);
    height: min(820px, 82vh);
    border-radius: 38px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
 
/* La imagen de fondo del hero — ocupa todo el espacio */
.hero-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}
 
/* Capa oscura encima de la imagen para que el texto
   se lea bien sin importar qué imagen haya debajo */
.hero-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55));
    z-index: 1;
}
 
/* El contenido del hero (título, logo, botón) va encima
   de la imagen y del overlay */
.hero-card-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1.2rem;
    place-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 3rem 2rem;
}
 
/* Título principal del hero */
.hero-card-content h1 {
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #f5f7f9;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
}
 
/* El subtítulo debajo del título */
.tagline {
    max-width: 44rem;
    color: #d1d5da;
    letter-spacing: 0.16em;
}
 
/* El logo grande que aparece en el centro del hero */
.hero-logo {
    height: 220px;
    width: auto;
    margin: 0.4rem 0;
}
 
/* Botón de llamada a la acción ("Descubre más") */
.cta {
    padding: 1rem 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #f5f7f9;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transition: all 0.25s ease;
}
 
.cta:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}
 
 
/* =============================================
   SECCIÓN DE TARJETAS GRANDES (index)
   Grid que se adapta automáticamente al ancho
============================================= */
#featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}
 
/* Cada tarjeta grande del index */
.card {
    display: grid;
    gap: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow);
    padding: 1rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
 
/* Al pasar el ratón la tarjeta sube un poco */
.card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 0, 0, 0.15);
}
 
/* La imagen dentro de cada tarjeta */
.card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
}
 
/* Título de cada tarjeta */
.card-title {
    font-size: 1.4rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
 
/* Descripción corta debajo del título */
.card-desc {
    color: var(--muted);
    line-height: 1.9;
}
 
 
/* =============================================
   FOOTER — pie de página
   Mismo azul que el nav para que haga pareja
============================================= */
footer {
    background: var(--azul);
    padding: 2.5rem 2rem 3rem;
    color: #ffffff;
}
 
/* Layout interno: logo a la izquierda, links a la derecha */
.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
}
 
/* Logo del footer */
.footer-brand img {
    height: 68px;
    width: auto;
}
 
/* Título "Enlaces rápidos" en el footer */
.footer-nav h3 {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
}
 
/* Contenedor de los botones de navegación del footer */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
 
/* Texto de copyright al fondo del todo */
small {
    display: block;
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.5);
}
 
 
/* =============================================
   PÁGINAS INTERIORES (nosotros, packs)
   Estilos compartidos entre las páginas que no
   son el index — cabecera, subtítulo, botón inicio
============================================= */
 
/* Contenedor principal de cada página interior */
.page {
    min-height: 100vh;
    padding: 40px 20px 60px;
    background: #ffffff;
}
 
/* Bloque de cabecera con título y subtítulo */
.hero {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}
 
/* El textito pequeño de arriba tipo etiqueta */
.eyebrow {
    letter-spacing: 0.32em;
    color: var(--azul);
    font-size: 0.9rem;
    margin-bottom: 16px;
}
 
/* Título h1 — grande y llamativo */
h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 20px;
    color: #000000;
}
 
/* Subtítulo descriptivo debajo del h1 */
.subtitle {
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 720px;
    margin: 0 auto;
    color: #444;
}
 
/* Contenedor del botón "Inicio" al final de cada página interior */
.button-wrapper {
    text-align: center;
    margin-top: 42px;
}
 
/* Botón azul que lleva de vuelta al inicio —
   lo usan tanto nosotros.html como packs.html */
.home-button {
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.2s ease;
}
 
.home-button:hover {
    filter: brightness(1.15);
}
 
/* Rayita decorativa azul — usada en nosotros */
.divider {
    display: block;
    width: 50px;
    height: 3px;
    background: var(--azul);
    border-radius: 999px;
    margin-bottom: 18px;
}
 
/* Texto descriptivo de los bloques de contenido */
.description {
    line-height: 1.75;
    color: #555;
    font-size: 0.96rem;
}
 
 
/* =============================================
   ESTILOS BASE COMPARTIDOS — tarjetas interiores
   Tanto servicio-card (nosotros) como pack-card (packs)
   comparten este aspecto visual base
============================================= */
.servicio-card,
.pack-card {
    background: #f7f9fc;
    border: 1px solid rgba(26, 58, 107, 0.15);
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
 
/* Al pasar el ratón sube un pelín y el borde se nota más */
.servicio-card:hover,
.pack-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 58, 107, 0.35);
}
 
 
/* =============================================
   PÁGINA NOSOTROS — sección de servicios
============================================= */
 
/* Los 4 bloques apilados en columna, centrados */
.servicios {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}
 
/* Padding específico de cada bloque de servicio */
.servicio-card {
    padding: 32px 36px;
}
 
/* El número "01." grande en azul */
.servicio-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--azul);
    font-family: "Cinzel", serif;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}
 
/* Título del servicio */
.servicio-titulo {
    font-size: 1.4rem;
    color: #000000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: "Cinzel", serif;
}
 
/* Subtítulo en azul cursiva */
.servicio-subtitulo {
    color: var(--azul);
    font-size: 0.95rem;
    margin-bottom: 16px;
    font-style: italic;
}
 
 
/* =============================================
   PÁGINA PACKS — grid 2x2 de tarjetas
============================================= */
 
/* 3 columnas que se adaptan — en tablet 2, en móvil 1 */
.packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
 
/* Lista de características de cada pack */
.pack-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
 
/* Cada línea con un tick azul delante */
.pack-lista li {
    color: #555;
    font-size: 0.93rem;
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}
 
.pack-lista li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--azul);
    font-weight: 700;
}
 
/* Padding y layout interno de cada pack */
.pack-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
 
/* Contenedor de la imagen del pack */
.pack-img {
    width: 100%;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
}
 
/* La imagen ocupa todo el espacio sin deformarse */
.pack-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}
 
/* Título de cada pack */
.pack-titulo {
    font-size: 1.2rem;
    color: #000000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: "Cinzel", serif;
}
 
/* Descripción corta del pack */
.pack-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}
 
/* El footer de packs — barra azul con botón centrado */
.packs-footer {
    background: var(--azul);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
 
/* =============================================
   RESPONSIVE — adaptaciones para pantallas pequeñas
============================================= */
 
/* Tablet */
@media (max-width: 820px) {
    /* El nav se apila verticalmente */
    #main-nav {
        flex-direction: column;
        align-items: stretch;
    }
 
    /* Los botones del menú se centran */
    .menu {
        justify-content: center;
    }
 
    /* El hero se hace un poco más pequeño */
    .hero-card {
        width: min(92vw, 720px);
        height: min(620px, 66vh);
    }
 
    .hero-logo {
        height: 170px;
    }
 
    .hero-card-content {
        padding: 2.5rem 1.5rem;
    }
}
 
/* Móvil pequeño */
@media (max-width: 560px) {
    #main-nav {
        padding: 1rem;
    }
 
    .hero-card {
        width: min(92vw, 560px);
        height: min(520px, 62vh);
    }
 
    .hero-logo {
        height: 120px;
    }
 
    .hero-card-content {
        padding: 2rem 1.2rem;
    }
 
    #featured {
        padding: 2rem 1rem 3rem;
    }
 
    .card {
        padding: 0.9rem;
    }
 
    /* Los packs pasan a 2 columnas en tablet */
    .packs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .servicio-card {
        padding: 24px 20px;
    }
 
    .servicio-num {
        font-size: 1.5rem;
    }
 
    .servicio-titulo {
        font-size: 1.15rem;
    }
 
    /* Los packs pasan a una sola columna en móvil */
    .packs-grid {
        grid-template-columns: 1fr;
    }
 
    .pack-img {
        height: 140px;
    }
}
 
 
/* =============================================
   PÁGINA NOTICIAS — noticias.html
   Similar a nosotros en estructura pero con
   su propio sabor: fecha, tag de categoría
   y un borde izquierdo azul que la diferencia
============================================= */
 
body.noticias {
    font-family: "Inter", system-ui, sans-serif;
}
 
/* Las 4 noticias apiladas igual que los servicios de nosotros */
.noticias-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}
 
/* Cada noticia — borde izquierdo azul grueso para
   diferenciarla visualmente de las tarjetas de nosotros */
.noticia-card {
    background: #f7f9fc;
    border: 1px solid rgba(26, 58, 107, 0.12);
    border-left: 5px solid var(--azul);   /* el detalle que la hace distinta */
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 
.noticia-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
 
/* Fila superior con fecha y categoría */
.noticia-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
 
/* La fecha en gris discreto */
.noticia-fecha {
    font-size: 0.85rem;
    color: #888;
}
 
/* La etiqueta de categoría — pastilla azul pequeña */
.noticia-tag {
    background: var(--azul);
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
 
/* Título de la noticia — más grande que en nosotros
   para que se lea como un titular de periódico */
.noticia-titulo {
    font-size: 1.2rem;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 14px;
    font-family: "Cinzel", serif;
    letter-spacing: 0.04em;
}
 
/* En móvil la meta se apila */
@media (max-width: 560px) {
    .noticia-card {
        padding: 22px 18px;
    }
 
    .noticia-meta {
        flex-wrap: wrap;
    }
 
    .noticia-titulo {
        font-size: 1.05rem;
    }
}
 
 
/* =============================================
   PÁGINA CONSEJOS — consejos.html
   Misma estructura que noticias pero con icono
   emoji en vez de fecha, y borde izquierdo verde
   para diferenciarse visualmente
============================================= */
 
body.consejos {
    font-family: "Inter", system-ui, sans-serif;
}
 
/* Los 5 consejos apilados igual que las noticias */
.consejos-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}
 
/* Cada consejo — borde izquierdo verde para diferenciarlo
   de las noticias (que tienen borde azul) */
.consejo-card {
    background: #f7f9fc;
    border: 1px solid rgba(26, 58, 107, 0.12);
    border-left: 5px solid #2e7d4f;   /* verde — distinto de las noticias */
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 
.consejo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
 
/* Fila superior con icono y categoría */
.consejo-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
 
/* El emoji grande da carácter visual a cada consejo */
.consejo-icono {
    font-size: 1.4rem;
}
 
/* La etiqueta de categoría — pastilla verde */
.consejo-categoria {
    background: #2e7d4f;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
 
/* Título del consejo — mismo estilo que las noticias */
.consejo-titulo {
    font-size: 1.2rem;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 14px;
    font-family: "Cinzel", serif;
    letter-spacing: 0.04em;
}
 
/* En móvil menos padding */
@media (max-width: 560px) {
    .consejo-card {
        padding: 22px 18px;
    }
 
    .consejo-titulo {
        font-size: 1.05rem;
    }
}
 
 
/* =============================================
   PÁGINA CONTACTO — contacto.html
   Formulario a la izquierda, info a la derecha
============================================= */
 
body.contacto {
    font-family: "Inter", system-ui, sans-serif;
}
 
/* Contenedor principal: form + info en fila */
.contacto-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    max-width: 960px;
    margin: 0 auto;
    align-items: start;
}
 
/* La tarjeta que envuelve el formulario */
.contacto-form-card {
    background: #f7f9fc;
    border: 1px solid rgba(26, 58, 107, 0.15);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
 
/* El formulario en sí — columna de campos */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
 
/* Cada grupo label + input */
.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
 
/* Etiqueta del campo */
.form-grupo label {
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--azul);
    font-weight: 600;
}
 
/* Estilo compartido para inputs, select y textarea */
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    padding: 12px 16px;
    border: 1px solid rgba(26, 58, 107, 0.2);
    border-radius: 12px;
    background: #ffffff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.95rem;
    color: #000000;
    transition: border-color 0.2s ease;
    outline: none;
}
 
/* Al hacer foco el borde se vuelve azul */
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    border-color: var(--azul);
}
 
.form-grupo textarea {
    resize: vertical;
    min-height: 120px;
}
 
/* Botón de envío — azul de marca */
.form-btn {
    background: var(--azul);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: filter 0.2s ease;
    align-self: flex-start;
    margin-top: 6px;
}
 
.form-btn:hover {
    filter: brightness(1.15);
}
 
/* Mensaje de confirmación tras enviar */
.form-confirmacion {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 40px 20px;
}
 
/* El tick grande verde de confirmación */
.confirmacion-icono {
    font-size: 3rem;
    color: #2e7d4f;
}
 
/* Panel lateral con la info de contacto */
.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
 
/* Cada bloque de dato (dirección, teléfono...) */
.info-bloque {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f7f9fc;
    border: 1px solid rgba(26, 58, 107, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
}
 
/* El emoji de cada dato */
.info-icono {
    font-size: 1.3rem;
    margin-top: 2px;
}
 
/* Etiqueta pequeña tipo "Dirección" */
.info-label {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--azul);
    font-weight: 600;
    margin-bottom: 4px;
}
 
/* El dato en sí */
.info-valor {
    font-size: 0.93rem;
    color: #333;
    line-height: 1.6;
}
 
/* =============================================
   PACKS — bloque de sistema personalizado
   Va debajo del grid de 3 packs, ancho completo
============================================= */
.personalizado-wrapper {
    max-width: 860px;
    margin: 2rem auto 0;
}
 
/* Tarjeta del sistema personalizado — destaca con
   borde azul más marcado que los packs normales */
.personalizado-card {
    background: #f0f4fb;
    border: 2px solid var(--azul);
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 0 6px 24px rgba(26, 58, 107, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
 
/* En móvil el contacto se apila */
@media (max-width: 820px) {
    .contacto-wrapper {
        grid-template-columns: 1fr;
    }
}
 
@media (max-width: 560px) {
    .contacto-form-card {
        padding: 24px 18px;
    }
 
    .form-btn {
        align-self: stretch;
        text-align: center;
    }
}