/*
Theme Name: Grupo LlanoPonte
Versión: 2.0.0
*/

/* ============================================================
   IMPORTS DE FUENTES
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
    --black:                 #000;
    --white:                 #fff;
    --theme:                 #C8A037;
    --header:                #151518;
    --text:                  #bbbbbb;
    --border:                #2A2A2A;
    --body-bg:               #151518;
    --bg:                    #1A1A1E;
    --color-mar-rinlo:       #2c87c9;
    --color-asadores-quinta: #df291e;
    --tipografia-body:       "Google Sans Flex", sans-serif;
    --tipografia-titulares:  "Google Sans Flex", sans-serif;
}

/* ============================================================
   RESET Y ESTILOS BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--tipografia-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 110%;
    color: var(--text);
    background-color: var(--white);
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

p {
    margin: 0;
    text-wrap: pretty;
    line-height: 160%;
    transition: all 0.4s ease-in-out;
}

ul  { padding: 0; margin: 0; list-style: none; }

button { border: none; background-color: transparent; padding: 0; }

input       { color: var(--white); }
input:focus { color: var(--white); outline: none; }

span { margin: 0; transition: all 0.4s ease-in-out; }

a {
    text-decoration: none;
    outline: none !important;
    cursor: pointer;
    color: var(--white);
    transition: all 0.4s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tipografia-titulares);
    margin: 0;
    padding: 0;
    color: var(--white);
    transition: all 0.4s ease-in-out;
    text-wrap: balance;
}

h1 { font-size: 150px; font-weight: 900; line-height: 95%; }
h2 { font-size: 36px;  line-height: 116%; font-weight: 700; }
h3 { font-size: 20px;  font-weight: 700;  line-height: 134%; }
h4 { font-size: 20px;  font-weight: 700;  line-height: 130%; }
h5 { font-size: 18px;  font-weight: 700; }
h6 { font-size: 16px;  font-weight: 600;  line-height: 145%; }

/* Small devices (landscape phones, 576px and up) */
@media (width >= 576px) {
    h2 { font-size: 45px; }
    h3 { font-size: 27px; }
}

/* Medium devices (tablets, 768px and up) */
@media (width >= 768px) {
    h2 { font-size: 55px; }
}

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    h2 { font-size: 65px; }
}

/* ============================================================
   COMPONENTES GLOBALES
   ============================================================ */

/* Utilidades */
.fix        { overflow: hidden; }
.body-bg    { background-color: var(--body-bg); }
.section-bg { background-color: var(--bg); }
.footer-bg  { background-color: #101012; }
.bg-cover   { background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; }

.ml-200 { margin-left: 0; }

@media (width >= 1200px) { .ml-200 { margin-left: 200px; } }

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--theme); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--theme); border-radius: 10px; }

/* Animación de entrada */
.img-custom-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@keyframes img-anim-left {
    0%   { transform: translateX(-5%); clip-path: inset(0 100% 0 0); opacity: 0; }
    100% { transform: translateX(0);   clip-path: inset(0 0 0 0);   opacity: 1; }
}

/* Botón principal */
.theme-btn {
    display: inline-block;
    vertical-align: middle;
    outline: none !important;
    color: var(--theme);
    font-size: 14px;
    font-weight: 700;
    padding: 18px 30px;
    transition: 0.5s ease-in-out;
    text-transform: capitalize;
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    border-radius: 30px;
    border: 1px solid rgba(207, 208, 212, 0.2);
    background: #1D1D21;
}
.theme-btn i { margin-left: 10px; }
.theme-btn::after {
    content: "";
    background-color: var(--theme);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    clip-path: circle(0% at 50% 50%);
    transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 0.8s;
    z-index: -1;
}
.theme-btn:hover         { color: var(--header); }
.theme-btn:hover::after  { clip-path: circle(100% at 50% 50%); transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 4s; }

/* Small devices (landscape phones, 576px and up) */
@media (width >= 576px) { .theme-btn { padding: 20px 32px; } }

/* Medium devices (tablets, 768px and up) */
@media (width >= 768px)  { .theme-btn { font-size: 17px; padding: 22px 40px; } }

/* Enlace con flecha */
.link-btn          { display: inline-block; font-size: 17px; font-weight: 700; text-transform: capitalize; color: var(--text); }
.link-btn:hover    { color: var(--theme); }

/* Título de sección */
.section-title         { position: relative; z-index: 99; margin-bottom: 30px; }
.section-title h6      { color: var(--text); font-weight: 700; text-transform: uppercase; font-size: 16px; line-height: 1; margin-bottom: 15px; }
.section-title h2 span { font-weight: 600; font-family: var(--tipografia-titulares); }

/* Nice Select (componente de formulario) */
.nice-select {
    background-color: transparent;
    border: transparent;
    float: initial;
    overflow: initial;
    height: initial;
    padding: 0;
    display: inline-flex;
    align-items: center;
    line-height: 150%;
    width: 100%;
    border: none;
}
.nice-select:focus,
.nice-select:hover           { border-color: transparent; }
.nice-select::after          { height: 8px; width: 8px; right: -25px; top: 15px; border-color: var(--header); border-bottom: 2px solid var(--header); border-right: 2px solid var(--header); }
.nice-select .list           { width: 100%; background-color: var(--theme); box-shadow: rgba(0,0,0,0.15) 0 3px 3px 0; top: 100%; padding: 0; max-height: 50vh; overflow-x: auto; right: -50px; }
.nice-select .list::-webkit-scrollbar        { width: 2px; display: block; }
.nice-select .list::-webkit-scrollbar-button,
.nice-select .list::-webkit-scrollbar-thumb { background: var(--header); }
.nice-select .option         { background-color: transparent; font-size: 16px; line-height: 150%; padding: 4px 5px; min-height: initial; font-weight: 500; }
.nice-select .option:hover,
.nice-select .option:focus,
.nice-select .option.selected.focus { background-color: transparent; }
.nice-select .current        { font-weight: 500; color: var(--header); }


/* ============================================================
   BANDA: banda_preloader
   Archivo: banda_preloader.html.twig
   ============================================================ */
.banda_preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}

.banda_preloader .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    z-index: 1;
    pointer-events: none;
}

.banda_preloader .loader .row               { height: 100%; }
.banda_preloader .loader .loader-section    { padding: 0; }

.banda_preloader .loader .loader-section .bg {
    background-color: var(--bg);
    height: 100%;
    width: 100%;
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

.banda_preloader.loaded .loader-section .bg {
    width: 0;
    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}


/* ============================================================
   BANDA: banda_cursor
   Archivo: banda_cursor.html.twig
   ============================================================ */
.banda_cursor .mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translateZ(0);
    visibility: hidden;
}

.banda_cursor .cursor-inner {
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: var(--theme);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
                margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.banda_cursor .cursor-inner.cursor-hover {
    margin-left: -35px;
    margin-top: -35px;
    width: 70px;
    height: 70px;
    background-color: var(--theme);
    opacity: 0.3;
}

.banda_cursor .cursor-outer {
    margin-left: -12px;
    margin-top: -12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--theme);
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.5;
    transition: all 0.08s ease-out;
}

.banda_cursor .cursor-outer.cursor-hover { opacity: 0; }


/* ============================================================
   BANDA: banda_volver_arriba
   Archivo: banda_volver_arriba.html.twig
   ============================================================ */
.banda_volver_arriba {
    border-radius: 50%;
    background-color: var(--theme);
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: var(--header);
    font-size: 18px;
    position: fixed;
    display: inline-block;
    z-index: 99;
    right: 30px;
    bottom: 30px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.banda_volver_arriba:hover { background-color: var(--header); color: var(--white); }

.banda_volver_arriba.show {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
}


/* ============================================================
   BANDA: banda_offcanvas
   Archivo: banda_offcanvas.html.twig
   ============================================================ */
.banda_offcanvas .offcanvas__info {
    background: var(--bg);
    border-left: 2px solid var(--theme);
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    transform: translateX(calc(100% + 80px));
    transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
    z-index: 99999;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.banda_offcanvas .offcanvas__info::-webkit-scrollbar { display: none; }

.banda_offcanvas .offcanvas__info.info-open { transform: translateX(0); opacity: 1; }

.banda_offcanvas .offcanvas__wrapper {
    position: relative;
    height: 100%;
    padding: 20px;
}

.banda_offcanvas .offcanvas__wrapper .text { color: var(--text); }

.banda_offcanvas .offcanvas__close {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--theme);
    position: relative;
    z-index: 9;
    cursor: pointer;
}

.banda_offcanvas .offcanvas__close i              { color: var(--header); }
.banda_offcanvas .offcanvas__contact              { margin-top: 20px; }
.banda_offcanvas .offcanvas__contact .titular_info { color: var(--theme); margin-top: 20px; }
.banda_offcanvas .offcanvas__contact ul           { margin-top: 20px; }

.banda_offcanvas .offcanvas__contact ul li {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.banda_offcanvas .offcanvas__contact ul li:not(:last-child)         { margin-bottom: 15px; }
.banda_offcanvas .offcanvas__contact ul li a                        { color: var(--text); }
.banda_offcanvas .offcanvas__contact ul li span                     { text-transform: initial; }
.banda_offcanvas .offcanvas__contact .offcanvas__contact-icon       { margin-right: 20px; }
.banda_offcanvas .offcanvas__contact .offcanvas__contact-icon i     { color: var(--theme); }

.banda_offcanvas .offcanvas__contact .header-button .theme-btn {
    width: 100%;
    padding: 20px 40px;
    text-transform: capitalize !important;
}

.banda_offcanvas .offcanvas__contact .social-icon { margin-top: 30px; gap: 10px; }

.banda_offcanvas .offcanvas__contact .social-icon a {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    display: block;
    background: transparent;
    color: var(--text);
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    border: 1px solid var(--border);
}

.banda_offcanvas .offcanvas__contact .social-icon a:hover { background-color: var(--theme); color: var(--header); }

/* Overlay de fondo */
.offcanvas__overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #151515;
    z-index: 900;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

.offcanvas__overlay.overlay-open { opacity: 0.8; visibility: visible; }

/* Small devices (landscape phones, 576px and up) */
@media (width >= 576px) {
    .banda_offcanvas .offcanvas__wrapper { padding: 30px; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_offcanvas .offcanvas__info { width: 400px; }
}


/* ============================================================
   BANDA: banda_cabecera
   Archivo: banda_cabecera.html.twig
   ============================================================ */
.banda_cabecera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.banda_cabecera .container-fluid { padding: 0 30px; }

.banda_cabecera .header-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 0;
}

.banda_cabecera .header-main .header-right  { gap: 20px; }
.banda_cabecera .header-main .sidebar__toggle { cursor: pointer; font-size: 28px; }

.banda_cabecera .main-menu ul { margin-bottom: 0; }

.banda_cabecera .main-menu ul li {
    list-style: none;
    display: inline-block;
    margin-inline-end: 50px;
    position: relative;
}

.banda_cabecera .main-menu ul li:last-child { margin-inline-end: 0; }

.banda_cabecera .main-menu ul li a {
    display: inline-block;
    font-size: 19px;
    font-weight: 500;
    color: var(--white);
    padding: 0;
    letter-spacing: 1px;
    text-transform: capitalize;
    transition: all 0.4s ease-in-out;
}

.banda_cabecera .main-menu ul li a i { margin-left: 4px; font-size: 14px; }

.banda_cabecera .main-menu ul li a:hover,
.banda_cabecera .main-menu ul li:hover > a { color: var(--theme); }

/* Estado sticky (clase añadida por JS al hacer scroll) */
.banda_cabecera.sticky {
    position: fixed !important;
    top: 0 !important;
    width: 100%;
    z-index: 100;
    background-color: #181818;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}

/* Meanmenu (menú móvil — estilos del plugin) */
.mean-container a.meanmenu-reveal   { display: none !important; }
.mean-container .mean-nav           { background: none; margin-top: 0; }
.mean-container .mean-bar           { padding: 0; min-height: auto; background: none; }
.mean-container .mean-nav > ul      { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; }

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 10px 0;
    color: var(--white);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border) !important;
    border: none;
}

.mean-container .mean-nav ul li a:hover        { color: var(--theme); }
.mean-container .mean-nav ul li a:last-child   { border-bottom: 0; }
.mean-container .mean-nav ul li a.mean-expand  { margin-top: 5px; padding: 0 !important; }
.mean-container .mean-nav ul li > a > i        { display: none; }
.mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; font-size: 18px; }
.mean-container .mean-nav > ul > li:first-child > a { border-top: 0; }
.mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); transition: all 0.4s ease-in-out; }

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_cabecera .container-fluid          { padding: 0 40px; }
    .banda_cabecera .header-main .header-right { gap: 35px; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (width >= 1400px) {
    .banda_cabecera .container-fluid { padding: 0 100px; }
}


/* ============================================================
   BANDA: banda_hero
   Archivo: banda_hero.html.twig
   ============================================================ */
.banda_hero {
    padding: 100px 0 30px;
    position: relative;
    z-index: 9;
    overflow: hidden;
}

.banda_hero .hero-content { position: relative; }

.banda_hero .hero-content .color-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.banda_hero .hero-content .color-bg img { opacity: 0.3; }

.banda_hero .hero-content p {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 100%;
    margin-bottom: 10px;
    font-weight: 600;
}

.banda_hero .hero-content h1 {
    font-size: 2.4rem;
    letter-spacing: 20px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 100%;
    text-align: center;
}

.banda_hero .hero-content h1 img       { display: none; vertical-align: baseline; }
.banda_hero .hero-content h1 .text-2   { letter-spacing: 5px !important; }

.banda_hero .hero-image        { margin-top: 10px; height: 80px; }
.banda_hero .hero-image img    { width: 100%; height: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (width >= 576px) {
    .banda_hero                  { padding: 100px 0 0; }
    .banda_hero .hero-content p  { font-size: 15px; }
    .banda_hero .hero-content h1 { font-size: 4rem; }
    .banda_hero .hero-image      { height: 110px; }
}

/* Medium devices (tablets, 768px and up) */
@media (width >= 768px) {
    .banda_hero .hero-content h1         { font-size: 5.2rem; }
    .banda_hero .hero-content h1 .text-2 { letter-spacing: 10px !important; }
    .banda_hero .hero-content p          { font-size: 18px; }
}

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    .banda_hero                        { padding: 170px 0 100px; }
    .banda_hero .hero-content h1       { font-size: 10rem; }
    .banda_hero .hero-content h1 img   { display: inline-block; }
    .banda_hero .hero-image            { margin-top: 50px; height: 150px; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_hero                          { padding: 210px 0 0; }
    .banda_hero .hero-content p          { font-size: 18px; }
    .banda_hero .hero-content h1         { font-size: 12rem; line-height: 90%; letter-spacing: 50px; text-align: justify; }
    .banda_hero .hero-content h1 .text-2 { font-size: 11rem; letter-spacing: 10px !important; }
    .banda_hero .hero-content h1 img     { display: inline-block; }
    .banda_hero .hero-image              { margin-top: 15px; height: 250px; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (width >= 1400px) {
    .banda_hero                          { padding: 210px 0 0; }
    .banda_hero .hero-content p          { font-size: 18px; }
    .banda_hero .hero-content h1         { font-size: 12rem; line-height: 90%; letter-spacing: 50px; text-align: justify; }
    .banda_hero .hero-content h1 .text-2 { font-size: 11rem; letter-spacing: 10px !important; }
    .banda_hero .hero-content h1 img     { display: inline-block; }
    .banda_hero .hero-image              { margin-top: 15px; height: 250px; }
}


/* ============================================================
   BANDA: banda_presentacion
   Archivo: banda_presentacion.html.twig
   ============================================================ */
.banda_presentacion { position: relative; z-index: 5; }

.banda_presentacion .bg-shape {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.banda_presentacion .color-bg  { position: absolute; left: 0; bottom: 25%; z-index: -1; opacity: 0.3; }
.banda_presentacion .color-bg-2 { position: absolute; top: -12%; right: -100px; z-index: -1; opacity: 0.3; }

.banda_presentacion .section-title h2 b { color: var(--theme); }

.banda_presentacion .about-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banda_presentacion .about-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.banda_presentacion .about-items h3 {
    font-size: 1.5rem !important;
    font-weight: 500;
    line-height: 110%;
}

.banda_presentacion .about-items .about-content p { line-height: 120%; }

.banda_presentacion .about-items .about-image img { width: 100%; height: 100%; border-radius: 25px; }

/* Medium devices (tablets, 768px and up) */
@media (width >= 768px) {
    .banda_presentacion .about-items              { gap: 25px; }
    .banda_presentacion .about-items h3           { font-size: 1.8rem !important; }
    .banda_presentacion .about-items .about-content { max-width: 50%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_presentacion .about-items h3           { font-size: 2.5rem !important; }
    .banda_presentacion .about-items .about-content { max-width: 50%; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (width >= 1400px) {
    .banda_presentacion .about-items .about-content { max-width: 50%; }
}


/* ============================================================
   BANDA: banda_pulperias
   Archivo: banda_pulperias.html.twig
   ============================================================ */
.banda_pulperias .section-title h2 { font-size: 3.5rem; }

.banda_pulperias .section-title h2 b.azul {
    color: var(--color-mar-rinlo);
    font-weight: 700;
    font-family: var(--tipografia-titulares);
}

.banda_pulperias .service-box-items { display: flex; align-items: stretch; }

.banda_pulperias .service-box-items .service-image img { border-radius: 20px; width: 100%; }

.banda_pulperias .service-box-items .service-content {
    border-radius: 25px;
    border: 1px solid rgba(207, 208, 212, 0.2);
    background: #1D1D21;
    padding: 50px;
}

.banda_pulperias .service-box-items .service-content p          { margin-bottom: 20px; }
.banda_pulperias .service-box-items .service-content .link-btn  { color: var(--color-mar-rinlo); }

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_pulperias .section-title h2 { font-size: 75px; }
}


/* ============================================================
   BANDA: banda_asadores
   Archivo: banda_asadores.html.twig
   ============================================================ */
.banda_asadores { position: relative; z-index: 1; }

.banda_asadores .color-bg { position: absolute; top: 0; right: 0; z-index: -1; }

.banda_asadores .project-wrapper { padding: 0 50px; }

.banda_asadores .project-title {
    font-size: 11.5vw;
    line-height: 110%;
}

.banda_asadores .project-title br   { display: inline; }
.banda_asadores .project-title span { font-weight: 700; }

.banda_asadores .project-title img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

.banda_asadores .project-image {
    margin-top: 30px;
    transition: all 0.4s ease-in-out;
}

.banda_asadores .project-image img    { width: 100%; height: 100%; border-radius: 50px; }
.banda_asadores .project-image:hover  { transform: rotate(10deg); }

.banda_asadores .project-content span {
    border: 1px solid rgba(207, 208, 212, 0.2);
    border-radius: 16px;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 20px;
    margin-bottom: 20px;
    display: inline-block;
    line-height: 1;
}

.banda_asadores .project-content h3          { font-size: 45px; font-weight: 700; line-height: 110%; }
.banda_asadores .project-content h3 a:hover  { color: var(--color-asadores-quinta); }
.banda_asadores .project-content p           { line-height: 160%; }

.banda_asadores .project-content p.datos {
    font-weight: 400;
    padding: 0;
    margin: 10px 0;
    font-size: 1.1rem;
}

.banda_asadores .project-content p.datos i   { width: 20px; }

.banda_asadores .project-content .theme-btn         { color: #fff; }
.banda_asadores .project-content .theme-btn:hover   { background-color: var(--color-asadores-quinta) !important; color: #fff; }
.banda_asadores .project-content .theme-btn::after  { background-color: var(--color-asadores-quinta); }

/* Small devices (landscape phones, 576px and up) */
@media (width >= 576px) {
    .banda_asadores .project-title { font-size: 70px; line-height: 66%; }
}

/* Medium devices (tablets, 768px and up) */
@media (width >= 768px) {
    .banda_asadores .project-title       { font-size: 70px; }
    .banda_asadores .project-content h3  { font-size: 30px; }
}

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    .banda_asadores .project-title { font-size: 85px; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_asadores .project-wrapper         { padding: 0 100px; }
    .banda_asadores .project-title           { font-size: 97px; line-height: 80%; }
    .banda_asadores .project-title br        { display: inline-block; }
    .banda_asadores .project-title img       { margin-left: 250px; height: auto; }
    .banda_asadores .project-content         { max-width: 70%; }
    .banda_asadores .project-content h3      { font-size: 65px; }
}


/* ============================================================
   BANDA: banda_alquileres
   Archivo: banda_alquileres.html.twig
   ============================================================ */
.banda_alquileres { position: relative; }

.banda_alquileres .color-bg { position: absolute; left: 270px; top: -150px; z-index: -1; }

.banda_alquileres .faq-image-items { display: flex; align-items: center; gap: 20px; }

.banda_alquileres .faq-image-items .faq-image img { width: 100%; height: 100%; border-radius: 25px; }

.banda_alquileres .faq-content { margin-left: 0; }

.banda_alquileres .faq-content .section-title h2 b { color: var(--theme); font-weight: 700; }

.banda_alquileres .accordion-item { border: none !important; background-color: transparent; }

.banda_alquileres .accordion-item .accordion-header {
    border-bottom: 1px solid rgba(207, 208, 212, 0.2);
    padding-bottom: 10px;
    padding-top: 10px;
}

.banda_alquileres .accordion-item .accordion-header .accordion-button {
    font-weight: 700;
    color: var(--white);
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    text-transform: capitalize;
    font-size: 22px;
    font-family: var(--tipografia-titulares);
    padding-left: 0;
}

.banda_alquileres .accordion-item .accordion-header .accordion-button::after {
    content: "+";
    font-family: "Font Awesome 6 Pro";
    background: transparent;
    font-weight: 500;
    transition: all 0.3s ease-in-out !important;
    color: var(--white);
    font-size: 16px;
}

.banda_alquileres .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    content: "\f068";
    font-family: "Font Awesome 6 Pro";
    background: transparent;
    color: var(--theme);
}

.banda_alquileres .accordion-item .accordion-header .accordion-button.collapsed {
    color: var(--white);
    background-color: transparent;
}

.banda_alquileres .accordion-item .accordion-collapse .accordion-body {
    background-color: transparent;
    padding-bottom: 28px;
    padding-top: 25px;
    padding-left: 0;
    color: var(--text);
    line-height: 130%;
}

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    .banda_alquileres .faq-content { margin-left: 30px; }
    .banda_alquileres .accordion-item .accordion-header .accordion-button { font-size: 27px; }
}


/* ============================================================
   BANDA: banda_pie
   Archivo: banda_pie.html.twig
   ============================================================ */
.banda_pie { position: relative; }

.banda_pie .footer-widgets-wrapper {
    padding: 50px 0 80px;
    position: relative;
    z-index: 9;
}

.banda_pie .single-footer-widget         { margin-top: 30px; }
.banda_pie .single-footer-widget .widget-head { margin-bottom: 20px; }

.banda_pie .single-footer-widget .widget-head h3 {
    font-weight: bold;
    color: var(--white);
    font-size: 20px;
    display: inline-block;
    text-transform: capitalize;
}

.banda_pie .single-footer-widget .footer-content h3 {
    font-size: 35px;
    font-weight: 700;
    color: var(--white);
}

.banda_pie .single-footer-widget .footer-content .footer-input {
    position: relative;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.banda_pie .single-footer-widget .footer-content .footer-input input {
    outline: none;
    width: 100%;
    color: #cdcdcd;
    font-size: 16px;
    border-radius: 30px;
    border: 1px solid #cfd0d4;
    opacity: 0.2;
    background: rgba(217, 217, 217, 0);
    padding: 16px 30px;
}

.banda_pie .single-footer-widget .footer-content .footer-input input::placeholder { color: #cdcdcd !important; }

.banda_pie .single-footer-widget .list-items li {
    text-transform: capitalize;
    background-image: linear-gradient(var(--theme), var(--theme));
    background-position: 0 95%;
    background-repeat: no-repeat;
    background-size: 0% 1px;    
    transition: all 0.4s ease-in-out;
    position: relative;
}

.banda_pie .single-footer-widget .list-items li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "\f061";
    font-family: "Font Awesome 6 Pro";
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.banda_pie .single-footer-widget .list-items li:not(:last-child) { margin-bottom: 15px; }
.banda_pie .single-footer-widget .list-items li a                { font-size: 18px; color: var(--text); }
.banda_pie .single-footer-widget .list-items li:hover            { background-size: 100% 1px; }

.banda_pie .single-footer-widget .list-items li:hover::before { opacity: 1; visibility: visible; color: var(--theme); }
.banda_pie .single-footer-widget .list-items li:hover a       { padding-left: 25px; color: var(--theme); }

.banda_pie .single-footer-widget .footer-thumb { position: relative; }

.banda_pie .single-footer-widget .footer-thumb::before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    content: "";
    background-color: var(--black);
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
}

.banda_pie .single-footer-widget .footer-thumb img { width: 100%; height: 100%; border-radius: 10px; }

.banda_pie .single-footer-widget .footer-thumb .icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
}

.banda_pie .single-footer-widget .footer-thumb:hover::before { opacity: 0.6; }
.banda_pie .single-footer-widget .footer-thumb:hover .icon   { opacity: 1; }

.banda_pie .footer-bottom {
    padding: 30px 0;
    border-top: 1px solid rgba(207, 208, 212, 0.15);
}

.banda_pie .footer-bottom .footer-bottom-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

.banda_pie .footer-bottom p   { color: var(--text); }
.banda_pie .footer-bottom p a { color: var(--theme); font-weight: 400; text-decoration: underline; }

.banda_pie .footer-bottom .social-icon { display: flex; align-items: center; gap: 8px; }

.banda_pie .footer-bottom .social-icon a {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 50%;
    border: unset !important;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    color: #cdcdcd;
}

.banda_pie .footer-bottom .social-icon a i       { color: var(--white); }
.banda_pie .footer-bottom .social-icon a:hover   { color: var(--theme); }
.banda_pie .textos_legales{display: inline-block; margin-right: 10px;}
/* Medium devices (tablets, 768px and up) */
@media (width >= 768px) {
    .banda_pie .single-footer-widget .widget-head h3       { font-size: 17px; }
    .banda_pie .single-footer-widget .footer-content h3    { font-size: 30px; }
}

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    .banda_pie .footer-bottom .footer-bottom-wrapper {
        justify-content: space-between;
        text-align: left;
        flex-wrap: nowrap;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (width >= 1200px) {
    .banda_pie .footer-widgets-wrapper                      { padding: 70px 0 100px; }
    .banda_pie .single-footer-widget .widget-head           { margin-bottom: 30px; }
    .banda_pie .single-footer-widget .widget-head h3        { font-size: 18px; }
    .banda_pie .single-footer-widget .footer-content h3     { font-size:30px; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (width >= 1400px) {
    .banda_pie .footer-widgets-wrapper { padding: 90px 0 120px; }
}


/* ============================================================
   BANDA: banda_contacto
   Archivo: banda_contacto.html.twig
   ============================================================ */
.banda_contacto .section-title h2 span { color: var(--theme); }

.banda_contacto .contact-wrapper .contact-image     { margin-top: 30px; }
.banda_contacto .contact-wrapper .contact-image img { width: 100%; height: 100%; border-radius: 20px; }

.banda_contacto .contact-form-items-area { margin-top: 30px; }

.banda_contacto .contact-form-items-area h2 {
    font-size: 40px;
    color: var(--white);
    margin-bottom: 30px;
}

.banda_contacto .form-clt { position: relative; }

.banda_contacto .form-clt input,
.banda_contacto .form-clt textarea {
    color: #CDCDCD;
    padding: 18px 20px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(207, 208, 212, 0.2);
    background: #222226;
    font-weight: 500;
    font-size: 16px;
}

.banda_contacto .form-clt input::placeholder,
.banda_contacto .form-clt textarea::placeholder { color: var(--text); }

.banda_contacto .form-clt .icon      { position: absolute; top: 20px; right: 25px; color: var(--theme); }
.banda_contacto .form-clt textarea   { padding-bottom: 150px; }

.banda_contacto .form-clt .nice-select {
    border-radius: 10px;
    border: 1px solid rgba(207, 208, 212, 0.2);
    background: #222226;
    padding: 18px 20px;
    z-index: 9;
}

.banda_contacto .form-clt .nice-select::after {
    height: 8px;
    width: 8px;
    right: 25px;
    top: 30px;
    border-color: var(--theme);
    border-bottom: 2px solid var(--theme);
    border-right: 2px solid var(--theme);
}

.banda_contacto .form-clt .nice-select span {
    color: #CDCDCD;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.banda_contacto .form-clt .nice-select .list   { background-color: var(--bg); right: 0; }

.banda_contacto .form-clt .nice-select .option {
    background-color: transparent;
    font-size: 16px;
    line-height: 150%;
    padding: 10px;
    min-height: initial;
    font-weight: 500;
    border: none;
}

.banda_contacto .contact-form-items .theme-btn        { background-color: var(--theme); color: var(--header); }
.banda_contacto .contact-form-items .theme-btn::after { background-color: var(--white); }


/* ============================================================
   BANDA: banda_mapa
   Archivo: banda_mapa.html.twig
   ============================================================ */
.banda_mapa .googpemap iframe { width: 100%; height: 300px; display: block; }

/* Large devices (desktops, 992px and up) */
@media (width >= 992px) {
    .banda_mapa .googpemap iframe { height: 840px; }
}


/* ============================================================
   BANDA: banda_contacto_info
   Archivo: banda_contacto_info.html.twig
   ============================================================ */
.banda_contacto_info .section-title h2 b    { color: var(--white); }
.banda_contacto_info .section-title h2 span { color: var(--theme); }

.banda_contacto_info .contact-box-items-4 {
    border-radius: 25px;
    background: #222226;
    text-align: center;
    padding: 40px;
}

.banda_contacto_info .contact-box-items-4 .icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--theme);
    margin: 0 auto;
    font-size: 30px;
    color: var(--header);
}

.banda_contacto_info .contact-box-items-4 .content         { margin-top: 30px; }
.banda_contacto_info .contact-box-items-4 .content h3      { font-size: 24px; margin-bottom: 10px; }
.banda_contacto_info .contact-box-items-4 .content p       { color: var(--text); }
.banda_contacto_info .contact-box-items-4 .content a       { color: var(--text); }
.banda_contacto_info .contact-box-items-4 .content a:hover { color: var(--theme); }