/* =============================================================================
   VARIABLES / TEMA
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap');

:root {
    --primary: #f47b20;
    /* naranja de marca */
    --blue: #4a7ec7;
    --bg: #141215;
    --text: #ffffff;
    --muted: #cfd3db;
    --surface: #222;
    --card: #1d1f24;
    --focus: #ffd8bd;
}

/* =============================================================================
   BASE / RESET SUAVE
============================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    transition: .2s linear
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 8rem
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

*:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        animation: none !important
    }
}

section {
    padding: 3.2rem 6%
}

@media (max-width:991px) {
    html {
        font-size: 56%
    }

    section {
        padding: 2.4rem 4%
    }
}

@media (max-width:768px) {
    html {
        font-size: 54%
    }
}

@media (max-width:450px) {
    html {
        font-size: 52%
    }
}

/* =============================================================================
   TITULARES / BOTONES
============================================================================= */
.heading {
    font-size: clamp(2.4rem, 2vw + 1.6rem, 4rem);
    text-align: center;
    padding: 3.2rem 0 1.6rem;
    color: var(--text)
}

.heading span {
    color: var(--primary)
}

.btn {
    display: inline-block;
    font-size: 1.6rem;
    padding: .9rem 2.2rem;
    font-weight: 600;
    border-radius: 8px;
    color: #0a0a0a;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18)
}

.btn:hover {
    background: var(--primary);
    color: #fff;
    letter-spacing: .02rem;
    transform: translateY(-2px)
}

/* =============================================================================
   HEADER / NAV
============================================================================= */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 2rem 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent
}

.header.active {
    padding: 1.2rem 6%;
    background: #1b1b1b
}

.header .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-weight: 700
}

.header .logo img {
    height: 60px
}

.logo:hover {
    transform: rotate(-6deg) scale(1.2)
}

.header .navbar a {
    font-size: 1.5rem;
    color: #fff;
    margin: 0 1rem;
    font-weight: 500
}

.header .navbar a.active,
.header .navbar a:hover {
    color: var(--primary)
}

.header .icons a,
.header .icons button {
    font-size: 2rem;
    color: #fff;
    margin-left: 1.6rem;
    cursor: pointer;
    background: none
}

.header .icons a:hover,
.header .icons button:hover {
    color: var(--primary)
}

#menu-btn {
    display: none
}

/* buscador desplegable */
.header .search-form {
    position: absolute;
    top: 115%;
    right: 2rem;
    background: #fff;
    width: min(50rem, 92vw);
    height: 4.8rem;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28)
}

.header .search-form.active {
    opacity: 1;
    pointer-events: auto
}

.header .search-form input {
    width: 100%;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    color: #111
}

.header .search-form label {
    font-size: 2.2rem;
    padding-right: 1.4rem;
    color: #111;
    cursor: pointer
}

@media (max-width:768px) {
    #menu-btn {
        display: inline-block
    }

    .header .navbar {
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        background: #1b1b1b;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        display: grid;
        gap: .4rem;
        padding: 1rem 0
    }

    .header .navbar.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }

    .header .navbar a {
        display: block;
        margin: 1rem 2rem;
        font-size: 1.8rem
    }

    .header .search-form {
        width: calc(100% - 4rem);
        right: 2rem
    }
}

/* =============================================================================
   HERO (Swiper)
============================================================================= */
.home {
    padding: 0
}

.home .home-slider .box {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    isolation: isolate
}

.home .home-slider .box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25))
}

.home .home-slider .content {
    text-align: center;
    max-width: 950px;
    padding: 0 1rem
}

.home .home-slider .content h1,
.home .home-slider .content h2 {
    font-size: clamp(2.6rem, 2vw + 2rem, 5rem);
    color: #fff;
    margin-bottom: .8rem
}

.home .home-slider .content p {
    font-size: clamp(1.6rem, 1vw + .8rem, 2.2rem);
    color: #f2f2f2;
    opacity: .95;
    padding: .8rem 0 1.2rem
}

.home .home-slider .swiper-button-next,
.home .home-slider .swiper-button-prev {
    color: var(--primary);
    opacity: 0
}

.home .home-slider:hover .swiper-button-next,
.home .home-slider:hover .swiper-button-prev {
    opacity: 1
}

@media (max-width:768px) {

    .home .home-slider .swiper-button-next,
    .home .home-slider .swiper-button-prev {
        display: none
    }
}

/* anim de entrada de texto en slide activo */
.home .home-slider .box .content>* {
    transform: translateY(1.2rem);
    opacity: 0
}

.home .home-slider .swiper-slide-active .content>* {
    transform: translateY(0);
    opacity: 1
}

/* =============================================================================
   MENÚ (Sección .arrivals + carrusel .menu-slider)
============================================================================= */
.arrivals {
    position: relative;
    background-image:
        linear-gradient(30deg, rgba(244, 123, 32, .7) 0%, rgba(74, 126, 199, .7) 100%),
        url("/assets/img/menu/wood-2045379_1920.webp");
    background-size: cover;
    background-position: center;
    min-height: 600px;
}

.arrivals_2 {
    padding: 15px;
    border: 3px solid #fff
}

.arrivals_3 {
    padding: 15px;
    border-left: 2px dashed #fff;
    border-bottom: 2px dashed #fff
}

.menu-slider {
    padding: 16px 32px
}

.menu-slider .swiper-wrapper {
    display: flex;
    align-items: stretch
}

.menu-slider .swiper-slide {
    height: auto
}

#slide-height {
    min-height: 240px;
}

#slide-height article {
    height: 220px;
}

.menu-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: .6
}

.menu-pagination .swiper-pagination-bullet-active {
    background: var(--primary);
    opacity: 1
}


.arrivals .menu-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    /* Borde degradado “premium” */
    /* background:
        linear-gradient(#1e1e1e, #1e1e1e) padding-box,
        linear-gradient(135deg, #f47b20 0%, #a88289 45%, #4a7ec7 100%) border-box;
    border: 1px solid transparent;
    outline: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
    transform: translateZ(0); */
}

.arrivals .menu-media {
    aspect-ratio: 16/9;
    /* altura consistente */
    width: 100%;
    overflow: hidden;
}

.arrivals .menu-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .5s ease, filter .5s ease;
    opacity: .8;
}

/* overlay sutil de arriba hacia abajo para legibilidad */
.arrivals .menu-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .55) 90%); */
    pointer-events: none;
}

/* chip (usa el data-label del HTML) */
.arrivals .menu-card::before {
    content: attr(data-label);
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 1.2rem;
    letter-spacing: .4px;
    color: #4a7ec7;
    background: #F6E3D2;
    border-radius: 999px;
    padding: .4rem .9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    z-index: 2;
}

/* cuerpo de texto con efecto “glass” */
.arrivals .menu-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 110px;
    padding: 1.2rem 1.4rem 1.4rem;
    /* background: rgba(20, 20, 20, .02); */
    /* -webkit-backdrop-filter: blur(8px); */
    backdrop-filter: blur(25px);
}

.arrivals .menu-body h3 {
    margin: 0 0 .4rem 0;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

.arrivals .menu-body p {
    margin: 0;
    font-size: 1.35rem;
    color: #fff;
    font-weight: bold;
}

.container-strong {
    position: absolute;
    top: 70%;
}


/* CTA abajo a la derecha */
.arrivals_3 .menu-cta {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #4a7ec7;
    background: #F6E3D2;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.arrivals_3 .menu-cta:hover {
    transform: translateY(-2px);
    background: #f47b20;
    color: #fff;
}

/* Hover general */
.arrivals_3 .menu-card:hover .menu-media img {
    transform: scale(1.06);
    filter: saturate(1.1) contrast(1.05);
}

/* Swiper del menú: “acordeón” limpio */
.menu-slider {
    padding: 16px 32px;
    /* overflow: visible; */
}

.menu-slider .swiper-wrapper {
    align-items: stretch;
}

.menu-slider .swiper-slide {
    height: auto;
}

.menu-slider .swiper-slide .menu-card {
    height: 100%;
}

/* Opcional: el slide activo un pelín más grande */
.menu-slider .swiper-slide-active .menu-card {
    transform: scale(1.02);
}

/* Controles propios del slider de menú */
.menu-prev,
.menu-next {
    color: #fff;
    text-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

.menu-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: .6;
}

.menu-pagination .swiper-pagination-bullet-active {
    background: #f47b20;
    opacity: 1;
}


/* FAQ afinado si se usa #faq dentro de .arrivals */
#faq .box .content h3 {
    color: var(--primary);
}

#faq .box .content p a {
    color: #fff;
    text-decoration: underline;
}


@media (max-width: 768px) {
    .arrivals .menu-media {
        height: 200px;
    }

    .arrivals {
        padding: 5px;
    }

    .arrivals_2,
    .arrivals_3 {
        padding: 0 !important;
    }

    .menu-body p {
        display: none;
    }

  


}

@media (max-width:768px) {
    .arrivals {
        padding: 5px
    }

    .arrivals_2,
    .arrivals_3 {
        padding: 0 !important
    }
}

/* =============================================================================
   PLANES (pricing fan)
============================================================================= */
.pricing-fan {
    position: relative;
    background-image: linear-gradient(90deg, var(--primary), var(--primary));
    padding: 40px
}

.pricing-fan h2,
.pricing-fan span {
    color: #0a0a0a !important;
    text-transform: uppercase
}

.fan {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap
}

.plan {
    margin: 10px;
    width: min(280px, 80vw);
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: radial-gradient(100% 120% at 50% 0%, #262a31 0%, var(--card) 60%);
    color: var(--text);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .35s ease, box-shadow .35s ease, z-index .2s;
    z-index: 1;
    backdrop-filter: blur(2px);
}

.plan__badge {
    display: inline-block;
    font-size: .95rem;
    letter-spacing: .4px;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: var(--muted);
    margin-bottom: .6rem
}

.plan__badge--pro {
    background: linear-gradient(90deg, var(--primary), var(--blue));
    color: #111;
    font-weight: 700
}

.plan__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: .2rem 0 .4rem
}

.plan__price {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: .6rem;
    background: linear-gradient(90deg, #fff, #cfe0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.plan__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--muted);
    font-size: 1.3rem;
    display: grid;
    gap: .35rem
}

.plan__list li::before {
    content: "✔";
    margin-right: .5rem;
    color: var(--primary)
}

.plan__cta {
    width: 100%;
    text-align: center;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--primary), var(--blue));
    color: #111 !important;
    font-weight: 800
}

.plan--featured {
    scale: 1.03
}

.plan:is(:hover, :focus-within) {
    transform: translateY(-10px) scale(1.04);
    z-index: 5;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .45)
}

.img-fondo-title {
    height: 180px;
    width: 270px;
    animation: logo-wiggle 3s linear infinite
}

@keyframes logo-wiggle {
    50% {
        width: 300px
    }
}

@media (max-width:900px) {
    .fan {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:768px) {
    .fan {
        grid-template-columns: 1fr
    }
}

/* =============================================================================
   TESTIMONIOS
============================================================================= */
.testimonials {
    position: relative;
    padding: 2rem 9%;
    background-image: linear-gradient(90deg, var(--primary), var(--primary))
}

.testimonials h2,
.testimonials span {
    color: #0a0a0a
}

.t-card {
    background: #222;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 22px;
    color: #fff;
    max-width: 680px;
    margin-inline: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.t-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px
}

.t-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff
}

.t-name {
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0
}

.t-stars {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    display: flex;
    gap: 2px;
    color: #ffcc55;
    font-size: 1.4rem
}

.t-stars .off {
    opacity: .35
}

.t-quote {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 8px 0 6px;
    color: #f5f5f5
}

.t-meta {
    display: block;
    font-size: 1.2rem;
    color: #bbb
}

.testimonials .swiper-pagination-bullet {
    background: #fff;
    opacity: .5
}

.testimonials .swiper-pagination-bullet-active {
    background: #111;
    opacity: 1
}

.testimonials .swiper-button-next,
.testimonials .swiper-button-prev {
    color: #111
}

/* =============================================================================
   CONTACTO
============================================================================= */
.contact {
    position: relative;
    overflow: hidden;
}

/* Fondo naranja completo */
.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    z-index: -2;
}

/* Capa negra con corte diagonal */
.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #1b1b1b;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
    z-index: -1;
}



.contact .row_ {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: stretch
}

.btn_captcha {
    margin-top: 10px;
    display: flex;
    /* grid-template-columns: repeat(2, 2fr); */
    gap: 20px;

}

.contact iframe {
    flex: 1 1 42rem;
    width: 100%;
    min-height: 60px;
    border-radius: 12px;

}

.contact .row_ form {
    flex: 1 1 42rem;
    padding: 2rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url('/assets/img/iconos/icono_tejo.png') center/contain no-repeat;
    transform: scale(1.2);
}

.contact .row_ form h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #fff;
    text-align: center
}

.container-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    color: #fff
}

.contact .row_ .box {
    width: 100%;
    padding: 1.2rem 1.4rem;
    background: rgba(17, 17, 17, .8);
    color: #fff;
    font-size: 1.4rem;
    margin: .5rem 0;
    border-radius: 8px;
    border: 1px solid #333
}

.contact .row_ textarea {
    height: 200px;
    resize: none;
    grid-column: span 2
}

.container-inputs input::placeholder,
.contact .row_ textarea::placeholder {
    color: #ddd
}

.container-inputs input,
.contact .row_ textarea {
    background-color: transparent !important;
    outline: 1px dashed #fff !important
}

.contact .row_ .btn {
    /* margin-top: .6rem; */
    padding: .8rem 1.2rem;
    font-size: 1.4rem;
    background: var(--primary);
    color: #fff;
    border-radius: 6px;

}

.contact .row_ .btn:hover {
    transform: scale(1.05)
}

@media (max-width:768px) {

    .btn_captcha {
        grid-template-columns: 1fr
    }

    .contact iframe {
        min-height: 32rem
    }
}

/* =============================================================================
   FOOTER
============================================================================= */
.footer .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.6rem;
    padding-bottom: 1.6rem
}

.footer .box h3 {
    font-size: 2rem;
    color: #fff;
    padding: .6rem 0 1rem
}

.footer .box a {
    font-size: 1.4rem;
    color: #cfcfcf;
    padding: .6rem 0;
    display: block
}

.footer .box a:hover {
    color: var(--primary)
}

.footer .box a i {
    padding-right: .6rem;
    color: var(--primary)
}

.footer .box a:hover i {
    color: #fff
}

.footer .credit {
    letter-spacing: .4px;
    font-weight: 400;
    font-size: 1.4rem;
    padding: 1.2rem;
    text-align: center;
    color: #cfcfcf;
    border-top: 1px solid rgba(255, 255, 255, .12)
}