/* ============================================================ ASADOR ALCORTE — CSS GLOBAL (Home + Cortes + Carta) Pegar en: Divi → Opciones del tema → CSS personalizado (o en un plugin de CSS / tema hijo si es muy largo) ============================================================ */ /* ===== BASE: variables, tipografía, nav, orbes, footer, secciones del HOME ===== */ :root{ --reserva-bg:url("/wp-content/uploads/alcorte/alcorte-vistas.webp"); --align-left:max(32px, calc((100vw - 1480px) / 2 + 32px)); --align-right:32px; --white:#ffffff; --ink:#3d3d3c; --ink-soft:#6e6e6c; --ink-line:#e6e3dc; --navy:#1f3a5f; --navy-deep:#172c47; --navy-light:#a8c2dc; --cream:#fdfaf0; --cream-warm:#ebe2d0; --warm-gray:#8a7d68; --night-deep:#080d18; --font:'Bricolage Grotesque',system-ui,sans-serif; --radius:20px; --radius-lg:28px; --container-max:1480px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); color:var(--ink); background-color:#080d18; transition:background-color .9s ease-out; line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; --orb1:#0e1a30; --orb2:#050910; --orb3:#12233f; } /* ============ ORBES DE FONDO (aurora) ============ */ .bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;will-change:transform;transition:background-color 1.2s ease-out} .orb-1{width:55vw;height:55vw;top:-18vw;left:-12vw;background:var(--orb1);animation:drift1 26s ease-in-out infinite alternate} .orb-2{width:48vw;height:48vw;top:22vh;right:-16vw;background:var(--orb2);animation:drift2 32s ease-in-out infinite alternate} .orb-3{width:42vw;height:42vw;bottom:-14vw;left:8vw;background:var(--orb3);animation:drift3 38s ease-in-out infinite alternate} @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.12)}} @keyframes drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-10vw,-6vh) scale(.95)}} @keyframes drift3{from{transform:translate(0,0) scale(.95)}to{transform:translate(7vw,-8vh) scale(1.1)}} @media (prefers-reduced-motion:reduce){.orb{animation:none}} /* El contenido por encima de los orbes */ .hero,.et_pb_section section{position:relative;z-index:1} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} .container{max-width:1320px;margin:0 auto;padding:0 32px} .container-narrow{max-width:980px;margin:0 auto;padding:0 32px} /* ============ NAV ============ */ .nav.scrolled .nav.scrolled .nav.scrolled .lang-switch{display:flex;gap:6px;font-size:13px;font-weight:500;color:#fff;transition:color .4s} .nav.scrolled .lang-switch{color:var(--ink)} .lang-switch button{color:inherit;font-size:inherit;font-weight:inherit;opacity:.45;transition:opacity .3s} .lang-switch button.active{opacity:1} .lang-switch button:hover{opacity:.85} .lang-sep{opacity:.4} /* ============ HERO ============ */ .hero{position:relative;height:100vh;min-height:660px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center} .hero-placeholder{ position:absolute;inset:0;z-index:1; /* La foto (poster) se ve AL INSTANTE mientras el vídeo carga */ background-image: url('/wp-content/uploads/alcorte/alcorte-hero-poster.webp'), radial-gradient(circle at 30% 75%, rgba(255,120,30,.55) 0%, transparent 42%), radial-gradient(circle at 70% 35%, rgba(220,70,15,.4) 0%, transparent 50%), radial-gradient(circle at 50% 90%, rgba(255,180,60,.3) 0%, transparent 35%), linear-gradient(135deg, #150806 0%, #361510 30%, #5e2310 60%, #1f0a06 100%); background-size:cover, auto, auto, auto, auto; background-position:center, center, center, center, center; background-repeat:no-repeat; } .hero-placeholder::before{ content:'';position:absolute;inset:0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,180,80,.7), transparent), radial-gradient(1px 1px at 60% 50%, rgba(255,140,40,.9), transparent), radial-gradient(2px 1px at 80% 70%, rgba(255,200,100,.6), transparent), radial-gradient(1px 2px at 40% 80%, rgba(255,160,60,.7), transparent), radial-gradient(1px 1px at 90% 20%, rgba(255,220,120,.8), transparent), radial-gradient(1px 1px at 15% 65%, rgba(255,150,50,.8), transparent), radial-gradient(2px 2px at 75% 85%, rgba(255,200,90,.6), transparent); background-size:240px 240px;animation:flicker 3.5s ease-in-out infinite; } @keyframes flicker{0%,100%{opacity:.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .hero-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg, rgba(8,13,24,0.88) 0%, rgba(8,13,24,0.62) 35%, rgba(8,13,24,0.72) 70%, rgba(8,13,24,0.97) 92%, #080d18 100%)} .hero-content{position:relative;z-index:4;max-width:1100px;padding:0 32px} .hero-eyebrow{font-size:12px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;margin-bottom:40px;opacity:0;animation:fadeUp 1.2s ease .3s forwards} .hero h1{font-weight:300;font-size:clamp(50px, 8vw, 110px);line-height:1.02;letter-spacing:-.04em;margin-bottom:54px;opacity:0;animation:fadeUp 1.2s ease .5s forwards} .hero h1 em{font-style:normal;font-weight:400} .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 1.2s ease .9s forwards} .btn{padding:17px 36px;border-radius:999px;font-size:14px;font-weight:500;transition:all .35s;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none} .btn-primary{background:#fff;color:var(--ink)} .btn-primary:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .btn-outline{border:1px solid rgba(255,255,255,.4);color:#fff} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)} .btn-light{background:#fff;color:var(--ink)} .btn-light:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:4;color:#fff;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeUp 1.5s ease 1.5s both} .hero-scroll::after{content:'';width:1px;height:40px;background:#fff;animation:scrollLine 2s ease-in-out infinite} @keyframes scrollLine{0%,100%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}} @keyframes fadeUp{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(20px)}} /* MÓVIL: texto del hero visible al instante (sin animación fadeUp que en móvil lento se ve mal) */ @media (max-width:768px){ .hero-eyebrow, .hero h1, .hero-ctas, .hero-scroll{ opacity:1 !important; animation:none !important; transform:none !important; } } .mockup-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;background:rgba(0,0,0,.55);border:1px dashed rgba(255,255,255,.4);color:#fff;padding:14px 26px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;border-radius:14px;pointer-events:none;opacity:.55} /* ============ SECCIONES GENERAL ============ */ section{position:relative;min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:130px 0;background:transparent} .section-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--navy);margin-bottom:28px;display:inline-block} .section-eyebrow::before{content:'';display:inline-block;width:28px;height:1px;background:var(--navy);vertical-align:middle;margin-right:14px} h2{font-weight:300;font-size:clamp(42px, 5.5vw, 78px);line-height:1.02;letter-spacing:-.035em;margin-bottom:32px} h2 em{font-style:normal;font-weight:400;color:var(--navy)} .lead{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:640px;margin-bottom:24px;font-weight:400} .lead-large{font-size:20px} p{color:var(--ink-soft);font-size:16px;line-height:1.75} p + p{margin-top:18px} /* ============ ETAPA 01: ASADOR + ICONOS (crema luminoso) ============ */ .asador{background:transparent} .asador-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center} .features-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px} .feature{ padding:30px 24px;text-align:left; background:rgba(255,255,255,.5); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,.6); border-radius:var(--radius); transition:transform .4s, background .4s; } .feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.7)} .feature-icon{width:40px;height:40px;margin-bottom:20px;color:var(--navy);opacity:.9} .feature-icon svg{width:100%;height:100%} .feature-title{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin-bottom:6px} .feature-desc{font-size:13px;color:var(--ink-soft);line-height:1.55;font-weight:400} /* ============ ETAPA 02: COCINA (crema dorado) ============ */ .cocina{background:transparent} .cocina-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center;max-width:1200px} .cocina-text h2{margin-bottom:32px} .cocina-visual-wrap{position:relative;max-width:500px;justify-self:end;width:100%;margin-bottom:70px} .cocina-visual{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:#1a0808} .cocina-visual-b{position:absolute;width:68%;aspect-ratio:4/3;object-fit:cover;left:-22%;bottom:-70px;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.4);z-index:2} .cocina-visual-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)} .cocina-visual:hover .cocina-visual-img{transform:scale(1.03)} .cocina-text p{font-size:18px;line-height:1.7} .cocina-quote{font-style:italic;font-weight:300;font-size:24px;line-height:1.4;color:var(--ink);padding:24px 0 0;margin-top:28px;border-top:1px solid rgba(61,61,60,.15);letter-spacing:-.015em} /* ============ ETAPA 03: TEASER CORTES (tierra cálido) ============ */ .cortes-teaser{background:transparent;color:#fff} .cortes-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .cortes-teaser-grid > div:first-child{order:2} .cortes-teaser-grid > .cortes-teaser-visual{order:1} .cortes-teaser .section-eyebrow{color:#fff} .cortes-teaser .section-eyebrow::before{background:rgba(255,255,255,.8)} .cortes-teaser h2{color:#fff;margin-bottom:24px} .cortes-teaser h2 em{color:#fdfaf0;font-style:normal} .cortes-teaser p{color:rgba(255,255,255,.85);font-size:18px;line-height:1.7;margin-bottom:36px} .cortes-teaser-visual{aspect-ratio:5/4;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;position:relative;backdrop-filter:blur(10px)} .cortes-teaser-visual svg{width:75%;height:auto;opacity:.9} /* ============ ETAPA 02: EL ESPACIO (crema arena - CLARO) ============ */ .espacio{background:transparent;color:var(--ink)} .espacio .section-eyebrow{color:var(--navy)} .espacio .section-eyebrow::before{background:var(--navy)} .espacio h2{color:var(--ink)} .espacio h2 em{color:var(--navy)} .espacio-header{margin-bottom:60px;text-align:left} /* Carousel full-width estilo Apple */ .espacio-scroll-wrap{ overflow:hidden; width:100%;margin-top:-16px; } .espacio-scroll{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-left:32px; padding-right:32px; padding-top:16px; padding-bottom:40px; scrollbar-width:none; } .espacio-scroll::-webkit-scrollbar{display:none} .espacio-item{ flex:0 0 min(420px, 80vw); scroll-snap-align:start; display:flex; flex-direction:column; gap:24px; } .espacio-card{ border-radius:var(--radius-lg); overflow:hidden; background:#000; position:relative; aspect-ratio:4/5; cursor:pointer; transition:transform .4s; } .espacio-card:hover{transform:translateY(-4px)} .espacio-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)} .espacio-card:hover .espacio-card-img{transform:scale(1.04)} .espacio-card-placeholder{ background:linear-gradient(135deg, #2a1810 0%, #4a2818 35%, #6a3818 70%, #1a0808 100%); display:flex; align-items:center; justify-content:center; } .placeholder-label{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.65); border:1px dashed rgba(255,255,255,.3); padding:14px 22px; border-radius:14px; text-align:center; line-height:1.5; font-weight:600; } .espacio-item-text{padding:0 4px} .espacio-item-text h3{ font-family:var(--font); font-weight:500; font-size:24px; letter-spacing:-.02em; line-height:1.2; color:var(--ink); margin-bottom:8px; } .espacio-item-text p{ font-size:15px; line-height:1.55; color:var(--ink-soft); font-weight:400; margin:0; } /* Scroll controls light mode (sobre fondo claro del Espacio) */ .espacio .scroll-progress{background:rgba(61,61,60,.15)} .espacio .scroll-progress-bar{background:var(--ink)} .espacio .scroll-arrow{background:rgba(255,255,255,.4);border-color:rgba(61,61,60,.15);color:var(--ink)} .espacio .scroll-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .scroll-controls{ display:flex; align-items:center; gap:24px; margin-top:32px; padding-left:var(--align-left); padding-right:var(--align-right); } .scroll-arrows{order:-1;display:flex;gap:10px} .scroll-progress{flex:0 1 300px;height:2px;background:rgba(255,255,255,.15);border-radius:99px;position:relative;margin-right:0;overflow:hidden} .scroll-progress-bar{position:absolute;top:0;left:0;height:100%;background:#fff;border-radius:99px;width:30%;transition:left .3s, width .3s} .scroll-arrows{display:flex;gap:10px} .scroll-arrow{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;backdrop-filter:blur(10px);padding:0} .scroll-arrow:hover{background:#fff;color:var(--ink);border-color:#fff} /* ============ ETAPA 05: TESTIMONIOS (navy oscuro - TRANSPARENTE) ============ */ .testimonios{background:transparent;color:#fff} .testimonios-header{margin-bottom:60px;text-align:left} .testimonios-header .section-eyebrow{color:var(--navy-light)} .testimonios-header .section-eyebrow::before{background:var(--navy-light)} .testimonios-header h2{color:#fff;margin-bottom:20px} .testimonios-header h2 em{color:var(--navy-light)} .testimonios-header .lead{color:rgba(255,255,255,.7);margin:0;max-width:560px} /* Carousel full-width estilo Apple para testimonios */ .testimonios-scroll-wrap{ overflow:hidden; width:100%;margin-top:-16px; } .testimonios-scroll{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-left:32px; padding-right:32px; padding-top:16px; padding-bottom:40px; scrollbar-width:none; } .testimonios-scroll::-webkit-scrollbar{display:none} .testimonio{ flex:0 0 min(340px, 85vw);scroll-snap-align:start; min-height:520px; background:rgba(255,255,255,.06); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border:1px solid rgba(255,255,255,.12); padding:36px 32px;border-radius:var(--radius-lg); display:flex;flex-direction:column;color:#fff; transition:transform .4s, background .4s; } .testimonio:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)} .stars{color:#ffc857;font-size:14px;letter-spacing:3px;margin-bottom:18px} .stars .empty{color:rgba(255,255,255,.2)} .testimonio-headline{font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px;color:#fff} .testimonio-text{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.75);margin-bottom:28px;flex:1;font-weight:400} .testimonio-author{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)} .testimonio-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;letter-spacing:.04em} .testimonio-meta strong{display:block;font-size:13px;color:#fff;font-weight:600} .testimonio-meta span{font-size:11px;color:rgba(255,255,255,.55)} .testimonios-google{padding-left:var(--align-left);padding-right:var(--align-right)} .google-badge{display:flex;align-items:center;gap:14px;margin-top:40px;justify-content:flex-start;color:rgba(255,255,255,.7);font-size:14px} .google-badge strong{color:#fff;font-weight:600} /* ============ ETAPA 06: CTA RESERVA (navy profundo) ============ */ .cta-section{background:transparent;color:#fff;position:relative;overflow:hidden} .cta-section::before{ content:''; position:absolute; inset:0; background-image:var(--reserva-bg); background-size:cover; background-position:center; opacity:.09; mix-blend-mode:luminosity; filter:grayscale(1); pointer-events:none; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); } .cta-content{position:relative;z-index:2} .cta-section .section-eyebrow{color:var(--navy-light)} .cta-section .section-eyebrow::before{background:var(--navy-light)} .cta-section h2{color:#fff;margin-bottom:44px} .cta-section h2 em{color:var(--navy-light)} .cta-ctas{display:flex;gap:14px;flex-wrap:wrap} /* ============ ETAPA 07: CONTACTO (negro azulado - oscuro) ============ */ .contacto{background:transparent;color:#fff} .contacto .section-eyebrow{color:var(--navy-light)} .contacto .section-eyebrow::before{background:var(--navy-light)} .contacto h2{color:#fff} .contacto h2 em{color:var(--navy-light)} /* Contacto en modo scroll horizontal */ .contacto-scroll-wrap{ overflow:hidden; width:100%; margin-top:24px; } .contacto-scroll{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-left:32px; padding-right:32px; padding-top:16px; padding-bottom:40px; align-items:stretch; scrollbar-width:none; } .contacto-scroll::-webkit-scrollbar{display:none} .contacto-card{ flex:0 0 340px; scroll-snap-align:start; min-height:520px; padding:36px 32px; background:rgba(255,255,255,.05); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:var(--radius); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; } .contacto-card-mapa{ flex:0 0 min(820px, 90vw); padding:0; overflow:hidden; border-radius:var(--radius-lg); position:relative; background:rgba(255,255,255,.04); min-height:520px; } .contacto-card-mapa iframe, .contacto-card-mapa .map-placeholder{ width:100%; height:100%; min-height:520px; border:0; display:block; } .contacto-card-mapa .map-placeholder{ display:flex; align-items:center; justify-content:center; } .contacto-icon{width:36px;height:36px;color:var(--navy);margin-bottom:18px} .contacto-icon svg{width:100%;height:100%} .contacto-label{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--navy-light);font-weight:600;margin-bottom:18px} .contacto-content{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85)} .contacto-content a{color:rgba(255,255,255,.85);transition:color .3s} .contacto-content a:hover{color:var(--navy-light)} .contacto-map-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.25);padding:12px 20px;border-radius:14px} /* Scroll controls light/oscuro inherits desde estilos generales (Contacto usa los oscuros por defecto) */ .contacto-map-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.25);padding:12px 20px;border-radius:14px} .horario-list{display:flex;flex-direction:column;gap:14px;font-size:15px} .horario-bloque{display:flex;flex-direction:column;gap:2px} .horario-list .dia{color:#fff;font-weight:600;font-size:15px} .horario-list .horas{color:rgba(255,255,255,.7);font-size:14px} .horario-list .cerrado{color:#e87060;font-style:italic} .horario-list .horario-nota{grid-column:1 / -1;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;font-style:italic;color:rgba(255,255,255,.6);line-height:1.4} /* ============ FOOTER ============ */ .footer-placeholder{text-align:center;padding:40px;border:1px dashed rgba(255,255,255,.15);border-radius:var(--radius);color:rgba(255,255,255,.4);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:30px} .footer-bottom{display:flex;justify-content:space-between;padding-top:30px;font-size:12px;color:rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;gap:14px} footer .container{min-height:auto} /* ============ ALINEACIÓN UNIFICADA — como container-wide ============ */ .asador-content, .cocina-content, .cortes-content, .reserva-content, .contacto-content-wrap, .espacio-header, .testimonios-header, .contacto-header, .testimonios-google{ max-width:1480px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; text-align:left; width:100%; } .espacio-header, .testimonios-header, .contacto-header{ margin-bottom:60px; } .testimonios-google{ margin-top:0; } /* ============ TEMA INVERTIDO (oscuro → claro) ============ */ /* 01 Asador — sobre negro azulado */ .asador{color:#fff} .asador .section-eyebrow{color:var(--navy-light)} .asador .section-eyebrow::before{background:var(--navy-light)} .asador h2{color:#fff} .asador h2 em{color:var(--navy-light)} .asador .lead{color:rgba(255,255,255,.75)} .asador .feature{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)} .asador .feature:hover{background:rgba(255,255,255,.12)} .asador .feature-icon{color:var(--navy-light)} .asador .feature-title{color:#fff} .asador .feature-desc{color:rgba(255,255,255,.65)} /* 02 Espacio — sobre navy oscuro */ .espacio{color:#fff} .espacio .section-eyebrow{color:var(--navy-light)} .espacio .section-eyebrow::before{background:var(--navy-light)} .espacio h2{color:#fff} .espacio h2 em{color:var(--navy-light)} .espacio .espacio-item-text h3{color:#fff} .espacio .espacio-item-text p{color:rgba(255,255,255,.7)} .espacio .scroll-progress{background:rgba(255,255,255,.15)} .espacio .scroll-progress-bar{background:#fff} .espacio .scroll-arrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff} .espacio .scroll-arrow:hover{background:#fff;color:var(--ink);border-color:#fff} .espacio .espacio-card-placeholder{background:linear-gradient(135deg,#0e1a30 0%,#1f3a5f 60%,#0a1424 100%)} /* 03 Cocina — sobre gris carbón */ .cocina{color:#fff} .cocina .section-eyebrow{color:var(--navy-light)} .cocina .section-eyebrow::before{background:var(--navy-light)} .cocina h2{color:#fff} .cocina h2 em{color:var(--navy-light)} .cocina p{color:rgba(255,255,255,.75)} .cocina .cocina-quote{color:#fff;border-top-color:rgba(255,255,255,.2)} /* 05 Cortes — sobre crema dorado */ .cortes-teaser{color:var(--ink)} .cortes-teaser .section-eyebrow{color:var(--navy)} .cortes-teaser .section-eyebrow::before{background:var(--navy)} .cortes-teaser h2{color:var(--ink)} .cortes-teaser h2 em{color:var(--navy)} .cortes-teaser p{color:var(--ink-soft)} .cortes-teaser-visual{background:rgba(61,61,60,.04);border-color:rgba(61,61,60,.14);backdrop-filter:none} .cortes-teaser-visual svg g{stroke:rgba(61,61,60,.85)} .cortes-teaser .btn-light{background:var(--ink);color:#fff} .cortes-teaser .btn-light:hover{background:var(--navy);color:#fff} /* 04 Testimonios — sobre tierra (tema oscuro) */ .testimonios{color:#fff} .testimonios-header .section-eyebrow{color:var(--navy-light)} .testimonios-header .section-eyebrow::before{background:var(--navy-light)} .testimonios-header h2{color:#fff} .testimonios-header h2 em{color:var(--navy-light)} .testimonios-header .lead{color:rgba(255,255,255,.75)} .testimonio{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)} .testimonio:hover{background:rgba(255,255,255,.13)} .testimonio-headline{color:#fff} .testimonio-text{color:rgba(255,255,255,.75)} .testimonio-author{border-top-color:rgba(255,255,255,.15)} .testimonio-avatar{background:rgba(255,255,255,.2);color:#fff} .testimonio-meta strong{color:#fff} .testimonio-meta span{color:rgba(255,255,255,.6)} .testimonios .stars .empty{color:rgba(255,255,255,.25)} .testimonios .scroll-progress{background:rgba(255,255,255,.18)} .testimonios .scroll-progress-bar{background:#fff} .testimonios .scroll-arrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff} .testimonios .scroll-arrow:hover{background:#fff;color:var(--ink);border-color:#fff} .google-badge{color:rgba(255,255,255,.75)} .google-badge strong{color:#fff} /* 05 Reserva — sobre gris claro (tema claro) */ .cta-section{color:var(--ink)} .cta-section .section-eyebrow{color:var(--navy)} .cta-section .section-eyebrow::before{background:var(--navy)} .cta-section h2{color:var(--ink)} .cta-section h2 em{color:var(--navy)} .cta-section .btn-light{background:var(--ink);color:#fff} .cta-section .btn-light:hover{background:var(--navy);color:#fff} .cta-section .btn-outline{border-color:rgba(61,61,60,.35);color:var(--ink)} .cta-section .btn-outline:hover{border-color:var(--ink);background:rgba(61,61,60,.06)} /* 07 Contacto — sobre crema luminoso */ .contacto{color:var(--ink)} .contacto .section-eyebrow{color:var(--navy)} .contacto .section-eyebrow::before{background:var(--navy)} .contacto h2{color:var(--ink)} .contacto h2 em{color:var(--navy)} .contacto-card{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.75)} .contacto-label{color:var(--navy)} .contacto-content{color:var(--ink-soft)} .contacto-content a{color:var(--ink)} .contacto-content a:hover{color:var(--navy)} .horario-list .dia{color:var(--ink)} .horario-list .horas{color:var(--ink-soft)} .horario-nota{color:var(--ink-soft) !important;border-top-color:rgba(61,61,60,.2) !important} .contacto .scroll-progress{background:rgba(61,61,60,.15)} .contacto .scroll-progress-bar{background:var(--ink)} .contacto .scroll-arrow{background:rgba(255,255,255,.4);border-color:rgba(61,61,60,.15);color:var(--ink)} .contacto .scroll-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* ============ DEBUG ============ */ .color-debug{position:fixed;bottom:20px;left:20px;z-index:99;background:rgba(0,0,0,.75);color:#fff;padding:10px 14px;border-radius:8px;font-size:11px;font-family:monospace;backdrop-filter:blur(10px);display:flex;align-items:center;gap:10px} .color-debug-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.3)} .color-debug-stage{position:fixed;bottom:60px;left:20px;z-index:99;background:rgba(0,0,0,.75);color:#fff;padding:8px 12px;border-radius:8px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(10px)} /* ============ RESPONSIVE ============ */ @media (max-width:980px){ .features-grid{grid-template-columns:repeat(2,1fr)} .asador-grid{grid-template-columns:1fr;gap:50px} .cocina-grid{grid-template-columns:1fr;gap:50px} .cortes-teaser-grid{grid-template-columns:1fr;gap:50px} .cortes-teaser-grid > div:first-child{order:1} .cortes-teaser-grid > .cortes-teaser-visual{order:2} .contacto-grid{grid-template-columns:1fr;gap:50px} section{padding:70px 0} .color-debug,.color-debug-stage{display:none} } @media (max-width:980px){ /* Cocina: la foto secundaria no debe salirse por la izquierda */ .cocina-visual-wrap{max-width:100%;margin-bottom:40px} .cocina-visual-b{width:50%;left:auto;right:-4%;bottom:-40px} } @media (max-width:600px){ .features-grid{grid-template-columns:1fr} .hero{min-height:560px} /* Fichas a ancho casi completo en móvil */ .espacio-item{flex:0 0 82vw} .testimonio{flex:0 0 82vw;min-height:440px} .contacto-card{flex:0 0 82vw;min-height:440px} .contacto-card-mapa{flex:0 0 88vw;min-height:360px} .contacto-card-mapa iframe{min-height:360px} /* Cocina en móvil */ .cocina-visual-b{width:46%;right:0;bottom:-30px} .cocina-visual-wrap{margin-bottom:36px} } /* ============================================================ FIXES MÓVIL — HOME (revisión responsive) ============================================================ */ @media (max-width:768px){ /* 1. MENÚ hamburguesa de Divi: asegurar que se ve y es pulsable */ #et_mobile_nav_menu{ display:block !important; } .mobile_menu_bar{ display:block !important; } .mobile_menu_bar:before{ color:#fff !important; font-size:32px !important; line-height:1 !important; } #main-header .container{ min-height:auto; } /* 2. DESLIZA + flecha: centrar bien el conjunto */ .hero-scroll{ left:50% !important; transform:translateX(-50%) !important; text-align:center !important; width:auto !important; } .hero-scroll::after{ margin:0 auto; } /* 3. Fichas de servicios (A la brasa, vistas al mar, climatizado, wifi): scroll horizontal en móvil como el resto de fichas */ .features-grid{ display:flex !important; grid-template-columns:none !important; gap:14px !important; overflow-x:auto !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:6px 20px 12px !important; margin-left:-20px; margin-right:-20px; scrollbar-width:none; scroll-padding-left:20px; } .features-grid::-webkit-scrollbar{ display:none; } .features-grid > .feature{ flex:0 0 78% !important; box-sizing:border-box; scroll-snap-align:start; } /* La última card con margen para que no quede pegada al borde */ .features-grid > .feature:last-child{ margin-right:20px; } /* 4. Ocultar la foto del churrasco de cerdo en móvil */ .cocina-visual-b{ display:none !important; } /* 5. FOOTER: el .container de Divi se colapsaba en móvil (regla antigua .container lo ocultaba). Forzar que se vea, con el mismo layout que escritorio. */ #footer-widgets .container, #main-footer .container{ display:block !important; width:80% !important; margin:0 auto !important; } #footer-widgets{ padding:40px 0 !important; } } /* ===== ESPECÍFICO: PÁGINA NUESTROS CORTES ===== */ /* ============ PÁGINA CORTES ============ */ .cortes-hero-inner{max-width:1480px;margin:0 auto;padding:0 32px} .cortes-hero .section-eyebrow{color:var(--navy-light)} .cortes-hero .section-eyebrow::before{background:var(--navy-light)} .cortes-hero h1{font-weight:300;font-size:clamp(48px,7vw,96px);line-height:1.02;letter-spacing:-.04em;color:#fff;margin-bottom:24px} .cortes-hero h1 em{font-style:normal;color:var(--navy-light)} .cortes-hero .lead{font-size:19px;line-height:1.7;color:rgba(255,255,255,.75);max-width:640px} /* Vaca SVG interactiva */ .cortes-vaca-wrap{max-width:1600px;margin:0 auto;padding:0 32px} .vaca-nombre-activo{text-align:center;min-height:44px;margin-bottom:0} .vaca-nombre-activo .num{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--navy-light);font-weight:600;margin-bottom:8px;opacity:0;transition:opacity .4s} .vaca-nombre-activo h2{font-weight:400;font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em;color:#fff;line-height:1;opacity:.45;transform:translateY(6px);transition:opacity .4s, transform .4s} .vaca-nombre-activo.show .num{opacity:1} .vaca-nombre-activo.show h2{opacity:1;transform:translateY(0)} .vaca-svg{width:auto;height:30vh;max-width:100%;display:block;margin:0 auto} .vaca-silueta{pointer-events:none} .vaca-silueta path{fill:rgba(255,255,255,.92);transition:fill .4s} /* Zonas de corte: monocromo por defecto, se iluminan al interactuar */ .vaca-zona{cursor:pointer} .vaca-zona path{ fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.35); stroke-width:2; transition:fill .35s, stroke .35s; } .vaca-zona:hover path{ fill:rgba(168,194,220,.45); stroke:rgba(255,255,255,.8); } .vaca-zona.active path{ fill:rgba(168,194,220,.7); stroke:#fff; stroke-width:2.5; } /* Carousel de fichas */ .cortes-carousel-header{max-width:1480px;margin:0 auto 50px;padding:0 32px} .cortes-carousel-header .section-eyebrow{color:var(--navy-light)} .cortes-carousel-header .section-eyebrow::before{background:var(--navy-light)} .cortes-carousel-header h2{font-weight:300;font-size:clamp(32px,4vw,54px);letter-spacing:-.03em;color:#fff} .cortes-carousel-header h2 em{font-style:normal;color:var(--navy-light)} .cortes-scroll-wrap{overflow:hidden;width:100%;margin-top:-16px} .cortes-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-left:32px;padding-right:32px;padding-top:16px;padding-bottom:40px;scrollbar-width:none} .cortes-scroll::-webkit-scrollbar{display:none} .corte-ficha-num{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--navy-light);font-weight:600;margin-bottom:24px} .corte-ficha h3{font-weight:500;font-size:30px;letter-spacing:-.025em;color:#fff;line-height:1.1;margin-bottom:22px} .corte-ficha p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);flex:1} .cortes-controls{display:flex;align-items:center;gap:24px;margin-top:8px;padding-left:32px;padding-right:32px} .cortes-controls .scroll-arrows{display:flex;gap:10px} @media (max-width:980px){ .vaca-nombre-activo h2{font-size:26px} } /* ===== ESPECÍFICO: PÁGINA CARTA ===== */ /* ============================================================ FIX TIPOGRAFÍA — forzar Bricolage sobre los módulos de Divi (Divi aplica su fuente por defecto con alta especificidad) ============================================================ */ .et_pb_code, .et_pb_code *, .et_pb_text, .et_pb_text *, .et_pb_section, .et_pb_section * { font-family: 'Bricolage Grotesque', system-ui, sans-serif; } /* Excepción: no pisar iconos de fuentes de iconos */ [class*="et-pb-icon"], .et-pb-icon, [data-icon], .dashicons { font-family: 'ETmodules', 'dashicons' !important; } /* ============================================================ AJUSTES ESPECÍFICOS PARA DIVI Neutraliza estilos del tema que interfieren con el diseño ============================================================ */ #page-container, #et-main-area, #main-content { background: transparent !important; } .et_pb_section, .et_pb_row, .et_pb_column { background: transparent !important; } .et_pb_row { width: 100% !important; max-width: none !important; padding: 0 !important; } .et_pb_column { margin-right: 0 !important; } .et_pb_section { padding: 0 !important; } .et_pb_code_inner { line-height: inherit; } body.et-db #et-boc .et-l .et_pb_section { background-color: transparent !important; } /* IMPORTANTE: la regla global del diseño debe acotarse para no afectar al