/* ========================================================= BOCADOS SORPRESA — Sistema de diseño Paleta derivada de la marca real (sello dorado, crema, cacao) ========================================================= */ /* Las fuentes de Google ya NO se cargan aquí con @import (eso frena el primer renderizado). Ahora se cargan con en el de cada página, en paralelo con todo lo demás. */ :root{ /* Color */ --crema: #FBF6ED; --crema-2: #F4EBDA; --cacao: #3B2A1F; --cacao-suave: #6B5240; --rosa: #F1D9D6; --rosa-fuerte: #C97A72; --dorado: #B8912E; --dorado-claro: #E4C976; --berry: #8A2E2E; --linea: #E4D9C4; --blanco: #FFFFFF; /* Tipografía */ --f-display: 'Cormorant Garamond', serif; --f-script: 'Petit Formal Script', cursive; --f-body: 'Jost', sans-serif; /* Radios / sombras */ --r-card: 4px; --r-btn: 2px; --sombra: 0 6px 24px rgba(59, 42, 31, 0.10); } *{box-sizing:border-box;} /* ---------- Reset de controles de formulario (Safari los pinta distinto si no se resetean) ---------- */ button, input, select, textarea{ -webkit-appearance:none; appearance:none; border-radius:0; /* cada componente define su propio radio */ font-family:inherit; font-size:inherit; color:inherit; background-color:transparent; } input[type="checkbox"], input[type="radio"]{ -webkit-appearance:auto; appearance:auto; } button{ -webkit-tap-highlight-color:transparent; } input, textarea, select{ -webkit-text-fill-color:currentColor; } input[type="date"], input[type="number"]{ -webkit-appearance:none; } html{scroll-behavior:smooth; overflow-x:clip; background:var(--crema);} /* ---------- Scrollbar principal del navegador ---------- */ html{ scrollbar-color: var(--dorado) var(--crema-2); scrollbar-width: thin; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background: var(--crema-2); } ::-webkit-scrollbar-thumb{ background: var(--dorado); border-radius:8px; border:2px solid var(--crema-2); } ::-webkit-scrollbar-thumb:hover{ background: var(--berry); } body{ margin:0; background:var(--crema); color:var(--cacao); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; margin:0 0 .4em; color:var(--cacao); } h1{font-size:clamp(2.4rem, 4vw, 3.6rem); line-height:1.05;} h2{font-size:clamp(1.8rem, 3vw, 2.4rem);} h3{font-size:1.3rem;} p{margin:0 0 1em;} .contenedor{ max-width:1240px; margin:0 auto; padding:0 24px; } /* Etiqueta pequeña sobre títulos de sección */ .rotulo{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dorado); font-weight:600; margin-bottom:.6em; } .rotulo::before{ content:''; width:22px;height:1px; background:var(--dorado); } /* ---------- Sello dorado (elemento de firma de marca) ---------- */ .sello{ --tam: 46px; width:var(--tam); height:var(--tam); border-radius:50%; background:radial-gradient(circle at 34% 30%, var(--dorado-claro), var(--dorado) 70%); display:flex;align-items:center;justify-content:center; font-family:var(--f-script); color:var(--crema); font-size:1.2rem; box-shadow:0 2px 6px rgba(184,145,46,.4), inset 0 0 0 2px rgba(255,255,255,.25); flex:none; } /* ---------- Barra superior de envíos ---------- */ .barra-anuncio{ background:var(--rosa-fuerte); color:var(--blanco); text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 12px; font-weight:500; } /* ---------- Encabezado ---------- */ .encabezado{ background:var(--crema); border-bottom:1px solid var(--linea); z-index:40; } .encabezado .contenedor{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 24px; padding-top:16px; padding-bottom:14px; } .logo{ flex:0 0 100%; display:flex; justify-content:center; order:1; margin-bottom:14px; } .logo img{height:109px;width:auto;} .nav-principal{display:flex; gap:26px; order:2;} .iconos-header{ order:3; } .nav-principal a{ font-size:.86rem; letter-spacing:.03em; font-weight:500; color:var(--cacao-suave); position:relative; padding:4px 0; } .nav-principal a:hover, .nav-principal a.activo{color:var(--berry);} .nav-principal a.activo::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--dorado); } .iconos-header{display:flex; align-items:center; gap:18px;} .icono-carrito{ position:relative; display:flex; align-items:center; justify-content:center; width:38px;height:38px; border:1px solid var(--linea); border-radius:50%; } .icono-carrito .contador{ position:absolute; top:-6px; right:-6px; background:var(--berry); color:var(--blanco); font-size:.65rem; font-weight:700; width:18px;height:18px;border-radius:50%; display:flex;align-items:center;justify-content:center; } .btn-menu-movil{display:none; background:none; border:none; cursor:pointer;} @media (max-width: 880px){ /* Header compacto en móvil: una sola fila, logo a la izquierda, íconos a la derecha con espacio de sobra entre ambos — nada de centrar el logo aquí, así no compite con los botones de cuenta/carrito. */ .encabezado .contenedor{ flex-wrap:nowrap; justify-content:space-between; padding-top:10px; padding-bottom:10px; } .logo{ flex:0 0 auto; justify-content:flex-start; order:1; margin-bottom:0; } .logo img{ height:52px; } .iconos-header{ order:3; margin-left:auto; gap:14px; } .nav-principal{ position:fixed; inset:0; top:0; background:var(--crema); flex-direction:column; padding:100px 32px 32px; gap:22px; transform:translateX(100%); transition:transform .3s ease; z-index:45; } .nav-principal.abierto{transform:translateX(0);} .nav-principal a{font-size:1.1rem;} .btn-menu-movil{display:block; z-index:50;} } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:14px 30px; border-radius:var(--r-btn); font-family:var(--f-body); font-size:.84rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn:hover{transform:translateY(-2px);} .btn-primario{background:var(--cacao); color:var(--crema);} .btn-primario:hover{background:var(--berry);} .btn-secundario{background:transparent; color:var(--cacao); border-color:var(--cacao);} .btn-secundario:hover{background:var(--cacao); color:var(--crema);} .btn-dorado{background:var(--dorado); color:var(--blanco);} .btn-dorado:hover{background:var(--berry);} .btn-bloque{width:100%;} /* ---------- Hero ---------- */ .hero{ padding:56px 0 40px; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .hero-foto{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sombra); } .hero-foto img{width:100%;height:100%;object-fit:cover;} .hero-texto .firma{ font-family:var(--f-script); font-size:2.6rem; color:var(--berry); display:block; margin-bottom:.1em; } .hero-texto p{ font-size:1.05rem; color:var(--cacao-suave); max-width:46ch; } .hero-acciones{display:flex; gap:16px; margin-top:1.6em; flex-wrap:wrap;} /* ---------- Pasos "Cómo hacer tu pedido" ---------- */ .pasos{ background:var(--crema-2); padding:64px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); } .pasos-titulo{text-align:center; margin-bottom:44px;} .pasos-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; } .paso{text-align:center;} .paso .sello{margin:0 auto 12px;} .paso span{font-size:.82rem; font-weight:500; color:var(--cacao-suave);} @media (max-width:900px){ .pasos-grid{grid-template-columns:repeat(3,1fr); row-gap:32px;} } @media (max-width:520px){ .pasos-grid{grid-template-columns:repeat(2,1fr);} } /* ---------- Secciones de categoría (preview en Inicio) ---------- */ .seccion-categoria{padding:72px 0;} .encabezado-seccion{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:20px; flex-wrap:wrap; } .encabezado-seccion .rotulo{margin-bottom:.3em;} .ver-todo{ font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--berry); white-space:nowrap; border-bottom:1px solid var(--berry); padding-bottom:2px; } /* ---------- Grilla y tarjeta de producto ---------- */ .grilla-productos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; } @media (max-width:1024px){ .grilla-productos{grid-template-columns:repeat(3,1fr);} } @media (max-width:760px){ .grilla-productos{grid-template-columns:repeat(2,1fr); gap:16px;} } .tarjeta-producto{ background:var(--blanco); border:1px solid var(--linea); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(59,42,31,.08); transition:box-shadow .25s ease, transform .25s ease; } .tarjeta-producto:hover{box-shadow:0 14px 32px rgba(59,42,31,.14); transform:translateY(-4px);} .tarjeta-foto{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--crema-2); } .tarjeta-foto img{ width:100%;height:100%;object-fit:cover; transition:transform .5s ease, opacity .3s ease; } .tarjeta-producto:hover .tarjeta-foto img{ transform:scale(1.035); } .etiqueta-agotado{ position:absolute; top:12px; left:12px; background:var(--cacao); color:var(--crema); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:2px; font-weight:600; } .tarjeta-cuerpo{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; } .tarjeta-cuerpo h3{font-size:1.08rem; line-height:1.25;} .tarjeta-precio{ font-family:var(--f-body); font-weight:700; font-size:1.02rem; color:var(--cacao); } .stepper-cantidad{ display:flex; align-items:center; gap:0; border:1px solid var(--linea); border-radius:2px; width:fit-content; } .stepper-cantidad button{ background:none; border:none; cursor:pointer; width:30px; height:30px; font-size:1rem; color:var(--cacao); } .stepper-cantidad .cantidad-input{ width:32px; text-align:center; border:none; border-left:1px solid var(--linea); border-right:1px solid var(--linea); font-family:var(--f-body); font-size:.88rem; height:30px; } .tarjeta-acciones{margin-top:auto; display:flex; flex-direction:column; gap:8px;} .tarjeta-acciones .btn{padding:11px 12px; font-size:.72rem;} .btn-con-icono{display:flex; align-items:center; justify-content:center; gap:7px;} .btn-con-icono svg{flex:none;} /* ---------- Franja de confianza (envíos incluidos) ---------- */ :root{ --verde-salvia: #A9B58C; } .franja-confianza{ background:var(--verde-salvia); color:var(--blanco); text-align:center; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:12px; } /* ---------- FAQ ---------- */ .faq{padding:72px 0;} .faq-item{ border-bottom:1px solid var(--linea); } .faq-pregunta{ width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:20px 4px; font-family:var(--f-body); font-weight:500; font-size:1rem; color:var(--cacao); text-align:left; } .faq-pregunta .mas{font-size:1.3rem; color:var(--dorado); transition:transform .2s ease;} .faq-item.abierto .mas{transform:rotate(45deg);} .faq-respuesta{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--cacao-suave); font-size:.94rem; } .faq-respuesta-int{padding:0 4px 20px;} /* ---------- Footer ---------- */ .pie{ background:var(--cacao); color:var(--crema-2); padding:56px 0 26px; } .pie-grid{ display:grid; grid-template-columns:1.2fr .85fr .85fr 1.1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(251,246,237,.14); } .pie-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; } .pie-links a{ color:#D8C9B8; font-size:.9rem; } .pie-links a:hover{ color:var(--dorado-claro); } .pie h4{color:var(--crema); font-size:1rem; margin-bottom:1em;} .pie a, .pie p{color:#D8C9B8; font-size:.9rem;} .pie-newsletter{display:flex; gap:8px; margin-top:12px;} .pie-newsletter input{ flex:1; padding:11px 14px; border-radius:2px; border:1px solid rgba(251,246,237,.25); background:transparent; color:var(--crema); font-family:var(--f-body); } .pie-newsletter input::placeholder{color:#B8A692;} .pie-inferior{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:.78rem; color:#B8A692; flex-wrap:wrap; gap:10px; } .banner-categoria{ position:relative; padding:70px 0 44px; text-align:center; background:var(--crema-2); border-bottom:1px solid var(--linea); overflow:hidden; } .banner-categoria::before{ content:''; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; } .banner-categoria .contenedor{position:relative;} .migas{ font-size:.78rem; color:var(--cacao-suave); margin-bottom:14px; } .migas a{color:var(--cacao-suave); border-bottom:1px solid transparent;} .migas a:hover{border-color:var(--cacao-suave);} .banner-categoria p{max-width:56ch; margin:10px auto 0; color:var(--cacao-suave);} .barra-listado{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px 0 24px; } .contador-productos{font-size:.86rem; color:var(--cacao-suave);} .selector-orden{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--cacao-suave); } .selector-orden select{ font-family:var(--f-body); font-size:.86rem; border:1px solid var(--linea); border-radius:2px; padding:9px 12px; background:var(--blanco); color:var(--cacao); } .whatsapp-flotante{ position:fixed; bottom:22px; right:22px; z-index:60; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .18s ease; } .whatsapp-flotante:hover{transform:scale(1.07);} .whatsapp-flotante svg{width:30px;height:30px;} @media (max-width:880px){ .hero-grid{grid-template-columns:1fr;} .hero-foto{aspect-ratio:16/10;} .pie-grid{grid-template-columns:1fr; gap:28px;} } /* ---------- Carrito ---------- */ .pagina-carrito{ padding:50px 0 80px; } .tabla-carrito{ width:100%; border-collapse:collapse; } .tabla-carrito th{ text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cacao-suave); font-weight:600; padding:0 0 14px; border-bottom:1px solid var(--linea); } .tabla-carrito td{ padding:18px 10px; border-bottom:1px solid var(--linea); vertical-align:middle; } .linea-producto{ display:flex; align-items:center; gap:14px; } .linea-producto img{ width:74px; height:74px; object-fit:cover; border-radius:3px; flex:none; } .linea-extras{ font-size:.78rem; color:var(--cacao-suave); margin-top:4px; } .btn-quitar{ background:none; border:none; color:var(--berry); font-size:.8rem; cursor:pointer; text-decoration:underline; padding:0; } .resumen-carrito{ background:var(--crema-2); border-radius:var(--r-card); padding:26px; position:sticky; top:96px; } .fila-resumen{ display:flex; justify-content:space-between; padding:8px 0; font-size:.92rem; color:var(--cacao-suave); } .fila-resumen.total{ border-top:1px solid var(--linea); margin-top:8px; padding-top:16px; font-size:1.15rem; color:var(--cacao); font-weight:700; } .grid-carrito{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:flex-start; } .carrito-vacio{ text-align:center; padding:70px 0; } @media (max-width:880px){ .grid-carrito{ grid-template-columns:1fr; } .resumen-carrito{ position:static; } .tabla-carrito thead{ display:none; } .tabla-carrito td{ display:block; padding:8px 0; border:none; } .tabla-carrito tr{ display:block; border-bottom:1px solid var(--linea); padding:16px 0; } } /* ---------- Checkout ---------- */ .pagina-checkout{ padding:50px 0 80px; } .grid-checkout{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:flex-start; } .formulario-checkout{ display:flex; flex-direction:column; gap:16px; } .campo{ display:flex; flex-direction:column; gap:6px; } .campo label{ font-size:.82rem; font-weight:600; color:var(--cacao); } .campo input, .campo select, .campo textarea{ font-family:var(--f-body); font-size:.95rem; padding:12px 14px; border:1px solid var(--linea); border-radius:2px; background:var(--blanco); color:var(--cacao); } .fila-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .opciones-pago{ display:flex; flex-direction:column; gap:10px; margin-top:6px; } .opcion-pago{ display:flex; align-items:center; gap:10px; border:1px solid var(--linea); border-radius:3px; padding:14px 16px; cursor:pointer; } .opcion-pago input{ accent-color:var(--berry); } .opcion-pago.seleccionada{ border-color:var(--berry); background:#FBF1F0; } @media (max-width:880px){ .grid-checkout{ grid-template-columns:1fr; } .fila-2col{ grid-template-columns:1fr; } } /* ---------- Gracias ---------- */ .pagina-gracias{ text-align:center; padding:110px 0; } .pagina-gracias .sello{ width:70px; height:70px; font-size:1.8rem; margin:0 auto 24px; } /* ========================================================= REDISEÑO INICIO — hero carrusel, iconos, destacado, carruseles de categoría, testimonios ========================================================= */ /* ---------- Hero carrusel (fotos con texto propio, sin overlay HTML) ---------- */ .hero-carousel{ position:relative; height:min(72vh, 620px); min-height:420px; overflow:hidden; background:var(--cacao); } .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease; } .hero-slide.activo{ opacity:1; visibility:visible; } .hero-slide picture{ display:block; width:100%; height:100%; } .hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .hero-slide-cta{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3; } .hero-slide-cta .btn{ background:rgba(59,42,31,.85); color:var(--crema); border-color:transparent; } .hero-slide-cta .btn:hover{ background:var(--berry); } .hero-dots{ position:absolute; bottom:92px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px; } .hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(251,246,237,.55); border:none; cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease; } .hero-dot.activo{ background:var(--dorado-claro); transform:scale(1.3); } @media (max-width:760px){ .hero-carousel{ height:min(78vh, 560px); } .hero-slide-cta{ bottom:26px; } .hero-dots{ bottom:84px; } } /* ---------- Iconos de pasos (reemplazan sellos numerados) ---------- */ .icono-paso{ width:52px; height:52px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--crema); border:1.5px solid var(--linea); color:var(--dorado); } .icono-paso svg{ width:24px; height:24px; } /* ---------- Destacado de compra rápida ---------- */ .destacado-rapido{ padding:60px 0; } .destacado-grid{ display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:center; background:var(--blanco); border-radius:var(--r-card); box-shadow:var(--sombra); padding:28px; } .destacado-foto{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--crema-2); } .destacado-foto img{ width:100%; height:100%; object-fit:cover; } .destacado-info .rotulo{ margin-bottom:.4em; } .destacado-info h3{ font-size:1.6rem; margin-bottom:.3em; } .destacado-precio{ font-family:var(--f-body); font-weight:700; font-size:1.25rem; color:var(--cacao); margin-bottom:16px; } .destacado-acciones{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } @media (max-width:700px){ .destacado-grid{ grid-template-columns:1fr; padding:20px; } .destacado-foto{ max-width:220px; margin:0 auto; } .destacado-info{ text-align:center; } .destacado-acciones{ justify-content:center; } } /* ---------- Carrusel horizontal por categoría ---------- */ .carrusel-categoria{ position:relative; display:flex; align-items:center; gap:8px; } .carrusel-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; padding:4px 2px 4px; flex:1; scrollbar-width:none; -ms-overflow-style:none; } .carrusel-track::-webkit-scrollbar{ display:none; } .carrusel-track .tarjeta-producto{ flex:0 0 250px; scroll-snap-align:start; } .flecha-carrusel{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--linea); background:var(--blanco); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--cacao); cursor:pointer; box-shadow:0 2px 8px rgba(59,42,31,.08); transition:background .18s ease, color .18s ease; } .flecha-carrusel:hover{ background:var(--cacao); color:var(--crema); } @media (max-width:640px){ .flecha-carrusel{ display:none; } .carrusel-track .tarjeta-producto{ flex-basis:180px; } } /* ---------- Testimonios ---------- */ .testimonios{ padding:70px 0; background:var(--crema-2); } .testimonios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .tarjeta-testimonio{ background:var(--blanco); border-radius:var(--r-card); padding:26px; box-shadow:0 1px 3px rgba(59,42,31,.08); } .testimonio-estrellas{ color:var(--dorado); font-size:.9rem; margin-bottom:12px; letter-spacing:2px; } .tarjeta-testimonio p{ font-size:.94rem; color:var(--cacao-suave); font-style:italic; } .testimonio-autor{ display:flex; align-items:center; gap:12px; margin-top:16px; } .testimonio-avatar{ width:38px; height:38px; border-radius:50%; background:var(--rosa); color:var(--berry); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:600; flex:none; } .testimonio-autor strong{ font-size:.88rem; color:var(--cacao); display:block; } .testimonio-autor span{ font-size:.76rem; color:var(--cacao-suave); } @media (max-width:900px){ .testimonios-grid{ grid-template-columns:1fr; } } /* ---------- Logos de métodos de pago (footer) ---------- */ .pie-logos-pago{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pie-logos-pago img{ height:40px; width:64px; object-fit:contain; background:#FBF6ED; border-radius:6px; padding:4px; opacity:.97; } @media (max-width:480px){ .pie-logos-pago img{ height:36px; width:56px; padding:3px; } } /* ---------- Aparición al hacer scroll ---------- */ section.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; } section.reveal-visible{ opacity:1; transform:translateY(0); } /* ---------- Burbuja de saludo de WhatsApp ---------- */ .whatsapp-burbuja{ position:fixed; bottom:92px; right:22px; z-index:60; max-width:230px; background:var(--blanco); color:var(--cacao); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:14px 30px 14px 16px; font-family:var(--f-body); font-size:.86rem; line-height:1.35; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .whatsapp-burbuja.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .whatsapp-burbuja-texto{ display:block; color:var(--cacao); text-decoration:none; } .whatsapp-burbuja-cerrar{ position:absolute; top:6px; right:8px; width:22px; height:22px; border-radius:50%; background:none; border:none; font-size:1rem; line-height:1; color:var(--cacao-suave); cursor:pointer; display:flex; align-items:center; justify-content:center; } .whatsapp-burbuja-cerrar:hover{ background:var(--crema-2); } @media (max-width:480px){ .whatsapp-burbuja{ right:14px; bottom:88px; max-width:190px; font-size:.8rem; padding:12px 26px 12px 14px; } } /* ---------- Página Eventos y Empresas ---------- */ .servicios-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; } .servicios-grid .paso{ text-align:center; } @media (max-width:900px){ .servicios-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; } } @media (max-width:520px){ .servicios-grid{ grid-template-columns:1fr; } } .seccion-video-eventos{ padding:64px 0; } .video-eventos-grid{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; } .video-eventos-marco{ aspect-ratio:9/16; max-height:600px; border-radius:18px; overflow:hidden; box-shadow:0 20px 48px rgba(59,42,31,.22); border:6px solid var(--blanco); background:var(--cacao); justify-self:center; } .video-eventos-texto h2{ margin:6px 0 16px; } .video-eventos-texto p{ color:var(--cacao-suave); margin-bottom:14px; line-height:1.6; } @media (max-width:880px){ .video-eventos-grid{ grid-template-columns:1fr; gap:32px; } .video-eventos-marco{ max-width:280px; max-height:498px; width:100%; } .video-eventos-texto{ text-align:center; } .video-eventos-texto .hero-acciones{ justify-content:center; } } .cta-eventos{ padding:70px 0; background:var(--crema-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); } .cta-eventos h2{ margin:6px 0 14px; } /* ---------- Club Bocados Sorpresa ---------- */ .club-planes{ padding:64px 0; } .planes-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; align-items:stretch; max-width:1060px; margin:0 auto; } .plan-card{ background:var(--blanco); border:1px solid var(--linea); border-radius:12px; padding:30px 26px 24px; display:flex; flex-direction:column; position:relative; text-align:center; } .plan-destacado{ border:2px solid var(--dorado); box-shadow:0 18px 44px rgba(59,42,31,.16); transform:scale(1.03); z-index:1; } .plan-insignia{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--dorado); color:var(--blanco); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 16px; border-radius:20px; white-space:nowrap; } .plan-nombre{ font-size:1.5rem; margin-bottom:2px; } .plan-tagline{ font-size:.86rem; color:var(--cacao-suave); margin-bottom:18px; font-style:italic; } .plan-precio-antes{ font-size:.92rem; color:var(--cacao-suave); text-decoration:line-through; margin-bottom:2px; } .plan-precio{ font-family:var(--f-body); font-weight:700; font-size:2rem; color:var(--cacao); } .plan-precio span{ font-size:.9rem; font-weight:500; color:var(--cacao-suave); } .plan-equivale{ font-size:.78rem; color:var(--dorado); font-weight:600; margin:6px 0 20px; } .plan-beneficios{ list-style:none; padding:0; margin:0 0 24px; text-align:left; flex:1; } .plan-beneficios li{ font-size:.86rem; color:var(--cacao); padding:8px 0 8px 26px; border-bottom:1px solid var(--crema-2); position:relative; line-height:1.45; } .plan-beneficios li::before{ content:'✓'; position:absolute; left:2px; top:8px; color:var(--dorado); font-weight:700; } .plan-ahorro{ margin-top:12px; font-size:.8rem; font-weight:700; color:var(--dorado); letter-spacing:.02em; } @media (max-width:900px){ .planes-grid{ grid-template-columns:1fr; max-width:420px; } .plan-destacado{ transform:none; order:-1; } } /* Modal del Club */ .modal-club{ position:fixed; inset:0; z-index:100; background:rgba(59,42,31,.55); display:flex; align-items:center; justify-content:center; padding:20px; } .modal-club-caja{ background:var(--crema); border-radius:12px; max-width:420px; width:100%; padding:30px 28px; position:relative; max-height:90vh; overflow-y:auto; } .modal-club-cerrar{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--cacao-suave); cursor:pointer; } .modal-club-cerrar:hover{ color:var(--cacao); } /* ---------- "Club BS" con brillo de diamante ---------- */ .nav-club-brillante{ position:relative; background:linear-gradient(90deg, var(--dorado) 0%, var(--dorado-claro) 25%, var(--dorado) 50%, var(--dorado-claro) 75%, var(--dorado) 100%); background-size:250% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-weight:600; animation:navClubBrillo 3.2s linear infinite; } .nav-club-brillante:hover{ opacity:.85; } .nav-club-brillante::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--dorado); animation:navClubPulso 2.2s ease-in-out infinite; } @keyframes navClubBrillo{ 0%{ background-position:250% center; } 100%{ background-position:-250% center; } } @keyframes navClubPulso{ 0%, 100%{ opacity:.3; } 50%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .nav-club-brillante, .nav-club-brillante::after{ animation:none; } } /* ========================================================= OPTIMIZACIÓN MÓVIL — clientes que llegan de redes sociales ========================================================= */ @media (max-width:760px){ /* Barra de anuncio: menos espaciado para que quepa en una línea */ .barra-anuncio{ font-size:.66rem; letter-spacing:.08em; padding:8px 10px; } /* Objetivos táctiles: mínimo ~44px para dedos, no cursores */ .stepper-cantidad button{ width:42px; height:42px; font-size:1.15rem; } .stepper-cantidad .cantidad-input{ height:42px; width:38px; font-size:.95rem; } .tarjeta-acciones .btn{ padding:13px 12px; font-size:.74rem; } .faq-pregunta{ padding:18px 4px; min-height:52px; } /* Tipografía: títulos más contenidos en pantallas angostas */ h1{ font-size:1.9rem; } h2{ font-size:1.5rem; } .banner-categoria p{ font-size:.92rem; } /* Secciones: menos aire vertical para que el contenido llegue antes */ .pasos{ padding:44px 0; } .testimonios{ padding:48px 0; } .seccion-video-eventos{ padding:44px 0; } .cta-eventos{ padding:50px 0; } /* Modal del Club a pantalla casi completa en móvil */ .modal-club{ padding:12px; align-items:flex-end; } .modal-club-caja{ max-width:none; border-radius:14px 14px 0 0; padding:26px 20px; max-height:94vh; } /* Botones de página siempre cómodos de tocar */ .btn{ padding:14px 24px; } /* Footer: columnas apiladas con menos espacio muerto */ .pie-grid{ gap:26px; } .pie-logos-pago{ justify-content:center; } .pie-inferior{ flex-direction:column; gap:6px; text-align:center; } } /* Pantallas muy angostas (Instagram browser en teléfonos pequeños) */ @media (max-width:390px){ .logo img{ height:56px; } .carrusel-track .tarjeta-producto{ flex-basis:160px; } .tarjeta-cuerpo h3{ font-size:.98rem; } } /* ---------- Selector de productos del Club ---------- */ .club-selector{ padding:64px 0 40px; } .selector-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:28px; } .selector-tab{ font-family:var(--f-body); font-size:.84rem; font-weight:500; padding:10px 20px; border-radius:30px; border:1px solid var(--linea); background:var(--blanco); color:var(--cacao-suave); cursor:pointer; transition:all .2s ease; } .selector-tab.activa{ background:var(--cacao); border-color:var(--cacao); color:var(--crema); } .selector-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .selector-item{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 12px 16px; background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px; font-family:var(--f-body); transition:border-color .2s ease, box-shadow .2s ease; } .selector-item:hover{ border-color:var(--dorado); } .selector-item.elegido{ border-color:var(--dorado); box-shadow:0 0 0 1px var(--dorado); background:var(--crema-2); } .selector-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; } .selector-item-nombre{ font-size:.86rem; color:var(--cacao); font-weight:500; margin-top:2px; } .selector-item-precio{ font-size:.8rem; color:var(--cacao-suave); } .selector-item-vermas{ position:absolute; top:8px; left:8px; z-index:1; width:24px; height:24px; border-radius:50%; background:rgba(251,246,237,.9); border:1.5px solid var(--linea); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:var(--cacao-suave); cursor:pointer; } .selector-item-vermas:hover{ border-color:var(--dorado); color:var(--dorado); } .selector-item-stepper{ display:flex; align-items:center; justify-content:center; gap:0; margin-top:6px; border:1px solid var(--linea); border-radius:20px; overflow:hidden; } .selector-item-stepper button{ width:28px; height:28px; border:none; background:var(--crema-2); color:var(--cacao); font-size:1rem; cursor:pointer; line-height:1; } .selector-item-stepper button:hover{ background:var(--dorado); color:var(--blanco); } .selector-item-cantidad{ min-width:26px; font-size:.85rem; font-weight:600; color:var(--cacao); } .plan-card.tramo-activo{ border-color:var(--dorado); box-shadow:0 0 0 2px var(--dorado); } /* Botón de confirmar, resaltado cuando ya se alcanzó un tramo de descuento */ .resumen-club #btnConfirmarSeleccion.boton-desbloqueado{ background:var(--dorado); border-color:var(--dorado); color:var(--cacao); font-weight:700; animation:pulsoDesbloqueado 1.6s ease-in-out infinite; } @keyframes pulsoDesbloqueado{ 0%, 100%{ box-shadow:0 0 0 0 rgba(184,145,46,.55); } 50%{ box-shadow:0 0 0 8px rgba(184,145,46,0); } } @media (prefers-reduced-motion: reduce){ .resumen-club #btnConfirmarSeleccion.boton-desbloqueado{ animation:none; } } /* ---------- Barra de resumen fija ---------- */ .resumen-club{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--cacao); color:var(--crema); border-top:2px solid var(--dorado); box-shadow:0 -10px 30px rgba(59,42,31,.32); } .resumen-club-interior{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:14px 24px; max-width:1160px; margin:0 auto; } .resumen-club-info{ display:flex; flex-direction:column; gap:3px; } .resumen-club-info strong{ font-size:1rem; letter-spacing:.01em; } .resumen-club-info span{ font-size:.78rem; color:var(--dorado-claro); font-weight:500; } .resumen-club-precios{ display:flex; align-items:baseline; gap:12px; } .resumen-subtotal{ font-size:.84rem; color:#B8A692; } .resumen-total{ font-family:var(--f-body); font-size:1.4rem; font-weight:700; color:var(--dorado-claro); letter-spacing:.01em; } .resumen-club #btnConfirmarSeleccion{ padding:14px 30px; font-size:.78rem; letter-spacing:.06em; } .resumen-club #btnConfirmarSeleccion:disabled{ opacity:.4; cursor:not-allowed; } @media (max-width:760px){ .selector-grid{ grid-template-columns:repeat(2, 1fr); } .resumen-club-interior{ justify-content:center; text-align:center; padding:14px 16px 16px; } .resumen-club-precios{ order:2; } .resumen-club #btnConfirmarSeleccion{ width:100%; order:3; } .resumen-total{ font-size:1.3rem; } } /* ---------- Tarjetas de canje individual (canjear.php) ---------- */ .tarjeta-canje{ border:1px solid var(--linea); border-radius:10px; margin-bottom:14px; overflow:hidden; background:var(--blanco); } .tarjeta-canje-cabecera{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:none; border:none; cursor:pointer; font-family:var(--f-body); font-size:.94rem; color:var(--cacao); text-align:left; } .tarjeta-canje-cabecera .mas{ font-size:1.2rem; color:var(--dorado); transition:transform .2s ease; flex:none; margin-left:12px; } .tarjeta-canje.abierta .tarjeta-canje-cabecera .mas{ transform:rotate(45deg); } .tarjeta-canje-cuerpo{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 18px; } .tarjeta-canje.abierta .tarjeta-canje-cuerpo{ max-height:900px; padding:0 18px 20px; } /* ---------- Créditos del footer (sitio hermano + diseñador) ---------- */ .pie-creditos{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:18px 0 6px; } .pie-credito-hermano, .pie-credito-diseno{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid rgba(251,246,237,.18); border-radius:30px; font-size:.76rem; color:#D8C9B8; text-decoration:none; transition:border-color .2s ease, background .2s ease; } .pie-credito-hermano:hover, .pie-credito-diseno:hover{ border-color:var(--dorado); background:rgba(184,145,46,.08); color:var(--dorado-claro); } .pie-credito-hermano strong, .pie-credito-diseno strong{ color:var(--dorado-claro); font-weight:600; } .pie-credito-etiqueta{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dorado); border-right:1px solid rgba(251,246,237,.2); padding-right:8px; margin-right:2px; } @media (max-width:480px){ .pie-creditos{ flex-direction:column; gap:8px; } } /* ========================================================= MI CUENTA — diseño por paneles ========================================================= */ .cuenta-hero{ background:var(--crema-2); padding:44px 0 30px; border-bottom:1px solid var(--linea); } .cuenta-hero h1{ margin-top:4px; } .cuenta-stats{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; } .cuenta-stat{ flex:1 1 auto; min-width:150px; background:var(--blanco); border:1px solid var(--linea); border-radius:10px; padding:18px 20px; } .cuenta-stat-valor{ display:block; font-family:var(--f-body); font-weight:700; font-size:1.3rem; color:var(--cacao); } .cuenta-stat-label{ display:block; font-size:.76rem; color:var(--cacao-suave); margin-top:4px; } .cuenta-stat-dorado .cuenta-stat-valor{ color:var(--dorado); } .cuenta-grid-2col{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; } .cuenta-tarjeta{ background:var(--blanco); border:1px solid var(--linea); border-radius:10px; padding:26px 28px; } .cuenta-tarjeta-club{ border-top:3px solid var(--dorado); } .cuenta-tarjeta-invitacion{ background:var(--crema-2); } .cuenta-tarjeta-encabezado{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .cuenta-saldo{ text-align:center; flex:none; } .cuenta-saldo-numero{ display:block; font-family:var(--f-body); font-weight:700; font-size:1.6rem; color:var(--dorado); } .cuenta-saldo-etiqueta{ font-size:.7rem; color:var(--cacao-suave); line-height:1.3; } .cuenta-lista-productos{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px; } .cuenta-lista-productos li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; background:var(--crema-2); border-radius:6px; font-size:.86rem; } .cuenta-lista-productos li.canjeado{ opacity:.55; } .cuenta-lista-productos li .valor{ color:var(--cacao-suave); white-space:nowrap; font-weight:600; } .cuenta-dato{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); font-size:.88rem; } .cuenta-dato:last-of-type{ border-bottom:none; } .cuenta-dato-label{ color:var(--cacao-suave); } .cuenta-tabla-pedidos th{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cacao-suave); } .cuenta-badge{ display:inline-block; padding:4px 11px; border-radius:20px; font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; } .cuenta-badge-pendiente_pago{ background:#FBF0DD; color:#8A6D1E; } .cuenta-badge-pagado{ background:#E4F1E5; color:#2E6B37; } .cuenta-badge-en_preparacion{ background:#E4ECF7; color:#2E4F8A; } .cuenta-badge-en_camino{ background:#EBE4F7; color:#5B2E8A; } .cuenta-badge-entregado{ background:#DCEFE9; color:#1E6B57; } .cuenta-badge-cancelado{ background:#FBEAEA; color:#8A2E2E; } @media (max-width:880px){ .cuenta-grid-2col{ grid-template-columns:1fr; } .cuenta-stat{ min-width:130px; padding:14px 16px; } .cuenta-stat-valor{ font-size:1.1rem; } } /* ---------- Campo de contraseña con "ojito" para mostrar/ocultar ---------- */ .campo-password{ position:relative; } .campo-password input{ padding-right:44px; } .campo-password .btn-ver-clave{ position:absolute; right:10px; top:50%; transform:translateY(calc(-50% + 12px)); background:none; border:none; cursor:pointer; padding:6px; color:var(--cacao-suave); display:flex; align-items:center; } .campo-password .btn-ver-clave:hover{ color:var(--dorado); } .campo-password .icono-ojo-cerrado{ display:none; } .campo-password.mostrando .icono-ojo-abierto{ display:none; } .campo-password.mostrando .icono-ojo-cerrado{ display:block; }