/* =====================================================================
   cumlaude.ar — home (réplica del diseño de la plataforma en Vercel)
   Colores: #66435a (violeta) · #321f2a (bordó oscuro) · Lato + Caveat
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --violeta: #66435a;
    --bordo: #321f2a;
    --texto: #171717;
    --gris: #6b7280;
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Lato', Arial, sans-serif;
    color: var(--texto);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.contenedor { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: 1px solid #e5e7eb; background: #fff; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.logo img { width: 72px; height: 72px; }
.cabecera-botones { display: flex; gap: 8px; align-items: center; }
.bt { font-size: 14px; padding: 6px 16px; border-radius: 6px; transition: opacity .2s; line-height: 1.5; }
.bt:hover { opacity: .85; }
.bt-borde { color: var(--violeta); border: 1px solid var(--violeta); }
.bt-lleno { color: #fff; background: var(--violeta); border: 1px solid var(--violeta); }

/* ---------- Hero ---------- */
main { flex: 1; }
/* Aire arriba y abajo, sin ocupar toda la pantalla: así se ven los banners de abajo */
.hero { padding: clamp(32px, 7vh, 88px) 0; }
.hero-grilla { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.hero .contenedor { padding-left: 32px; padding-right: 32px; }
h1 {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    color: var(--violeta);
    font-size: 4rem;
    line-height: .95;
    margin-bottom: 24px;
}
.hero-bajada { font-size: 18px; line-height: 1.6; color: #4b5563; max-width: 28rem; }

.tarjeta { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #f3f4f6; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.tarjeta-cabeza { background: var(--bordo); padding: 20px 32px; }
.tarjeta-cabeza h2 { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tarjeta-cuerpo { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.tarjeta-cuerpo > p:first-child { font-size: 14px; line-height: 1.6; color: var(--gris); }
.bt-registro {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px; border-radius: 8px;
    background: var(--violeta); color: #fff; font-weight: 700; font-size: 16px;
    transition: opacity .2s;
}
.bt-registro span { font-size: 18px; }
.bt-registro:hover { opacity: .9; }
.tarjeta-chico { font-size: 12px; color: #9ca3af; text-align: center; }
.tarjeta-chico a { text-decoration: underline; }
.tarjeta-chico a:hover { color: #4b5563; }

@media (min-width: 1024px) {
    .hero-grilla { grid-template-columns: 1fr 1fr; }
}

/* ---------- Banners ---------- */
.banners { background: linear-gradient(90deg, #ffffff 0%, #d4d4d4 100%); }
.banners-grilla { display: grid; grid-template-columns: 1fr; gap: 24px; justify-items: center; padding-top: 56px; padding-bottom: 56px; }
.banner {
    position: relative; width: 100%; max-width: 600px; height: 138px;
    overflow: hidden; display: flex; align-items: center; padding: 0 36px;
    transition: background-color .3s, color .3s;
}
.banner-texto { position: relative; z-index: 1; line-height: 1; }
.banner-sup { font-size: 24px; font-weight: 300; letter-spacing: .025em; }
.banner-tit { font-size: 36px; font-weight: 900; letter-spacing: .025em; }
.banner-inf { font-size: 16px; margin-top: 8px; opacity: .85; }
.banner-img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; }

/* Cadaver Lab Verona: negro → al pasar el mouse, blanco con letras negras */
.banner-clv { background: #141414; color: #fff; }
.banner-clv:hover { background: #fff; color: #000; }

/* Tabla reológica: bordó → al pasar el mouse, blanco con letras bordó */
.banner-tabla { background: var(--bordo); color: #fff; }
.banner-tabla:hover { background: #fff; color: var(--bordo); }
.banner-tabla .banner-img { object-fit: cover; }

@media (min-width: 1100px) {
    .banners-grilla { grid-template-columns: 1fr 1fr; }
    .banners-grilla .banner-clv { justify-self: end; }
    .banners-grilla .banner-tabla { justify-self: start; }
}

/* ---------- Footer ---------- */
.pie { background: var(--bordo); color: #fff; }
.pie .contenedor { max-width: 1152px; padding-top: 56px; padding-bottom: 32px; }
.pie-grilla { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
.pie-titulo { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; margin-bottom: 16px; }
.pie-texto { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 20rem; margin-bottom: 24px; }
.pie-grilla > div > a { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 12px; transition: color .2s; }
.pie-grilla > div > a:hover { color: #fff; }
.redes { display: flex; align-items: center; gap: 20px; }
.redes a { color: rgba(255,255,255,.85); transition: color .2s; }
.redes a:hover { color: #fff; }
.redes svg { width: 28px; height: 28px; display: block; }
.pie-base { border-top: 1px solid rgba(255,255,255,.4); padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.75); }
.pie-base a:hover { color: #fff; }

@media (min-width: 640px) {
    .pie-grilla { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .pie-base { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1024px) {
    .pie-grilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    width: 48px; height: 48px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
    transition: transform .3s;
}
.whatsapp:hover { transform: scale(1.1); }
.whatsapp img { width: 100%; height: 100%; }
@media (min-width: 768px) {
    .whatsapp { right: 32px; bottom: 32px; width: 56px; height: 56px; }
}

/* ---------- Utilidades ---------- */
@media (max-width: 767px) {
    .ocultar-movil { display: none; }
}
@media (max-width: 1023px) {
    .pie-grilla > .ocultar-movil { display: none; }
}

/* ---------- Celular: titular y banners más compactos ---------- */
@media (max-width: 640px) {
    h1 { font-size: 3rem; }
    .banner { padding: 0 24px; height: 120px; }
    .banner-sup { font-size: 19px; }
    .banner-tit { font-size: 28px; }
    .banner-inf { font-size: 14px; }
}