/*
 * author: Awedoo Studio
 * template: Bicolor - Creative Coming Soon Template
 * version: v1.1
 * url: http://themeforest.net/user/awedoo
*/


/**** place custom style at this file ****/


/* ============================================================================
   IBEROCIENCIAS — rediseño de la portada (menú de los 3 programas)
   ----------------------------------------------------------------------------
   Todo el estilo propio vive AQUÍ. No se toca style.css ni bicolor.min.css:
   este archivo se carga al último, así que gana por orden de fuente.

   ⚠️ OJO con la regla ancha `.bg-home *:not(i):not(nav):after/:before`.
   Parece decorativa pero NO se puede borrar: de ahí sacan su color las barras
   del menú hamburguesa y los subrayaditos del nav. Solo se le cambia la paleta.
   Por eso las tarjetas nuevas evitan ::before/::after y usan elementos reales.

   Los colores de acento NO son inventados: se muestrearon de los propios
   logotipos (el pixel dominante de cada PNG).
       Iberociencias  #00A848  verde
       Orama          #C9971C  ámbar de la rueda
       Clubes         #0F3BA8  azul  (+ dorado #A8A818 en el logo)
       Cuento         #F07818  naranja
   ============================================================================ */

:root {
    --ic-verde: #00A848;
    --ic-verde-osc: #008038;
    --ic-tinta: #2E4A3B;      /* texto principal Y color de las curvas del fondo */
    --ic-texto: #46504A;
    --ic-suave: #74807A;
    --ic-fondo: #F2F7F3;
    --ic-superficie: #FFFFFF;
    --ic-borde: #E0EAE3;
    --ic-sombra: 20, 60, 40;
}


/* ---------------------------------------------------------------------------
   1. Paletas por sección
   El canvas del fondo se pinta con `$('#awd-site-wrap').css('color')`
   (main.js, awdCanvasDraw), así que el color de texto ES el de las curvas.
   Por eso se usa una tinta verde oscura: legible como texto y bonita como
   trazo, sin tener que desacoplar nada.
   --------------------------------------------------------------------------- */

/* Home */

.bg-home,
.bg-home nav:before {
    background-color: var(--ic-fondo);
    color: var(--ic-tinta);
}

.bg-home *:not(i):not(nav):after,
.bg-home *:not(i):not(nav):before,
.bg-home .btn:hover,
.bg-home .btn-inverse {
    background-color: var(--ic-verde);
    border-color: var(--ic-verde);
    color: #ffffff;
}


/* Contact */

.bg-contact,
.bg-contact nav:before {
    background-color: #EAF3EC;
    color: var(--ic-tinta);
}

.bg-contact *:not(i):not(nav):after,
.bg-contact *:not(i):not(nav):before,
.bg-contact .btn:hover,
.bg-contact .btn-inverse {
    border-color: var(--ic-verde);
    background-color: var(--ic-verde);
    color: #ffffff;
}

.bg-contact input,
.bg-contact textarea {
    border-color: #CBDDD1;
}


/* ---------------------------------------------------------------------------
   2. Fondo animado
   Las curvas del tema son bonitas pero venían demasiado marcadas (64 trazos a
   opacidad plena). Se bajan a un susurro para que no compitan con las tarjetas.
   El número de curvas se redujo en options.js.
   --------------------------------------------------------------------------- */

#awd-site-canvas {
    opacity: .16;
}


/* ---------------------------------------------------------------------------
   3. Cabecera y navegación
   --------------------------------------------------------------------------- */

#awd-site-logo h1 {
    margin: 0;
    line-height: 1;
}

#awd-site-logo h1 img {
    display: block;
    width: 240px;
    max-width: 62vw;
    height: auto;
}

.navigation ul > li a {
    color: var(--ic-tinta);
    opacity: .72;
    transition: opacity .25s, color .25s;
}

.navigation ul > li a:hover,
.navigation ul > li a.active {
    color: var(--ic-verde-osc);
    opacity: 1;
}


/* ---------------------------------------------------------------------------
   4. Zona de contenido
   El tema la fija con top/bottom absolutos. Se le da algo más de aire arriba
   porque el logotipo es una imagen alta, no el texto de 50px que traía.
   --------------------------------------------------------------------------- */

#awd-site-content {
    top: 155px;
    bottom: 100px;
}

.ic-home,
.ic-contact {
    font-size: 16px;           /* .slide-content trae font-size:0 */
    font-family: "Quicksand", sans-serif;
}


/* ---------------------------------------------------------------------------
   5. Entradilla
   --------------------------------------------------------------------------- */

.ic-intro {
    max-width: 700px;
    margin: 0 auto 34px;
}

.ic-lead {
    font-family: "Montserrat", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ic-tinta);
    margin: 0 0 10px;
}

.ic-sub {
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ic-verde-osc);
    margin: 0;
}

.ic-sub:after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    /* el background lo pone la regla ancha de .bg-home (verde) */
}


/* ---------------------------------------------------------------------------
   6. Las 3 tarjetas
   --------------------------------------------------------------------------- */

.ic-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
    text-align: left;
}

/* Cada tarjeta se tiñe MUY levemente con el color de su propio programa, en vez
   de llevar una barra de color arriba. El logotipo ya dice de qué color es cada
   proyecto — una franja encima solo repetía lo que la imagen ya comunica. */
.ic-card {
    --acento: var(--ic-verde);
    --acento-rgb: 0, 168, 72;

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 22px;
    background:
        linear-gradient(rgba(var(--acento-rgb), .045), rgba(var(--acento-rgb), .045)),
        var(--ic-superficie);
    border: 1px solid var(--ic-borde);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--ic-sombra), .05);
    text-decoration: none;
    color: var(--ic-texto);
    overflow: hidden;
    transition: transform .32s cubic-bezier(.2, .7, .3, 1),
                box-shadow .32s cubic-bezier(.2, .7, .3, 1),
                background .32s,
                border-color .32s;

    /* Entrada escalonada. `backwards` (no `both`) a propósito: con `both` la
       animación conservaría `transform:none` para siempre y le ganaría al
       transform del :hover — la tarjeta nunca se levantaría. */
    animation: ic-entra .6s cubic-bezier(.2, .7, .3, 1) backwards;
}

.ic-card--orama  { --acento: #C9971C; --acento-rgb: 201, 151,  28; }
.ic-card--clubes { --acento: #0F3BA8; --acento-rgb:  15,  59, 168; }
.ic-card--cuento { --acento: #F07818; --acento-rgb: 240, 120,  24; }

.ic-menu .ic-card:nth-child(1) { animation-delay: .05s; }
.ic-menu .ic-card:nth-child(2) { animation-delay: .16s; }
.ic-menu .ic-card:nth-child(3) { animation-delay: .27s; }

@keyframes ic-entra {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

.ic-card:hover,
.ic-card:focus {
    transform: translateY(-7px);
    border-color: rgba(var(--acento-rgb), .45);
    background:
        linear-gradient(rgba(var(--acento-rgb), .085), rgba(var(--acento-rgb), .085)),
        var(--ic-superficie);
    /* la sombra se tiñe del color del programa: se siente parte de la marca,
       no un rectángulo gris genérico flotando */
    box-shadow: 0 6px 16px rgba(var(--acento-rgb), .10),
                0 22px 46px rgba(var(--acento-rgb), .16);
    color: var(--ic-texto);
    text-decoration: none;
    outline: none;
}

.ic-card:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 3px;
}

/* Logotipo */

.ic-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    margin-bottom: 18px;
}

.ic-card-media img {
    max-height: 82px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}

.ic-card:hover .ic-card-media img {
    transform: scale(1.05);
}

/* Texto */

.ic-card-body {
    display: block;
    flex: 1 1 auto;
}

.ic-card-title {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--ic-tinta);
    margin-bottom: 9px;
}

.ic-card-text {
    display: block;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--ic-suave);
}

/* Llamada a la acción */

.ic-card-cta {
    display: block;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--ic-borde);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--acento);
    transition: border-color .32s;
}

.ic-card:hover .ic-card-cta {
    border-color: var(--acento);
}

.ic-card-cta i {
    margin-left: 6px;
    transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}

.ic-card:hover .ic-card-cta i {
    transform: translateX(5px);
}


/* ---------------------------------------------------------------------------
   7. Contacto
   --------------------------------------------------------------------------- */

.ic-contact {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 46px;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}

.ic-contact .section-title {
    font-size: 30px;
    margin-bottom: 18px;
    color: var(--ic-tinta);
}

.ic-contact-lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ic-suave);
    margin-bottom: 18px;
}

.ic-contact .contact-item {
    font-size: 16px;
    margin: 0;
}

.ic-contact .contact-item i {
    color: var(--ic-verde);
    margin-right: 8px;
}

.ic-contact .contact-item a {
    color: var(--ic-verde-osc);
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 168, 72, .35);
}

.ic-contact .contact-item a:hover {
    border-bottom-color: var(--ic-verde);
}

/* Campos */

.ic-field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.ic-contact .contact-form input,
.ic-contact .contact-form textarea {
    width: 100%;
    float: none;
    margin: 0;
    background: var(--ic-superficie);
    border: 1px solid #CBDDD1;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    letter-spacing: .3px;
    color: var(--ic-tinta);
    transition: border-color .25s, box-shadow .25s;
}

.ic-contact .contact-form textarea {
    height: 120px;
    resize: vertical;
}

.ic-contact .contact-form input:focus,
.ic-contact .contact-form textarea:focus {
    border-color: var(--ic-verde);
    box-shadow: 0 0 0 3px rgba(0, 168, 72, .14);
}

.ic-contact .contact-form .input-error {
    border-color: #ed5555;
}

.ic-contact .contact-form ::-webkit-input-placeholder { color: #9BAAA1; letter-spacing: .3px; font-size: 15px; }
.ic-contact .contact-form ::-moz-placeholder          { color: #9BAAA1; opacity: 1; }
.ic-contact .contact-form :-ms-input-placeholder      { color: #9BAAA1; }

/* Botón */

.ic-contact .contact-form .btn {
    width: auto;
    display: inline-block;
    margin-top: 14px;
    padding: 12px 28px;
    border-radius: 10px;
    border-width: 2px;
    border-color: var(--ic-verde);
    color: var(--ic-verde-osc);
    background: transparent;
    font-size: 13px;
    letter-spacing: 1.6px;
    transition: background .25s, color .25s, transform .18s;
}

.ic-contact .contact-form .btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.ic-contact .contact-form .btn:active {
    transform: translateY(0);
}

.ic-contact .contact-form .btn i {
    margin-left: 8px;
}

.ic-contact .contact-notice {
    margin-top: 12px;
    font-size: 15px;
}

.ic-contact .contact-notice .valid { color: var(--ic-verde-osc); }
.ic-contact .contact-notice .error { color: #ed5555; }


/* ---------------------------------------------------------------------------
   8. Pie
   --------------------------------------------------------------------------- */

.copyright p {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ic-suave);
    margin: 0;
}

.copyright a {
    color: var(--ic-verde-osc);
    font-weight: 700;
}

.social-icons ul > li a {
    color: var(--ic-suave);
    transition: color .25s, transform .25s;
    display: inline-block;
}

.social-icons ul > li a:hover {
    color: var(--ic-verde);
    transform: translateY(-3px);
}


/* ---------------------------------------------------------------------------
   9. Responsivo
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .ic-menu { gap: 18px; max-width: 940px; }
    .ic-card { padding: 22px 20px 18px; }
    .ic-card-text { font-size: 14px; }
}

@media (max-width: 900px) {
    #awd-site-content { top: 140px; bottom: 90px; }

    .ic-menu {
        grid-template-columns: 1fr;
        max-width: 560px;
        gap: 14px;
    }

    /* En pantalla angosta las tarjetas se vuelven horizontales: el logo a la
       izquierda y el texto a la derecha. Así las 3 caben sin un scroll eterno. */
    .ic-card {
        display: grid;
        grid-template-columns: 104px 1fr;
        grid-template-areas:
            "media body"
            "media cta";
        column-gap: 18px;
        align-items: center;
        padding: 18px 20px;
    }

    .ic-card-media {
        grid-area: media;
        height: auto;
        margin-bottom: 0;
    }

    .ic-card-media img { max-height: 58px; }

    .ic-card-body { grid-area: body; }

    .ic-card-cta {
        grid-area: cta;
        margin-top: 12px;
        padding-top: 10px;
        font-size: 12px;
    }

    .ic-lead { font-size: 21px; }
    .ic-intro { margin-bottom: 24px; }

    .ic-contact {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 560px;
    }

    .ic-field-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #awd-site-logo h1 img { width: 175px; }
    #awd-site-content { top: 130px; bottom: 86px; left: 16px; right: 16px; }
}

@media (max-width: 520px) {
    .ic-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body"
            "cta";
        text-align: center;
        row-gap: 4px;
        padding: 20px 18px;
    }

    .ic-card-media { margin-bottom: 12px; }
    .ic-card-media img { max-height: 62px; }
    .ic-lead { font-size: 19px; }
    .ic-sub { font-size: 13px; letter-spacing: 2px; }
}

/* Pantallas bajas (laptops de 13"): recorta aire para que no aparezca scroll */
@media (min-height: 0px) and (max-height: 700px) and (min-width: 901px) {
    #awd-site-content { top: 140px; bottom: 84px; }
    .ic-intro { margin-bottom: 22px; }
    .ic-card-media { height: 74px; margin-bottom: 12px; }
    .ic-card-media img { max-height: 66px; }
    .ic-card { padding: 20px 22px 16px; }
}


/* ---------------------------------------------------------------------------
   10. Accesibilidad: respetar a quien pidió menos movimiento
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ic-card,
    .ic-card-media img,
    .ic-card-cta i,
    .social-icons ul > li a,
    .ic-contact .contact-form .btn {
        animation: none !important;
        transition: none !important;
    }

    .ic-card:hover,
    .ic-card:focus {
        transform: none;
    }

    .ic-card:hover .ic-card-media img,
    .ic-card:hover .ic-card-cta i {
        transform: none;
    }
}