/*
Theme Name: tipotokiak
Theme URI: http://example.com/twentytwentyfive
Description: Twenty Twenty-Four Child Theme
Author: Your Name
Author URI: http://msbarrons.com
Template: twentytwentyfive
Version: 1.0.0
*/
/* Add your custom styles here */

:root {
    --color-rojo: #cf4054;
    --color-verde: #31ca54;
    --color-amarillo: #e9b975;
    --color-violeta: #d817de;
    --color-azul: #5fc1ff;
    --color-tema: #0000ff;
}
main {
    min-height: 100vh;
}
.page-id-518 main, .page-id-521 main, .page-id-524 main{
    padding-top: 120px !important;
}
/* Clases contenedoras que definen la variable */
.rojo, .single-accion, .page-id-35, .page-id-416 {
    --color-tema: var(--color-rojo);
}
.azul, .page-id-41, .page-id-426{
    --color-tema: var(--color-azul);
}
.verde,   .page-id-37, .page-id-410{
    --color-tema: var(--color-verde);
}

.amarillo, .page-id-39, .page-id-412 {
    --color-tema: var(--color-amarillo);
}
.page h1.wp-block-post-title {
    display: none;
}
header {
    z-index: 100000;
    position: fixed;
    width: 100%;
}
header #header.scrolled {
    background: var(--color-tema);
    backdrop-filter: blur(5px);
}
header #header.scrolled ul.polylang_langswitcher a{
    color: #fff !important;
}
.violeta, .home {
    --color-tema: var(--color-violeta);
}
*:focus{
    outline-width: 0;
    outline-style: none;
}
:lang(eu) .es{
  display: none !important;
}
:lang(es-ES) .eu{
  display: none !important;
}
ul.polylang_langswitcher {
    list-style: none;
    display: flex;
    gap: 1rem;
}
ul.polylang_langswitcher li:first-child {
    border-right: 1px solid;
    padding-right: 1rem;
}
ul.polylang_langswitcher {
    list-style: none;
    display: flex;
    gap: 1rem;
    font-size: 0.8em;
}
ul.polylang_langswitcher a {
    text-decoration: none;
}
.wp-block-quote {
    font-size: 2em;
    font-style: italic;
    font-weight: bolder;
    border: 0px;
    padding: 0px;
}
blockquote em {
    color: var(--color-tema);
}
.boxCard {
    background: #141522;
    padding: 2em;
    border-radius: 1.5em;
}
.boxCard p {
    font-size: .85rem;
}
.borderTop {
    border-top: 1px solid var(--color-tema);
    padding-top: 1rem;
}
main{
    overflow: hidden;
}
section {
    position: relative;
    padding-block: 1em !important;
}
.centrado {
    text-align: center;
}
.row {
    display: flex;
    gap: 2rem;
    flex-direction: row;
}
.row .col {
    flex: 1;
}
a.btn {
    display: block;
    text-decoration: none;
    padding: 1em 3em 1em 0.5em;
    border: 2px solid var(--color-tema);
    margin: 1em auto;
    width: fit-content;
    position: relative;
}
a.btn:after{
    content: "➜";
    margin-left: 1em;
    display: inline-block;
    width: 1.5rem;
    margin-right: 0.5em;
    TRANSITION: .6s;
    position: absolute;
}
a.btn:hover:after {
    margin-left: 1.3em;
}
a{
    color: var(--color-tema);
}
footer a{
    color: #fff;
}
.color{
    color: var(--color-tema);
}
.colorFooter{
    background-color: var(--color-tema);
}
#logoSection {
    position: relative;
}
.logoFooter {
    overflow: hidden;
    position: absolute;
    background-size: contain !important;
    background-repeat: no-repeat;
    height: 200px;
    bottom: 0px;
    z-index: -2;
    left: 0;
    width: 100%;
    background-position: bottom;
}
#videoSlider:before {
    display: block;
    content: '';
    background: linear-gradient(180deg, #090b1c, transparent);
    width: 100%;
    height: 7rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#videoSlider:after {
    display: block;
    content: '';
    background: linear-gradient(0deg, #090b1c, transparent);
    width: 100%;
    height: 7rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
#videoSlider h1 {
    text-shadow: 1px 4px 20px #00000096;
}
/*****monolitos***/
/* Animación base — combina movimiento vertical y ligera rotación */
@keyframes float-combo {
  0%   { transform: translateY(0px) rotate(0.0deg); }
  25%  { transform: translateY(-8px) rotate(-1deg); }
  50%  { transform: translateY(0px) rotate(0.3deg); }
  75%  { transform: translateY(8px) rotate(-0.6deg); }
  100% { transform: translateY(0px) rotate(0.0deg); }
}
.page-id-35 #contenedor-monolitos, .page-id-416 #contenedor-monolitos{
    left: 10%;
}
.page-id-41  #contenedor-monolitos, .page-id-426  #contenedor-monolitos{
    left: 30%;
}
.page-id-37 #contenedor-monolitos, .page-id-410 #contenedor-monolitos {
    left: 32%;
    /* display: flex; */
    height: 15%;
    transform: rotate(40deg);
    z-index: -1;
}
.page-id-39 #contenedor-monolitos, .page-id-412 #contenedor-monolitos {
    right: 50%;
    transform: rotate(45deg);
}
.page-id-39  #contenedor-monolitos img, .page-id-412 #contenedor-monolitos img{
    margin-top: 0!important;
}
.page-id-39 #contenedor-monolitos img.mono-2, .page-id-412 #contenedor-monolitos img.mono-2 {
    margin-left: 200px;
}
#contenedor-monolitos {
    position: fixed;
    top: 22vh;
    z-index: -2;
    opacity: 0;
    width: 15%;
    transition: .3s;
}
#contenedor-monolitos.monolito-fixed{
    opacity: 0.3;
}
#contenedor-monolitos img {
    width: 100%;
}
/* Asignar animación y variantes por imagen (duración y delay distintos) */
#contenedor-monolitos .mono-1 {
  animation: float-combo 5.6s ease-in-out infinite;
  animation-delay: 0s;
}

#contenedor-monolitos .mono-2 {
    animation: float-combo 6.8s ease-in-out infinite;
    animation-delay: 0.5s;
    margin-top: -22%;
    margin-left: 10%;
}

#contenedor-monolitos .mono-3 {
    animation: float-combo 5.0s ease-in-out infinite;
    animation-delay: 1s;
    margin-top: -33%;
    margin-left: 20%;
}
/******cookies****/
#cookies-eu-banner {
    background: #080a1b;
    padding: 2rem;
    font-size: .8rem !important;
}
footer{
    background: var(--color-tema);
}
/*****home******/
.home .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    margin-bottom: 0px !important;
}
.citaCabecera {
    color: #fff;
    font-size: 0.9rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    line-height: 2rem;
}
section#seccionClaves {
    color: #fff;
    font-size: 1.2em;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    line-height: 1em;
}
section#seccionClaves .wp-block-column {
    display: flex;
    border-left: 1px solid #ffffff3b;
    padding-left: 1em;
}
#seccionClaves ul.wp-block-list {
    list-style: none;
    position: relative;
    flex: 6;
    padding-top: 0px;
    margin-top: 0;
    min-height: 2em;
}
#seccionClaves li {
    position: absolute;
    margin-top: 0px;
    top: 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: 0.6s ease;
    width: 62%;
}
#seccionClaves li.visible {
    transform: translateY(0px);
    opacity: 1;
}

footer{
    margin-block-start: 0px !important;
}
#logoSection div:after {
    content: '';
    display: block;
    width: 30%;
    background: radial-gradient(var(--color-tema), transparent);
    aspect-ratio: 16 / 9;
    border-radius: 56%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(79px);
    opacity: 0.5;
    top: 58%;
}
.absoluto.Botom {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
#monolitoSection {
    min-height: 310px;
}
/*accion*/
.single-accion ::marker, .single-accion h3{
    color: var(--color-tema);
}
.single-accion .resumen {
    text-align: right;
    font-size: 1.3em;
}
.programacion-frontend {
    margin: 20px 0;
}
details.item-programacion {
    border-top: 2px solid var(--color-tema);;
    padding-top: 1rem;
}
.item-programacion summary {
    display: flex;
    justify-content: flex-start;
}
.item-programacion h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    flex: 3;
}
.hora-programacion {
    flex: 1;
}
.duracion {
    color: var(--color-tema);
    font-size: 0.8em;
    font-style: italic;
}
.descripcion-programacion {
    font-style: italic;
}
ol.datoslist {
    list-style: none;
}
li.boxCard::before {
    color: var(--color-tema);
    content: '[' counter(list-item) ']';
}
.row.dosCol p {
    margin-top: 0px;
}
.menuSocial {
    list-style: none;
    display: flex;
    gap: 1rem;
}
section#creditos {
    font-size: .85rem;
    max-width: 52%;
    margin: 0 auto;
}

/****** Quienes***/

#introQuienes:after {
    display: block;
    content: '';
    background: url(https://tipotokiak.karraskan.org/wp-content/uploads/2025/12/bgblue.gif);
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -3;
    top: 6rem;
    filter: blur(6px);
    background-repeat: no-repeat;
    /* background-size: cover; */
}
#seccionBgBlue:after{
    content: url('https://tipotokiak.karraskan.org/wp-content/uploads/2025/11/bluBg.png');
    display: block;
    position: absolute;
    animation: animate 40s linear infinite;   
    z-index: -1;
}
#seccionBgBlue:after {
    right: -27%;
    top: 0px;
}
/*********materiales*******/
#introAcciones:after, #accionesSection:after {
    content: '';
    background: url(https://tipotokiak.karraskan.org/wp-content/uploads/2025/11/redBg.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    animation: animate 40s linear infinite;
    z-index: -1;
    width: 37%;
    aspect-ratio: 1;
    filter: blur(27px);
}

#introAcciones:after {
    left: -21%;
    bottom: -115%;
}
#accionesSection:after {
    animation-delay: 2s;
    right: -13%;
    top: 0px;
}

@keyframes animate {

    0%{
        filter: blur(27px);
        transform:perspective(500px) translate3d(0px, 0, 0px) rotate(0deg);
    }

    50%{
        filter: blur(10px);
        transform:perspective(500px) translate3d(10px, 0, -100px) rotate(90deg) 
    }

    100%{
        filter: blur(27px);
        transform:perspective(500px) translate3d(0px, 0, 0px) rotate(0deg) ;
    }
}
/********sobre********/
.donutBg:after {
    display: block;
    content: '';
    background: url('https://tipotokiak.karraskan.org/wp-content/uploads/2025/12/bgrojo.gif');
    height: 100%;
    width:  100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -3;
    background-size: contain;
    opacity: 1;
    top: 25%;
    animation: mover 40s linear infinite;
}
@keyframes mover {

    0%{
        opacity:1;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: 1;
    }
}
#queSon.donutBg:after {
    animation-delay: .5s;
    left: 0% !important;
    transform: rotate(272deg) !important;
    bottom: 0;
}
#referencias:after {
    animation-delay: 1s;
    right: -20%;
    transform: rotate(61deg);
}
.separador p {
    color: var(--color-tema);
}
 hr {
    background: var(--color-tema);
}
.referenciaCard a.btn {
    margin-left: 0px;
    font-size: 0.8em;
}
summary {
    cursor: pointer !important;
    position: relative;
}
 summary:after{
    content: "➜";
    margin-left: 1em;
    display: inline-block;
    width: 1.5rem;
    margin-right: 0.5em;
    TRANSITION: .6s;
    position: absolute;
    right: 0;
}
details[open]  a{
    color: var(--color-tema) !important;
}
details[open] > summary:after {
    transform: rotate(90deg);
}
div#seccionBackground {
    filter: blur(30px);
    position: fixed;
    top: 10vh;
    left: 0;
    width: 50%;
    height: 50vh;
    z-index: -2;
    max-width: 100%;
}
#queSon h4 {
    flex: 3;
    margin-top: 0px;
}
#queSon figure {
    flex: 1;
}
#introSobre {
    background-size: contain !important;
    background-repeat: no-repeat;
}
.moreBorder {
    position: relative;
    border: 1px solid var(--color-tema);
    padding: 2rem;
}
.moreBorder:before {
    color: var(--color-tema);
    content: '+';
    height: 2rem;
    width: 2rem;
    position: absolute;
    top: -1px;
    background: #090b1c;
    left: -1px;
    line-height: 1rem;
    font-style: normal;
}
.bgContainer{
    animation: bgMove 20s linear infinite;
}
@keyframes bgMove {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 10% 0%;
    }
    50% {
        background-position: -10% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}
/******objetivos*****/


#introObjetivos:after {
    position: absolute;
    content: '';
    display: block;
    --size: 490px;
    --speed: 10s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    /* height: var(--size); */
    filter: blur(calc(var(--size) / 5));
    background-image: conic-gradient(from 180deg at 50% 50%, #00FFC2 0deg, #ffe100 120.07deg, #00ffa2 179.52deg, #fcff00 241.65deg, #0470E5 299.6deg, #00FFC2 360deg);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    /* background: url(https://tipotokiak.karraskan.org/wp-content/uploads/2025/12/donutverde.gif); */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -3;
    left: 25%;
}

@keyframes rotate {
    0% {
        height: 490px;
        transform: perspective(500px) translate3d(0px, 0, 0px) rotate(0deg);
    }
    50% {
        height: 190px;ransform: perspective(500px) translate3d(50px, 0, -50px) rotate(180deg);
    }
    100% {
        height: 490px;transform: perspective(500px) translate3d(100px, 0, -100px) rotate(360deg);
    }
}

@media (min-width: 720px) {
    .gradient {
        --size: 500px;
    }
}

/* This is just to transition when you change the viewport size. */
* {
    transition: all 0.5s ease-out;
}

/*****************/
.referenciasLoop {
    gap: 3rem;
}
.referenciasLoop li::before {
    color: var(--color-tema);
    content: '[' counter(list-item) ']';
    float: left;
    margin-right: 1em;
}

.referenciasLoop li .wp-block-group{
    padding: 0px !important;
}


/*****movil ******/

@media (max-width: 575px) {
  /* estilos para móviles */
    h1, #videoSlider h1 {
        font-size: 2.2rem !important;
    }
    h2 {
        text-align: center !important;
    }
    .noMvl{
        display: none;
    }
    .wp-block-quote {
        font-size: 1.3rem;
        padding-inline: 1rem;
        line-height: 1.2rem !important;
    }
    figure.alignright, figure.alignleft {
        margin-inline: auto !important;
        float: none !important;
    }
    header #header.scrolled {
        backdrop-filter: none !important;
    }
    .is-menu-open ul.wp-block-navigation__container {
        font-size: 1.5em;
        display: flex;
        width: 100%;
        justify-content: center;
        align-content: center;
    }
    .boxCard {
        padding: 1em;
    }
    .row {
        flex-direction: column;
        PADDING: 0px ! IMPORTANT;
    }
    section#creditos {
        max-width: 100%;
    }
    .home main {
        padding-top: 2rem !important;
    }
    figure.aligncenter.wp-block-post-featured-image {
        max-width: 100%;
        margin-top: 90px !important;
    }

}

@media (min-width: 768px) {
  /* estilos para tablets */
}

@media (min-width: 992px) {
  /* estilos para escritorio */
}