/*
 * Home pública de redEMC (resources/views/sitio/home.blade.php). Copia la home
 * de redemc.net: medidas, tipografías y colores tomados del CSS que genera
 * Elementor para esa página (post-114660.css), sin depender de WordPress.
 */

:root {
    --azul: #263ed6;
    --amarillo: #feb82b;
    --boton: #ffb720;
    --boton-hover: #ce5ea1;
    --tinta: #303030;
    --gris: #6a6a6a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: var(--tinta);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ------------------------------------------------------------- cabecera */

.cabecera { background: #fff; border-bottom: 1px solid #e8e8e8; }
.cabecera-in {
    max-width: 980px; margin: 0 auto; padding: 0 1.25rem;
    height: 128px; display: flex; align-items: center; justify-content: space-between;
}
.logo img { width: 220px; }
/* Medidas del menú de redemc.net: el lugar a la derecha era de las banderas (ya no están). */
.menu { display: flex; align-self: flex-start; margin: 28px 200px 0 auto; }
.menu a {
    display: block; padding: 25px 21px; line-height: 20px;
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none;
    color: #54595f; border-bottom: 3px solid transparent;
}
.menu a.activo { color: #1a56ed; border-bottom-color: #1a56ed; }
.menu a:hover { color: #1a56ed; }

/* -------------------------------------------------------------- portada */

.portada { background: var(--azul); color: #fff; overflow: hidden; }
.portada-in {
    position: relative; max-width: 1440px; margin: 0 auto;
    display: grid; grid-template-columns: 565px 155px 1fr; min-height: 530px;
}
.portada-texto { padding: 130px 30px 60px 128px; }
.portada h1 {
    margin: 0 0 22px; font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: 65px; line-height: 67px; letter-spacing: -2px;
}
.portada p { margin: 0; font-family: 'Questrial', sans-serif; font-size: 20px; line-height: 25px; }
.portada-bloque { background: #febe20; margin-top: 73px; height: 450px; }
.portada-fotos { display: grid; grid-template-columns: 1fr 1fr; height: 450px; margin-right: 40px; }
.portada-foto { background-size: cover; background-position: center; }
.portada-franja {
    display: grid; grid-template-columns: repeat(7, 1fr); max-width: 1176px; margin: 0 auto;
    padding: 14px 1rem 26px; text-align: center; font-family: 'Anton', sans-serif; font-size: 20px;
    letter-spacing: .7px; text-transform: uppercase; color: #fff;
}

/* --------------------------------------------------------------- cursos */

.cursos {
    max-width: 1140px; margin: 0 auto; padding: 65px 20px 60px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
}
.curso { display: flex; flex-direction: column; align-items: center; margin-bottom: 54px; }
.curso-tarjeta { display: block; width: 100%; text-decoration: none; }
.curso-tarjeta img { width: 100%; }
.boton {
    margin-top: 20px; padding: 12px 24px; background: var(--boton); color: #fff;
    font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 500; line-height: 15px;
    text-decoration: none; border-radius: 3px; transition: background .2s;
}
.boton:hover { background: var(--boton-hover); }

/* Tarjeta armada cuando el curso no tiene imagen propia para la home. */
.curso-generica {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px;
    aspect-ratio: 1024 / 709; padding: 24px 28px 30px; text-align: center;
    background: linear-gradient(#f3f3f5 0 22%, var(--azul) 22%); color: #fff;
    font-family: 'Montserrat', sans-serif;
}
.curso-fechas {
    background: #fdd000; color: var(--tinta); font-size: 13px; font-weight: 700;
    padding: 5px 14px; border-radius: 6px;
}
.curso-nombre { font-size: 21px; line-height: 1.25; }
.curso-nombre b { text-transform: uppercase; }
.sin-cursos { grid-column: 1 / -1; text-align: center; color: var(--gris); }

/* ----------------------------------------------------------- plataforma */

.plataforma { position: relative; overflow: hidden; background: var(--azul); margin-top: 36px; }
.plataforma-in {
    position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; min-height: 580px;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.plataforma h2 {
    margin: 0; font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: 40px; line-height: 50px; letter-spacing: -2px; color: #fff;
}
.plataforma img { width: 600px; }
.cuadrito { position: absolute; }

/* ------------------------------------------------------- características */

.caracteristicas {
    max-width: 1200px; margin: 87px auto 147px; padding: 0 0 0 26px;
    display: grid; grid-template-columns: repeat(5, 187px); column-gap: 53px; justify-content: start;
}
.caracteristica-icono {
    display: grid; place-items: center; width: 69px; height: 69px; color: #fff;
}
.caracteristica-icono svg { height: 43px; width: 43px; }
.caracteristica h3 {
    margin: 49px 0 20px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 40px;
    line-height: 1em; letter-spacing: -2px; color: var(--tinta);
}
.caracteristica p { margin: 0; font-family: 'Questrial', sans-serif; font-size: 16px; line-height: 22px; color: var(--tinta); }

/* --------------------------------------------------------------- números */

.numeros { display: grid; grid-template-columns: 1fr 1fr; max-width: 1324px; margin: 0 auto; min-height: 702px; }
.numeros-foto { position: relative; background-size: cover; background-position: left top; /* como redemc.net */ }
.numeros-panel { position: relative; background: var(--azul); display: flex; align-items: flex-start; padding: 137px 14% 0; }
.numeros ul { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 65px; }
.numeros li { display: flex; align-items: center; gap: 32px; }
.numeros li svg { flex: none; width: 53px; height: 53px; color: #fff; }
.numeros li svg .check-sombra { fill: #9d93d6; }
.numeros li span {
    font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 25px; line-height: 1.2;
    text-transform: capitalize; color: #fff;
}
.numeros-blanco, .numeros-violeta, .numeros-amarillo { position: absolute; bottom: 0; width: 155px; height: 155px; }
.numeros-blanco { right: 155px; background: #fff; }
.numeros-violeta { right: 0; background: #4551bf; }
.numeros-amarillo { right: 0; background: #e5c932; }

/* ---------------------------------------------------------------- socios */

.socios { margin: 120px auto 66px; max-width: 1140px; text-align: center; }
.socios h2 {
    margin: 0 0 -18px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 40px;
    line-height: 61px; letter-spacing: -2px; color: var(--tinta);
}
.socios-carrusel { overflow: hidden; padding: 0 30px; }
.socios-pista { display: flex; transition: transform .6s ease; }
.socio { flex: 0 0 20%; height: 207px; padding: 40px; display: grid; place-items: center; }
.socio img { max-height: 127px; object-fit: contain; }
.socios-puntos { display: flex; justify-content: center; gap: 8px; padding: 10px 0; }
.socios-puntos button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; }
.socios-puntos button.activo { opacity: 1; }

/* ---------------------------------------------------------------- somos */

.franja-amarilla + .somos { padding-top: 95px; }
.somos { padding: 60px 1.25rem 0; }
.somos-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 540px 1fr; }
.somos h2 {
    max-width: 400px; margin: 58px 0 0; font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: 65px; line-height: 64px; letter-spacing: -2px; color: var(--tinta);
}
.acordeon { margin-top: 5px; border-top: 1px solid #2e2e2e; }
.acordeon details { border-bottom: 1px solid #2e2e2e; }
.acordeon summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    padding: 33px 0; font-family: 'Questrial', sans-serif; font-size: 20px; line-height: 22px; color: #2e2e2e;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-size: 26px; font-weight: 700; line-height: 22px; }
.acordeon details[open] summary { color: #4551bf; }
.acordeon details[open] summary::after { content: '−'; }
.acordeon-texto {
    padding: 0 25% 5% 2%; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300;
    line-height: 1.4em; color: var(--gris);
}
.acordeon-texto a { color: #4551bf; }

/* Los bloques de colores con el signo de pregunta, abajo del título. */
.bloques { position: relative; height: 130px; margin-top: 134px; }
.bloques span { position: absolute; bottom: 0; }
.bloques .b1 {
    left: 0; width: 105px; height: 130px; background: #4452c4; color: #fff;
    font: 700 80px/130px 'Montserrat', sans-serif; text-align: center;
}
.bloques .b2 { left: 105px; width: 54px; height: 54px; background: #e2c932; }
.bloques .b3 { left: 159px; bottom: 54px; width: 54px; height: 54px; background: #a095d6; }
.bloques .b4 { left: 227px; bottom: 95px; width: 93px; height: 35px; background: #e2c932; }
.bloques .b5 { left: 227px; width: 93px; height: 95px; background: #f1aeae;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 52% 50%, 52% 100%, 0 100%); }
.bloques .b6 { left: 320px; bottom: 54px; width: 31px; height: 41px; background: #e5a09e; }

.franja-amarilla { height: 60px; background: #fdbe21; }

/* ------------------------------------------------------------------ pie */

.pie { background: #fafafa; }
.pie-in {
    max-width: 1160px; margin: 0 auto; padding: 55px 1.25rem 108px;
    display: flex; justify-content: space-between; gap: 2rem;
}
.pie-datos { max-width: 470px; font-size: 12px; letter-spacing: .2px; color: #404040; line-height: 21px; }
.pie-datos p { margin: 0 0 10px; }
.pie-datos a { text-decoration: none; }
.pie-datos svg { width: 14px; height: 14px; vertical-align: -2px; }
.pie-logo { width: 279px; margin-bottom: 10px; }
.pie-descripcion { margin-bottom: 10px !important; font-family: 'Montserrat', sans-serif; line-height: 21.6px; letter-spacing: -.5px; color: #000; }
.pie-direccion { margin-top: 37px !important; font-size: 13px; }
.pie-redes { display: flex; gap: 20px; padding-top: 28px; margin-right: 18px; }
.pie-redes a { display: grid; place-items: center; width: 32px; height: 32px; color: #111; }
.pie-redes svg { width: 16px; height: 16px; }
.copyright {
    margin: 0; padding: 26px 1rem; background: #fff; text-align: center;
    font-family: 'Montserrat', sans-serif; font-size: 12px; color: #000;
}

/* Botón flotante de WhatsApp. */
.wa {
    position: fixed; right: 62px; bottom: 60px; z-index: 10;
    width: 68px; height: 68px; border-radius: 50%; background: #48c95f; color: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.wa svg { width: 36px; height: 36px; }

/* -------------------------------------------------------------- celular */

@media (max-width: 1024px) {
    .menu { margin-right: 0; }
    .portada-franja { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
    .portada-in { grid-template-columns: 1fr; min-height: 0; }
    .portada-texto { padding: 70px 1.5rem 40px; }
    .portada h1 { font-size: 44px; line-height: 1.1em; }
    .portada p { font-size: 18px; }
    .portada-bloque { display: none; }
    .portada-fotos { height: 300px; margin: 0; }
    .somos-in { grid-template-columns: 1fr; }
    .plataforma-in { grid-template-columns: 1fr; padding: 60px 1.5rem; row-gap: 40px; min-height: 0; }
    .plataforma img { width: 100%; }
    .caracteristicas { grid-template-columns: repeat(auto-fill, minmax(187px, 1fr)); gap: 50px 40px; padding: 0 1.5rem; margin: 70px auto 90px; }
    .numeros { grid-template-columns: 1fr; }
    .numeros-foto { min-height: 360px; }
    .numeros-panel { padding: 80px 1.5rem 200px; }
    .socio { flex-basis: 33.333%; }
    .somos h2 { max-width: none; font-size: 44px; line-height: 1.1em; margin: 0 0 2rem; }
    .bloques { display: none; }
}

@media (max-width: 767px) {
    .cabecera-in { height: 76px; padding: 0 12px; }
    .logo img { width: 124px; }
    .menu { align-self: stretch; margin: 0 0 0 auto; }
    .menu a { display: flex; align-items: center; padding: 0 .7rem; letter-spacing: 1px; }
    /* Portada en celular, como redemc.net: texto alto, la barra amarilla pegada a la
       derecha hasta las fotos, fotos a todo el ancho y sin la franja de especialidades. */
    .portada-texto { padding: 120px 56px 90px 32px; }
    .portada p { font-size: 16px; line-height: 25px; padding-right: 0; }
    .portada-bloque { display: block; position: absolute; right: 0; top: 200px; bottom: 252px; width: 40px; height: auto; margin: 0; }
    .portada-fotos { height: 252px; }
    .portada-franja { display: none; }
    .cursos { grid-template-columns: 1fr; padding-top: 40px; }
    .curso { margin-bottom: 44px; }
    .acordeon summary { font-size: 17px; padding: 24px 0; }
    .plataforma h2 { font-size: 30px; line-height: 38px; }
    .cuadrito { display: none; } /* en una columna angosta tapaban el título */
    .numeros-blanco, .numeros-violeta, .numeros-amarillo { width: 80px; height: 80px; }
    .numeros-blanco { right: 80px; }
    .caracteristica h3 { margin-top: 28px; }
    .numeros li span { font-size: 21px; }
    .socios { margin: 70px auto 60px; }
    .socios h2 { font-size: 30px; line-height: 40px; margin: 0 0 10px; }
    .socio { flex-basis: 50%; padding: 24px; }
    .acordeon-texto { padding-right: 0; }
    .pie-in { flex-direction: column; padding-bottom: 50px; }
    .pie-redes { padding-top: 0; }
    .wa { right: 20px; bottom: 20px; width: 56px; height: 56px; }
}