/* * site.css — Estilos globales del sitio Lucre's Fashion (ASP.NET Core MVC) * ----------------------------------------------------------------------- * Orden aproximado: reset/base → layout (header, footer, main) → páginas por nombre * (inicio, catálogo, login, guía de tallas, contacto, formularios de producto) → utilidades. * Las vistas aplican clases al vía ViewData["MenuActivo"] (ej. body-pagina-catalogo) * para segmentar estilos sin duplicar plantillas. * Paleta y tipografías base del proyecto: */ /* Paleta permitida: #333 #ed1e79 #4d5959 #433B3B #428445 #e0b252 #EB001B #ffffff #222222 #000000 #ec0101 #b00e55 #fa0000 #999999 #878787 #ddd #383838 #109533 #0774d7 #00A500 */ /* Tipografía permitida: Lato, Arial, Helvetica, sans-serif, Montserrat, Libre Baskerville */ /* Cuerpo de texto interno / formularios: misma familia que el menú cabecera (Playfair) */ :root { --texto-cuerpo-interno-font: "Playfair Display", serif; --texto-cuerpo-interno-size: 1rem; --texto-cuerpo-interno-color: #4a5568; --texto-cuerpo-interno-line-height: 1.6; /* Dropdowns: igual que etiquetas / campos */ --lucre-dropdown-font: "Playfair Display", serif; --lucre-dropdown-size: 0.98rem; /* Ancho estándar para textbox/select en formularios */ --lucre-campo-max: 360px; /* Borde / halo fucsia al enfocar campos (ver regla global :focus más abajo) */ --lucre-fucsia: #ed1e79; /* Textbox / select en reposo: borde fino rosa, fondo y sombra con tinte fucsia (se nota sin ser fuerte) */ --lucre-input-border-width: 1px; --lucre-input-border-color: rgba(237, 30, 121, 0.28); --lucre-input-bg: #fff8fb; --lucre-input-rest-shadow: 0 2px 8px rgba(237, 30, 121, 0.14), 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85); /* Halo al enfocar textos / selects (más visible que el azul por defecto de Bootstrap) */ --lucre-input-focus-shadow: 0 0 0 4px rgba(237, 30, 121, 0.65); /* Sustituye el anillo azul por defecto de Bootstrap 5 donde use --bs-focus-ring-* */ --bs-focus-ring-color: rgba(237, 30, 121, 0.55); --bs-focus-ring-opacity: 0.55; /* Menú cabecera: igual familia/peso base que .inicio-inspiracion .texto-eslogan («Diseños que resaltan…») */ --menu-nav-font-family: "Playfair Display", serif; --menu-nav-font-weight: 600; --menu-nav-letter-spacing: 0.06em; /* Nombre y precio de producto (listado + detalle): gris claro / gris ratón */ --producto-nombre-precio-gris: #86817c; /* Halo dorado difuminado: más presente que antes, sin volver al amarillo duro */ --lucre-btn-gold-glow: 0 3px 20px rgba(196, 152, 98, 0.44), 0 0 40px rgba(228, 188, 132, 0.32), 0 0 70px rgba(242, 210, 165, 0.24), 0 0 115px rgba(255, 228, 205, 0.18); --lucre-btn-gold-glow-hover: 0 5px 26px rgba(184, 138, 82, 0.52), 0 0 50px rgba(220, 178, 118, 0.38), 0 0 88px rgba(238, 205, 155, 0.3), 0 0 135px rgba(255, 232, 215, 0.22); /* Botones sobre fondo claro / solo borde */ --lucre-btn-gold-glow-soft: 0 2px 18px rgba(196, 152, 98, 0.36), 0 0 46px rgba(225, 188, 135, 0.24), 0 0 92px rgba(245, 218, 188, 0.16); /* Halo dorado de cards Categorías (y menú inicio) */ --lucre-sombra-categorias-card: 0 -10px 34px rgba(212, 175, 95, 0.22), 0 -3px 14px rgba(200, 168, 88, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 34px rgba(212, 172, 92, 0.22), 0 30px 74px rgba(204, 168, 90, 0.18), 0 52px 120px rgba(0, 0, 0, 0.14); /* Misma sombra que .detalle-prod-mega-card (ficha individual de producto) */ --lucre-sombra-ficha-producto: 0 4px 6px rgba(42, 38, 35, 0.06), 0 12px 28px rgba(212, 175, 95, 0.28), 0 22px 55px -8px rgba(212, 175, 95, 0.42), 0 36px 90px -18px rgba(180, 150, 100, 0.35), 0 52px 120px -28px rgba(120, 90, 55, 0.12); --lucre-sombra-ficha-producto-hover: 0 6px 10px rgba(42, 38, 35, 0.08), 0 14px 32px rgba(212, 175, 95, 0.32), 0 26px 62px -6px rgba(212, 175, 95, 0.46), 0 40px 96px -16px rgba(180, 150, 100, 0.38), 0 56px 128px -26px rgba(120, 90, 55, 0.14); /* Cards del menú administración (Crear, Modificar, Manejo imágenes, etc.) */ --lucre-sombra-admin-card: 0 3px 8px rgba(0, 0, 0, 0.1), 0 10px 28px rgba(212, 175, 95, 0.42), 0 22px 52px rgba(204, 168, 90, 0.32), 0 36px 80px rgba(212, 175, 95, 0.26), 0 52px 110px rgba(180, 150, 100, 0.18); /* Banner principal de la página de inicio */ --lucre-sombra-banner-inicio: 0 6px 18px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(212, 175, 95, 0.16); } /* Texto con tipografía/estética del menú (útil para subtítulos cortos) */ .texto-menu-mayuscula { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; } /* Texto con la misma tipografía del menú (sin forzar mayúsculas) */ .texto-menu-font { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); } /* En formularios, .texto-menu-font no debe forzar Playfair (p. ej. alertas en cards) */ .card-formulario-interno .texto-menu-font, .contenedor-iniciar-sesion .texto-menu-font { font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 500 !important; letter-spacing: normal !important; } /* Si el subtítulo incluye el span de flor, que no cambie de tipografía */ .texto-menu-mayuscula .texto-presentacion-flor { font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit; text-transform: none; } html { font-size: 14px; } /* ======================================================================= Formularios: unificar longitud de textbox/select en todo el sitio (Solo aplica a controles con clase .form-control-buscar / .form-select.form-control-buscar) ======================================================================= */ .pagina-formulario-producto :is(.form-control-buscar, .form-select.form-control-buscar), .contenedor-iniciar-sesion :is(.form-control-buscar, .form-select.form-control-buscar), .pagina-buscar-producto :is(.form-control-buscar, .form-select.form-control-buscar), .pagina-eliminar-producto :is(.form-control-buscar, .form-select.form-control-buscar), #modalCrearCategoria :is(.form-control-buscar, .form-select.form-control-buscar), #modalCrearRol :is(.form-control-buscar, .form-select.form-control-buscar), #modalBuscarUsuario :is(.form-control-buscar, .form-select.form-control-buscar), #modalEliminarUsuario :is(.form-control-buscar, .form-select.form-control-buscar), #modalModificarUsuario :is(.form-control-buscar, .form-select.form-control-buscar) { width: 100%; max-width: var(--lucre-campo-max); margin-left: auto; margin-right: auto; } /* Modal Crear categoría: mantener alineación (no centrado) */ #modalCrearCategoria :is(.form-control-buscar, .form-select.form-control-buscar) { max-width: var(--lucre-campo-max); margin-left: 0; margin-right: 0; } /* Modal Crear categoría: tipografía homogénea en dropdowns y textbox */ #modalCrearCategoria :is(.form-control, .form-control-buscar, .form-select) { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; color: var(--texto-cuerpo-interno-color) !important; letter-spacing: normal !important; text-transform: none !important; } /* Algunos estilos del modal fuerzan Arial: aquí lo sobreescribimos para el dropdown */ #modalCrearCategoria :is(select.form-select, .form-select.form-control-buscar), #modalCrearCategoria :is(select.form-select, .form-select.form-control-buscar) option { font-family: var(--texto-cuerpo-interno-font) !important; } @media (min-width: 768px) { html { font-size: 16px; } } /* Botones y enlaces tipo nav: anillo de foco fucsia (nunca azul) */ .btn:focus, .btn:focus-visible, .btn:active:focus, .btn-link.nav-link:focus { box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(237, 30, 121, 0.55) !important; outline: none !important; } /* Todos los .btn: tipografía menú + halo dorado difuminado */ .btn:not(.navbar-toggler):not(.btn-link):not(.btn-close) { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; box-shadow: var(--lucre-btn-gold-glow); transition: box-shadow 0.22s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn:not(.navbar-toggler):not(.btn-link):not(.btn-close):hover:not(:disabled):not(.disabled) { box-shadow: var(--lucre-btn-gold-glow-hover); } /* Menú hamburguesa: mismo halo (más suave sobre barra fucsia) */ .navbar-toggler { box-shadow: var(--lucre-btn-gold-glow-soft); transition: box-shadow 0.22s ease, opacity 0.2s ease; } .navbar-toggler:hover { box-shadow: var(--lucre-btn-gold-glow); } /* Acordeones Bootstrap: el botón no usa la clase .btn */ button.accordion-button { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; box-shadow: var(--lucre-btn-gold-glow); transition: box-shadow 0.22s ease, background-color 0.2s ease; } button.accordion-button:hover { box-shadow: var(--lucre-btn-gold-glow-hover); } /* Estado normal: borde rosado leve + sombra visible; :focus sustituye la sombra por el anillo fucsia */ .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea.form-control, .form-select { font-family: var(--texto-cuerpo-interno-font); border-width: var(--lucre-input-border-width) !important; border-style: solid !important; border-color: var(--lucre-input-border-color) !important; background-color: var(--lucre-input-bg) !important; box-shadow: var(--lucre-input-rest-shadow) !important; } .form-label, .form-check-label:not(.btn) { font-family: var(--texto-cuerpo-interno-font); } /* Textos, desplegables y checkboxes: pisa el borde #86b7fe / sombra azul de bootstrap.css */ .form-control:focus, textarea.form-control:focus, .form-select:focus, .form-select:focus-visible, .form-check-input:focus { border-color: var(--lucre-fucsia) !important; box-shadow: var(--lucre-input-focus-shadow) !important; outline: none !important; } /* Elegir archivo (imagen): mismo borde/sombra rosada que los textbox */ .pagina-formulario-producto input[type="file"].form-control, .pagina-buscar-producto input[type="file"].form-control, .pagina-eliminar-producto input[type="file"].form-control, .contenedor-card-formulario input[type="file"].form-control, #modalCrearCategoria input[type="file"].form-control, .contenedor-iniciar-sesion input[type="file"].form-control, .pagina-manejo-imagenes input[type="file"].form-control { border-width: var(--lucre-input-border-width) !important; border-style: solid !important; border-color: var(--lucre-input-border-color) !important; background-color: var(--lucre-input-bg) !important; box-shadow: var(--lucre-input-rest-shadow) !important; padding: 0.45rem 0.65rem; border-radius: 0.375rem; } .pagina-formulario-producto input[type="file"].form-control:focus, .pagina-buscar-producto input[type="file"].form-control:focus, .pagina-eliminar-producto input[type="file"].form-control:focus, .contenedor-card-formulario input[type="file"].form-control:focus, #modalCrearCategoria input[type="file"].form-control:focus, .contenedor-iniciar-sesion input[type="file"].form-control:focus, .pagina-manejo-imagenes input[type="file"].form-control:focus { border-color: var(--lucre-fucsia) !important; box-shadow: var(--lucre-input-focus-shadow) !important; outline: none !important; } /* Checkboxes: borde rosado homogéneo en todo el sitio */ .form-check-input[type="checkbox"] { accent-color: var(--lucre-fucsia); border-color: rgba(237, 30, 121, 0.45) !important; background-color: #ffffff !important; } .form-check-input[type="checkbox"]:checked { border-color: var(--lucre-fucsia) !important; background-color: var(--lucre-fucsia) !important; } .form-check-input[type="checkbox"]:disabled { border-color: rgba(237, 30, 121, 0.35) !important; } .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea.form-control:focus, .form-select:focus, .form-select:focus-visible { background-color: #ffffff !important; } /* Botón X de modales: Bootstrap usa sombra azul en :focus */ .btn-close:focus, .btn-close:focus-visible { box-shadow: 0 0 0 0.25rem rgba(237, 30, 121, 0.35) !important; outline: none !important; } html { position: relative; min-height: 100%; height: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: #4d5959; } /* Cards Bootstrap: esquinas cuadradas en todo el sitio (excepción: reseñas de inicio .inicio-tarjeta-cliente) */ .card:not(.inicio-tarjeta-cliente) { border-radius: 0 !important; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; } /* El contenedor del main crece para que el footer quede abajo sin espacio blanco (Contacto, Guía de tallas, Login usan container-fluid) */ body > .container, body > .container-fluid { flex: 1 0 auto; } /* Evitar que el contenido central colapse en layout flex (páginas con _Layout: Contacto, Guía de tallas, Login) */ body > .container main, body > .container-fluid main { min-height: 1px; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Navbar: fondo blanco, más espacio (alineado con la línea fucsia) */ .navbar { background-color: #ffffff !important; box-shadow: none !important; padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; } /* Líneas rosadas: borde superior e inferior del menú (contenedor del nav) */ .borde-menu-rosado { display: block; width: 100%; border-top: 2px solid #ed1e79; border-bottom: 2px solid #ed1e79; border-left: none; border-right: none; box-sizing: border-box; } /* En Contacto: línea bajo el menú totalmente blanca */ .body-pagina-contacto .menu-principal-header .borde-menu-rosado { border-top: 3px solid #ffffff !important; border-bottom: 3px solid #ffffff !important; background-color: #ffffff !important; min-height: 6px; box-shadow: none !important; } .body-pagina-contacto .menu-principal-header { border-bottom: 3px solid #ffffff !important; } .navbar-centrada { position: relative; } .navbar-brand-izq { position: absolute; left: 1rem; } @media (min-width: 576px) { .navbar-centrada .navbar-collapse { flex-grow: 1; justify-content: center; } } .navbar .navbar-brand, .navbar .nav-link { color: #4d5959 !important; } /* Asegurar que los enlaces del menú sean clickeables (sobre el contenido con position) */ .navbar .nav-link { position: relative; z-index: 10; pointer-events: auto; } .navbar .nav-link:hover { color: #383838 !important; } /* Más espacio entre ítems del menú */ .navbar-nav-espaciado { gap: 0.5rem; } .navbar-nav-espaciado .nav-item { margin-left: 1rem; margin-right: 1rem; } .navbar-nav-espaciado .nav-link { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Botón Log in: #ed1e79; tipografía y sombra vía reglas globales .btn / --lucre-btn-gold-* */ .btn-login { background-color: #ed1e79; color: #ffffff !important; border-color: #ed1e79; padding: 0.35rem 0.85rem; font-size: 0.95rem; } .btn-login:hover { background-color: #b00e55; border-color: #b00e55; color: #ffffff !important; } /* Título "Lo que dicen nuestras clientas": misma proporción arriba y abajo */ .titulo-clientas { margin: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; color: #4d5959; } .contenedor-tarjetas { padding-top: 0; padding-bottom: 1.5rem; } /* Tarjetas de reseñas: marco con proporción fija + contain (sin recortar retratos) */ .tarjeta-resena.inicio-tarjeta-cliente { display: flex; flex-direction: column; } .tarjeta-resena-media { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 340px; background: linear-gradient(165deg, #faf8f9 0%, #f0e8ec 55%, #ebe3e6 100%); overflow: hidden; border-radius: 12px 12px 0 0; } .tarjeta-resena .img-resena { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (max-width: 575.98px) { .tarjeta-resena-media { max-height: min(72vw, 400px); aspect-ratio: 3 / 4; } } .tarjeta-resena .card-body { display: flex; flex-direction: column; justify-content: flex-start; flex: 1 1 auto; } .tarjeta-resena .card-text { color: #4a5568; } /* Texto bajo las tarjetas */ .texto-eslogan { font-size: 1.35rem; font-weight: 700; font-family: sans-serif; letter-spacing: -0.02em; color: #ed1e79; } /* Frase de marca (inicio, guía): sans ligera, rosa vivo tipo referencia (~18–22px) */ .texto-presentacion { font-family: Montserrat, sans-serif; font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 300; letter-spacing: 0.01em; line-height: 1.55; color: #e91e63; } .texto-presentacion-flor { display: inline-block; margin-left: 0.35em; font-style: normal; white-space: nowrap; font-size: 1.2em; line-height: 1; vertical-align: -0.08em; /* Halo suave acorde al rosa del texto */ filter: drop-shadow(0 0 6px rgba(233, 30, 99, 0.5)) drop-shadow(0 1px 2px rgba(255, 182, 198, 0.85)); } /* ----- Página Inicio: hero, testimonios, inspiración, categorías ----- */ /* Botones de inicio: esquinas cuadradas (el Log in del menú mantiene border-radius como .btn-login) */ .body-pagina-inicio .btn:not(.btn-close):not(.btn-salir-menu), .body-pagina-inicio .navbar-toggler { border-radius: 0 !important; } .body-pagina-inicio .menu-principal-links .btn-salir-menu { border-radius: 6px !important; } .body-pagina-inicio > .container-fluid { overflow: visible; } .inicio-hero { background-color: #ffffff; padding: 1.5rem 0 2rem; } .inicio-hero-solo-imagen { padding: 0; } .inicio-hero-solo-imagen .inicio-hero-imagen { max-width: none; width: 100%; display: block; vertical-align: top; } /* Banner inicio: alto tipo pantalla + título marca (estilo editorial / boutique) */ .inicio-hero.inicio-hero-banner { padding: 0; background: #ffffff; width: 100%; max-width: 100%; overflow-x: clip; } .inicio-hero-banner-inner { position: relative; width: 100%; min-height: min(78vh, 880px); max-height: min(92vh, 960px); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; padding-left: clamp(1.25rem, 5vw, 3.5rem); padding-right: 1.25rem; padding-bottom: clamp(2rem, 7vh, 4.5rem); box-sizing: border-box; } .inicio-hero-banner-slides { position: absolute; inset: 0; z-index: 0; } .inicio-hero-banner-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transform: scale(1.08); filter: brightness(0.82) saturate(0.92); transition: opacity 2.45s cubic-bezier(0.42, 0.02, 0.18, 1), transform 2.55s cubic-bezier(0.35, 0.06, 0.22, 1), filter 2.4s ease-out; pointer-events: none; } .inicio-hero-banner-slide.is-active { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); z-index: 1; } .inicio-hero-banner-dots { position: absolute; right: clamp(0.85rem, 2.5vw, 1.75rem); bottom: clamp(0.75rem, 2.5vh, 1.5rem); z-index: 3; display: flex; flex-direction: row; align-items: center; gap: 0.45rem; } .inicio-hero-banner-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(255, 255, 255, 0.42); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); transition: background 0.2s ease, transform 0.2s ease; } .inicio-hero-banner-dot:hover { background: rgba(255, 255, 255, 0.65); } .inicio-hero-banner-dot.is-active { background: #ffffff; transform: scale(1.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); } .inicio-hero-banner-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Viñeta tipo editorial: más oscuro abajo + costado izquierdo (texto), más claro hacia la modelo */ background: linear-gradient( to right, rgba(12, 6, 8, 0.82) 0%, rgba(12, 6, 8, 0.42) 32%, rgba(0, 0, 0, 0.14) 52%, rgba(0, 0, 0, 0.04) 72%, transparent 88% ), linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.48) 36%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0.14) 100% ); } .inicio-hero-banner-texto { position: relative; z-index: 2; width: 100%; max-width: min(560px, 92vw); margin: 0; padding: 0; text-align: left; } .inicio-hero-marca-titulo { margin: 0; font-weight: 400; font-style: normal; color: #f5f5f5; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45); } /* Estilo referencia: script elegante + serif en mayúsculas */ .inicio-hero-marca-script { display: block; font-family: "Great Vibes", cursive; font-size: clamp(3.25rem, 11vw, 6.5rem); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; color: #f5f5f5; } .inicio-hero-marca-serif { display: block; margin-top: 0.12em; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.1rem, 3vw, 1.95rem); font-weight: 300; font-style: normal; text-transform: uppercase; letter-spacing: 0.38em; line-height: 1.25; color: #ececec; } /* Una sola imagen de hero: sin viñeta, puntos ni texto HTML (todo va en el arte) */ .inicio-hero-banner--solo-imagen .inicio-hero-banner-inner { padding: 0; align-items: stretch; justify-content: stretch; min-height: min(72vh, 820px); max-height: min(88vh, 920px); box-shadow: var(--lucre-sombra-banner-inicio); } .inicio-hero-banner--solo-imagen .inicio-hero-banner-slide--solo { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: none; object-position: center center; display: block; } /* Móvil / tablet estrecha: caja 16/9 + cover para no dejar franjas (contain dejaba bandas blancas si el PNG no calzaba exacto) */ @media (max-width: 767.98px) { .inicio-hero.inicio-hero-banner.inicio-hero-banner--solo-imagen { margin-top: 0; margin-bottom: 0; } .inicio-hero-banner--solo-imagen .inicio-hero-banner-inner { min-height: 0; aspect-ratio: 16 / 9; max-height: none; line-height: 0; } .inicio-hero-banner--solo-imagen .inicio-hero-banner-slide--solo { object-fit: cover; object-position: center center; } } @media (max-width: 575.98px) { .inicio-hero-banner-inner { min-height: min(68vh, 560px); max-height: 85vh; } .inicio-hero-banner--solo-imagen .inicio-hero-banner-inner { min-height: 0; aspect-ratio: 16 / 9; max-height: none; } .inicio-hero-marca-serif { letter-spacing: 0.28em; } } @media (prefers-reduced-motion: reduce) { .inicio-hero-banner-slide { transition: none; transform: none; filter: none; } .inicio-hero-banner-slide.is-active { transform: none; filter: none; } } /* Franja NEW ARRIVALS (marquee continuo, muy lento hacia la derecha) */ .inicio-new-arrivals-bar--bajo-menu { margin-top: 0; margin-bottom: 0.65rem; } .inicio-new-arrivals-bar { position: relative; z-index: 4; overflow-x: hidden; overflow-y: visible; width: 100%; background: #ffffff; border-top: 1px solid #ed1e79; border-bottom: 1px solid #ed1e79; padding: clamp(0.85rem, 2.2vw, 1.15rem) 0; margin-bottom: 0.65rem; line-height: 1.5; box-shadow: none; } /* Borde inferior: halo dorado Categorías (capa aparte para que no se recorte ni se pierda en blanco) */ .inicio-new-arrivals-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; box-shadow: 0 4px 12px rgba(212, 175, 95, 0.55), 0 10px 26px rgba(212, 172, 92, 0.42), 0 18px 40px rgba(204, 168, 90, 0.3), 0 28px 56px rgba(180, 150, 85, 0.18); } .inicio-new-arrivals-track { display: flex; width: max-content; animation: inicio-new-arrivals-marquee 180s linear infinite reverse; will-change: transform; } @keyframes inicio-new-arrivals-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .inicio-new-arrivals-segment { flex-shrink: 0; white-space: nowrap; padding-right: 1.25rem; font-family: Montserrat, sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: #ed1e79; } @media (prefers-reduced-motion: reduce) { .inicio-new-arrivals-track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; white-space: normal; } .inicio-new-arrivals-segment { white-space: normal; text-align: center; padding-right: 0; } .inicio-new-arrivals-segment[aria-hidden="true"] { display: none; } } .inicio-hero-fila { min-height: 320px; } .inicio-hero-texto { padding: 1.5rem 1.5rem 1.5rem 2rem; display: flex; flex-direction: column; justify-content: center; } .inicio-hero-titulo { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: #ec0101; margin: 0 0 0.75rem 0; line-height: 1.2; font-family: Montserrat, sans-serif; } .inicio-hero-corazon { color: #ec0101; margin-left: 0.15rem; } .inicio-hero-eslogan { font-size: 1.1rem; color: #222222; margin: 0; max-width: 420px; font-family: Lato, sans-serif; } .inicio-hero-imagen-wrap { padding: 1rem 1.5rem 1.5rem; text-align: center; } .inicio-hero-imagen { width: 100%; max-width: 520px; height: auto; object-fit: contain; border-radius: 8px; } .inicio-seccion { padding: 2rem 0; } .inicio-seccion-titulo { margin: 0 0 1.25rem 0; padding-top: 0.5rem; color: #ed1e79; font-size: 1.25rem; font-weight: 500; text-align: center; } .inicio-icono-estrella { color: #e0b252; margin-left: 0.1rem; } .inicio-titulo-gif-estrellas { vertical-align: middle; margin-left: 0.2rem; width: 1.5em; height: 1.5em; object-fit: contain; mix-blend-mode: multiply; } /* Cards de reseña (inicio): sombra suave en .inicio-testimonios; el pulso añade halo rosa */ .inicio-tarjeta-cliente { --bs-card-bg: #ffffff; background: #ffffff; border-radius: 12px; overflow: hidden; border: none; box-shadow: none; transition: box-shadow 0.3s ease, transform 0.25s ease; } /* Sin zoom (--en-foco): sombra rosa pie (#ed1e79), difuminada y más notoria */ .inicio-testimonios .inicio-testimonio-item:not(.inicio-testimonio-item--en-foco) .inicio-tarjeta-cliente { border: none; box-shadow: none; -webkit-filter: drop-shadow(0 4px 14px rgba(237, 30, 121, 0.3)) drop-shadow(0 8px 26px rgba(237, 30, 121, 0.22)) drop-shadow(0 0 22px rgba(237, 30, 121, 0.14)); filter: drop-shadow(0 4px 14px rgba(237, 30, 121, 0.3)) drop-shadow(0 8px 26px rgba(237, 30, 121, 0.22)) drop-shadow(0 0 22px rgba(237, 30, 121, 0.14)); transition: filter 0.05s ease-out, transform 0.05s ease-out; } .inicio-testimonios .inicio-testimonio-item:not(.inicio-testimonio-item--en-foco) .inicio-tarjeta-cliente:hover { -webkit-filter: drop-shadow(0 5px 18px rgba(237, 30, 121, 0.34)) drop-shadow(0 10px 30px rgba(237, 30, 121, 0.24)) drop-shadow(0 0 26px rgba(237, 30, 121, 0.16)); filter: drop-shadow(0 5px 18px rgba(237, 30, 121, 0.34)) drop-shadow(0 10px 30px rgba(237, 30, 121, 0.24)) drop-shadow(0 0 26px rgba(237, 30, 121, 0.16)); } .inicio-tarjeta-cliente:hover { box-shadow: none; transform: none; } .inicio-tarjeta-cliente:hover .img-resena { transform: none; } .card.inicio-tarjeta-cliente { --bs-card-border-width: 0; /* El borde visible lo define .inicio-tarjeta-cliente (no usar border:none aquí). */ } @media (prefers-reduced-motion: reduce) { .inicio-tarjeta-cliente, .tarjeta-resena .img-resena { transition: none; } .inicio-tarjeta-cliente:hover { transform: none; } .inicio-tarjeta-cliente:hover .img-resena { transform: none; } } .inicio-tarjeta-cliente .card-body { background-color: #ffffff !important; text-align: center; align-items: center; padding: 1.1rem 1rem 1.25rem; } /* Valoración: estrellas + nota (solo cards inicio / reseñas) */ .inicio-tarjeta-cliente .inicio-resena-valoracion { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-bottom: 0.55rem; } .inicio-tarjeta-cliente .inicio-estrellas { color: #c9a000; font-size: 1.05rem; letter-spacing: 0.14em; margin: 0; text-align: center; line-height: 1; text-shadow: 0 0 1px rgba(255, 220, 120, 0.9), 0 1px 2px rgba(139, 90, 0, 0.45), 0 2px 4px rgba(180, 130, 0, 0.25); } .inicio-tarjeta-cliente .inicio-resena-meta { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.35rem; font-family: Montserrat, sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; } .inicio-tarjeta-cliente .inicio-resena-nota { color: #92400e; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .inicio-tarjeta-cliente .inicio-resena-sep { color: #d6a848; font-weight: 400; user-select: none; } .inicio-tarjeta-cliente .inicio-resena-calificacion { color: #a89b8a; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.6rem; font-weight: 600; } .inicio-tarjeta-cliente .inicio-nombre-producto { font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: #111827; margin: 0 0 0.75rem 0; text-align: center; letter-spacing: 0.02em; } .inicio-tarjeta-cliente .card-text { text-align: center; font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; margin-bottom: 0; margin-top: 0.15rem; padding-top: 0.35rem; flex-grow: 1; color: var(--texto-cuerpo-interno-color) !important; } .inicio-nombre-producto { font-size: 1.05rem; font-weight: 600; color: #333; margin: 0 0 0.35rem 0; } .inicio-imagen-cambios-wrap { text-align: center; margin-top: 0.5rem; } .inicio-imagen-cambios-wrap-pegado { margin-bottom: 0.5rem; } .inicio-imagen-cambios-wrap--debajo-testimonios { margin-top: 0.15rem; margin-bottom: 0.35rem; } .inicio-cambios-banner { background: #ffffff; padding: 0; margin-top: -0.25rem; } .body-pagina-inicio main.pb-3 { padding-bottom: 0.35rem !important; } .inicio-testimonios + .inicio-cambios-banner { margin-top: -0.15rem; } .inicio-imagen-cambios { max-width: 100%; width: auto; height: auto; max-height: 120px; object-fit: contain; } /* Línea decorativa (p. ej. catálogo Favoritos). Testimonios usa solo .inicio-testimonios-linea-inferior para no duplicar trazo/márgenes. */ .inicio-linea-completa-decorativa:not(.inicio-testimonios-linea-inferior) { margin: 2.25rem 0 0.4rem; padding: 0; width: 100%; border: 0; border-top: 1px solid #ed1e79; opacity: 1; } .inicio-inspiracion { position: relative; z-index: 1; padding-top: clamp(1.75rem, 4.5vw, 3rem); padding-bottom: 1rem; background: #ffffff; } /* Tres bloques de servicio: icono lineal + texto (referencia inicio, fondo blanco) */ .inicio-servicios { background: #ffffff; padding: clamp(0.35rem, 1vw, 0.65rem) 0 clamp(0.85rem, 2vw, 1.25rem); } .inicio-servicios--debajo-eslogan { margin-top: 0.15rem; } .inicio-servicios-fila { text-align: left; max-width: 1080px; margin: 0 auto; padding: 0 clamp(0.75rem, 3vw, 2rem); } .inicio-servicio-bloque { display: flex; align-items: center; gap: 0.85rem; padding: 0.55rem 0.75rem; background: transparent; border: none; height: 100%; } .inicio-servicio-icono-wrap { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #c2c2c2; } .inicio-servicio-icono-wrap svg { width: 36px; height: 36px; display: block; } .inicio-servicio-circulo { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #c2c2c2; font-size: 1.75rem; line-height: 1; } .inicio-servicio-textos { flex: 1; min-width: 0; } .inicio-servicio-bloque .inicio-servicio-titulo { font-family: Montserrat, sans-serif; font-size: 0.78rem; font-weight: 700; color: #4a4a4a; margin: 0 0 0.2rem 0; letter-spacing: 0.05em; display: block; text-transform: uppercase; } .inicio-servicio-subtitulo { font-family: Montserrat, sans-serif; font-size: 0.76rem; font-weight: 400; color: #8f8f8f; line-height: 1.4; display: block; } @media (max-width: 767.98px) { .inicio-servicios-fila .col-12 + .col-12 { margin-top: 0.15rem; } .inicio-servicio-bloque { padding: 0.45rem 0.25rem; } } .inicio-servicio { padding: 1rem; border-radius: 12px; background: #fceef4; height: 100%; } /* Manejo de imágenes: filas de sección (inicio, catálogo, guía/contacto) — mismo rosado que .inicio-servicio */ .manejo-imagenes-seccion, .manejo-imagenes-seccion > td { background-color: #fceef4 !important; } /* Manejo de imágenes (admin): tabla con tipografía y rejilla homogéneas */ .pagina-manejo-imagenes.contenedor-card-formulario { max-width: 1180px; width: 96%; } /* Misma tipografía que etiquetas Crear producto */ .pagina-manejo-imagenes, .pagina-manejo-imagenes .card-body { font-family: var(--texto-cuerpo-interno-font); font-size: var(--texto-cuerpo-interno-size); font-weight: 400; color: var(--texto-cuerpo-interno-color); line-height: var(--texto-cuerpo-interno-line-height); } .pagina-manejo-imagenes .form-control, .pagina-manejo-imagenes .form-control-sm, .pagina-manejo-imagenes input[type="file"] { font-family: var(--texto-cuerpo-interno-font); font-weight: 400; } .pagina-manejo-imagenes .alert { font-weight: 400; } .pagina-manejo-imagenes .alert strong { font-weight: 600 !important; color: inherit; } .pagina-manejo-imagenes .manejo-imagenes-tabla-wrap { border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; background: #fff; } .pagina-manejo-imagenes .manejo-imagenes-tabla { font-size: 0.875rem; font-family: var(--texto-cuerpo-interno-font); line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color); --bs-table-border-color: #dee2e6; } .pagina-manejo-imagenes .manejo-imagenes-tabla thead th { font-size: 0.875rem; font-weight: 600; color: #ed1e79 !important; vertical-align: middle; padding: 0.65rem 0.65rem; border-bottom: 1px solid #dee2e6; } .pagina-manejo-imagenes .manejo-imagenes-th-recurso { min-width: 14rem; } .pagina-manejo-imagenes .manejo-imagenes-th-texto { min-width: 12rem; } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody td { padding: 0.55rem 0.65rem; vertical-align: middle; } /* Nombres de recurso (fuera del cuadro rosado): mismo tono que cuerpo de texto, sin negrita */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:first-child strong { display: block; font-weight: 400 !important; font-size: inherit; color: var(--texto-cuerpo-interno-color); line-height: 1.35; } .pagina-manejo-imagenes .manejo-imagenes-ruta { font-size: 0.8125rem; font-family: var(--texto-cuerpo-interno-font); color: var(--texto-cuerpo-interno-color); word-break: break-word; } .pagina-manejo-imagenes .manejo-imagenes-sin-texto { font-size: 0.875rem; text-align: center; } /* Solo filas de bloque (fondo rosado): título en fucsia y negrita */ .pagina-manejo-imagenes .manejo-imagenes-seccion .manejo-imagenes-seccion-titulo { font-size: 0.875rem; font-family: var(--texto-cuerpo-interno-font); font-weight: 700 !important; color: #ed1e79 !important; letter-spacing: 0.02em; line-height: 1.35; } .pagina-manejo-imagenes .manejo-imagenes-seccion > td { padding: 0.65rem 0.75rem !important; } .pagina-manejo-imagenes .manejo-imagenes-tabla .form-control-sm { font-size: 0.8125rem; font-family: var(--texto-cuerpo-interno-font); } /* Manejo de imágenes: versión móvil — convertir tabla a "tarjetas" para que no quede ilegible */ @media (max-width: 575.98px) { .pagina-manejo-imagenes .manejo-imagenes-th-recurso, .pagina-manejo-imagenes .manejo-imagenes-th-texto { min-width: 0; } .pagina-manejo-imagenes .manejo-imagenes-tabla { font-size: 0.9rem; } .pagina-manejo-imagenes .manejo-imagenes-tabla thead { display: none; } /* Mantener filas de sección como separadores */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr.manejo-imagenes-seccion { display: table-row; } /* Cada fila normal se muestra como card apilada */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) { display: block; padding: 0.35rem 0.2rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 0.35rem 0.65rem; border: 0; } /* Etiquetas por columna (sin tocar el HTML) */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td::before { flex: 0 0 6.25rem; max-width: 6.25rem; content: ""; font-weight: 600; color: #ed1e79; white-space: nowrap; } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:nth-child(1)::before { content: "Recurso"; } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:nth-child(2)::before { content: "Ruta actual"; } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:nth-child(3)::before { content: "Nuevo archivo"; } .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:nth-child(4)::before { content: "Texto"; } /* Contenido de la celda: que rompa bien y no se salga */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td > * { min-width: 0; } /* Evita "corte" de inputs: el valor puede ocupar toda la fila */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td > :not(br) { flex: 1 1 12rem; } /* Si no hay texto (celda con "—"), ocultar el campo en móvil (sin mostrar la palabra "Texto") */ .pagina-manejo-imagenes .manejo-imagenes-tabla tbody tr:not(.manejo-imagenes-seccion) td:nth-child(4).manejo-imagenes-sin-texto { display: none; } .pagina-manejo-imagenes .manejo-imagenes-ruta { font-size: 0.85rem; } /* Inputs (file/text) a ancho completo en su "fila" */ .pagina-manejo-imagenes .manejo-imagenes-tabla input[type="file"], .pagina-manejo-imagenes .manejo-imagenes-tabla input[type="text"], .pagina-manejo-imagenes .manejo-imagenes-tabla textarea { width: 100%; max-width: 100%; box-sizing: border-box; } } /* Título de página: sin rosa (solo el cuadro de sección lleva fucsia) */ .inicio-servicio-icono { display: inline-block; font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1; } .inicio-servicio-titulo { font-size: 0.9rem; font-weight: 700; color: #333; margin: 0 0 0.25rem 0; letter-spacing: 0.02em; } .inicio-servicio-texto { font-size: 0.85rem; color: #4d5959; margin: 0; } .inicio-categorias { padding-top: 0.25rem; padding-bottom: 0.5rem; } .inicio-categorias-contenedor { max-width: 100%; margin-top: 0.5rem; margin-bottom: 0; padding-top: 0; padding-bottom: 0.5rem; } /* Inicio: bloque de categorías full width (el HTML ya usa container-fluid) */ .inicio-inspiracion .inicio-categorias-contenedor { width: 100%; margin-left: 0; margin-right: 0; margin-top: clamp(1.75rem, 4.5vw, 3rem); padding-left: 0; padding-right: 0; background: #ffffff; } @media (min-width: 992px) { .inicio-inspiracion .inicio-categorias-contenedor { padding-left: 0; padding-right: 0; } } /* Inicio: tarjetas de categorías más grandes y que ocupen todo el ancho */ .inicio-inspiracion .inicio-categorias-premium-row { width: 100%; max-width: none; margin-left: 0; margin-right: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; } /* —— Inicio: tarjetas categoría (premium: sombra, radius, hover, gradiente) —— */ /* Entrada animada solo en web (≥576px); en móvil siempre visibles sin efecto al cargar */ @media (max-width: 575.98px) { .inicio-categoria-col { opacity: 1; transform: none; transition: none; } } @media (min-width: 576px) { .inicio-categoria-col { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.99); transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .inicio-categoria-col--visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .inicio-categoria-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 0; border: none; box-shadow: none; } .inicio-categoria-card-link:focus-visible { outline: 2px solid #ed1e79; outline-offset: 4px; } .inicio-categoria-card.inicio-categoria-card--premium { margin: 0; padding: 0; border: none; background: transparent; pointer-events: auto; box-shadow: none; } .inicio-categoria-media { position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: none; border: none; background: transparent; } /* Inicio: cards de categorías más anchas/grandes en pantallas grandes */ @media (min-width: 992px) { .inicio-inspiracion .inicio-categoria-media { /* Mantener formato retrato (no recortar tanto fotos verticales) pero más grande */ aspect-ratio: 3 / 4; min-height: 520px; } } @media (min-width: 1200px) { .inicio-inspiracion .inicio-categoria-media { min-height: 560px; } } .inicio-categoria-card--premium .inicio-categoria-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.35s ease; min-height: 0; border: none; box-shadow: none; } .inicio-categoria-card-link:hover .inicio-categoria-card--premium .inicio-categoria-imagen, .inicio-categoria-card-link:focus-visible .inicio-categoria-card--premium .inicio-categoria-imagen { transform: scale(1.07); } .inicio-categoria-gradient-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 48%, transparent 100%); pointer-events: none; z-index: 1; } .inicio-categoria-overlay-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; z-index: 2; pointer-events: none; } .inicio-categoria-card-link:hover .inicio-categoria-overlay-dim, .inicio-categoria-card-link:focus-visible .inicio-categoria-overlay-dim { opacity: 1; background: rgba(0, 0, 0, 0.32); } .inicio-categoria-contenido { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.35rem 1rem 1.15rem; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } @media (max-width: 420px) { .inicio-categoria-contenido { padding: 1.15rem 0.75rem 1rem; } .inicio-categoria-titulo { font-size: clamp(0.95rem, 4.6vw, 1.15rem); letter-spacing: 0.05em; } } .inicio-categoria-titulo { display: block; font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: 700; color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); letter-spacing: 0.045em; text-transform: uppercase !important; font-family: Montserrat, sans-serif; line-height: 1.2; /* Evita que el texto se corte (ej. "VESTIDOS CORTOS") */ width: 100%; max-width: 100%; white-space: normal; overflow: visible; word-break: keep-all; overflow-wrap: anywhere; padding: 0 0.25rem; text-wrap: balance; } .inicio-categoria-cta { display: inline-block; padding: 0.42rem 1.15rem; font-size: 0.72rem; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 0; background: rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .inicio-categoria-card-link:hover .inicio-categoria-cta, .inicio-categoria-card-link:focus-visible .inicio-categoria-cta { opacity: 1; transform: translateY(0); font-size: 16px !important; padding: 0.5rem 1.25rem; background: #ed1e79 !important; border-color: #ed1e79 !important; color: #ffffff !important; box-shadow: var(--lucre-btn-gold-glow) !important; } .inicio-categoria-card-link:hover .inicio-categoria-cta { background: #b00e55 !important; border-color: #b00e55 !important; box-shadow: var(--lucre-btn-gold-glow-hover) !important; } /* Inicio — cards categorías (premium): hover más pausado solo en escritorio / Web */ @media (min-width: 992px) { .inicio-categoria-card--premium .inicio-categoria-imagen { transition: transform 0.78s ease; } .inicio-categoria-overlay-dim { transition: opacity 0.72s ease, background 0.72s ease; } .inicio-categoria-cta { transition: opacity 0.72s ease, transform 0.72s ease, background 0.72s ease, border-color 0.72s ease; } } /* Compatibilidad: bloque antiguo si se usa en otra vista */ .inicio-categoria-card:not(.inicio-categoria-card--premium) { display: block; position: relative; border-radius: 0; overflow: hidden; box-shadow: none; pointer-events: none; cursor: default; height: 560px; } .inicio-categoria-card:not(.inicio-categoria-card--premium) .inicio-categoria-imagen { width: 100%; height: 100%; min-height: 560px; object-fit: contain; object-position: center; display: block; } .inicio-categoria-etiqueta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.45); color: #ffffff; font-size: 0.95rem; font-weight: 500; text-align: center; white-space: nowrap; } @media (max-width: 991px) { .inicio-hero-imagen-wrap { order: -1; } .inicio-hero-texto { padding: 1rem 1.5rem; } } @media (max-width: 576px) { .inicio-categoria-card:not(.inicio-categoria-card--premium) { height: 320px; } .inicio-categoria-card:not(.inicio-categoria-card--premium) .inicio-categoria-imagen { min-height: 320px; } } @media (prefers-reduced-motion: reduce) { .inicio-categoria-col { opacity: 1; transform: none; transition: none; } .inicio-categoria-card--premium .inicio-categoria-imagen { transition: none; } .inicio-categoria-card-link:hover .inicio-categoria-card--premium .inicio-categoria-imagen, .inicio-categoria-card-link:focus-visible .inicio-categoria-card--premium .inicio-categoria-imagen { transform: none; } .inicio-categoria-overlay-dim { transition: none; } .inicio-categoria-cta { opacity: 1; transform: none; transition: none; } } /* Info debajo del menú (alineado a la izquierda) */ .info-debajo-menu { color: #4d5959; } .info-debajo-menu p { margin-bottom: 0.25rem; } .info-debajo-menu .icono-whatsapp, .info-debajo-menu .icono-redes { height: 1.25em; width: auto; vertical-align: middle; } .info-debajo-menu .icono-redes { margin-left: 0.15rem; } /* Dos columnas: ¿Cómo comprar? (izq) y Conozca nuestras políticas (der) con su card debajo */ .fila-como-comprar { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; } .col-como-comprar { max-width: 240px; display: flex; flex-direction: column; } /* Filas: títulos arriba, cards abajo al mismo nivel */ .fila-titulos-cards { display: flex; gap: 2rem 3rem; align-items: flex-start; width: 100%; } .fila-titulos-cards .col-como-comprar { flex: 1; min-width: 0; max-width: 240px; } .fila-como-comprar .fila-titulos-cards:last-child { margin-top: 0; } /* Tarjeta: mismo tamaño en ambas columnas (sombra alineada a .contacto-caja-rosada / reseñas) */ .tarjeta-como-comprar { background-color: #ed1e79 !important; border: none; border-radius: 0.25rem; width: 100%; max-width: 240px; flex: 1; min-height: 0; display: flex; flex-direction: column; box-shadow: 0 0 92px rgba(245, 198, 214, 0.92), 0 0 150px rgba(245, 198, 214, 0.72), 0 20px 64px rgba(245, 198, 214, 0.72), 0 12px 40px rgba(245, 198, 214, 0.62), 0 4px 20px rgba(0, 0, 0, 0.11); } .tarjeta-como-comprar .card-body { flex: 1; color: #ffffff; padding: 0.25rem 0.6rem; line-height: 1.3; } .tarjeta-como-comprar .card-text { color: #ffffff !important; font-size: 0.8rem; margin: 0; } /* Imagen grande en Guía de tallas */ .imagen-guia-tallas { max-width: 90%; width: auto; height: auto; max-height: 85vh; object-fit: contain; } /* Pie de página: banner rosado en todas las secciones */ .footer { background-color: #ed1e79 !important; border-top: 2px solid #ed1e79 !important; color: #ffffff !important; width: 100%; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; text-align: center; margin-top: auto; } .footer .container { max-width: 100%; } .footer a { color: #ffffff !important; font-weight: 500; text-decoration: underline; } .footer a:hover { color: #878787 !important; } /* Footer menú productos: rosa #ed1e79, dos columnas alineadas (izq: ubicación + imagen redes | der: métodos de pago con logos blancos) */ .footer-menu-productos { font-family: var(--menu-nav-font-family) !important; letter-spacing: var(--menu-nav-letter-spacing); background-color: #ed1e79 !important; border-top: none !important; padding: 1.5rem 2rem !important; color: #ffffff; } .footer-menu-productos-contenedor { max-width: 1200px; margin-left: auto; margin-right: auto; } .footer-menu-productos-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; width: 100%; margin: 0; } .footer-menu-productos .footer-col { flex: 0 0 auto; min-width: 200px; max-width: 420px; } .footer-menu-productos .footer-col-izq { text-align: left; } .footer-menu-productos .footer-titulo-ubicacion { font-family: var(--menu-nav-font-family) !important; font-size: 1rem; font-weight: 700; color: #ffffff; margin-bottom: 0.4rem; text-transform: uppercase; } .footer-menu-productos .footer-direccion { font-family: var(--menu-nav-font-family) !important; font-size: 0.9375rem; font-weight: 400; color: #ffffff; margin-bottom: 0.75rem; line-height: 1.5; } .footer-menu-productos .footer-col-der { text-align: left; } .footer-menu-productos .footer-col h6 { font-family: var(--menu-nav-font-family) !important; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: #ffffff; text-transform: uppercase; } .footer-menu-productos .footer-col p { font-family: var(--menu-nav-font-family) !important; font-size: 0.9375rem; margin: 0 0 0.5rem 0; color: #ffffff; font-weight: 400; line-height: 1.5; } .footer-menu-productos .footer-metodos-pago { font-family: var(--menu-nav-font-family) !important; list-style: none; padding-left: 0; margin: 0; font-size: 0.9375rem; color: #ffffff; font-weight: 400; line-height: 1.5; } .footer-menu-productos .footer-metodos-pago li { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; } /* Izquierda: Nuestra Ubicación + dirección + iconos redes alineados */ .footer-menu-productos .footer-redes { margin-top: 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 1.35rem; } /* Redes: Font Awesome blanco + halo uniforme sobre el fucsia */ .footer-menu-productos .footer-redes-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #ffffff !important; text-decoration: none; opacity: 1; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 10px rgba(255, 255, 255, 0.4)); transition: transform 0.28s ease, filter 0.28s ease; } /* Pie redes: un solo tamaño para todos los SVG (FA retirado: glifos desiguales) */ .footer-menu-productos .footer-redes-svg { width: 1.5rem; height: 1.5rem; display: block; flex-shrink: 0; color: inherit; overflow: visible; } .footer-menu-productos .footer-redes-link:hover, .footer-menu-productos .footer-redes-link:focus-visible { transform: scale(1.12) translateY(-2px); /* Hover: solo zoom (sin “gris” por sombras oscuras) */ filter: inherit; /* Evita regla global `.footer a:hover { color: #878787 }` */ color: #ffffff !important; } .footer-menu-productos .footer-redes-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; border-radius: 10px; } /* Autocomplete productos (buscar/modificar/eliminar) */ .producto-autocomplete-wrap { position: relative; } .producto-autocomplete-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #ffffff; border: 1px solid rgba(237, 30, 121, 0.25); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.12); padding: 0.25rem; max-height: 260px; overflow: auto; } .producto-autocomplete-item { width: 100%; text-align: left; border: 0; background: transparent; padding: 0.55rem 0.6rem; border-radius: 8px; font-size: 0.95rem; } .producto-autocomplete-item:hover, .producto-autocomplete-item:focus-visible { background: rgba(237, 30, 121, 0.08); outline: none; } /* ===== Tipografía (formularios productos) ===== Una sola familia: misma que etiquetas Crear producto (--texto-cuerpo-interno-font). */ .pagina-formulario-producto.pagina-crear-producto .card-formulario-interno, .pagina-formulario-producto.pagina-buscar-producto-form .card-formulario-interno, .pagina-formulario-producto.pagina-modificar-producto .card-formulario-interno, .pagina-formulario-producto.pagina-eliminar-producto .card-formulario-interno, .pagina-eliminar-producto .card-formulario-interno { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-formulario-producto.pagina-crear-producto .card-formulario-interno :is( p, span, small, label, dt, dd, .text-muted, .small, .form-label, .form-check-label ):not(.btn):not(.btn-login):not(button) { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-formulario-producto.pagina-buscar-producto-form .card-formulario-interno :is( p, span, small, label, dt, dd, .text-muted, .small, .form-label, .form-check-label ):not(.btn):not(.btn-login):not(button) { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-formulario-producto.pagina-modificar-producto .card-formulario-interno :is( p, span, small, label, dt, dd, .text-muted, .small, .form-label, .form-check-label ):not(.btn):not(.btn-login):not(button) { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-formulario-producto.pagina-eliminar-producto .card-formulario-interno :is( p, span, small, label, dt, dd, .text-muted, .small, .form-label, .form-check-label ):not(.btn):not(.btn-login):not(button) { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .card-formulario-interno :is( p, span, small, label, dt, dd, .text-muted, .small, .form-label, .form-check-label ):not(.btn):not(.btn-login):not(button) { font-family: var(--texto-cuerpo-interno-font) !important; } /* Texto dentro de botones: tipografía del menú (los iconos FA se corrigen abajo) */ .pagina-eliminar-producto .card-formulario-interno :is(.btn, .btn-login, button) span { font-family: var(--menu-nav-font-family) !important; } /* Icono FA dentro del span: no heredar Playfair (rompería el glifo) */ .pagina-eliminar-producto .eliminar-btn-icon i[class*="fa-"] { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } .footer-menu-productos .footer-redes-imagen { height: 32px; width: auto; max-width: 140px; object-fit: contain; display: block; vertical-align: middle; } /* Derecha: iconos SVG con trazo más grueso; el texto sigue en peso normal */ .footer-menu-productos .footer-metodo-icon { flex-shrink: 0; width: 1.15rem; height: 1.15rem; display: block; color: inherit; opacity: 0.95; } .footer-menu-productos .footer-metodo-icon :is(path, rect) { stroke-width: 2; } .footer-menu-productos .footer-metodo-icon circle[stroke] { stroke-width: 2; } /* Título formularios (páginas no menú productos); en menú productos se sobreescribe abajo */ .titulo-crear-producto { color: #ed1e79 !important; font-weight: 600; font-size: 1.5rem; } .tabla-buscar-producto thead th { font-weight: normal; } /* Iconos junto a títulos */ .icono-titulo { font-size: 0.9em; margin-right: 0.25rem; vertical-align: middle; } /* Contenedor sutil solo en Eliminar producto (evita que icono + título se vean flotando) */ .form-eliminar-producto .titulo-con-icono { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.45rem; border-radius: 0.3rem; background: #ddd; border: 1px solid #878787; } /* ===== Prompt Maestro: Clonación Pixel Perfect - Lucre's Fashion Boutique ===== */ /* Paleta: Body admin #ffffff | Primario #ed1e79 | Card #ffffff | Texto #222222 | Secundario #878787 | Bordes #ddd */ /* Tipografía zona admin/formularios: Playfair (igual que menú cabecera) */ .body-menu-productos { display: flex; flex-direction: column; min-height: 100vh; background-color: #ffffff; background-image: none; font-family: var(--texto-cuerpo-interno-font); color: #222222; } .body-content-menu-productos { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0.25rem; padding-bottom: 0; } .body-content-menu-productos main { padding-top: 0 !important; padding-bottom: 2rem !important; } /* Solo página Buscar producto: body más largo y card centrada en pantalla */ .body-menu-productos.pagina-es-buscar .body-content-menu-productos { min-height: 85vh; padding-bottom: 0 !important; justify-content: flex-start; align-items: center; } .body-menu-productos.pagina-es-buscar .body-content-menu-productos main { padding-bottom: 2rem !important; width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .body-menu-productos.pagina-es-buscar .footer-menu-productos { margin-top: -1rem; } /* Card central: idéntico a referencia — max-width 900px, centrada */ .contenedor-card-formulario { max-width: 900px; width: 90%; margin-left: auto; margin-right: auto; } .menu-productos-header { border: none; background-color: #ed1e79; } /* Barra del menú: altura fija 80px, sin padding vertical para que el logo toque bordes */ .menu-productos-nav { background-color: #ed1e79 !important; height: 80px; padding-top: 0 !important; padding-bottom: 0 !important; border: none !important; min-height: 80px; max-height: 80px; } /* Contenedor menú productos: en móvil flex-wrap para que el panel no quede en columna junto al toggler */ .menu-productos-nav .container-fluid.menu-productos-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; min-height: 64px; padding-left: 0 !important; padding-right: 1rem !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative; max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 992px) { .menu-productos-nav .container-fluid.menu-productos-container { flex-wrap: nowrap; align-items: stretch; height: 80px; min-height: 80px; } } .menu-productos-nav .navbar-collapse { flex-grow: 1; } @media (min-width: 992px) { .menu-productos-nav .navbar-collapse { display: flex !important; justify-content: center !important; flex-basis: auto; align-self: center; } } /* Logo: flex centra el bitmap en la barra (evita “flotando” arriba vs el toggler en móvil) */ .menu-productos-logo-wrap { padding: 0; margin: 0; margin-right: 1rem; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; height: 100%; background-color: transparent !important; } .menu-productos-logo-img { width: auto; display: block; object-fit: contain; object-position: left center; margin: 0 !important; padding: 0 !important; border: none; vertical-align: middle; } @media (min-width: 992px) { .menu-productos-logo-img { height: 100%; } } .menu-productos-links .nav-link { color: #ffffff !important; padding: 0.5rem 1rem !important; border-radius: 6px; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; font-size: 15px; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; transition: background-color 0.2s, opacity 0.2s, text-shadow 0.2s; } .menu-productos-links .nav-link:hover { color: #ffffff !important; background-color: transparent !important; border: none; border-bottom: 2px solid #ffffff; border-radius: 0; } /* Activo: fondo rosa claro, forma cuadrada, texto blanco */ .menu-productos-links .nav-link.activo { background-color: rgba(255, 255, 255, 0.28); color: #ffffff !important; padding-left: 1.25rem; padding-right: 1.25rem; border-radius: 6px; } .menu-productos-usuario-nombre-wrap { max-width: min(320px, 55vw); } .menu-productos-usuario-nombre { color: #ffffff !important; font-size: 14px; font-weight: 500; font-family: sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-productos-links .nav-item-salir { display: flex; align-items: center; } /* Botón Salir / Log in — fondo blanco, texto rosa; halo dorado suave como Buscar e Ingresar */ .btn-salir-menu { background-color: #ffffff !important; color: #ed1e79 !important; border: none !important; border-radius: 6px; padding: 0.5rem 1.15rem !important; font-size: 15px; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; text-decoration: none !important; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: var(--lucre-btn-gold-glow); } .btn-salir-menu:hover { background-color: #ffffff !important; color: #b00e55 !important; opacity: 0.95; box-shadow: var(--lucre-btn-gold-glow-hover); } .navbar-toggler-white .navbar-toggler-icon { filter: brightness(0) invert(1); } /* ----- Menú principal (pantalla principal): mismo estilo que menú interno ----- */ .menu-principal-header { border: none; background-color: #ed1e79; } /* Inicio: menú sin sombras (barra, enlaces ni Log in) */ .body-pagina-inicio .menu-principal-header { box-shadow: none; } .body-pagina-inicio .menu-principal-links .nav-link { text-shadow: none; } .body-pagina-inicio .menu-principal-links .btn-salir-menu, .body-pagina-inicio .menu-principal-links .btn-salir-menu:hover { box-shadow: none; } /* Enlaces del menú: sombra dorada en el texto (no en la barra) */ .menu-principal-links .nav-link, .menu-productos-links .nav-link { text-shadow: 0 1px 2px rgba(160, 118, 58, 0.95), 0 0 10px rgba(212, 175, 95, 0.75), 0 0 20px rgba(228, 188, 132, 0.55), 0 2px 4px rgba(0, 0, 0, 0.22); } /* Logo texto (Lucre's Fashion) a la izquierda del menú */ .menu-brand-text { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: #ffffff !important; /* Logo tipo “firma elegante” */ font-family: "Pinyon Script", cursive !important; font-style: normal; font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.25rem); line-height: 1; height: 80px; padding-left: 1rem; padding-right: 0.5rem; white-space: nowrap; user-select: none; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); letter-spacing: -0.01em; transform: translateY(2px); } @media (max-width: 991.98px) { .menu-brand-text { height: auto; font-size: 1.85rem; padding-left: 0.25rem; max-width: calc(100% - 3.75rem); overflow: hidden; text-overflow: ellipsis; transform: none; } } .menu-principal-nav { background-color: #ed1e79 !important; height: 80px; padding-top: 0 !important; padding-bottom: 0 !important; border: none !important; min-height: 80px; max-height: 80px; } /* -------------------------------------------------------------------------- */ /* Responsive navbars (móvil/tablet): permitir que el menú colapsado despliegue */ /* -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Dejar que la barra crezca cuando el menú está abierto */ .menu-principal-nav, .menu-productos-nav { height: auto; min-height: 64px; max-height: none; } /* El contenedor no debe ser "stretch" fijo de 80px en móvil */ .menu-principal-nav .container-fluid.menu-principal-container, .menu-productos-nav .container-fluid.menu-productos-container { height: auto; align-items: center; flex-wrap: wrap; /* permite que el panel colapsado baje */ padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Panel colapsable: durante .collapsing Bootstrap necesita overflow:hidden para animar height al unísono con el flex (si usamos visible, el botón y el panel no cierran al mismo ritmo). Abierto: visible por si hay sombras/focus. */ .menu-principal-nav .navbar-collapse, .menu-productos-nav .navbar-collapse { width: 100%; flex-basis: 100%; align-self: stretch; background-color: #ed1e79; padding: 0.85rem 0.75rem 1rem; margin-top: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.25); max-height: none; overflow: hidden; } .menu-principal-nav .navbar-collapse.show, .menu-productos-nav .navbar-collapse.show { overflow: visible; } /* Links: más compactos en móvil */ .menu-principal-links .nav-link, .menu-productos-links .nav-link { padding: 0.6rem 0.75rem !important; } /* Botón Salir / Log in: mismo margen interno que .nav-link para alinear el texto con INICIO / Contacto */ .menu-principal-links .nav-item-salir, .menu-productos-links .nav-item-salir { width: 100%; display: flex; justify-content: flex-start; padding: 0.6rem 0.75rem; box-sizing: border-box; } .menu-principal-links .btn-salir-menu, .menu-productos-links .btn-salir-menu { width: auto; max-width: 100%; justify-content: center; } /* Logo móvil: caber en el ancho sin recortes (wrap puede encoger; img con max-width) */ .menu-principal-nav .menu-principal-logo-wrap, .menu-productos-nav .menu-productos-logo-wrap { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 3.5rem); margin-right: 0.5rem; height: auto; align-items: center; align-self: center; } .menu-principal-logo-img, .menu-productos-logo-img { max-width: 100%; width: auto; height: auto; max-height: 56px; object-fit: contain; object-position: center center; } } .menu-principal-nav .container-fluid.menu-principal-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; min-height: 64px; padding-left: 0 !important; padding-right: 1rem !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative; max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 992px) { .menu-principal-nav .container-fluid.menu-principal-container { flex-wrap: nowrap; align-items: stretch; height: 80px; min-height: 80px; } } .menu-principal-nav .navbar-collapse { flex-grow: 1; } @media (min-width: 992px) { .menu-principal-nav .navbar-collapse { display: flex !important; justify-content: center !important; flex-basis: auto; align-self: center; } } .menu-principal-logo-wrap { padding: 0; margin: 0; margin-right: 1rem; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; height: 100%; background-color: transparent !important; } .menu-principal-logo-img { width: auto; display: block; object-fit: contain; object-position: left center; margin: 0 !important; padding: 0 !important; border: none; vertical-align: middle; } @media (min-width: 992px) { .menu-principal-logo-img { height: 100%; } } /* Misma tipografía que menú secundario (productos) y que el eslogan de inicio (Playfair Display) */ .menu-principal-links .nav-link { color: #ffffff !important; padding: 0.5rem 1rem !important; border-radius: 6px; font-size: 15px !important; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; transition: background-color 0.2s, opacity 0.2s, text-shadow 0.2s; } .menu-principal-links .nav-link:hover { color: #ffffff !important; background-color: transparent !important; border: none; border-bottom: 2px solid #ffffff; border-radius: 0; } .menu-principal-links .nav-link.activo { background-color: rgba(255, 255, 255, 0.28); color: #ffffff !important; padding-left: 1.25rem; padding-right: 1.25rem; border-radius: 6px; } .menu-principal-links .nav-item-salir { display: flex; align-items: center; } .menu-principal-links .btn-salir-menu { font-size: 15px !important; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; } /* ----- Card general: sin radio (reseñas usan .inicio-tarjeta-cliente aparte) ----- */ .card-formulario-interno { border: none; --bs-card-border-width: 0; --bs-card-border-color: transparent; border-radius: 0; background-color: #ffffff; padding: 55px; font-family: var(--texto-cuerpo-interno-font) !important; } /* Menú administración: halo dorado suave en las cards blancas */ .body-menu-productos .card-formulario-interno.card-buscar-producto { box-shadow: var(--lucre-sombra-admin-card) !important; } .card-formulario-interno .card-body { padding: 0; } /* Solo pantalla Eliminar producto (sin clase Buscar) */ .pagina-eliminar-producto.contenedor-card-formulario:not(.pagina-buscar-producto) { width: 92%; max-width: 920px; margin-left: auto; margin-right: auto; margin-top: -0.5rem; padding-top: 1.5rem; } /* Buscar, Crear, Modificar: cuadro más compacto (900px). Eliminar sin pagina-formulario-producto puede usar 960px. */ .pagina-buscar-producto.contenedor-card-formulario { width: 95%; max-width: 960px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; } /* Eliminar producto: espacio vertical (el ancho lo fija .pagina-eliminar-producto.contenedor-card-formulario → 1040px) */ .vista-eliminar-producto.contenedor-card-formulario { margin-top: 0 !important; padding-top: 1.5rem !important; } /* Dropdowns: tipografía del formulario (igual a labels/texto) */ :is( .pagina-formulario-producto, .pagina-buscar-producto, .pagina-eliminar-producto, .contenedor-iniciar-sesion, #modalCrearCategoria, #modalCrearRol, #modalBuscarUsuario, #modalEliminarUsuario, #modalModificarUsuario ) :is( select.form-select, .form-select.form-control-buscar, select.form-select option, .form-select.form-control-buscar option, select.form-select optgroup, .form-select.form-control-buscar optgroup ) { font-family: var(--lucre-dropdown-font) !important; font-weight: 400 !important; letter-spacing: normal !important; font-size: var(--lucre-dropdown-size, var(--texto-cuerpo-interno-size)) !important; line-height: var(--texto-cuerpo-interno-line-height) !important; color: var(--texto-cuerpo-interno-color) !important; text-transform: none !important; } /* Card Crear/Modificar/Buscar: select/option = misma familia que etiquetas */ .pagina-formulario-producto .card-formulario-interno :is(select.form-select, .form-select.form-control-buscar), .pagina-formulario-producto .card-formulario-interno :is(select.form-select, .form-select.form-control-buscar) option, .pagina-formulario-producto .card-formulario-interno :is(select.form-select, .form-select.form-control-buscar) optgroup { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; } /* Eliminar producto: botón principal con letra del menú (forzado) */ .pagina-eliminar-producto .eliminar-btn-principal.btn-login { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; } /* Crear, Buscar y Modificar producto: mismo tamaño de cuadro blanco (900px como card central) */ .pagina-formulario-producto.contenedor-card-formulario { width: 90%; max-width: 900px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; } .pagina-formulario-producto .card-buscar-producto.card-formulario-interno { padding: 28px 72px 56px !important; width: 100%; box-sizing: border-box; min-height: 480px; border: none !important; --bs-card-border-width: 0; --bs-card-border-color: transparent; box-shadow: var(--lucre-sombra-admin-card) !important; } /* Crear producto: cuadro blanco más ancho */ .pagina-crear-producto.contenedor-card-formulario { width: 95%; max-width: 1040px; } /* Agregar usuarios: mismo ancho y misma caja blanca que Crear producto */ .pagina-agregar-usuario.contenedor-card-formulario { width: 95%; max-width: 1040px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; box-sizing: border-box; } .pagina-agregar-usuario.pagina-formulario-producto .card-buscar-producto.card-formulario-interno { padding: 28px 72px 56px !important; width: 100%; box-sizing: border-box; min-height: 480px; border: none !important; --bs-card-border-width: 0; --bs-card-border-color: transparent; box-shadow: var(--lucre-sombra-admin-card) !important; } /* Agregar usuarios: todos los textbox/select con misma longitud */ .pagina-agregar-usuario { --agregar-usuario-campo-max: 360px; } .pagina-agregar-usuario :is(.form-control-buscar, .form-select.form-control-buscar), #modalCrearRol :is(.form-control, .form-control-buscar, .form-select), #modalBuscarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalEliminarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalModificarUsuario :is(.form-control, .form-control-buscar, .form-select) { width: 100%; max-width: var(--agregar-usuario-campo-max, 360px); margin-left: 0; margin-right: 0; } .pagina-agregar-usuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalCrearRol :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalBuscarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalEliminarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalModificarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal) { display: block; max-width: var(--agregar-usuario-campo-max, 360px); margin-left: 0; margin-right: 0; } /* Modificar producto: cuadro ancho */ .pagina-modificar-producto.contenedor-card-formulario { width: 95%; max-width: 1040px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; box-sizing: border-box; } /* Eliminar producto: ancho moderado (gana sobre .pagina-formulario-producto 900px y .pagina-buscar-producto 960px) */ .pagina-eliminar-producto.contenedor-card-formulario, .pagina-eliminar-producto.pagina-buscar-producto.contenedor-card-formulario, .pagina-eliminar-producto.vista-eliminar-producto.contenedor-card-formulario { width: 92%; max-width: 920px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; box-sizing: border-box; } /* Eliminar: producto cargado — un poco más ancho para datos + imagen */ .pagina-eliminar-producto.contenedor-card-formulario.eliminar-con-producto-cargado { width: 95%; max-width: 1040px; } .pagina-eliminar-producto.eliminar-con-producto-cargado .modificar-producto-vista-previa-actual { min-height: 300px; } .pagina-eliminar-producto.eliminar-con-producto-cargado .modificar-producto-vista-previa-actual .modificar-producto-inner-vista { min-height: 300px; } .pagina-eliminar-producto.eliminar-con-producto-cargado .modificar-producto-vista-previa-actual .modificar-producto-img-actual { max-height: 380px; } /* Buscar producto: cuadro más estrecho */ .pagina-buscar-producto-form.contenedor-card-formulario { width: 95%; max-width: 900px; margin-left: auto; margin-right: auto; flex-shrink: 0; margin-top: -0.5rem; padding-top: 1.5rem; box-sizing: border-box; } /* Buscar producto: card aún más compacta (evita que se vea demasiado ancha) */ @media (min-width: 992px) { .pagina-buscar-producto-form.contenedor-card-formulario { max-width: 820px; } } /* Crear y Buscar producto: misma card (mismo padding y ancho de contenido) */ .pagina-buscar-producto .card-buscar-producto.card-formulario-interno { padding: 56px 72px 56px !important; width: 100%; box-sizing: border-box; box-shadow: var(--lucre-sombra-admin-card) !important; } /* Buscar producto: título más cerca del inicio del card */ .pagina-buscar-producto .card-buscar-producto.card-formulario-interno { padding-top: 28px !important; } .pagina-buscar-producto .card-buscar-producto .titulo-crear-producto { margin-bottom: 1.25rem !important; } /* Más separación entre texto de ayuda y formulario */ .body-menu-productos .card-buscar-producto .text-muted.small { margin-bottom: 1.25rem !important; } /* Más aire vertical general entre campos */ .body-menu-productos .card-buscar-producto .mb-3, .body-menu-productos .card-buscar-producto .mb-4 { margin-bottom: 1.25rem !important; } /* Gaps más cómodos en grids de dos columnas */ .body-menu-productos .card-buscar-producto .row.row-crear-dos-columnas { --bs-gutter-y: 1.25rem; --bs-gutter-x: 2rem; } .pagina-buscar-producto .form-buscar-producto .buscar-formulario-wrap { width: 100%; max-width: 100%; } /* Mismo ancho del campo Código que en Modificar producto (col-md-6 con g-3) */ .pagina-buscar-producto .form-buscar-producto .buscar-formulario-wrap > .mb-4:first-child .input-group-buscar { max-width: 100%; } @media (min-width: 768px) { .pagina-buscar-producto .form-buscar-producto .buscar-formulario-wrap > .mb-4:first-child .input-group-buscar { max-width: calc(50vw - 2rem); } } @media (min-width: 992px) { .pagina-buscar-producto .form-buscar-producto .buscar-formulario-wrap > .mb-4:first-child .input-group-buscar { max-width: 468px; } } /* Buscar producto: layout 50/50, separación visual entre columnas */ .pagina-buscar-producto .row-buscar-50 { --bs-gutter-x: 0; align-items: stretch; } .pagina-buscar-producto .col-buscar-izq { padding-right: 2rem; } /* Fondo rosa solo en la columna derecha de la card, sin invadir el padding */ .pagina-buscar-producto .col-buscar-der { padding-left: 2rem; border-left: 1px solid rgba(237, 30, 121, 0.18); display: flex; flex-direction: column; } .pagina-buscar-producto .col-buscar-der .vista-previa-buscar { flex: 1; min-height: 0; } /* Buscar/Crear/Modificar: mismas letra/peso/color que «Los campos marcados con asterisco…» */ .pagina-buscar-producto .form-label-buscar:not(.formulario-seccion-titulo), .pagina-buscar-producto .form-buscar-producto .form-label:not(.formulario-seccion-titulo), .pagina-buscar-producto .form-crear-producto .form-label:not(.formulario-seccion-titulo), .pagina-buscar-producto .form-modificar-producto .form-label:not(.formulario-seccion-titulo) { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); margin-bottom: 0.25rem !important; } /* Subtítulo de sección «Producto:» en Buscar: rosa, no gris de políticas */ .pagina-buscar-producto .formulario-seccion-titulo.form-label-buscar { font-size: 17px !important; font-weight: 600 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: #ed1e79 !important; line-height: 1.3; } /* Checkbox «Marcar SALE» */ .pagina-buscar-producto .form-check .form-check-label.form-label-buscar { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); } /* «Marcar SALE» (crear/modificar/buscar): mismo color/typografía en todos los formularios */ .label-marcar-sale { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); display: inline-flex; align-items: center; gap: 0.35rem; } /* Emoji aparte: evita que el motor de texto mezcle fuente emoji con «Marcar SALE» (SALE en otra letra) */ .pagina-buscar-producto .label-marcar-sale { display: inline-flex; align-items: center; gap: 0.35rem; } .pagina-buscar-producto .label-marcar-sale-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; line-height: 1; flex-shrink: 0; } .pagina-buscar-producto .label-marcar-sale-texto { font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 400 !important; font-size: var(--texto-cuerpo-interno-size) !important; color: var(--texto-cuerpo-interno-color) !important; font-variant: normal; letter-spacing: normal; text-shadow: none; } /* Buscar: encabezados de tabla centrados, espacio entre emoji y texto, sin scroll */ /* Buscar producto: Ficha de Producto en card con iconos */ .pagina-buscar-producto .ficha-producto-buscar { min-height: 120px; } .pagina-buscar-producto .row-buscar-50 { align-items: stretch; } .pagina-buscar-producto .card-ficha-producto-buscar { border: 1px solid rgba(237, 30, 121, 0.3); border-radius: 24px; background: rgba(252, 238, 244, 0.5); overflow: hidden; } .pagina-buscar-producto .ficha-producto-buscar-item { display: flex; align-items: flex-start; gap: 0.35rem; padding: 0.5rem 0; font-size: 0.95rem; -webkit-font-smoothing: antialiased; } .pagina-buscar-producto .ficha-producto-buscar-item:last-child { padding-bottom: 0; } .pagina-buscar-producto .ficha-producto-buscar-icono { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; } .pagina-buscar-producto .ficha-producto-buscar-etiqueta { flex-shrink: 0; font-weight: 600; color: var(--texto-cuerpo-interno-color); } .pagina-buscar-producto .ficha-producto-buscar-valor { flex: 0 1 auto; color: var(--texto-cuerpo-interno-color); word-break: break-word; text-align: left; } .pagina-buscar-producto .ficha-producto-buscar-valor.ficha-producto-buscar-nombre { font-weight: 700; color: var(--texto-cuerpo-interno-color); font-size: 1.05rem; } .pagina-buscar-producto .ficha-producto-buscar-valor.ficha-producto-buscar-precio { font-weight: 700; color: #ed1e79; font-size: 1.15rem; } /* Inputs texto: mismo aspecto en Buscar y en Crear/Modificar producto (Crear excluye Agregar usuario). Sin type=file: esos usan el borde rosado global de input[type=file].form-control */ .pagina-buscar-producto .form-control-buscar:not([type="file"]), .pagina-buscar-producto .form-buscar-producto .form-control:not([type="file"]), .pagina-buscar-producto .form-crear-producto .form-control:not([type="file"]), .pagina-buscar-producto .form-modificar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-crear-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-modificar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-buscar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-crear-producto .form-control:not([type="file"]) { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; font-weight: 400 !important; padding: 10px 16px !important; min-height: 42px !important; border-radius: 12px !important; border: 1px solid #ddd !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Placeholders: igual tipografía que etiquetas/campos (--texto-cuerpo-interno-font) */ .body-menu-productos .card-formulario-interno :is(.form-crear-producto, .form-modificar-producto, .form-buscar-producto) .form-control.form-control-buscar:not([type="file"])::placeholder { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-style: normal !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; -webkit-text-fill-color: var(--texto-cuerpo-interno-color) !important; opacity: 1 !important; } /* Formularios: textbox más compactos en escritorio */ @media (min-width: 768px) { .pagina-buscar-producto .form-control-buscar:not([type="file"]), .pagina-buscar-producto .form-buscar-producto .form-control:not([type="file"]), .pagina-buscar-producto .form-crear-producto .form-control:not([type="file"]), .pagina-buscar-producto .form-modificar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-crear-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-modificar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-control-buscar:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-buscar-producto .form-control:not([type="file"]), .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-crear-producto .form-control:not([type="file"]), .pagina-buscar-producto .form-crear-producto .form-select.form-control-buscar, .pagina-buscar-producto .form-modificar-producto .form-select.form-control-buscar, .pagina-buscar-producto .form-buscar-producto .form-select, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-crear-producto .form-select.form-control-buscar, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-modificar-producto .form-select.form-control-buscar, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-buscar-producto .form-select, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-crear-producto .form-select.form-control-buscar { max-width: 360px !important; } .pagina-buscar-producto .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .row-crear-dos-columnas .input-group-buscar { max-width: 460px !important; } } /* Mismo ancho para todos los cuadros en columnas (Crear, Modificar, Buscar) */ #formBuscarProducto2 .row-crear-dos-columnas .col-md-6 .mb-4 .form-control, #formBuscarProducto2 .row-crear-dos-columnas .col-md-6 .mb-4 input[type="text"], #formCrearProducto .row-crear-dos-columnas .col-md-6 .mb-4 .form-control, #formCrearProducto .row-crear-dos-columnas .col-md-6 .mb-4 input[type="text"], #formModificarProducto .row-crear-dos-columnas .col-md-6 .mb-4 .form-control, #formModificarProducto .row-crear-dos-columnas .col-md-6 .mb-4 input[type="text"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Mismo ancho de columnas y campos: ambas columnas iguales, input-group al 100% */ .pagina-buscar-producto .row-crear-dos-columnas .col-md-6, .pagina-buscar-producto .form-crear-producto .row-crear-dos-columnas .col-md-6, .pagina-buscar-producto .form-modificar-producto .row-crear-dos-columnas .col-md-6, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .row-crear-dos-columnas .col-md-6, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .row-crear-dos-columnas .col-md-6, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .row-crear-dos-columnas .col-md-6 { min-width: 0; } .pagina-buscar-producto .row-crear-dos-columnas .input-group-buscar, .pagina-buscar-producto .form-crear-producto .row-crear-dos-columnas .input-group-buscar, .pagina-buscar-producto .form-modificar-producto .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .row-crear-dos-columnas .input-group-buscar, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .row-crear-dos-columnas .input-group-buscar { width: 100% !important; max-width: 100% !important; } .pagina-buscar-producto .row-crear-dos-columnas .input-group-buscar .form-control, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .row-crear-dos-columnas .input-group-buscar .form-control, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .row-crear-dos-columnas .input-group-buscar .form-control, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .row-crear-dos-columnas .input-group-buscar .form-control { flex: 1 !important; min-width: 0 !important; width: auto !important; } .pagina-buscar-producto .form-crear-producto .form-select.form-control-buscar, .pagina-buscar-producto .form-modificar-producto .form-select.form-control-buscar, .pagina-buscar-producto .form-buscar-producto .form-select, .body-menu-productos .pagina-formulario-producto.pagina-crear-producto:not(.pagina-agregar-usuario) .form-crear-producto .form-select.form-control-buscar, .body-menu-productos .pagina-formulario-producto.pagina-modificar-producto .form-modificar-producto .form-select.form-control-buscar, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-buscar-producto .form-select, .body-menu-productos .pagina-formulario-producto.pagina-buscar-producto-form .form-crear-producto .form-select.form-control-buscar { min-height: 42px !important; padding: 10px 16px !important; font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; border-width: var(--lucre-input-border-width) !important; border-style: solid !important; border-color: var(--lucre-input-border-color) !important; background-color: var(--lucre-input-bg) !important; box-shadow: var(--lucre-input-rest-shadow) !important; border-radius: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Buscar producto: más espacio entre campo de búsqueda y botón Buscar */ .pagina-buscar-producto .input-group-buscar { gap: 14px; } .pagina-buscar-producto .input-group-buscar .form-control { height: 42px !important; min-height: 42px !important; padding: 10px 16px !important; border-radius: 12px 0 0 12px; border-right: 1px solid #ddd; box-sizing: border-box; font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; } .pagina-buscar-producto .input-group-buscar .btn-login { padding: 10px 16px; border-radius: 0 12px 12px 0; font-size: var(--texto-cuerpo-interno-size) !important; min-height: 42px; line-height: 1.3; } /* Buscar producto: imagen derecha más alta para equilibrar con la lista */ .pagina-buscar-producto .card.vista-previa-buscar { margin-top: 0; display: flex; flex-direction: column; overflow: hidden; border: none; border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .pagina-buscar-producto .vista-previa-buscar .vista-previa-producto { position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 320px; overflow: hidden; } .pagina-buscar-producto .vista-previa-buscar .vista-previa-producto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Buscar producto: imagen arriba del botón (layout en una columna) */ .pagina-buscar-producto .vista-previa-buscar-arriba { max-height: 320px; } .pagina-buscar-producto .vista-previa-buscar-arriba .vista-previa-producto { min-height: 200px; max-height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pagina-buscar-producto .vista-previa-buscar-arriba .vista-previa-producto img { width: 100%; height: 100%; object-fit: cover; } /* Crear producto: columna derecha en flex para que la zona de imagen crezca */ .form-crear-producto .row-crear-dos-columnas .col-crear-der { display: flex; flex-direction: column; } .form-crear-producto .row-crear-dos-columnas .crear-producto-zona-imagen-wrap { /* Antes se estiraba para llenar la columna (drag&drop). Ahora es input file y no debe dejar hueco. */ flex: 0 0 auto; display: block; } /* (El cuadro drag&drop ya no se usa en Crear producto) */ /* Modificar producto: columna derecha sin estirar la zona de subida (al cargar producto la izquierda crece y flex:1 hinchaba el cuadro rosa) */ .form-modificar-producto .row-crear-dos-columnas .col-crear-der { display: flex; flex-direction: column; } .form-modificar-producto .row-crear-dos-columnas .crear-producto-zona-imagen-wrap { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; } .form-modificar-producto .row-crear-dos-columnas .crear-producto-zona-imagen-wrap .crear-producto-subir-imagen { flex: 0 0 auto; min-height: 220px; height: auto; max-height: none; } /* Modificar y Buscar producto: vista principal más grande (misma escala que Eliminar con producto) */ .pagina-modificar-producto .modificar-producto-vista-previa-actual, .pagina-buscar-producto-form .modificar-producto-vista-previa-actual { min-height: 300px; } .pagina-modificar-producto .modificar-producto-vista-previa-actual .modificar-producto-inner-vista, .pagina-buscar-producto-form .modificar-producto-vista-previa-actual .modificar-producto-inner-vista { min-height: 300px; } .pagina-modificar-producto .modificar-producto-vista-previa-actual .modificar-producto-img-actual, .pagina-buscar-producto-form .modificar-producto-vista-previa-actual .modificar-producto-img-actual { max-height: 380px; width: auto; max-width: 100%; object-fit: contain; } /* Eliminar: vista compacta solo si existiera preview sin .eliminar-con-producto-cargado (normalmente no aplica) */ .pagina-eliminar-producto:not(.eliminar-con-producto-cargado) .modificar-producto-vista-previa-actual { min-height: 220px; } .pagina-eliminar-producto:not(.eliminar-con-producto-cargado) .modificar-producto-vista-previa-actual .modificar-producto-inner-vista { min-height: 220px; } .pagina-eliminar-producto:not(.eliminar-con-producto-cargado) .modificar-producto-vista-previa-actual .modificar-producto-img-actual { max-height: 200px; } /* Modificar / Buscar: con producto cargado, más espacio para la columna de la foto (≈ 5 / 7) */ @media (min-width: 768px) { .pagina-modificar-producto .row-vista-producto-cargada > .col-md-6:first-child, .pagina-buscar-producto-form .row-vista-producto-cargada > .col-md-6:first-child { flex: 0 0 auto; width: 41.66666667%; max-width: 41.66666667%; } .pagina-modificar-producto .row-vista-producto-cargada > .col-crear-der, .pagina-buscar-producto-form .row-vista-producto-cargada > .col-crear-der { flex: 0 0 auto; width: 58.33333333%; max-width: 58.33333333%; } } .pagina-eliminar-producto .form-eliminar-producto .eliminar-producto-vista-solo-lectura { cursor: default; } /* Nombre bajo la imagen: fucsia, centrado, negrita */ .pagina-modificar-producto .modificar-producto-nombre-actual, .pagina-eliminar-producto .modificar-producto-nombre-actual, .pagina-buscar-producto-form .modificar-producto-nombre-actual { font-weight: 700 !important; font-size: 1rem; color: #ed1e79; text-align: center; width: 100%; word-break: normal; overflow-wrap: break-word; } /* Buscar producto: misma estructura visual que Crear/Modificar (dos columnas) */ .form-buscar-producto .row-crear-dos-columnas .col-crear-der { display: flex; flex-direction: column; } /* Buscar producto: los checks están deshabilitados (solo lectura), pero no deben verse "apagados/bloqueados" en gris. */ .pagina-buscar-producto-form .form-check-input { accent-color: var(--lucre-fucsia); } .pagina-buscar-producto-form .form-check-input:disabled { opacity: 1 !important; filter: none !important; cursor: default !important; background-color: #ffffff !important; border-color: rgba(237, 30, 121, 0.28) !important; } .pagina-buscar-producto-form .form-check-input:disabled:checked { background-color: var(--lucre-fucsia) !important; border-color: var(--lucre-fucsia) !important; } .pagina-buscar-producto-form label.form-check-label { opacity: 1 !important; color: var(--texto-cuerpo-interno-color) !important; } /* BuscarProducto2: evita huecos SOLO cuando NO se usa el bloque estilo "Modificar" */ #formBuscarProducto2 .crear-producto-zona-imagen-wrap :is(.crear-producto-subir-imagen, .crear-producto-vista-previa-buscar):not(.modificar-producto-vista-previa-actual) { min-height: auto; } /* Evita borde doble en la vista previa de BuscarProducto2 */ #formBuscarProducto2 .crear-producto-vista-previa-buscar:not(.modificar-producto-vista-previa-actual) { border: none; padding: 0; } /* Crear producto: zona de subir imagen (arrastrar o clic) */ .crear-producto-subir-imagen { border: 2px solid rgba(237, 30, 121, 0.45); border-radius: 12px; padding: 1.25rem; background: #fceef4; min-height: 220px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; } .crear-producto-subir-imagen.crear-producto-subir-dragover { border-color: #ed1e79; background: #fceef4; } .crear-producto-subir-label { margin: 0; cursor: pointer; width: 100%; text-align: center; } .crear-producto-subir-texto { font-size: 14px; color: #4d5959; } /* Crear producto: margen superior del botón Guardar */ .form-crear-producto .row-crear-dos-columnas { border: none !important; border-bottom: none !important; box-shadow: none !important; } .form-crear-producto .crear-producto-boton-row { margin-top: 1rem; border-top: none !important; padding-top: 0; background: transparent !important; } .form-crear-producto .card-body, .pagina-formulario-producto .card-formulario-interno .card-body { background-color: #ffffff !important; } .pagina-buscar-producto .input-group .input-group-text { background: #fceef4; border: 1px solid #ddd; border-right: none; color: #ed1e79; font-weight: 600; } .pagina-buscar-producto .input-group .form-control { border-radius: 0 6px 6px 0; } /* Eliminar: caja blanca = misma regla que Modificar (.pagina-formulario-producto .card-buscar-producto.card-formulario-interno) */ /* Eliminar producto: campos al ancho útil de la columna (no franja de 360px centrada) */ .pagina-eliminar-producto :is(input.form-control.form-control-buscar, select.form-select.form-control-buscar) { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Eliminar producto: misma tipografía que Crear producto */ .pagina-eliminar-producto .card-formulario-interno :where( p, small, label, dl, dt, dd ) { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .card-formulario-interno .row.g-4 { --bs-gutter-y: 1.25rem; --bs-gutter-x: 2.5rem; } /* Eliminar producto: dos columnas principales + lista etiqueta/valor + aire */ .pagina-eliminar-producto .form-eliminar-producto .eliminar-form-row { --bs-gutter-x: 1.75rem; --bs-gutter-y: 2rem; } @media (min-width: 992px) { .pagina-eliminar-producto .form-eliminar-producto .eliminar-form-row { --bs-gutter-x: 2.75rem; --bs-gutter-y: 2rem; } } .pagina-eliminar-producto .eliminar-texto-ayuda { line-height: 1.5; font-family: var(--texto-cuerpo-interno-font) !important; color: #374151 !important; } .pagina-eliminar-producto .eliminar-subtitulo-datos { font-size: 1.05rem; font-weight: 700 !important; color: #ed1e79 !important; margin-bottom: 1.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(237, 30, 121, 0.35); font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .eliminar-lista-datos-completa { margin-top: 0.25rem; max-width: 100%; } .pagina-eliminar-producto .eliminar-lista-datos { margin: 0; font-family: var(--texto-cuerpo-interno-font) !important; } /* Datos del producto */ .pagina-eliminar-producto .eliminar-fila-dato { display: grid; grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr); gap: 0.5rem 1.25rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .eliminar-fila-dato:last-child { border-bottom: none; padding-bottom: 0.15rem; } .pagina-eliminar-producto .eliminar-fila-dato dt { margin: 0; padding-top: 0.1rem; font-size: 16px !important; font-weight: 700 !important; color: #374151 !important; font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .eliminar-fila-dato dt::after { content: ':'; } .pagina-eliminar-producto .eliminar-fila-dato dd { margin: 0; min-width: 0; font-size: 16px !important; font-weight: 400 !important; color: #374151; line-height: 1.5; word-break: normal; overflow-wrap: break-word; font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-eliminar-producto .eliminar-fila-boton { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(0, 0, 0, 0.07); } /* Misma fuente/tamaño que .btn-login del menú + icono FA */ .pagina-eliminar-producto .eliminar-btn-principal.btn-login { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.4rem; } .pagina-eliminar-producto .eliminar-btn-principal .eliminar-btn-icon { font-size: 1em; line-height: 1; display: inline-flex; align-items: center; } .pagina-eliminar-producto .eliminar-btn-principal .eliminar-btn-icon i { font-size: 1.05em; } .pagina-eliminar-producto .eliminar-btn-principal.btn-login:disabled { opacity: 0.55; } .pagina-eliminar-producto .eliminar-columna-imagen { padding-top: 0.25rem; } @media (min-width: 768px) { .pagina-eliminar-producto .eliminar-columna-imagen { padding-top: 2.75rem; } } /* Título Eliminar producto: negrita, #ed1e79 */ .pagina-eliminar-producto .card-formulario-interno .titulo-crear-producto { font-size: 22px !important; font-weight: 700 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: #ed1e79 !important; margin-bottom: 1.5rem !important; letter-spacing: -0.02em; line-height: 1.2; } /* Eliminar producto: título + GIF en una sola línea */ .pagina-eliminar-producto .guia-tallas-titulo-bloque { width: 100%; overflow: visible; } .pagina-eliminar-producto .guia-tallas-titulo-principal { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.35rem; width: auto; max-width: none; white-space: nowrap; text-align: center; } .pagina-eliminar-producto .guia-tallas-titulo-principal .guia-tallas-titulo-texto { display: inline-block; white-space: nowrap; flex-shrink: 0; } .pagina-eliminar-producto .guia-tallas-titulo-principal .guia-tallas-gif-estrellas, .pagina-eliminar-producto .guia-tallas-titulo-principal .guia-tallas-gif-al-final { display: inline-block; flex-shrink: 0; vertical-align: middle; width: 1.5em; height: 1.5em; margin-left: 0; } .pagina-eliminar-producto .card-formulario-interno { font-family: var(--texto-cuerpo-interno-font) !important; } /* «Información general»: fucsia, algo mayor que el cuerpo pero más discreto que antes */ .pagina-eliminar-producto .card-formulario-interno .formulario-seccion-titulo { margin-bottom: 0.6rem; font-size: 1.1rem !important; font-weight: 600 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: #ed1e79 !important; line-height: 1.3; display: block; width: 100%; padding-bottom: 0.45rem; border-bottom: 2px solid rgba(237, 30, 121, 0.4); } .pagina-eliminar-producto .card-formulario-interno .form-label, .pagina-eliminar-producto .card-formulario-interno .campo-solo-lectura .form-label { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: #374151 !important; margin-bottom: 0.15rem !important; } .pagina-eliminar-producto .card-formulario-interno .campo-solo-lectura .valor { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; margin-top: 0 !important; min-height: 0 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; } .pagina-eliminar-producto .card-formulario-interno .form-eliminar-producto small.text-muted { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); } .pagina-eliminar-producto .card-formulario-interno .form-control:not(.form-control-buscar) { font-size: 16px !important; font-family: var(--texto-cuerpo-interno-font) !important; padding: 8px 12px; border-radius: 6px 0 0 6px; } /* Código en Eliminar: mismo aspecto que Buscar/Modificar (42px, bordes 12px) */ .pagina-eliminar-producto.pagina-buscar-producto .card-formulario-interno .form-control.form-control-buscar { font-size: 16px !important; padding: 10px 16px !important; min-height: 42px !important; border-radius: 12px !important; border: 1px solid #ddd !important; width: 100% !important; box-sizing: border-box !important; } .pagina-eliminar-producto .input-group-buscar { gap: 10px; } .pagina-eliminar-producto .input-group-buscar .form-control { height: 34px !important; min-height: 34px !important; padding: 6px 12px !important; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; } .pagina-eliminar-producto .vista-previa-producto { font-size: 14px !important; font-family: sans-serif !important; } .pagina-eliminar-producto .btn-accion-principal { margin-top: 1rem; font-size: 19px !important; font-weight: var(--menu-nav-font-weight) !important; font-family: var(--menu-nav-font-family) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; height: 48px; line-height: 48px; border-radius: 8px; } .pagina-eliminar-producto .card-formulario-interno .campo-solo-lectura { margin-bottom: 1.1rem; } .pagina-eliminar-producto .card-formulario-interno .campo-solo-lectura.mb-3 { margin-bottom: 1.1rem !important; } .pagina-eliminar-producto .card-formulario-interno .mb-3 { margin-bottom: 1.1rem !important; } /* Vista previa card (otras vistas que aún usen card-vista-previa en Eliminar) */ .pagina-eliminar-producto .card-vista-previa { border: none; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12); overflow: hidden; padding: 0; } .pagina-eliminar-producto .card-vista-previa .vista-previa-producto { margin: 0; width: 100%; height: 360px; min-height: 360px; border: none; border-radius: 0; box-shadow: none; background: #f8f8f8; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pagina-eliminar-producto .card-vista-previa .vista-previa-producto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Menos espacio entre Precio y Descripción dentro del card */ .pagina-eliminar-producto .card-vista-previa .card-body { padding: 0.35rem 1rem 0.75rem; } .pagina-eliminar-producto .card-vista-previa .card-body .campo-solo-lectura, .pagina-eliminar-producto .card-vista-previa .card-body .campo-solo-lectura.mb-3 { margin-bottom: 0.15rem !important; } .pagina-eliminar-producto .card-vista-previa .card-body .campo-solo-lectura:last-child { margin-bottom: 0 !important; } .pagina-eliminar-producto .card-vista-previa .card-body .form-label { font-size: 14px !important; font-weight: 400 !important; margin-bottom: 0.08rem !important; } .pagina-eliminar-producto .card-vista-previa .card-body .valor { font-size: 14px !important; margin-top: 0 !important; min-height: 0 !important; line-height: 1.25 !important; } /* Tabla Buscar producto: columnas Nombre, Categoría, Precio, Estado, Colores, Tallas, SALE */ .pagina-eliminar-producto .table-buscar-producto { font-size: 14px; font-family: sans-serif; } .pagina-eliminar-producto .table-buscar-producto thead th { background-color: rgba(237, 30, 121, 0.12); color: #ed1e79; font-weight: 600; border-color: rgba(237, 30, 121, 0.35); padding: 0.6rem 0.75rem; } .pagina-eliminar-producto .table-buscar-producto tbody td { border-color: rgba(237, 30, 121, 0.2); padding: 0.5rem 0.75rem; vertical-align: middle; } /* Tamaños de letra del card: fijos en px (todas las pantallas) */ .card-formulario-interno .titulo-crear-producto { color: #ed1e79 !important; font-weight: 700 !important; font-size: 32px !important; font-family: var(--texto-cuerpo-interno-font) !important; text-align: center; margin-bottom: 2.25rem !important; line-height: 1.2; } .card-formulario-interno .formulario-seccion-titulo { color: #ed1e79 !important; font-weight: 600 !important; font-size: 18px !important; font-family: var(--texto-cuerpo-interno-font) !important; margin-bottom: 1.25rem; display: inline-block; border-bottom: 2px solid #ed1e79; padding-bottom: 0.4rem; line-height: 1.3; } /* Grupo Código + Buscar: input redondeado a la izquierda, botón a la derecha, pegados (una sola pieza) */ .input-group-buscar { display: flex; width: 100%; } /* Input + Buscar: una sola pieza, input 12px izq, botón 12px der (referencia) */ .input-group-buscar .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none !important; border-radius: 12px 0 0 12px; flex: 1; min-width: 0; } .input-group-buscar .btn-login { border-radius: 0 12px 12px 0; flex-shrink: 0; } .body-menu-productos .form-control { border: 1px solid #ddd; border-radius: 12px; font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; outline: none; transition: border 0.3s, box-shadow 0.3s; } .body-menu-productos .form-select { border-width: var(--lucre-input-border-width) !important; border-style: solid !important; border-color: var(--lucre-input-border-color) !important; background-color: var(--lucre-input-bg) !important; box-shadow: var(--lucre-input-rest-shadow) !important; border-radius: 12px; outline: none; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; } .body-menu-productos .input-group-buscar { align-items: stretch; } .body-menu-productos .input-group-buscar .form-control { border-right: none !important; height: 42px; min-height: 42px; padding: 10px 16px !important; line-height: 1.2; box-sizing: border-box; } /* Menú interno: input unido al botón Buscar (mantiene borde derecho sin solapar el halo) */ /* Etiquetas productos: mismo cuerpo que la nota de asteriscos — sin login (.form-label-login) */ .card-formulario-interno .form-label:not(.formulario-seccion-titulo):not(.form-label-login) { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); } /* Texto escrito y desplegables: misma familia y gris que la etiqueta (p. ej. «Categoría:») */ .card-formulario-interno :is(.form-crear-producto, .form-modificar-producto, .form-buscar-producto) input.form-control.form-control-buscar:not([type="file"]), .card-formulario-interno :is(.form-crear-producto, .form-modificar-producto, .form-buscar-producto) select.form-select.form-control-buscar { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; color: var(--texto-cuerpo-interno-color) !important; letter-spacing: normal; -webkit-font-smoothing: antialiased; } /* Todos los mensajes de validación: misma letra/cuerpo que políticas */ .alert.mensaje-validacion, .contenedor-iniciar-sesion .alert.mensaje-validacion, .pagina-eliminar-producto .alert.mensaje-validacion, .pagina-buscar-producto .alert.mensaje-validacion, #modalCrearCategoria .alert.mensaje-validacion { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 500 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; letter-spacing: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Modales usuarios / roles: alertas con la misma letra que el formulario */ #modalBuscarUsuario .modal-body .alert, #modalEliminarUsuario .modal-body .alert, #modalModificarUsuario .modal-body .alert, #modalCrearRol .modal-body .alert { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 500 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; letter-spacing: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Formularios internos: mensaje = mismo cuerpo que el card */ .card-formulario-interno .alert.mensaje-validacion, .pagina-eliminar-producto .card-formulario-interno .alert.mensaje-validacion, .pagina-buscar-producto .card-formulario-interno .alert.mensaje-validacion, #modalCrearCategoria .alert.mensaje-validacion { font-family: var(--texto-cuerpo-interno-font) !important; } /* Modal Crear categoría / Crear rol y modales Agregar usuario (buscar / eliminar / modificar): misma letra y controles que Crear producto */ #modalCrearCategoria .modal-body, #modalCrearRol .modal-body, #modalBuscarUsuario .modal-body, #modalEliminarUsuario .modal-body, #modalModificarUsuario .modal-body { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size); line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color); } /* Modal Crear/Eliminar rol: unificar tamaños de texto (Bootstrap usa .small más chico) */ #modalCrearRol .modal-body :is(p, span, small, label, .text-muted, .small, .form-text, .alert) { font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height) !important; } #modalCrearCategoria .modal-title.titulo-crear-producto, #modalCrearRol .modal-title.titulo-crear-producto, #modalBuscarUsuario .modal-title.titulo-crear-producto, #modalEliminarUsuario .modal-title.titulo-crear-producto, #modalModificarUsuario .modal-title.titulo-crear-producto { font-family: var(--texto-cuerpo-interno-font) !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #ed1e79 !important; } #modalCrearCategoria .form-label, #modalCrearCategoria .form-label-buscar, #modalCrearRol .form-label, #modalCrearRol .form-label-buscar, #modalBuscarUsuario .form-label, #modalBuscarUsuario .form-label-buscar, #modalEliminarUsuario .form-label, #modalEliminarUsuario .form-label-buscar, #modalModificarUsuario .form-label, #modalModificarUsuario .form-label-buscar { font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); } #modalCrearCategoria .form-label-categoria-normal, #modalCrearRol .form-label-categoria-normal, #modalBuscarUsuario .form-label-categoria-normal, #modalEliminarUsuario .form-label-categoria-normal, #modalModificarUsuario .form-label-categoria-normal { font-weight: 400 !important; } /* Buscar usuario: card de datos (correo, nombre, rol…) */ #modalBuscarUsuario .buscar-usuario-info-card { margin-top: 0.5rem; border: 2px solid rgba(237, 30, 121, 0.45) !important; border-radius: 0 !important; background-color: #fffafd !important; box-shadow: 0 1px 3px rgba(237, 30, 121, 0.08); } /* Buscar usuario: etiquetas (Correo, Nombre, ...) en rosado y sin negrita */ #modalBuscarUsuario .buscar-usuario-info-card strong { font-weight: 400 !important; color: #ed1e79 !important; } /* «Crear categoría» / «Eliminar categoría»: fucsia, sin negrita */ #modalCrearCategoria .modal-categoria-seccion-titulo { color: #ed1e79 !important; font-weight: 400 !important; font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); margin-bottom: 0.5rem !important; } #modalCrearCategoria .form-control, #modalCrearCategoria .form-control-buscar, #modalCrearRol .form-control, #modalCrearRol .form-control-buscar, #modalBuscarUsuario .form-control, #modalBuscarUsuario .form-control-buscar, #modalEliminarUsuario .form-control, #modalEliminarUsuario .form-control-buscar, #modalModificarUsuario .form-control, #modalModificarUsuario .form-control-buscar { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; } /* Agregar usuarios / roles: campos menos anchos (desktop) */ #modalCrearRol .modal-dialog, #modalBuscarUsuario .modal-dialog, #modalEliminarUsuario .modal-dialog, #modalModificarUsuario .modal-dialog { max-width: 460px; } /* Usuarios y roles (modales): alinear label + input a la izquierda */ #modalCrearRol :is(.form-control, .form-control-buscar, .form-select), #modalBuscarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalEliminarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalModificarUsuario :is(.form-control, .form-control-buscar, .form-select) { margin-left: 0 !important; margin-right: 0 !important; } #modalCrearRol :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalBuscarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalEliminarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalModificarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal) { margin-left: 0 !important; margin-right: 0 !important; } #modalCrearRol :is(.form-control, .form-control-buscar, .form-select), #modalBuscarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalEliminarUsuario :is(.form-control, .form-control-buscar, .form-select), #modalModificarUsuario :is(.form-control, .form-control-buscar, .form-select) { width: 100%; max-width: 360px; margin-left: 0; margin-right: 0; } #modalCrearRol :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalBuscarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalEliminarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal), #modalModificarUsuario :is(.form-label, .form-label-buscar, .form-label-categoria-normal) { display: block; max-width: 360px; margin-left: 0; margin-right: 0; } /* Modal Crear/Eliminar rol: títulos en rosado (como el resto del admin) */ #modalCrearRol .modal-body .form-label-categoria-normal, #modalCrearRol .modal-body .form-label-categoria-normal * { color: #ed1e79 !important; } #modalCrearRol .modal-body > p.small.text-muted.mb-2 { color: #ed1e79 !important; /* «Eliminar rol» */ font-weight: 600 !important; } #modalBuscarUsuario .form-select, #modalEliminarUsuario .form-select, #modalModificarUsuario .form-select { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color) !important; } #modalModificarUsuario .form-check-label { font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; } /* Botones del modal Crear categoría / Crear rol y modales usuario: mismo padding/borde que btn-login del menú productos */ #modalCrearCategoria .modal-footer .btn-login, #modalCrearRol .modal-footer .btn-login, #modalBuscarUsuario .modal-footer .btn-login, #modalEliminarUsuario .modal-footer .btn-login, #modalModificarUsuario .modal-body .btn-login, #modalModificarUsuario .modal-body button.btn-login { padding: 8px 16px !important; font-size: 15px !important; border-radius: 6px; } /* Zona visible para agregar imagen de la categoría en el modal */ #modalCrearCategoria .categoria-modal-imagen-wrap { margin-top: 1rem; } #modalCrearCategoria .categoria-modal-imagen-zona { min-height: 42px; padding: 0.5rem 0; border-width: var(--lucre-input-border-width); border-style: solid; border-color: var(--lucre-input-border-color); border-radius: 6px; background-color: var(--lucre-input-bg); box-shadow: var(--lucre-input-rest-shadow); display: flex; align-items: center; } /* Un solo contorno: el del .categoria-modal-imagen-zona. El file tiene regla global (#modalCrearCategoria input[type=file]) con borde fucsia; sin esto se ve doble. */ #modalCrearCategoria .categoria-modal-imagen-zona input[type="file"].form-control { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; padding: 0 0.75rem !important; min-height: 38px; } #modalCrearCategoria .categoria-modal-imagen-zona input[type="file"].form-control:focus, #modalCrearCategoria .categoria-modal-imagen-zona input[type="file"].form-control:focus-visible { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; } .body-menu-productos .input-group-buscar .form-control:focus { border-color: var(--lucre-fucsia) !important; box-shadow: var(--lucre-input-focus-shadow) !important; outline: none !important; border-right: none; z-index: 1; } .body-menu-productos .btn-login { background-color: #ed1e79; color: #ffffff !important; border: none; padding: 0.5rem 1.25rem; font-size: 16px !important; border-radius: 8px; transition: opacity 0.2s, filter 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } /* Icono check verde en «Modificar» (sobre fondo fucsia) */ .body-menu-productos #btnModificarGuardar .btn-icono-modificar-check { display: inline-flex; align-items: center; justify-content: center; color: #22c55e; font-size: 1.15em; font-weight: 800; line-height: 1; text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); } .body-menu-productos .btn-login:hover { color: #ffffff !important; background-color: #b00e55; opacity: 0.9; } /* Buscar, Modificar, Eliminar: halo dorado ligero */ .body-menu-productos button.btn-login[value="Buscar"], .body-menu-productos #btnBuscarModificar, .body-menu-productos #btnBuscarEliminar, .body-menu-productos #btnBuscarBuscarProducto2, .body-menu-productos #btnBuscarBuscar, .body-menu-productos #btnModificarGuardar, .body-menu-productos #btnEliminarProducto { box-shadow: var(--lucre-btn-gold-glow) !important; } /* Crear producto / Agregar usuarios: botones que no tienen IDs "Buscar" pero deben verse igual */ .body-menu-productos .pagina-crear-producto .btn.btn-login, .body-menu-productos .pagina-agregar-usuario .btn.btn-login, .body-menu-productos #btnGuardarCategoria, .body-menu-productos #btnEliminarCategoria { box-shadow: var(--lucre-btn-gold-glow) !important; } .body-menu-productos button.btn-login[value="Buscar"]:hover, .body-menu-productos #btnBuscarModificar:hover, .body-menu-productos #btnBuscarEliminar:hover, .body-menu-productos #btnBuscarBuscarProducto2:hover, .body-menu-productos #btnBuscarBuscar:hover, .body-menu-productos #btnModificarGuardar:hover, .body-menu-productos #btnEliminarProducto:hover { box-shadow: var(--lucre-btn-gold-glow-hover) !important; } .body-menu-productos .pagina-crear-producto .btn.btn-login:hover, .body-menu-productos .pagina-agregar-usuario .btn.btn-login:hover, .body-menu-productos #btnGuardarCategoria:hover, .body-menu-productos #btnEliminarCategoria:hover { box-shadow: var(--lucre-btn-gold-glow-hover) !important; } /* Botones "Buscar" del código: más bajos, mismo estilo que el resto del formulario */ .body-menu-productos .input-group-buscar .btn-login { padding: 10px 16px !important; font-size: 16px !important; border-radius: 0 12px 12px 0; height: 42px; min-height: 42px; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; } /* Botón "Eliminar" / "Buscar": 100% ancho, 60px alto, 20px negrita (tamaño fijo en px) */ .btn-accion-principal { width: 100%; height: 60px; background-color: #ed1e79; color: #ffffff !important; border: none; padding: 0 15px; font-size: 20px !important; font-weight: var(--menu-nav-font-weight) !important; font-family: var(--menu-nav-font-family) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; border-radius: 20px; margin-top: 2.5rem; text-align: center; line-height: 60px; box-shadow: var(--lucre-btn-gold-glow); transition: opacity 0.2s, background-color 0.2s, box-shadow 0.22s ease; } .btn-accion-principal:hover { color: #ffffff !important; background-color: #b00e55; opacity: 0.95; box-shadow: var(--lucre-btn-gold-glow-hover); } /* Caja vista previa: border-radius 30px, altura 300px, texto como políticas */ .vista-previa-producto { width: 100%; height: 300px; min-height: 300px; background: #ffffff; border: 1px solid #ddd; border-radius: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--texto-cuerpo-interno-color); font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font); line-height: var(--texto-cuerpo-interno-line-height); } .vista-previa-producto img { max-width: 100%; max-height: 300px; object-fit: contain; } /* Campos solo lectura dentro del card: etiquetas y valor 16px */ .card-formulario-interno .campo-solo-lectura { margin-bottom: 1.25rem; } .card-formulario-interno .campo-solo-lectura .form-label { font-weight: 400 !important; font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font); color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); margin-bottom: 0.35rem; } .card-formulario-interno .campo-solo-lectura .valor { color: var(--texto-cuerpo-interno-color) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-family: var(--texto-cuerpo-interno-font); line-height: var(--texto-cuerpo-interno-line-height); margin: 0; min-height: 1.5em; } /* Texto de ayuda y nota de asteriscos: mismo cuerpo que políticas */ .card-formulario-interno .form-buscar-producto small.text-muted, .card-formulario-interno .form-eliminar-producto small.text-muted, .card-formulario-interno .form-crear-producto .text-muted.small, .card-formulario-interno .form-modificar-producto .text-muted.small, .card-formulario-interno p.text-muted.small, .card-formulario-interno .small.text-muted, .card-formulario-interno small.text-muted, .card-formulario-interno .form-text.text-muted, #modalBuscarUsuario .modal-body .small.text-muted, #modalEliminarUsuario .modal-body .small.text-muted, #modalModificarUsuario .modal-body .small.text-muted { font-size: var(--texto-cuerpo-interno-size) !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); /* Misma base que etiquetas y textbox (--texto-cuerpo-interno-font), no Arial suelto */ font-family: var(--texto-cuerpo-interno-font) !important; } .contenedor-iniciar-sesion .card-formulario-interno :is(p.text-muted.small, p.small.text-muted, .small.text-muted, small.text-muted) { font-family: var(--texto-cuerpo-interno-font) !important; } /* Alertas TempData en cards internos (éxito / error al guardar) */ .card-formulario-interno .alert.alert-success, .card-formulario-interno .alert.alert-danger:not(.mensaje-validacion) { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height); } /* Listas de tallas/colores dentro del card (Crear/Modificar): no afecta catálogo público */ .card-formulario-interno .blusas-lista-color li, .card-formulario-interno .blusas-lista-talla li { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; } /* «No aplica» está en .form-check (no dentro del

): misma fuente/color que S/M/L/XL */ .card-formulario-interno label.form-check-label[for="tallasNoAplica"], .card-formulario-interno label.form-check-label[for="tallasNoAplicaBuscar"] { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; } .body-menu-productos .enlace-recuperar { color: #ed1e79; text-decoration: none; font-size: 14px; } .body-menu-productos .enlace-recuperar:hover { color: #b00e55; text-decoration: underline; } .contenedor-iniciar-sesion .enlace-recuperar { color: #ed1e79; text-decoration: none; } .contenedor-iniciar-sesion .enlace-recuperar:hover { color: #b00e55; text-decoration: underline; } /* Fondo del body en Login / Recuperar / páginas que comparten esta clase: blanco liso */ .body-pagina-login { background-color: #ffffff; background-image: none; background-attachment: scroll; } /* Recuperar / cambiar contraseña: footer pegado abajo (sin hueco blanco) */ html:has(body .pagina-cambiar-contrasena) { height: 100%; } body.body-pagina-login:has(.pagina-cambiar-contrasena) { min-height: 100vh; display: flex; flex-direction: column; } body.body-pagina-login:has(.pagina-cambiar-contrasena) > .container, body.body-pagina-login:has(.pagina-cambiar-contrasena) > .container-fluid { flex: 1 0 auto; } body.body-pagina-login:has(.pagina-cambiar-contrasena) footer.footer-menu-productos { margin-top: auto !important; } /* Espacio intermedio antes del footer */ body.body-pagina-login:has(.pagina-cambiar-contrasena) main.pb-3 { padding-bottom: 1rem !important; } /* Contacto: fondo blanco */ .body-pagina-contacto { background-color: #ffffff !important; background-image: none !important; } /* Sin franja blanca entre contenido y footer (main trae .pb-3 de Bootstrap) */ .body-pagina-contacto main { padding-bottom: 0 !important; } .body-pagina-contacto .contacto-features { margin-bottom: 0; } /* Guía de tallas: fondo blanco */ .body-pagina-guia-tallas { background-color: #ffffff !important; background-image: none !important; } /* El wrapper del main tiene flex:1 y estira toda la vista → hueco blanco enorme bajo la card; solo altura del contenido */ body.body-pagina-guia-tallas > .container-fluid { flex: 0 0 auto; flex-grow: 0; } /* Sin mt:auto en el pie: si no, el espacio libre queda como margen encima del footer (banda blanca) */ body.body-pagina-guia-tallas footer.footer { margin-top: 0 !important; } /* Menos aire bajo el contenido antes del pie (main trae .pb-3) */ .body-pagina-guia-tallas main.pb-3 { padding-bottom: 0.35rem !important; } @media (max-width: 575.98px) { .contenedor-iniciar-sesion.pagina-guia-tallas { padding: 0 0 0.35rem; } .pagina-guia-tallas .guia-tallas-titulo-bloque { margin-top: 0.65rem !important; } .pagina-guia-tallas .guia-tallas-subtitulo { margin: 0.45rem auto 0; } .body-pagina-guia-tallas main.pb-3 { padding-bottom: 0 !important; } } /* Categorías: fondo "Menos es Más" — blanco/gris claro, sin flores ni degradado (fucsia solo en título, menú, detalles) */ .body-pagina-catalogo { background-color: #f7f7f9; background-image: none; } /* Header y contenido por encima del fondo de flores fijo */ .body-pagina-catalogo .menu-principal-header { position: relative; z-index: 10; } .body-pagina-catalogo .footer-menu-productos { position: relative; z-index: 5; } .body-pagina-catalogo main { position: relative; z-index: 6; } /* Misma tonalidad que el body del catálogo: evita una franja “papel blanco” detrás del contenido */ body.body-pagina-catalogo > .container-fluid { background-color: #f7f7f9; } body.body-pagina-catalogo > .container-fluid > main { background-color: #f7f7f9; /* Sin pb-3: evita franja gris entre sección blanca (p. ej. Favoritos) y el pie rosa */ padding-bottom: 0 !important; } /* ========== Catálogo: Hero (banner principal) — fondo blanco ========== */ .catalogo-hero { position: relative; width: 100%; max-width: 100vw; overflow: hidden; margin-bottom: 0; background-color: #ffffff; } .catalogo-hero .container { max-width: 100%; } .catalogo-hero-imagen-wrap { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 380px; max-height: 580px; } .catalogo-hero-imagen { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Overlay: degradado sutil desde la izquierda para que el texto respire sobre fondos detallados */ .catalogo-hero-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; } /* Bloque de texto centrado y con aire para no verse encajonado */ .catalogo-hero-contenido { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 2.25rem 2.25rem 2.25rem 2.25rem; z-index: 1; } /* Card con degradado rosado: halo dorado muy suave */ .catalogo-hero-texto-wrap { background: linear-gradient(180deg, #fceef4 0%, #fad4e6 50%, #ffe4ec 100%); background-color: #fceef4; padding: 1.1rem 1.4rem 1.25rem; border-radius: 16px; border: 1px solid rgba(237, 30, 121, 0.14); max-width: min(520px, calc(100vw - 3rem)); margin-left: auto; margin-right: auto; box-shadow: 0 -2px 12px rgba(212, 175, 95, 0.18), 0 -1px 6px rgba(200, 168, 88, 0.12), 0 4px 14px rgba(212, 172, 92, 0.16), 0 8px 22px rgba(204, 168, 90, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); } /* Inicio: eslogan sin caja; sombra difuminada rosa más notoria */ .inicio-inspiracion .texto-eslogan { font-family: "Playfair Display", serif; font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; color: #ed1e79; text-shadow: 0 2px 4px rgba(255, 255, 255, 0.55), 0 0 14px rgba(255, 179, 209, 0.9), 0 0 28px rgba(237, 30, 121, 0.5), 0 0 42px rgba(255, 182, 198, 0.38), 0 4px 32px rgba(237, 30, 121, 0.32); } /* Frase «Lucre's Fashion es una empresa…» bajo el eslogan: más pequeña que .texto-presentacion global */ .inicio-inspiracion .texto-presentacion { font-size: clamp(0.92rem, 1.65vw, 1.1rem); font-family: var(--menu-nav-font-family) !important; font-weight: 400 !important; margin-bottom: clamp(0.5rem, 1.5vw, 0.85rem) !important; } /* Franja testimonios: fondo blanco; aire moderado título↔cards↔línea inferior */ .inicio-seccion.inicio-testimonios { /* Mismo rosa que el título «Lo que dicen nuestras clientas» (.catalogo-titulo-categorias-badge: color/border #ed1e79) */ --inicio-testimonios-rosa-titulo: #ed1e79; padding: clamp(0.5rem, 1.4vw, 0.85rem) 0 0; background: #ffffff; width: 100%; max-width: 100%; overflow-x: visible; overflow-y: visible; } /* Título → carrusel */ .inicio-testimonios .catalogo-titulo-ancla-wrap { margin-bottom: clamp(0.65rem, 1.8vw, 1.1rem); } /* Área de foto de reseñas: sin degradado (blanco como el resto de la card) */ .inicio-testimonios .tarjeta-resena-media { background: #ffffff !important; border-radius: 12px 12px 0 0; overflow: hidden; } /* Reseñas: sombra respeta esquinas superiores redondeadas (no recortar el halo) */ .inicio-testimonios .inicio-tarjeta-cliente { overflow: visible; border-radius: 12px; } .inicio-testimonios .inicio-testimonio-item--en-foco .tarjeta-resena-media { border-radius: 18px 18px 0 0; overflow: hidden; } .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente .card-body { border-radius: 0 0 18px 18px; } /* Contenedor flechas + carril (misma idea que Favoritos en catálogo) */ .inicio-testimonios-carousel-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; padding-top: 0; padding-bottom: 0; } /* Carrusel testimonios: ancho real (container-fluid); fila centrada con grid + justify-items (sin truco 100vw que desplazaba el carril) */ .inicio-testimonios-carrusel-outer { width: 100%; max-width: 100%; overflow-x: visible; overflow-y: visible; } .inicio-testimonios-carrusel { display: grid; grid-template-columns: minmax(0, 1fr); /* start: si el inner va centrado, al volver del final al inicio queda un bloque blanco a la izquierda */ justify-items: start; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: visible; /* Aire extra vertical para que el halo/sombra de la card --en-foco no quede recortado por el scrollport */ padding-top: clamp(0.55rem, 1.6vw, 1rem); padding-bottom: clamp(1rem, 2.2vw, 1.5rem); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; } /* Durante el salto instantáneo última → primera reseña (evita que mandatory snap deje un frame en blanco) */ .inicio-testimonios-carrusel.inicio-testimonios-carrusel--programmatic { scroll-snap-type: none; } .inicio-testimonios-carrusel-inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, min(88vw, 340px)); gap: 1.05rem; width: max-content; max-width: none; min-width: 0; justify-self: start; padding-bottom: clamp(0.45rem, 1.35vw, 0.9rem); } /* Safari fallback: algunas versiones no calculan bien min()/clamp() dentro de grid-auto-columns */ @supports not (width: min(10px, 20px)) { .inicio-testimonios-carrusel-inner { grid-auto-columns: minmax(220px, 88vw); padding-bottom: 0.75rem; } } .inicio-testimonios .inicio-testimonio-item { padding: clamp(0.65rem, 2vw, 1.1rem) 0.45rem; } /* Testimonios: ocultar barra de scroll (se navega con swipe/trackpad/rueda horizontal) */ .inicio-testimonios-carrusel { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Legacy Edge */ } .inicio-testimonios-carrusel::-webkit-scrollbar { display: none; width: 0; height: 0; } .inicio-testimonio-item { scroll-snap-align: start; transform-origin: center center; } /* Card más centrada en el carrusel: zoom + sombra (clase --en-foco asignada por JS al desplazar) */ .inicio-testimonios .inicio-testimonio-item.inicio-testimonio-item--en-foco { position: relative; z-index: 2; /* scale() no agranda la caja en el layout: hueco mínimo para el halo sin separar tanto título/línea de las cards */ padding-top: clamp(0.55rem, 1.8vw, 1rem); padding-bottom: clamp(0.7rem, 2.2vw, 1.35rem); padding-left: 0.45rem; padding-right: 0.45rem; } .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente { position: relative; z-index: 0; overflow: visible; border-radius: 18px; transform: scale(1.06); transform-origin: center center; border: none; box-sizing: border-box; background: #ffffff; transition: transform 0.03s ease-out, filter 0.03s ease-out; } /* Halo rosa pie (#ed1e79): drop-shadow difuminado más notorio */ .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente, .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente:hover { border-radius: 18px !important; box-shadow: none; -webkit-filter: drop-shadow(0 0 12px rgba(237, 30, 121, 0.44)) drop-shadow(0 0 24px rgba(237, 30, 121, 0.3)) drop-shadow(0 0 38px rgba(237, 30, 121, 0.18)); filter: drop-shadow(0 0 12px rgba(237, 30, 121, 0.44)) drop-shadow(0 0 24px rgba(237, 30, 121, 0.3)) drop-shadow(0 0 38px rgba(237, 30, 121, 0.18)); } /* Reseña destacada: solo etiqueta "Más valorada" (el zoom lo marca --en-foco al estar centrada) */ .inicio-testimonios .inicio-testimonio-item--destacada { position: relative; } .inicio-resena-badge-destacada { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 4; font-family: Montserrat, sans-serif; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, rgba(237, 30, 121, 0.92) 0%, rgba(201, 40, 120, 0.95) 100%); padding: 0.3rem 0.55rem; border-radius: 999px; box-shadow: 0 2px 10px rgba(237, 30, 121, 0.2); pointer-events: none; } .inicio-testimonios .inicio-testimonio-item[role="button"] { cursor: pointer; } .inicio-testimonios .inicio-testimonio-item[role="button"]:focus-visible { outline: 2px solid #ed1e79; outline-offset: 3px; border-radius: 4px; } /* Modal reseña (inicio): panel con halo rosa difuminado en el borde */ .modal-resena-cliente-dialog { max-width: min(420px, calc(100% - 1.5rem)); } .modal-resena-cliente .modal-resena-cliente-content { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(237, 30, 121, 0.16), 0 0 40px rgba(255, 185, 210, 0.48), 0 0 80px rgba(237, 30, 121, 0.18), 0 18px 52px rgba(255, 195, 218, 0.4), 0 10px 32px rgba(237, 30, 121, 0.14); } .modal-resena-cliente-cerrar { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 6; width: 2.25rem; height: 2.25rem; padding: 0; margin: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 12px rgba(17, 24, 39, 0.12); opacity: 1; } .modal-resena-cliente-media { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: min(52vh, 380px); background: linear-gradient(165deg, #faf8f9 0%, #f0e8ec 55%, #ebe3e6 100%); overflow: hidden; } .modal-resena-cliente-media img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; } .modal-resena-cliente-cuerpo { padding: 1.15rem 1.25rem 1.35rem; text-align: center; } .inicio-tarjeta-cliente.inicio-tarjeta-cliente--modal-valoracion { background: transparent !important; border-radius: 0; box-shadow: none !important; overflow: visible; margin: 0 auto; } .modal-resena-cliente-badge { position: static !important; display: inline-block !important; margin-bottom: 0.65rem; pointer-events: auto; } .modal-resena-cliente-cuerpo .inicio-resena-valoracion { margin-bottom: 0.45rem; } .modal-resena-cliente-nombre { font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; font-weight: 600; color: #111827; margin: 0 0 0.65rem; } .modal-resena-cliente-texto { font-family: var(--texto-cuerpo-interno-font); font-size: var(--texto-cuerpo-interno-size); line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color); margin: 0; } body:has(#modalResenaCliente.show) .modal-backdrop.show, body:has(#modalPoliticaEnvios.show) .modal-backdrop.show, body:has(#modalPoliticaCambios.show) .modal-backdrop.show { background-color: rgba(45, 22, 38, 0.4); } @media (prefers-reduced-motion: reduce) { .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente { transform: none; } } @media (max-width: 575.98px) and (prefers-reduced-motion: reduce) { .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente, .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente:hover { transform: none; } } @media (min-width: 576px) { .inicio-testimonios-carrusel-inner { grid-auto-columns: minmax(230px, min(46vw, 380px)); gap: 1.2rem; } } @media (min-width: 992px) { .inicio-testimonios-carrusel-inner { grid-auto-columns: minmax(240px, min(38vw, 360px)); gap: 1.35rem; } } @media (max-width: 575.98px) { /* El carril con overflow-x recorta scale+sombra: en móvil sin zoom, solo halo (misma intención visual) */ .inicio-seccion.inicio-testimonios { overflow-x: visible; } .inicio-testimonios-carousel-wrap { overflow: visible; } /* Sin barra de scroll visible; una card casi a ancho completo (efecto zoom) */ .inicio-testimonios-carrusel-outer { overflow: visible; } .inicio-testimonios-carrusel { /* start: evita hueco centrado antes de la 1.ª card (solo se veía el halo rosa del --en-foco) */ justify-items: start; padding-top: clamp(0.55rem, 1.6vw, 1rem); padding-bottom: clamp(0.35rem, 1vw, 0.65rem); padding-left: max(1.15rem, env(safe-area-inset-left, 0px)); padding-right: max(1.15rem, env(safe-area-inset-right, 0px)); scroll-padding-inline: max(1.15rem, env(safe-area-inset-left, 0px)); scrollbar-width: none; -ms-overflow-style: none; } .inicio-testimonios-carrusel::-webkit-scrollbar { display: none; width: 0; height: 0; } .inicio-testimonios-carrusel-inner { justify-self: start; grid-auto-columns: min(86vw, 400px); gap: 0.85rem; padding-bottom: clamp(0.45rem, 1.4vw, 0.75rem); } .inicio-testimonios .inicio-testimonio-item { scroll-snap-align: center; padding: clamp(0.75rem, 3vw, 1.15rem) 0.6rem; } /* Sin scale en móvil: mismo padding que el resto (el --en-foco desktop reserva hueco para transform) */ .inicio-testimonios .inicio-testimonio-item.inicio-testimonio-item--en-foco { padding: clamp(0.75rem, 3vw, 1.15rem) 0.6rem; } /* Sin transform; halo rosa pie (#ed1e79), difuminado más notorio */ .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente, .inicio-testimonios .inicio-testimonio-item--en-foco .inicio-tarjeta-cliente:hover { transform: none; border: none; border-radius: 18px !important; box-sizing: border-box; overflow: visible; box-shadow: none; -webkit-filter: drop-shadow(0 0 10px rgba(237, 30, 121, 0.4)) drop-shadow(0 0 20px rgba(237, 30, 121, 0.28)) drop-shadow(0 0 32px rgba(237, 30, 121, 0.16)); filter: drop-shadow(0 0 10px rgba(237, 30, 121, 0.4)) drop-shadow(0 0 20px rgba(237, 30, 121, 0.28)) drop-shadow(0 0 32px rgba(237, 30, 121, 0.16)); } } /* iOS Safari fix: grid-auto-columns + scroll-snap suele romper el ancho/centrado. Usar flex en móvil. */ @supports (-webkit-touch-callout: none) { @media (max-width: 575.98px) { .inicio-testimonios-carrusel-inner { display: flex; flex-direction: row; align-items: stretch; gap: 0.85rem; width: max-content; } .inicio-testimonios .inicio-testimonio-item { flex: 0 0 86vw; max-width: 400px; } } } /* Testimonios: una sola línea inferior (sin regla base duplicada; ver :not arriba) */ .inicio-testimonios .inicio-linea-completa-decorativa.inicio-testimonios-linea-inferior { display: none !important; } /* Favoritos: el hr decorativo está oculto (el bloque de línea con halo se eliminó por duplicar la misma regla) */ .catalogo-favoritos .inicio-linea-completa-decorativa.catalogo-favoritos-linea-inferior { display: none !important; } /* Inicio: tres videos bajo categorías (antes de testimonios) — grid escalonado (columna central más baja) */ .inicio-videos-tres { background: #ffffff; padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3.25rem); overflow-x: clip; } .inicio-videos-tres-inner { max-width: 1440px; margin: 0 auto; } .inicio-videos-tres-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.25rem); align-items: start; padding: 0 clamp(1rem, 4vw, 2.75rem); box-sizing: border-box; } .inicio-videos-tres-card-wrap--center { margin-top: clamp(3.25rem, 11vw, 7rem); } .inicio-videos-tres-card { display: block; } /* Videos (inicio): sombras solo fucsia/rosa — sin gris ni dorado */ .inicio-videos-tres-media { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #ffffff; border-radius: 0; box-shadow: 0 4px 16px rgba(237, 30, 121, 0.12), 0 14px 38px rgba(255, 179, 209, 0.34), 0 24px 48px rgba(255, 182, 198, 0.26), 0 0 36px rgba(237, 30, 121, 0.08); transition: box-shadow 0.45s ease, transform 0.45s ease; } .inicio-videos-tres-card-wrap--center .inicio-videos-tres-media { box-shadow: 0 5px 19px rgba(237, 30, 121, 0.13), 0 16px 42px rgba(255, 179, 209, 0.38), 0 27px 54px rgba(255, 182, 198, 0.3), 0 0 44px rgba(237, 30, 121, 0.1); } .inicio-videos-tres-card-wrap:hover .inicio-videos-tres-media, .inicio-videos-tres-card-wrap:focus-within .inicio-videos-tres-media { box-shadow: 0 8px 24px rgba(237, 30, 121, 0.17), 0 20px 48px rgba(255, 179, 209, 0.44), 0 30px 58px rgba(255, 182, 198, 0.33), 0 0 50px rgba(237, 30, 121, 0.11); transform: translateY(-5px); } .inicio-videos-tres-video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; vertical-align: top; } @media (prefers-reduced-motion: reduce) { .inicio-videos-tres-media { transition: none; } .inicio-videos-tres-card-wrap:hover .inicio-videos-tres-media, .inicio-videos-tres-card-wrap:focus-within .inicio-videos-tres-media { transform: none; } } @media (max-width: 767.98px) { .inicio-videos-tres-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .inicio-videos-tres-card-wrap--center { margin-top: 0; } } /* "Resalta tu esencia" (catálogo): Playfair + escala amplia (Login / Cambiar contraseña usan la misma regla que el eslogan) */ .catalogo-hero-titulo { font-family: "Playfair Display", serif; font-size: clamp(1.5rem, 3.5vw, 2.35rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: #ed1e79; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .catalogo-hero-titulo { margin: 0 0 0.35rem 0; } .pagina-guia-tallas .guia-tallas-titulo-principal, .pagina-login .guia-tallas-titulo-principal, .pagina-cambiar-contrasena .guia-tallas-titulo-principal, .body-menu-productos .guia-tallas-titulo-principal, .pagina-catalogo-categoria .guia-tallas-titulo-principal, .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-principal { margin: 0; padding: 0; text-transform: none; } /* Categorías, Guía de tallas, Login, Cambiar contraseña, CRUD productos, productos por categoría: mismo título que el eslogan de inicio (.inicio-inspiracion .texto-eslogan) */ .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-principal, .pagina-guia-tallas .guia-tallas-titulo-principal, .pagina-login .guia-tallas-titulo-principal, .pagina-cambiar-contrasena .guia-tallas-titulo-principal, .body-menu-productos .guia-tallas-titulo-principal, .pagina-catalogo-categoria .guia-tallas-titulo-principal { font-family: "Playfair Display", serif; font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; color: #ed1e79; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.7), 0 1px 6px rgba(255, 182, 198, 0.55), 0 4px 20px rgba(237, 30, 121, 0.18), 0 0 8px rgba(252, 238, 244, 0.9); } .catalogo-hero-subtitulo { font-family: Montserrat, sans-serif; font-weight: 500; font-size: clamp(0.85rem, 1.9vw, 1.05rem); color: #ed1e79; margin: 0 0 1.25rem 0; letter-spacing: 0.08em; display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.4rem; } /* GIF a la par del texto "Nueva Colección Invierno 2026" */ .catalogo-hero-gif { vertical-align: middle; margin-left: 0; width: 1.8em; height: 1.8em; flex-shrink: 0; mix-blend-mode: multiply; background: transparent !important; background-color: transparent !important; } @media (max-width: 576px) { .catalogo-hero-gif { width: 1.4em; height: 1.4em; } } .catalogo-hero-boton { display: inline-block; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; font-size: 0.95rem; color: #ffffff; background-color: #ed1e79; padding: 0.6rem 1.5rem; border-radius: 8px; text-decoration: none; box-shadow: var(--lucre-btn-gold-glow), 0 4px 18px rgba(237, 30, 121, 0.22); transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.22s ease; } .catalogo-hero-boton:hover { background-color: #b00e55; color: #ffffff; transform: translateY(-2px); box-shadow: var(--lucre-btn-gold-glow-hover), 0 6px 22px rgba(237, 30, 121, 0.28); } @media (max-width: 576px) { .catalogo-hero-imagen-wrap { aspect-ratio: 4 / 3; min-height: 280px; } } @media (max-width: 768px) { .catalogo-hero-contenido { padding: 1.75rem 1rem 1.75rem 1rem; } } /* Título "Categorías" */ .body-pagina-catalogo .pagina-catalogo-contenedor > .container.pagina-catalogo-titulo-wrap, .body-pagina-catalogo .pagina-catalogo-contenedor > .container-fluid.pagina-catalogo-titulo-wrap { padding-top: 1.5rem; padding-bottom: 0.5rem; background: transparent !important; } /* Sección Categorías: fondo plano (sin degradado rosa) */ .catalogo-seccion-categorias { --cat-radius: 14px; --cat-radius-lg: 16px; --cat-rosa-fuerte: #ed1e79; --cat-rosa-suave: #fff0f5; width: 100%; background: #ffffff; padding-top: 1.5rem; padding-bottom: 2rem; box-shadow: none; } /* Keyframes compartidos (p. ej. carrusel Favoritos en catálogo) */ @keyframes catalogo-new-arrivals-marquee-derecha { 0% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } /* Contenedor categorías: sin card blanca (contenido directo) */ .catalogo-categorias-subcard { background: transparent; border-radius: 0; padding: 0; border: none; box-shadow: none; box-sizing: border-box; } @media (max-width: 576px) { .catalogo-categorias-subcard { padding: 0; border-radius: 0; } } .catalogo-seccion-categorias .pagina-catalogo-titulo-wrap { background: transparent !important; overflow: visible; } /* Categorías: que el grid use todo el ancho del container-fluid */ .catalogo-seccion-categorias .categorias-cards-row { width: 100%; margin-left: 0; margin-right: 0; } /* ========== Favoritos de la temporada ========== */ .catalogo-favoritos { width: 100%; background: #ffffff; padding-top: 1.25rem; padding-bottom: 1.75rem; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: none; } /* Móvil: menos aire entre Favoritos y pie */ @media (max-width: 575.98px) { .catalogo-favoritos { padding-top: 1rem; padding-bottom: 1rem; } .catalogo-favoritos-carrusel--marquee-css { padding: 0.35rem 0.5rem 0.45rem; } } /* Tablet: intermedio respecto al padding inferior grande en escritorio */ @media (min-width: 576px) and (max-width: 991.98px) { .catalogo-favoritos { padding-bottom: 1.75rem; } } /* Carrusel a ancho completo: mismas proporciones que las 4 cards grandes del inicio */ .catalogo-favoritos-carrusel-outer { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* Wrap para flechas tipo carrusel */ .catalogo-favoritos-carousel-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; } /* Flechas overlay (similar a tu ejemplo) */ .catalogo-favoritos-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.55); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; z-index: 5; cursor: pointer; user-select: none; box-shadow: none; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; } .catalogo-favoritos-nav > span { font-size: 26px; line-height: 1; transform: translateY(-1px); } .catalogo-favoritos-nav:hover { background: rgba(237, 30, 121, 0.78); transform: translateY(-50%) scale(1.02); } .catalogo-favoritos-nav:disabled { opacity: 0.35; cursor: default; } .catalogo-favoritos-nav--prev { left: 8px; } .catalogo-favoritos-nav--next { right: 8px; } /* Favoritos: carrusel con scroll (solo vistas legacy sin clase --marquee-css) */ .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { display: grid; grid-auto-flow: column; gap: 1rem; overflow-x: auto; overflow-y: hidden; flex: 1 1 0; min-width: 0; width: 100%; max-width: none; margin-left: auto; margin-right: auto; padding: 0.5rem 3.25rem 0.85rem; scroll-snap-type: x proximity; scroll-padding-left: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css)::-webkit-scrollbar { display: none; width: 0; height: 0; } .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) .catalogo-favorito-item { scroll-snap-align: start; } @media (min-width: 768px) { .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { gap: 1.25rem; } } @media (min-width: 992px) { .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { gap: 1.35rem; } } .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { grid-auto-columns: calc((100% - 1rem) / 2); } @media (min-width: 768px) { .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { grid-auto-columns: calc((100% - (1.25rem * 2)) / 3); } } @media (min-width: 1200px) { .catalogo-favoritos-carrusel:not(.catalogo-favoritos-carrusel--marquee-css) { grid-auto-columns: calc((100% - (1.35rem * 3)) / 4); } } /* Favoritos: mismo tipo de movimiento continuo que la banda NEW ARRIVALS (CSS, sin JS) */ .catalogo-favoritos-carrusel--marquee-css { display: block; overflow: hidden; width: 100%; max-width: none; margin-left: auto; margin-right: auto; padding: 0.5rem 0.75rem 0.85rem; flex: 1 1 0; min-width: 0; } .catalogo-favoritos-carrusel--marquee-css .catalogo-favoritos-carrusel-track { display: flex; width: max-content; gap: 1rem; animation: catalogo-new-arrivals-marquee-derecha 48s linear infinite; will-change: transform; } .catalogo-favoritos-carrusel--marquee-css .catalogo-favorito-item { flex: 0 0 calc((100vw - 2.5rem - 1rem) / 2); min-width: 0; max-width: 22rem; } @media (min-width: 768px) { .catalogo-favoritos-carrusel--marquee-css .catalogo-favoritos-carrusel-track { gap: 1.25rem; } .catalogo-favoritos-carrusel--marquee-css .catalogo-favorito-item { flex-basis: calc((100vw - 3rem - (1.25rem * 2)) / 3); max-width: none; } } @media (min-width: 1200px) { .catalogo-favoritos-carrusel--marquee-css .catalogo-favoritos-carrusel-track { gap: 1.35rem; } .catalogo-favoritos-carrusel--marquee-css .catalogo-favorito-item { flex-basis: calc((100vw - 3rem - (1.35rem * 3)) / 4); } } @media (prefers-reduced-motion: reduce) { .catalogo-favoritos-carrusel--marquee-css .catalogo-favoritos-carrusel-track { animation: none; transform: none; flex-wrap: wrap; width: 100%; max-width: 100%; justify-content: center; } .catalogo-favoritos-carrusel--marquee-css .catalogo-favorito-item:nth-child(n + 5) { display: none; } } /* Badges "Categorías", "Favoritos de la temporada" e inicio testimonios: misma sombra rosada (text-shadow; sin box-shadow en el badge salvo Categorías) */ .catalogo-seccion-categorias .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge, .catalogo-favoritos .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge, .inicio-testimonios .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge, .catalogo-favoritos .catalogo-favoritos-titulo { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.7), 0 1px 6px rgba(255, 182, 198, 0.55), 0 4px 20px rgba(237, 30, 121, 0.18), 0 0 8px rgba(252, 238, 244, 0.9); } /* Inicio — testimonios: badge centrado entre dos líneas (como Favoritos de la temporada) */ .inicio-testimonios .catalogo-titulo-categorias-ancla { display: flex; align-items: center; gap: 1.25rem; width: 100%; max-width: 100%; box-sizing: border-box; color: #ed1e79; } /* Móvil: grid 1fr — auto — 1fr para que las líneas laterales sean siempre iguales (evita pill descentrado) */ @media (max-width: 767.98px) { .inicio-testimonios .catalogo-titulo-categorias-ancla { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(0.45rem, 2.2vw, 0.85rem); } .inicio-testimonios .catalogo-titulo-categorias-ancla .catalogo-titulo-linea { min-width: 0 !important; width: 100%; } .inicio-testimonios .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge, .catalogo-favoritos .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge { white-space: normal; max-width: min(92vw, 22rem); text-align: center; justify-self: center; font-family: "Playfair Display", serif !important; font-size: clamp(1.15rem, 3vw, 1.75rem) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 8px 14px; line-height: 1.25; color: #ed1e79 !important; } } /* Trazo real (1px de alto) para que el box-shadow se vea; antes height:0+border casi no proyectaba */ .inicio-testimonios .catalogo-titulo-categorias-ancla .catalogo-titulo-linea { flex: 1 1 0; min-width: min(18vw, 5rem); height: 1px; align-self: center; border: none; background-color: rgba(237, 30, 121, 0.55); opacity: 1; border-radius: 1px; box-shadow: none; } /* Misma tipografía y escala que .inicio-inspiracion .texto-eslogan («Diseños que resaltan…») — testimonios y Favoritos catálogo; ≥768px (móvil: media query anterior) */ @media (min-width: 768px) { .inicio-testimonios .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge, .catalogo-favoritos .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge { font-family: "Playfair Display", serif !important; font-size: clamp(1.35rem, 3.2vw, 2rem) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.25 !important; color: #ed1e79 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.7), 0 1px 6px rgba(255, 182, 198, 0.55), 0 4px 20px rgba(237, 30, 121, 0.18), 0 0 8px rgba(252, 238, 244, 0.9) !important; } } /* Contenedor más ancho para que las imágenes lleguen a los bordes (línea azul) */ .catalogo-favoritos-contenedor { max-width: 100%; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 576px) { .catalogo-favoritos-contenedor { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 992px) { .catalogo-favoritos-contenedor { padding-left: 2rem; padding-right: 2rem; } } /* Título ancla compartido: Categorías y Favoritos */ .catalogo-titulo-ancla-wrap { margin-bottom: 2rem; } /* Favoritos: tarjetas planas (sin sombra ni borde; sin fondo en la card) */ .catalogo-favoritos .catalogo-producto-card { border-radius: 0; border: none !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .catalogo-favoritos .catalogo-producto-card:hover { box-shadow: none !important; transform: none !important; border-color: transparent !important; } .catalogo-favoritos .catalogo-producto-card--premium:hover .catalogo-producto-imagen { transform: none; } .catalogo-favoritos .catalogo-producto-info { background: transparent; } /* Misma proporción y alturas mínimas que .inicio-categoria-media (inicio); sin gris detrás */ .catalogo-favoritos .catalogo-producto-imagen-wrap { aspect-ratio: 3 / 4; background: transparent !important; } @media (min-width: 992px) { .catalogo-favoritos .catalogo-producto-imagen-wrap { min-height: 520px; } } @media (min-width: 1200px) { .catalogo-favoritos .catalogo-producto-imagen-wrap { min-height: 560px; } } .catalogo-favoritos .catalogo-producto-icono { width: 40px; height: 40px; box-shadow: none; } .catalogo-favoritos .catalogo-producto-icono i { font-size: 1.1rem; } .catalogo-producto-card { background: #ffffff; border-radius: 12px; overflow: hidden; border: 1px solid rgba(237, 30, 121, 0.38); box-shadow: 0 0 22px rgba(237, 30, 121, 0.14), 0 2px 8px rgba(237, 30, 121, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, transform 0.25s ease, border-color 0.3s ease; height: 100%; display: flex; flex-direction: column; } .catalogo-producto-card:hover { border-color: rgba(237, 30, 121, 0.55); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 4px 22px rgba(237, 30, 121, 0.16), 0 0 30px rgba(237, 30, 121, 0.18); transform: translateY(-4px); } .catalogo-producto-imagen-wrap { position: relative; aspect-ratio: 4 / 5; width: 100%; background: #f5f5f5; overflow: hidden; } .catalogo-producto-imagen { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity 0.3s ease; } .catalogo-producto-card:not(.catalogo-producto-card--premium):hover .catalogo-producto-imagen { opacity: 0.92; } /* Favoritos premium: zoom suave al hover */ .catalogo-producto-card--premium .catalogo-producto-imagen { transition: transform 0.35s ease; } .catalogo-producto-card--premium:hover .catalogo-producto-imagen { transform: scale(1.05); } .catalogo-producto-info { padding: 0.85rem 0.75rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .catalogo-producto-nombre { font-family: var(--menu-nav-font-family) !important; font-weight: 600; font-size: 0.95rem; color: #374151; margin: 0; line-height: 1.3; } .catalogo-favoritos .catalogo-producto-card--premium .catalogo-producto-precio { margin: 0; padding: 0; } .catalogo-producto-iconos { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; z-index: 2; opacity: 0.9; } .catalogo-producto-icono { width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #ed1e79; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .catalogo-producto-icono:hover { background: #ed1e79; color: #ffffff; transform: scale(1.08); } .catalogo-producto-icono i { font-size: 0.95rem; } .catalogo-producto-precio { font-family: var(--menu-nav-font-family) !important; font-weight: 700; font-size: 1.05rem; color: #374151; margin: 0.75rem 1rem 1rem; padding: 0; } .catalogo-producto-info .catalogo-producto-precio { margin: 0; } .catalogo-producto-card--premium .catalogo-producto-iconos { z-index: 3; } /* Reveal al scroll: entrada más lenta y marcada (la grilla dispara aparición escalonada en JS) */ .catalogo-seccion-categorias .catalogo-col-reveal { opacity: 0; transform: translateY(48px) scale(0.97); transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1); } .catalogo-seccion-categorias .catalogo-col-reveal.catalogo-col-reveal--visible { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .catalogo-seccion-categorias .catalogo-col-reveal { opacity: 1; transform: none; transition: none; } } /* Contenedor del catálogo: contexto para el patrón de flores */ .pagina-catalogo-contenedor { position: relative; min-height: 60vh; overflow: visible; } /* Categorías: sin patrón de flores ni glitter — fondo limpio para que destaquen las fotos */ .pagina-catalogo-contenedor .login-seccion-patron-derecha { display: none !important; } .pagina-catalogo-contenedor .glitter-overlay-transparente { display: none !important; } .body-pagina-catalogo .pagina-catalogo-contenedor .container { position: relative; z-index: 1; } .body-pagina-catalogo .pagina-catalogo-titulo-wrap { background: transparent !important; padding-top: 0; padding-bottom: 0; } /* Título Catálogo: más arriba; espacio título→contenido = Contacto (1.25rem) */ .body-pagina-catalogo .catalogo-titulo-con-estrellas { margin-top: 0 !important; margin-bottom: 1.25rem !important; background: transparent !important; } /* Categorías: ancla visual — líneas laterales fucsia + badge de contención */ .catalogo-titulo-categorias-ancla { display: flex; align-items: center; gap: 1.25rem; width: 100%; max-width: 100%; } /* Líneas de Categorías: del ancho de la sub-card blanca (no full viewport) */ .catalogo-categorias-subcard .catalogo-titulo-categorias-ancla { width: 100%; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } .catalogo-titulo-categorias-ancla .catalogo-titulo-linea { flex: 1; min-width: 0; height: 0; border-bottom: 1px solid #ed1e79; } .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge { flex-shrink: 0; display: inline-block; background-color: #ffffff !important; border: 1px solid #ed1e79; padding: 8px 20px; border-radius: 0; box-shadow: none !important; font-size: 1.35rem !important; font-weight: 700 !important; font-family: sans-serif !important; color: #ed1e79 !important; letter-spacing: -0.02em; line-height: 1.2; text-align: center; white-space: nowrap; } /* Solo en Catálogo — sección Categorías: badge "Categorías" con más sombra (sobrescribe none) */ .catalogo-seccion-categorias .catalogo-titulo-categorias-ancla .catalogo-titulo-categorias-badge { box-shadow: 0 6px 18px rgba(237, 30, 121, 0.22), 0 2px 10px rgba(237, 30, 121, 0.12), 0 14px 36px rgba(255, 182, 198, 0.55) !important; } /* Título Categorías: mismo formato que Contáctanos */ /* Título "Categorías": mismo tamaño que "Favoritos de la temporada" (1.35rem) */ /* Títulos de sección (Categorías): etiquetas elegantes — mayúsculas, tamaño contenido, peso 600 */ .body-pagina-catalogo .catalogo-titulo-con-estrellas .titulo-crear-producto.titulo-login, .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-titulo-texto { font-size: 1.15rem !important; font-weight: 600 !important; font-family: sans-serif !important; color: #ed1e79 !important; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; text-align: center; margin: 0 !important; background: transparent !important; } .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-titulo-texto { background: transparent !important; } /* Sección Categorías (vista con título en línea): misma sombra rosada que Favoritos / Inicio */ .body-pagina-catalogo .catalogo-seccion-categorias .catalogo-titulo-con-estrellas .titulo-crear-producto.titulo-login, .body-pagina-catalogo .catalogo-seccion-categorias .catalogo-titulo-con-estrellas .guia-tallas-titulo-texto { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.75), 0 1px 6px rgba(255, 182, 198, 0.6), 0 4px 22px rgba(237, 30, 121, 0.22), 0 0 10px rgba(252, 238, 244, 0.95) !important; } /* GIF estrellas en catálogo: sin fondo blanco (mix-blend-mode darken para que el blanco del GIF se funda con el fondo) */ .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-gif-estrellas, .body-pagina-catalogo .catalogo-titulo-con-estrellas img.guia-tallas-gif-estrellas { width: 48px; height: 48px; vertical-align: middle; margin-left: 0.35rem; mix-blend-mode: darken; background: transparent !important; background-color: transparent !important; border: none; box-shadow: none; } .body-pagina-catalogo .catalogo-titulo-con-estrellas p.guia-tallas-titulo-texto { background: transparent !important; } /* GIF al inicio de "Categorías": margen a la derecha */ .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-gif-al-inicio { margin-left: 0 !important; margin-right: 0.35rem !important; } @media (max-width: 768px) { .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-gif-estrellas { width: 36px; height: 36px; } .body-pagina-catalogo .catalogo-titulo-con-estrellas .guia-tallas-gif-al-inicio { width: 36px; height: 36px; } } /* Categorías: tarjetas planas por defecto; elevación suave solo en :hover */ /* Enlace de la card Accesorios: sin subrayado, aspecto igual que el resto */ .pagina-categorias .categorias-card-enlace { display: block; text-decoration: none; color: inherit; } /* Card de foto por categoría: halo amarillo/dorado, sin borde Bootstrap; esquinas rectas */ .pagina-categorias .categorias-card-elegante, .body-pagina-catalogo .catalogo-seccion-categorias .categorias-card-elegante { border: none !important; --bs-card-border-width: 0; --bs-card-border-color: transparent; border-radius: 0 !important; --bs-card-border-radius: 0; overflow: hidden; background: #ffffff; box-shadow: var(--lucre-sombra-categorias-card) !important; transition: box-shadow 0.75s cubic-bezier(0.33, 1, 0.68, 1), transform 0.75s cubic-bezier(0.33, 1, 0.68, 1); } .pagina-categorias .categorias-card-enlace:hover .categorias-card-elegante, .body-pagina-catalogo .catalogo-seccion-categorias .categorias-card-enlace:hover .categorias-card-elegante { border: none !important; box-shadow: 0 -12px 38px rgba(212, 175, 95, 0.28), 0 -3px 14px rgba(200, 168, 88, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06), 0 16px 38px rgba(212, 172, 92, 0.28), 0 34px 82px rgba(204, 168, 90, 0.22), 0 58px 130px rgba(0, 0, 0, 0.16) !important; transform: translateY(-12px); } /* Categorías: overlay oscuro + zoom + CTA centrado (hover tipo e-commerce) */ .pagina-categorias .categorias-card-overlay-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1); z-index: 2; pointer-events: none; } .pagina-categorias .categorias-card-enlace:hover .categorias-card-overlay-dim { opacity: 1; } .pagina-categorias .categorias-card-gradient-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%); z-index: 1; pointer-events: none; transition: opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1); } .pagina-categorias .categorias-card-enlace:hover .categorias-card-gradient-bottom { opacity: 0.28; } .pagina-categorias .categorias-card-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1rem 1.1rem; z-index: 3; transition: opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1); } .pagina-categorias .categorias-card-enlace:hover .categorias-card-pie { opacity: 0; } .pagina-categorias .categorias-card-titulo { display: block; color: #ffffff !important; text-align: center; font-size: 0.9rem; font-weight: 700; font-family: Montserrat, sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.12em; line-height: 1.35; margin: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .pagina-categorias .categorias-card-hover-centro { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; padding: 1rem; opacity: 0; transition: opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; } .pagina-categorias .categorias-card-enlace:hover .categorias-card-hover-centro { opacity: 1; } .pagina-categorias .categorias-card-titulo-centro { font-family: Montserrat, sans-serif; font-weight: 700; font-size: clamp(0.95rem, 2.2vw, 1.15rem); color: #ffffff; text-transform: uppercase !important; letter-spacing: 0.18em; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } /* Mismo aspecto que .btn-login de la ficha / catálogo por categoría (Ver más) */ .pagina-categorias .categorias-card-cta { display: inline-block; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; font-size: 16px !important; line-height: 1.25; color: #ffffff !important; background-color: #ed1e79 !important; border: 1px solid #ed1e79 !important; padding: 0.5rem 1.25rem; border-radius: 0; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; box-shadow: var(--lucre-btn-gold-glow) !important; transition: box-shadow 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pagina-categorias .categorias-card-enlace:hover .categorias-card-cta, .pagina-categorias .categorias-card-enlace:focus-visible .categorias-card-cta { background-color: #b00e55 !important; border-color: #b00e55 !important; color: #ffffff !important; box-shadow: var(--lucre-btn-gold-glow-hover) !important; } /* Categorías: proporción vertical 4:5 — zoom suave en la imagen */ .pagina-categorias .categorias-card-imagen { position: relative; aspect-ratio: 4 / 5; width: 100%; min-height: 0; height: auto; background: #ffffff; display: block; overflow: hidden; } .pagina-categorias .categorias-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(0.9); transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1), filter 0.75s cubic-bezier(0.33, 1, 0.68, 1); } .pagina-categorias .categorias-card-enlace:hover .categorias-card-img { transform: scale(1.1); filter: brightness(1.05); } @media (max-width: 576px) { .pagina-categorias .categorias-card-imagen { aspect-ratio: 4 / 5; } } /* ----- Iniciar sesión: GIF al borde izquierdo de la página, formulario centrado ----- */ .contenedor-iniciar-sesion { padding: 0.5rem 0 3rem; min-height: 60vh; display: flex; align-items: center; width: 100vw; position: relative; left: 50%; margin-left: -50vw; } /* Login: mismos ritmos verticales que Guía de tallas (sin centrar todo el bloque en la pantalla) */ .contenedor-iniciar-sesion.pagina-login { align-items: flex-start; padding: 0 0 2rem; min-height: auto; position: relative; overflow: hidden; } /* Login: forma orgánica muy pálida (fondo) */ .contenedor-iniciar-sesion.pagina-login::before { content: ""; position: absolute; right: -10%; top: 10%; width: min(52vw, 720px); height: min(52vw, 720px); pointer-events: none; z-index: 0; background: radial-gradient(closest-side at 35% 35%, rgba(255, 201, 226, 0.34), rgba(255, 201, 226, 0) 72%), radial-gradient(closest-side at 65% 50%, rgba(255, 232, 244, 0.55), rgba(255, 232, 244, 0) 70%), radial-gradient(closest-side at 45% 75%, rgba(252, 238, 244, 0.55), rgba(252, 238, 244, 0) 70%); filter: blur(10px); opacity: 0.55; } /* Login: el contenido siempre encima del fondo */ .contenedor-iniciar-sesion.pagina-login .login-container-fluid { position: relative; z-index: 2; } /* Login: menos aire entre la rayita y la card que en Guía (título + formulario más compacto) */ .pagina-login .login-formulario-centrado > .card-formulario-interno { margin-top: 1rem; } /* Cambiar / recuperar contraseña: aire bajo el h1 (alineado a ~Login; la card ya no necesita 2rem) */ .pagina-cambiar-contrasena .login-formulario-centrado > .card-formulario-interno { margin-top: 1.25rem; } /* Izquierda: más flores (más tenues que a la derecha para no competir con el GIF) */ .login-seccion-patron-izquierda { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; max-width: 52%; z-index: 0; pointer-events: none; background-image: url("../images/flor-cerezo-pattern.svg"), url("../images/flor-cerezo-pattern.svg"); background-repeat: repeat, repeat; background-size: 150px 150px, 210px 210px; background-position: 15% 25%, 55% 60%; opacity: 0.38; } /* Sección derecha: patrón de flores de cerezo — varias capas + tamaño más denso */ .login-seccion-patron-derecha { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; max-width: 55%; z-index: 0; pointer-events: none; background-image: url("../images/flor-cerezo-pattern.svg"), url("../images/flor-cerezo-pattern.svg"), url("../images/flor-cerezo-pattern.svg"); background-repeat: repeat, repeat, repeat; background-size: 130px 130px, 200px 200px, 260px 260px; background-position: 10% 15%, 50% 45%, 75% 0%; opacity: 0.85; } /* Recuperar / cambiar contraseña: sin patrón de flores a la derecha (Login no lo usa) */ .pagina-cambiar-contrasena .login-seccion-patron-derecha { display: none !important; background: none !important; background-image: none !important; } @media (max-width: 991px) { .login-seccion-patron-derecha, .login-seccion-patron-izquierda { display: none; } /* Guía de tallas: mantener flores visibles en móvil (fondo completo) */ .contenedor-iniciar-sesion.pagina-guia-tallas .login-seccion-patron-derecha { display: block; } .contenedor-iniciar-sesion.pagina-guia-tallas .login-seccion-patron-izquierda { display: none; } .contenedor-iniciar-sesion.pagina-guia-tallas::before { display: none; } } .contenedor-iniciar-sesion .login-container-fluid { position: relative; z-index: 1; padding-left: 0; padding-right: 1rem; } .contenedor-iniciar-sesion .login-fila { justify-content: flex-start; } .contenedor-iniciar-sesion .login-col-gif { padding-left: 0; padding-right: 0; display: flex; align-items: center; } .contenedor-iniciar-sesion .login-col-formulario { display: flex; justify-content: center; align-items: center; padding-right: 18%; } /* Móvil/tablet: sin compensación desktop — el formulario debe quedar centrado (evita margen grueso a la derecha) */ @media (max-width: 991.98px) { .contenedor-iniciar-sesion .login-col-formulario { padding-right: 0; } .contenedor-iniciar-sesion .login-container-fluid { padding-left: 1rem; padding-right: 1rem; } } .contenedor-iniciar-sesion .login-formulario-centrado { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } /* Login / Recuperar / Cambiar contraseña: ancho tipo referencia (~480px), card más alargada en vertical */ .contenedor-iniciar-sesion:not(.pagina-guia-tallas) .login-formulario-centrado { max-width: 480px; } .contenedor-iniciar-sesion .login-formulario-centrado .card-formulario-interno { text-align: left; } /* Card blanca (Login, Recuperar, etc.): esquinas cuadradas; sombra como Guía de tallas (.guia-tallas-card-imagen) */ .contenedor-iniciar-sesion .card-formulario-interno { border-radius: 0 !important; border: 1px solid rgba(237, 30, 121, 0.14) !important; --bs-card-border-width: 0; --bs-card-border-color: transparent; box-shadow: 0 -8px 28px rgba(237, 30, 121, 0.2), 0 -3px 14px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(237, 30, 121, 0.2), 0 28px 70px rgba(237, 30, 121, 0.28), 0 48px 100px rgba(0, 0, 0, 0.14) !important; } /* Login / Recuperar / Cambiar contraseña: card alargada (más aire vertical) y proporción cercana a la referencia */ .contenedor-iniciar-sesion:not(.pagina-guia-tallas) .card-formulario-interno { padding: 3.25rem 2.5rem 3.5rem !important; } /* Anula .p-4 de Bootstrap (1.5rem !important) en la card de login/recuperar: si no, se suma al padding de la card y queda mucho hueco arriba/abajo */ .contenedor-iniciar-sesion .card-formulario-interno .card-body { padding: 0 !important; } /* Card blanca del login: hereda sombra/borde del bloque .contenedor-iniciar-sesion .card-formulario-interno */ .pagina-login .card-formulario-interno { border-radius: 0 !important; } /* Etiquetas (Login, Recuperar, etc.): misma base que Crear producto */ .contenedor-iniciar-sesion .form-label-login { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; line-height: var(--texto-cuerpo-interno-line-height) !important; color: var(--texto-cuerpo-interno-color) !important; } .contenedor-iniciar-sesion .card-formulario-interno .form-control { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size); line-height: var(--texto-cuerpo-interno-line-height); color: var(--texto-cuerpo-interno-color); } /* Campos a ancho completo de la card y altura proporcional (referencia login/recuperar) */ .contenedor-iniciar-sesion:not(.pagina-guia-tallas) .card-formulario-interno .form-control:not([type="file"]) { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 0.75rem 1rem; border-radius: 10px; } .contenedor-iniciar-sesion:not(.pagina-guia-tallas) .password-toggle-wrap .form-control { min-height: 48px; padding-right: 2.75rem; } .contenedor-iniciar-sesion:not(.pagina-guia-tallas) .card-formulario-interno .form-control::placeholder { font-family: var(--texto-cuerpo-interno-font) !important; opacity: 0.85; } .contenedor-iniciar-sesion .card-formulario-interno .alert { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size); line-height: var(--texto-cuerpo-interno-line-height); } /* Login / recuperar: cuerpo del formulario = Crear producto */ .pagina-login .card-formulario-interno { font-family: var(--texto-cuerpo-interno-font) !important; } .pagina-cambiar-contrasena .card-formulario-interno { font-family: var(--texto-cuerpo-interno-font) !important; } /* Card blanca interior (textos e inputs dentro de la rosa) */ .card-login-inner { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .card-login-inner .form-label, .card-iniciar-sesion .form-label { font-weight: 600; color: #222222; font-size: 1rem; } .card-login-inner .form-control-iniciar-sesion, .card-iniciar-sesion .form-control-iniciar-sesion { border: 1px solid #ddd; border-radius: 12px; background-color: #ffffff; font-size: 16px; padding: 0.6rem 1rem; } .card-login-inner .form-control-iniciar-sesion:focus, .card-iniciar-sesion .form-control-iniciar-sesion:focus { border-color: var(--lucre-fucsia) !important; box-shadow: var(--lucre-input-focus-shadow) !important; outline: none !important; } .card-login-inner .form-control-iniciar-sesion::placeholder, .card-iniciar-sesion .form-control-iniciar-sesion::placeholder { color: #999; } /* Título compacto login (sans, coherente con cuerpo del formulario) */ .contenedor-iniciar-sesion .titulo-crear-producto.titulo-login { letter-spacing: -0.02em; line-height: 1.2; font-size: 20px !important; font-weight: 700 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: rgb(237, 30, 121) !important; margin-top: -0.75rem !important; margin-bottom: 1.5rem !important; text-align: center; } /* Título Blusas: mismo tamaño que "Iniciar sesión" (cuando está en línea con botones usa .blusas-titulo-linea) */ .pagina-blusas .titulo-crear-producto.titulo-login { letter-spacing: -0.02em; line-height: 1.2; font-size: 20px !important; font-weight: 700 !important; font-family: var(--texto-cuerpo-interno-font) !important; color: rgb(237, 30, 121) !important; margin-top: 1.5rem !important; margin-bottom: 0 !important; text-align: center; } .pagina-blusas .blusas-titulo-y-controles .titulo-crear-producto.titulo-login { margin-top: 0 !important; margin-bottom: 0 !important; } /* Cambiar contraseña: título más arriba, alineado como en Login */ /* Cambiar contraseña: espacio entre menú y título, título siempre visible */ /* Recuperar contraseña: mismos márgenes título que Login, Guía de tallas y Contacto */ .contenedor-iniciar-sesion.pagina-cambiar-contrasena { align-items: flex-start; padding: 0 0 1.25rem; min-height: auto; } .pagina-cambiar-contrasena .guia-tallas-titulo-con-estrellas { display: none; } .contenedor-iniciar-sesion.pagina-cambiar-contrasena .login-col-formulario { align-items: flex-start; padding-top: 0; } .contenedor-iniciar-sesion.pagina-cambiar-contrasena .titulo-crear-producto.titulo-login { display: none !important; } .card-iniciar-sesion { background-color: #FFF0F5; border: 1px solid #ed1e79; border-radius: 0; box-shadow: 0 4px 20px rgba(237, 30, 121, 0.12); } .card-iniciar-sesion .form-label { font-weight: 600; color: #222222; font-size: 1rem; } .card-iniciar-sesion .form-control-iniciar-sesion { border: 1px solid #ddd; border-radius: 12px; background-color: #ffffff; font-size: 16px; padding: 0.6rem 1rem; } .card-iniciar-sesion .form-control-iniciar-sesion:focus { border-color: var(--lucre-fucsia) !important; box-shadow: var(--lucre-input-focus-shadow) !important; outline: none !important; } .card-iniciar-sesion .form-control-iniciar-sesion::placeholder { color: #999; } /* Botones iguales a Modificar producto (btn-login) */ .contenedor-iniciar-sesion .btn-login { background-color: #ed1e79; color: #ffffff !important; border: none; padding: 0.5rem 1.25rem; font-size: 16px !important; border-radius: 6px; text-decoration: none; display: inline-block; text-align: center; } .contenedor-iniciar-sesion .btn-login:hover { background-color: #b00e55; color: #ffffff !important; opacity: 0.9; } /* Login / Recuperar: halo dorado (principal más marcado; secundario más suave) */ .contenedor-iniciar-sesion .btn.btn-login:not(.btn-login-secundario) { box-shadow: var(--lucre-btn-gold-glow) !important; } .contenedor-iniciar-sesion .btn.btn-login:not(.btn-login-secundario):hover { box-shadow: var(--lucre-btn-gold-glow-hover) !important; } .contenedor-iniciar-sesion .btn-login-secundario { background-color: transparent; color: #ed1e79 !important; border: 1px solid #ed1e79; box-shadow: var(--lucre-btn-gold-glow-soft) !important; } .contenedor-iniciar-sesion .btn-login-secundario:hover { background-color: #fceef4; color: #b00e55 !important; border-color: #b00e55; box-shadow: var(--lucre-btn-gold-glow) !important; } .contenedor-iniciar-sesion .crear-producto-boton-row { margin-top: 1rem; } /* GIF totalmente a la izquierda (wwwroot/GIFL2.gif) */ .login-imagen-gif { max-width: none; width: 420px; max-height: 550px; height: auto; object-fit: contain; object-position: left center; display: block; } /* Icono/logo tenue en la esquina inferior derecha (balance visual, encima del footer) */ .login-icono-derecha { position: fixed; bottom: 180px; right: 4%; width: 80px; max-width: 16vw; opacity: 0.52; pointer-events: none; z-index: 0; } .login-icono-derecha img { width: 100%; height: auto; max-height: 80px; object-fit: contain; object-position: center; display: block; } @media (max-width: 991px) { .login-icono-derecha { display: none; } } /* Árbol de cereza abajo a la izquierda (mismo GIF que a la izquierda, sin quitar el que ya está) */ .login-arbol-izquierda-abajo { position: fixed; bottom: 180px; left: 4%; width: 120px; max-width: 20vw; opacity: 0.7; pointer-events: none; z-index: 0; } .login-arbol-izquierda-abajo img { width: 100%; height: auto; max-height: 140px; object-fit: contain; object-position: left bottom; display: block; } @media (max-width: 991px) { .login-arbol-izquierda-abajo { display: none; } } /* ----- Página Blusas: misma fuente y tamaño que Login (sans-serif, 14–20px) ----- */ .pagina-blusas { width: 100%; padding-top: 2rem; padding-bottom: 1rem; font-family: sans-serif !important; font-size: 14px; } @media (min-width: 768px) { .pagina-blusas { font-size: 16px; } } /* Título centrado y botones a la derecha, misma altura */ .blusas-titulo-y-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; max-width: 1200px; margin: 0 auto 1.5rem; padding: 0 0.75rem; position: relative; } /* Página productos por categoría: título estilo Guía de tallas + controles en la fila siguiente */ .pagina-catalogo-categoria .blusas-titulo-y-controles { justify-content: flex-start; align-items: flex-start; /* Menos hueco título → grid: la card Filtrar sube respecto al bloque superior */ margin-bottom: 0.75rem; } .pagina-catalogo-categoria .blusas-titulo-y-controles > .blusas-controles { flex-basis: 100%; padding-left: 0; } .pagina-catalogo-categoria .blusas-titulo-y-controles > .guia-tallas-titulo-bloque { width: 100%; flex-basis: 100%; margin-top: 0.35rem !important; margin-bottom: 0.25rem !important; } .blusas-titulo-linea { position: absolute; left: 0; right: 0; margin: 0 !important; text-align: center; pointer-events: none; } /* Título "Blusas" centrado (mismo tamaño que titulo-login: 20px), sin fondo */ .blusas-titulo-barra { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; font-size: 20px !important; font-weight: 700 !important; font-family: sans-serif !important; color: #ed1e79 !important; letter-spacing: -0.02em; line-height: 1.2; background: none !important; } .blusas-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } .pagina-catalogo-categoria .blusas-controles { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0.75rem; } .pagina-catalogo-categoria .blusas-btn-descargar-coleccion { margin-left: auto; box-shadow: var(--lucre-btn-gold-glow) !important; } .pagina-catalogo-categoria .blusas-btn-descargar-coleccion:hover { box-shadow: var(--lucre-btn-gold-glow-hover) !important; } .pagina-catalogo-categoria .blusas-controles .blusas-btn-descargar-coleccion { white-space: normal; text-align: center; line-height: 1.25; max-width: 14rem; text-transform: none; letter-spacing: normal; } .blusas-vistas { display: flex; gap: 2px; } .blusas-btn-vista { width: 36px; height: 36px; padding: 0; border: none; background: transparent; color: #ed1e79; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .blusas-btn-vista:hover { background: rgba(237, 30, 121, 0.1); color: #ed1e79; } .blusas-btn-vista.activo { background: rgba(237, 30, 121, 0.15); color: #ed1e79; } .blusas-btn-caracteristicas { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; background: transparent; color: #ed1e79; border: 1px solid #ed1e79; border-radius: 4px; font-size: 16px !important; font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); text-transform: uppercase; cursor: pointer; } .blusas-btn-caracteristicas:hover { background: rgba(237, 30, 121, 0.1); color: #ed1e79; } /* Catálogo por categoría: controles de cabecera con esquinas cuadradas */ .pagina-catalogo-categoria .blusas-btn-vista { border-radius: 0; } .pagina-catalogo-categoria .blusas-btn-caracteristicas { border-radius: 0; } .blusas-contenido { display: flex; gap: 1.5rem; max-width: 1200px; margin: 0 auto; } /* Catálogo por categoría: mismo inset que el título; compensa márgenes del .row (container-fluid sin padding) */ .pagina-catalogo-categoria .blusas-contenido { padding-left: 0.75rem; padding-right: 0.75rem; box-sizing: border-box; width: 100%; /* Alinea sidebar y grid por arriba (evita que la card Filtrar quede centrada en vertical) */ align-items: flex-start; } .pagina-catalogo-categoria .blusas-grid-wrap { width: 100%; max-width: 100%; } .blusas-sidebar { width: 240px; flex-shrink: 0; } /* Catálogo por categoría: panel Filtrar — esquinas rectas + sombra dorada/rosa más notoria */ .pagina-catalogo-categoria .blusas-sidebar { background-color: #ffffff !important; border-radius: 0; padding: 1.5rem 1rem 2.75rem; min-height: 30rem; box-sizing: border-box; border: 1px solid rgba(212, 175, 95, 0.28); box-shadow: var(--lucre-sombra-ficha-producto); } /* Sidebar Filtrar: misma tipografía que el menú de productos (.menu-productos-links → --menu-nav-*) */ .blusas-sidebar-titulo { font-family: var(--menu-nav-font-family) !important; font-size: 1.25rem !important; font-weight: 700 !important; color: #ed1e79 !important; margin-bottom: 1rem; line-height: var(--texto-cuerpo-interno-line-height); letter-spacing: var(--menu-nav-letter-spacing); } .blusas-filtro { margin-bottom: 1.5rem; } .blusas-filtro-label { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: var(--menu-nav-font-weight) !important; color: var(--texto-cuerpo-interno-color) !important; margin-bottom: 0.5rem; line-height: var(--texto-cuerpo-interno-line-height); letter-spacing: var(--menu-nav-letter-spacing); } .blusas-slider { width: 100%; height: 6px; } .blusas-slider.form-range::-webkit-slider-thumb { background: #ed1e79; } .blusas-slider.form-range::-moz-range-thumb { background: #ed1e79; } .blusas-precio-texto { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; margin: 0.25rem 0 0.5rem; line-height: var(--texto-cuerpo-interno-line-height); letter-spacing: var(--menu-nav-letter-spacing); } .blusas-btn-filtrar { margin-top: 0.25rem; font-size: 16px !important; padding: 0.5rem 0.75rem; } /* Filtros catálogo: misma base que formularios Crear producto */ .pagina-blusas .blusas-sidebar .form-check-label { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; line-height: var(--texto-cuerpo-interno-line-height); letter-spacing: normal !important; } /* Catálogo por categoría: botones como login (compactos, no a todo el ancho) */ .pagina-catalogo-categoria .blusas-btn-compacto { display: inline-block; width: auto; min-width: unset; padding: 0.5rem 1.25rem; font-size: 16px !important; border-radius: 0; box-shadow: var(--lucre-btn-gold-glow) !important; transition: box-shadow 0.22s ease, opacity 0.2s ease; } .pagina-catalogo-categoria .blusas-btn-compacto:hover { box-shadow: var(--lucre-btn-gold-glow-hover) !important; } .blusas-lista-color, .blusas-lista-talla { list-style: none; padding: 0; margin: 0; } /* Checkboxes de tallas en fila (paralelos) */ .lista-tallas-paralelas { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0.75rem 1.25rem; } .lista-tallas-paralelas li { margin-bottom: 0 !important; } .pagina-blusas .blusas-sidebar .blusas-lista-color li, .pagina-blusas .blusas-sidebar .blusas-lista-talla li { margin-bottom: 0.5rem; font-size: 15px !important; color: var(--texto-cuerpo-interno-color); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-family: var(--texto-cuerpo-interno-font) !important; letter-spacing: normal !important; } /* Catálogo por categoría: «Filtrar» más pequeño y en negrita */ .pagina-catalogo-categoria .blusas-sidebar .blusas-sidebar-titulo { font-size: 1rem !important; font-weight: 700 !important; } .pagina-catalogo-categoria .blusas-sidebar .blusas-filtro-label, .pagina-catalogo-categoria .blusas-sidebar .blusas-precio-texto, .pagina-catalogo-categoria .blusas-sidebar .form-check-label, .pagina-catalogo-categoria .blusas-sidebar .blusas-lista-color li, .pagina-catalogo-categoria .blusas-sidebar .blusas-lista-talla li { font-family: var(--menu-nav-font-family) !important; color: var(--producto-nombre-precio-gris) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; } .blusas-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .blusas-grid-wrap { flex: 1; min-width: 0; } /* Catálogo por categoría: grid y cards estilo "tienda" (como referencia) */ /* Máximo 3 columnas desde lg (row-cols-lg-3); más aire horizontal y vertical entre cards */ .pagina-catalogo-categoria .blusas-grid { --bs-gutter-x: 2.25rem; --bs-gutter-y: 2rem; } .pagina-catalogo-categoria .blusas-card { border: none; border-radius: 0; background: transparent; overflow: visible; box-shadow: none; } .pagina-catalogo-categoria .blusas-card:hover { border-color: transparent; box-shadow: none; } /* Fotos de producto: rectángulo neto + sombra dorada/rosa más marcada */ .pagina-catalogo-categoria .blusas-card-imagen { aspect-ratio: 3 / 4; border-radius: 0; overflow: hidden; background: #f2f2f2; box-shadow: var(--lucre-sombra-ficha-producto); transition: transform 0.25s ease, box-shadow 0.25s ease; } .pagina-catalogo-categoria .blusas-card:hover .blusas-card-imagen { transform: translateY(-3px); box-shadow: var(--lucre-sombra-ficha-producto-hover); } .pagina-catalogo-categoria .blusas-card-imagen img, .pagina-catalogo-categoria .blusas-card .card-img-top { border-radius: 0 !important; object-fit: cover; transform: scale(1.001); transition: transform 0.35s ease, opacity 0.2s ease; } .pagina-catalogo-categoria .blusas-card:hover .blusas-card-imagen img { transform: scale(1.04); } .pagina-catalogo-categoria .blusas-card .card-body { padding: 0.75rem 0.15rem 0; background: transparent; } /* Nombre y precio: Playfair; gris ratón; tamaño algo menor que antes */ .pagina-catalogo-categoria .blusas-card-nombre { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); font-size: clamp(0.9375rem, 1.85vw, 1.125rem) !important; line-height: 1.25; color: var(--producto-nombre-precio-gris); margin-bottom: 0.35rem; } .pagina-catalogo-categoria .blusas-card-precio { font-family: var(--menu-nav-font-family) !important; font-weight: 700 !important; letter-spacing: 0.04em; font-size: clamp(0.9375rem, 1.85vw, 1.125rem) !important; line-height: 1.25; color: var(--producto-nombre-precio-gris); margin-bottom: 0.4rem; } /* Precio lista + oferta en tarjeta: un poco más compacto que el precio sin oferta. */ .pagina-catalogo-categoria .blusas-card-precio--oferta { font-size: clamp(0.8125rem, 1.55vw, 1rem) !important; } /* SALE %: misma familia que nombre/precio; tamaño menor que la fila de precios. */ .pagina-catalogo-categoria .blusas-card-sale { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); font-size: clamp(0.75rem, 1.35vw, 0.875rem) !important; line-height: 1.25; color: var(--producto-nombre-precio-gris); margin-bottom: 0.5rem; } .pagina-catalogo-categoria .blusas-card-colores { margin-top: 0.25rem !important; margin-bottom: 0 !important; } .pagina-catalogo-categoria .blusas-card-swatch { width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(17, 24, 39, 0.12); } .pagina-catalogo-categoria .blusas-card-tallas { display: none; } /* Mantener el botón WhatsApp flotante visible sobre foto */ .pagina-catalogo-categoria .blusas-card-wa-flotante { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12); } .blusas-card { border: 1px solid rgba(237, 30, 121, 0.38); border-radius: 8px; overflow: hidden; background: #ffffff; transition: box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 0 22px rgba(237, 30, 121, 0.14), 0 2px 8px rgba(237, 30, 121, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05); } .blusas-card:hover { border-color: rgba(237, 30, 121, 0.55); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 4px 18px rgba(237, 30, 121, 0.14), 0 0 28px rgba(237, 30, 121, 0.16); } .blusas-card-imagen { aspect-ratio: 4 / 5; overflow: hidden; background: #f5f5f5; } .blusas-card-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Clic en imagen → modal galería (CatalogoCategoria) */ .blusas-card-imagen-btn { cursor: pointer; height: 100%; display: block; } .blusas-card-imagen-btn:focus-visible { outline: 2px solid rgba(237, 30, 121, 0.55); outline-offset: 2px; } .blusas-card-imagen-btn:hover img { opacity: 0.96; } /* Enlace legacy: imagen enviaba a WhatsApp */ .blusas-card-imagen-whatsapp { cursor: pointer; height: 100%; } .blusas-card-imagen-whatsapp:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.95); outline-offset: -2px; } .blusas-card-imagen-whatsapp:hover img { opacity: 0.96; } /* Botón WhatsApp (esquina inferior derecha de la tarjeta — CatalogoCategoria) */ .blusas-card-body--whatsapp { padding-right: 3.25rem; padding-bottom: 0.75rem; } /* Modal galería de producto (CatalogoCategoria): X visible y flechas clicables */ #modalGaleriaProducto .modal-content { isolation: isolate; } /* Cabecera por encima del carrusel (transform/z-index del slide puede robar clics en la X) */ #modalGaleriaProducto .galeria-modal-header { position: sticky; top: 0; z-index: 200; flex-shrink: 0; background-color: var(--bs-modal-bg, #fff); padding-top: 0.75rem; } /* Mismo título rosado en Modificar, Buscar y catálogo (Bootstrap .h5 puede pisar el color) */ #modalGaleriaProducto .modal-header .modal-title, #modalGaleriaProducto .modal-header h2.modal-title, #modalGaleriaProductoLabel { color: var(--lucre-fucsia, #ed1e79) !important; font-weight: 600; } #modalGaleriaProducto .galeria-modal-cerrar { position: relative; z-index: 201; flex-shrink: 0; opacity: 1; pointer-events: auto; cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; /* Borde suave para que la X no se confunda con el fondo del modal */ outline: 1px solid rgba(0, 0, 0, 0.12); outline-offset: 3px; border-radius: 6px; } #modalGaleriaProducto .modal-body { position: relative; z-index: 0; } #modalGaleriaProducto .modal-dialog-scrollable .modal-body { overflow-x: hidden; } /* Layout tipo vitrina: miniaturas + imagen principal */ #modalGaleriaProducto .galeria-modal-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } @media (min-width: 768px) { #modalGaleriaProducto .galeria-modal-layout { flex-direction: row; gap: 1.25rem; } #modalGaleriaProducto .galeria-modal-thumbs-col { width: 92px; flex-shrink: 0; } #modalGaleriaProducto .galeria-modal-thumbs { flex-direction: column; max-height: min(70vh, 520px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; } } @media (max-width: 767.98px) { #modalGaleriaProducto .galeria-modal-thumbs-col:not(.d-none) { order: -1; } #modalGaleriaProducto .galeria-modal-thumbs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0.5rem; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; } #modalGaleriaProducto .galeria-modal-thumb { flex: 0 0 68px; width: 68px; } } #modalGaleriaProducto .galeria-modal-thumbs { display: flex; gap: 0.5rem; } #modalGaleriaProducto .galeria-modal-thumb { display: block; width: 100%; padding: 0; border: 2px solid #e5e5e5; border-radius: 8px; overflow: hidden; background: #f3f3f3; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #modalGaleriaProducto .galeria-modal-thumb:hover { border-color: rgba(237, 30, 121, 0.45); } #modalGaleriaProducto .galeria-modal-thumb.active { border-color: var(--lucre-fucsia, #ed1e79); box-shadow: 0 0 0 1px rgba(237, 30, 121, 0.25); } #modalGaleriaProducto .galeria-modal-thumb:focus-visible { outline: 2px solid rgba(237, 30, 121, 0.55); outline-offset: 2px; } #modalGaleriaProducto .galeria-modal-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; vertical-align: middle; } #modalGaleriaProducto .galeria-modal-main { flex: 1; min-width: 0; } #modalGaleriaProducto .galeria-producto-carousel { position: relative; z-index: 0; min-height: 220px; background: #f3f3f3; } #modalGaleriaProducto .galeria-producto-carousel .carousel-inner { position: relative; z-index: 1; } #modalGaleriaProducto .galeria-modal-img { max-height: 75vh; object-fit: contain; background: #fafafa; } #modalGaleriaProducto .galeria-carousel-btn { width: 3rem; height: 3rem; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 1; /* Por encima de slides con transform (evita clics “muertos” en las flechas) */ z-index: 50; border-radius: 50%; background: rgba(0, 0, 0, 0.45); pointer-events: auto; } #modalGaleriaProducto .galeria-carousel-btn:hover { background: rgba(0, 0, 0, 0.6); } #modalGaleriaProducto .carousel-control-prev { left: 0.5rem; } #modalGaleriaProducto .carousel-control-next { right: 0.5rem; } #modalGaleriaProducto .galeria-carousel-btn .carousel-control-prev-icon, #modalGaleriaProducto .galeria-carousel-btn .carousel-control-next-icon { width: 1.5rem; height: 1.5rem; filter: invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); } #modalGaleriaProducto .galeria-slide-toolbar { margin-top: 0; } /* ========== Ficha pública de producto — estética boutique / lujo ========== */ /* Rosado muy leve: casi blanco, solo un matiz rosa en los bordes del degradado */ .detalle-prod-lux { background-color: #faf9fb; background-image: linear-gradient( 165deg, #ffffff 0%, #fffafc 45%, #faf4f8 100% ); padding-bottom: 2.5rem; box-sizing: border-box; } .detalle-prod-lux-inner { max-width: 1320px; } .pagina-detalle-producto .detalle-prod-breadcrumb .breadcrumb { background: transparent; padding: 0; } /* Detalle producto: título de categoría como en pestaña Categorías */ /* Detalle producto: título de categoría dentro de la mega card */ .pagina-detalle-producto .detalle-prod-mega-card-titulo-cat { margin: 0 !important; padding: 1.15rem 1.25rem 0.85rem; border-bottom: 1px solid rgba(120, 120, 120, 0.18); display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 992px) { .pagina-detalle-producto .detalle-prod-mega-card-titulo-cat { padding-left: 2.15rem; padding-right: 2.15rem; } } /* Header layout: ruta a la izquierda, título centrado */ .pagina-detalle-producto .detalle-prod-mega-card-topbar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 0.75rem; } .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb { justify-self: start; align-self: start; } .pagina-detalle-producto .detalle-prod-mega-card-topbar .guia-tallas-titulo-principal { justify-self: center; text-align: center; } .pagina-detalle-producto .detalle-prod-mega-card-topbar-spacer { justify-self: end; } /* Igual que Categorías: sin rayita bajo el título */ .pagina-detalle-producto .detalle-prod-mega-card-titulo-cat .guia-tallas-titulo-principal::after { content: none; display: none; } /* Detalle producto: mismo estilo del título que en Categorías */ .pagina-detalle-producto .detalle-prod-mega-card-titulo-cat .guia-tallas-titulo-principal { font-family: "Playfair Display", serif; font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; color: #ed1e79; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.7), 0 1px 6px rgba(255, 182, 198, 0.55), 0 4px 20px rgba(237, 30, 121, 0.18), 0 0 8px rgba(252, 238, 244, 0.9); } .pagina-detalle-producto .detalle-prod-mega-card-titulo-cat .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } /* Ruta (migas): bloque legible + texto rosa marca */ .pagina-detalle-producto .detalle-prod-breadcrumb-list { padding: 0.55rem 1rem 0.6rem; background: rgba(255, 255, 255, 0.88); border-radius: 8px; border: 1px solid rgba(237, 30, 121, 0.28); box-shadow: 0 2px 16px rgba(237, 30, 121, 0.12); } /* Detalle producto: ruta dentro de la mega card (más pequeña y sin "pill") */ .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb .detalle-prod-breadcrumb-list { padding: 0; background: transparent; border: none; box-shadow: none; } .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb .detalle-prod-breadcrumb-list, .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb .detalle-prod-breadcrumb-list a, .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb .detalle-prod-breadcrumb-list .active { font-size: 0.72rem; letter-spacing: 0.06em; } .pagina-detalle-producto .detalle-prod-mega-card-breadcrumb .detalle-prod-breadcrumb-list .active { font-weight: 700 !important; } .pagina-detalle-producto .detalle-prod-breadcrumb-list .breadcrumb-item + .breadcrumb-item::before { color: rgba(178, 20, 98, 0.55); font-weight: 500; } /* Ruta unificada en rosa (misma familia cromática que la marca) */ .pagina-detalle-producto .detalle-prod-breadcrumb-list, .pagina-detalle-producto .detalle-prod-breadcrumb-list a, .pagina-detalle-producto .detalle-prod-breadcrumb-list .active { font-family: var(--menu-nav-font-family) !important; font-size: clamp(0.9rem, 1.15vw, 1.05rem); letter-spacing: 0.08em; text-transform: uppercase; color: #c2186d !important; } .pagina-detalle-producto .detalle-prod-breadcrumb-list, .pagina-detalle-producto .detalle-prod-breadcrumb-list a { font-weight: 600 !important; } .pagina-detalle-producto .detalle-prod-breadcrumb-list a { text-decoration: none !important; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .pagina-detalle-producto .detalle-prod-breadcrumb-list a:hover, .pagina-detalle-producto .detalle-prod-breadcrumb-list a:focus-visible { color: #ed1e79 !important; border-bottom-color: rgba(237, 30, 121, 0.45); } .pagina-detalle-producto .detalle-prod-breadcrumb-list .active { color: #c2186d !important; font-weight: 700 !important; letter-spacing: 0.07em; } /* Serif: solo título y precio (mismo tono que catálogo por categoría) */ .pagina-detalle-producto .detalle-prod-titulo { font-family: var(--menu-nav-font-family) !important; font-weight: 600 !important; letter-spacing: 0.06em; color: var(--producto-nombre-precio-gris); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.2; text-transform: uppercase; } .pagina-detalle-producto .detalle-prod-precio { font-family: var(--menu-nav-font-family) !important; font-weight: 600 !important; letter-spacing: 0.06em; font-size: clamp(1rem, 1.55vw, 1.3rem); color: var(--producto-nombre-precio-gris); } /* Ficha con oferta: precio tachado + precio SALE más pequeños que el precio normal. */ .pagina-detalle-producto .detalle-prod-precio--oferta { font-size: clamp(0.875rem, 1.25vw, 1.05rem) !important; } .pagina-detalle-producto .detalle-prod-sale-pct { font-family: var(--menu-nav-font-family) !important; font-weight: 500 !important; letter-spacing: 0.05em; font-size: clamp(0.78rem, 1.1vw, 0.9rem); color: var(--producto-nombre-precio-gris); } /* Panel derecho: más aire */ .pagina-detalle-producto .detalle-prod-header-datos { padding-bottom: 0.25rem; } /* Galería: miniaturas a la izquierda + principal con fade */ .pagina-detalle-producto .detalle-prod-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } @media (min-width: 576px) { .pagina-detalle-producto .detalle-prod-layout { flex-direction: row; align-items: flex-start; gap: 1rem; justify-content: center; } .pagina-detalle-producto .detalle-prod-thumbs-col { width: 88px; flex-shrink: 0; } .pagina-detalle-producto .detalle-prod-thumbs { flex-direction: column; max-height: min(72vh, 560px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; gap: 0.5rem; } } @media (max-width: 575.98px) { .pagina-detalle-producto .detalle-prod-thumbs-col { order: -1; } .pagina-detalle-producto .detalle-prod-thumbs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; } .pagina-detalle-producto .detalle-prod-thumb { flex: 0 0 68px; width: 68px; } } .pagina-detalle-producto .detalle-prod-thumbs-titulo { font-family: var(--menu-nav-font-family) !important; font-size: 0.6875rem; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: 0.1em; text-transform: uppercase; color: #7a726a; } .pagina-detalle-producto .detalle-prod-thumbs { display: flex; } .pagina-detalle-producto .detalle-prod-thumb { display: block; width: 100%; padding: 0; border: 1px solid rgba(42, 38, 35, 0.12); border-radius: 2px; overflow: hidden; background: #faf9f6; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .pagina-detalle-producto .detalle-prod-thumb:hover { border-color: rgba(42, 38, 35, 0.35); } .pagina-detalle-producto .detalle-prod-thumb.active { border-color: rgba(42, 38, 35, 0.55); box-shadow: 0 0 0 1px rgba(42, 38, 35, 0.2); } .pagina-detalle-producto .detalle-prod-thumb:focus-visible { outline: 2px solid rgba(42, 38, 35, 0.45); outline-offset: 2px; } .pagina-detalle-producto .detalle-prod-thumb img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; } .pagina-detalle-producto .detalle-prod-main { flex: 0 1 min(720px, 100%); min-width: 0; } .pagina-detalle-producto .detalle-prod-carousel { position: relative; /* Crema leve respecto al #f9f9f9 de la página: profundidad sin competir con el producto */ background: #faf9f6; border: 1px solid rgba(42, 38, 35, 0.08); border-radius: 2px; min-height: 200px; overflow: hidden; } .pagina-detalle-producto .detalle-prod-carousel-inner.carousel-inner { border-radius: 2px; } .pagina-detalle-producto .detalle-prod-slide-inner { background: #faf9f6; overflow: hidden; cursor: default; } /* Zoom dinámico al hover: ligero acercamiento + curva suave */ .pagina-detalle-producto .detalle-prod-img-principal { max-height: min(75vh, 720px); object-fit: contain; margin: 0 auto; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .pagina-detalle-producto .detalle-prod-slide-inner:hover .detalle-prod-img-principal { transform: scale(1.07); } .pagina-detalle-producto .detalle-prod-img-expand { position: absolute; right: 0.65rem; bottom: 0.65rem; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: #2a2624 !important; border: 1px solid rgba(42, 38, 35, 0.12); border-radius: 2px; font-size: 0.85rem; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: background 0.2s ease, color 0.2s ease; } .pagina-detalle-producto .detalle-prod-img-expand:hover { background: #ffffff; color: #1a1816 !important; } @media (prefers-reduced-motion: reduce) { .pagina-detalle-producto .detalle-prod-img-principal { transition: none; } .pagina-detalle-producto .detalle-prod-slide-inner:hover .detalle-prod-img-principal { transform: none; } } .pagina-detalle-producto .detalle-prod-carousel-btn { width: 2.75rem; height: 2.75rem; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 1; z-index: 5; border-radius: 50%; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(42, 38, 35, 0.1); } .pagina-detalle-producto .detalle-prod-carousel-btn:hover { background: #ffffff; } .pagina-detalle-producto .carousel-control-prev.detalle-prod-carousel-btn { left: 0.5rem; } .pagina-detalle-producto .carousel-control-next.detalle-prod-carousel-btn { right: 0.5rem; } .pagina-detalle-producto .detalle-prod-carousel-btn .carousel-control-prev-icon, .pagina-detalle-producto .detalle-prod-carousel-btn .carousel-control-next-icon { width: 1.25rem; height: 1.25rem; filter: invert(0.25); } .pagina-detalle-producto .detalle-prod-carousel .carousel-inner { position: relative; z-index: 1; } /* Navegación vecina: tipografía del menú; estilo visual neutro */ .pagina-detalle-producto .detalle-prod-btn-vecino--lux.btn { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing) !important; text-transform: uppercase !important; border-color: rgba(42, 38, 35, 0.22) !important; color: #3d3835 !important; background: rgba(255, 255, 255, 0.65) !important; box-shadow: var(--lucre-btn-gold-glow-soft) !important; } .pagina-detalle-producto .detalle-prod-btn-vecino--lux.btn:hover { background: #ffffff !important; border-color: rgba(42, 38, 35, 0.35) !important; color: #1a1816 !important; box-shadow: var(--lucre-btn-gold-glow-hover) !important; } .pagina-detalle-producto .detalle-prod-btn-vecino { width: 2.25rem; height: 2.25rem; padding: 0; line-height: 1; font-size: 1.25rem; } .pagina-detalle-producto .detalle-prod-btn-grid { min-width: 2.25rem; } /* Ficha: misma familia que el menú (Playfair) */ .pagina-detalle-producto .detalle-prod-ficha-info .detalle-prod-info-etiq { font-family: var(--menu-nav-font-family) !important; font-weight: var(--menu-nav-font-weight) !important; } .pagina-detalle-producto .detalle-prod-ficha-info .detalle-prod-info-valor { font-family: var(--menu-nav-font-family) !important; } /* Una sola card grande: galería + datos (halo dorado en el contenedor exterior) */ .pagina-detalle-producto .detalle-prod-mega-card { background: #fefefa; border-radius: 8px; border: 1px solid rgba(212, 175, 95, 0.28); box-shadow: var(--lucre-sombra-ficha-producto); overflow: hidden; } .pagina-detalle-producto .detalle-prod-mega-card__galeria { background: #faf9f6; padding: 1.25rem; } @media (min-width: 992px) { .pagina-detalle-producto .detalle-prod-mega-card__galeria { border-right: 1px solid rgba(212, 175, 95, 0.22); padding: 1.5rem; } } @media (max-width: 991.98px) { .pagina-detalle-producto .detalle-prod-mega-card__galeria { border-bottom: 1px solid rgba(212, 175, 95, 0.22); } } .pagina-detalle-producto .detalle-prod-mega-card .detalle-prod-carousel { border: none; border-radius: 0; background: #faf9f6; } .pagina-detalle-producto .detalle-prod-mega-card .detalle-prod-carousel-inner.carousel-inner { border-radius: 0; } .pagina-detalle-producto .detalle-prod-mega-card-datos { padding: 2rem 2.15rem 2.15rem; min-height: 100%; box-sizing: border-box; } .pagina-detalle-producto .detalle-prod-mega-card-datos .detalle-prod-header-en-card { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(120, 120, 120, 0.35); } .pagina-detalle-producto .detalle-prod-mega-card-datos .detalle-prod-ficha-info { margin-bottom: 0; background: transparent; border-radius: 0; padding: 0; border: none; box-shadow: none; } /* CTA y volver: mismo fondo crema que la ficha, dentro de la mega card */ .pagina-detalle-producto .detalle-prod-mega-card-acciones { padding: 1.35rem 2.15rem 2rem; border-top: 1px solid rgba(42, 38, 35, 0.08); background: #fefefa; box-sizing: border-box; } .pagina-detalle-producto .detalle-prod-mega-card-acciones .detalle-prod-wa-wrap { margin-top: 0; padding-top: 0; } @media (min-width: 992px) { .pagina-detalle-producto .detalle-prod-mega-card__info .detalle-prod-panel-sticky { position: sticky; top: 1.25rem; } } .pagina-detalle-producto .detalle-prod-info-bloque { text-align: left; padding-bottom: 1.35rem; margin-bottom: 1.35rem; border-bottom: 1px solid rgba(120, 120, 120, 0.35); } .pagina-detalle-producto .detalle-prod-info-bloque:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .pagina-detalle-producto .detalle-prod-info-etiq { font-family: var(--menu-nav-font-family) !important; font-size: 0.6875rem; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: 0.12em; text-transform: uppercase; color: #7a726a; margin: 0 0 0.55rem; line-height: 1.35; } .pagina-detalle-producto .detalle-prod-descripcion { white-space: pre-wrap; line-height: 1.55; } .pagina-detalle-producto .detalle-prod-info-valor { font-family: var(--menu-nav-font-family) !important; font-size: 1.05rem; font-weight: 500; color: #252220; margin: 0; line-height: 1.55; } /* Chips tallas / color */ .pagina-detalle-producto .detalle-prod-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; } .pagina-detalle-producto .detalle-prod-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0.35rem 1rem; font-family: var(--menu-nav-font-family) !important; font-size: 0.8125rem; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: 0.08em; text-transform: uppercase; color: #2a2624; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(42, 38, 35, 0.15); border-radius: 2px; } .pagina-detalle-producto .detalle-prod-chip--color { gap: 0.6rem; padding-left: 0.65rem; padding-right: 1rem; } .pagina-detalle-producto .detalle-prod-chip-label { font-family: var(--menu-nav-font-family) !important; font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.9rem; } .pagina-detalle-producto .detalle-prod-calzado-nota { font-family: var(--menu-nav-font-family) !important; font-size: 0.875rem; color: #5c5650; letter-spacing: 0.03em; } .pagina-detalle-producto .blusas-swatch.detalle-prod-swatch-lux { width: 28px !important; height: 28px !important; min-width: 28px; min-height: 28px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); } /* CTA WhatsApp: verde oficial (sin clase .btn = sin regla global .btn) */ .pagina-detalle-producto a.detalle-prod-wa.detalle-prod-wa-luxe { padding: 0.65rem 1.5rem !important; font-family: var(--menu-nav-font-family) !important; font-size: 0.75rem !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing) !important; text-transform: uppercase !important; text-decoration: none !important; color: #ffffff !important; background: #25d366 !important; border: 1px solid rgba(18, 140, 126, 0.35) !important; border-radius: 4px; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .pagina-detalle-producto a.detalle-prod-wa.detalle-prod-wa-luxe:hover { color: #ffffff !important; background: #20bd5a !important; border-color: rgba(18, 140, 126, 0.5) !important; box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1); } .pagina-detalle-producto .detalle-prod-wa-wrap { margin-top: 2.25rem; padding-top: 0.35rem; } .pagina-detalle-producto .detalle-prod-volver { font-family: var(--menu-nav-font-family) !important; font-size: 0.8125rem; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing); color: #6b6560 !important; } .pagina-detalle-producto .detalle-prod-volver:hover { color: #2a2624 !important; } .modificar-producto-abrir-galeria, .buscar-producto-abrir-galeria { cursor: pointer; } .modificar-producto-abrir-galeria:focus-visible, .buscar-producto-abrir-galeria:focus-visible { outline: 2px solid rgba(237, 30, 121, 0.55); outline-offset: 2px; border-radius: 8px; } .blusas-card-wa-flotante { position: absolute; right: 0.65rem; bottom: 0.65rem; width: 44px; height: 44px; border-radius: 50%; background-color: #25d366; color: #ffffff !important; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; line-height: 1; text-decoration: none !important; box-shadow: 0 2px 10px rgba(37, 211, 102, 0.45), 0 1px 3px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; z-index: 2; } .blusas-card-wa-flotante:hover { color: #ffffff !important; background-color: #20bd5a; transform: scale(1.06); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(0, 0, 0, 0.12); } .blusas-card-wa-flotante:focus-visible { outline: 2px solid #ed1e79; outline-offset: 2px; } .blusas-badge-nuevo { position: absolute; top: 8px; left: 8px; background: #EB001B; color: #ffffff; font-size: 14px !important; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 2px; font-family: sans-serif !important; } .blusas-card .card-body { padding: 0.75rem 1rem; } .blusas-card-nombre { font-size: 15px !important; font-weight: 600; color: #222222; margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.02em; font-family: sans-serif !important; } .blusas-card-precio { font-size: 16px !important; font-weight: 600; color: #ed1e79; margin: 0 0 0.5rem; font-family: sans-serif !important; } .blusas-card-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); flex-shrink: 0; } .blusas-card-colores { min-height: 18px; } .blusas-card-tallas { font-size: 0.8rem; font-family: sans-serif; } @media (max-width: 767px) { .blusas-contenido { flex-direction: column; } .blusas-sidebar { width: 100%; } /* En móvil la card no fuerza altura mínima (evita hueco vacío enorme) */ .pagina-catalogo-categoria .blusas-sidebar { min-height: auto; padding-bottom: 1.5rem; } .blusas-titulo-y-controles { justify-content: center; } .blusas-titulo-linea { text-align: center; } .blusas-controles { width: 100%; justify-content: center; } .pagina-catalogo-categoria .blusas-controles { justify-content: flex-start; } .pagina-catalogo-categoria .blusas-btn-descargar-coleccion { margin-left: auto; } /* Cards de producto alineadas con el título; texto centrado en una columna */ .pagina-catalogo-categoria .blusas-card .card-body { text-align: center; } } /* ----- Página Guía de tallas (fondo de flores como Login) ----- */ /* Guía de tallas: título un poco más abajo */ /* Guía de tallas, Categorías y Contacto: mismo espacio menú–título y título–contenido */ .contenedor-iniciar-sesion.pagina-guia-tallas { align-items: flex-start; padding: 0 0 1.25rem; background: transparent; /* Sin esto hereda min-height:60vh del bloque login → hueco enorme bajo la imagen en móvil */ min-height: auto; } /* Guía de tallas: flores en todo el body (ancho completo) y detrás de la imagen de tallas */ .contenedor-iniciar-sesion.pagina-guia-tallas .login-seccion-patron-derecha { left: 0; right: 0; width: 100%; max-width: none; display: none !important; background-image: none !important; } .contenedor-iniciar-sesion.pagina-guia-tallas .login-container-fluid { position: relative; z-index: 1; } .contenedor-iniciar-sesion.pagina-guia-tallas .titulo-crear-producto.titulo-login { margin-top: 0 !important; margin-bottom: 0 !important; } /* Guía de tallas: título y imagen centrados; sin centrar en bloque alto (evita hueco bajo la card) */ .contenedor-iniciar-sesion.pagina-guia-tallas .login-col-formulario { justify-content: center; align-items: flex-start; padding-left: 1rem; padding-right: 1rem; } .contenedor-iniciar-sesion.pagina-guia-tallas .login-formulario-centrado { text-align: center; max-width: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; } .contenedor-iniciar-sesion.pagina-guia-tallas .titulo-crear-producto.titulo-login { text-align: center; width: 100%; } /* Título con GIF estrellas (Recuperar contraseña, etc.) — Guía de tallas y Login usan .guia-tallas-titulo-bloque + h1 */ /* Espacio título→contenido en Guía de tallas: ver .pagina-guia-tallas .guia-tallas-card-imagen */ .guia-tallas-titulo-con-estrellas { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 2rem !important; margin-bottom: 0 !important; background: transparent; } .guia-tallas-titulo-con-estrellas .guia-tallas-titulo-texto { margin: 0 !important; width: auto; display: inline-block; } .guia-tallas-gif-estrellas { width: 48px; height: 48px; object-fit: contain; background: transparent !important; background-color: transparent !important; mix-blend-mode: multiply; } .guia-tallas-gif-al-final { vertical-align: middle; margin-left: 0.35rem; width: 2.2em; height: 2.2em; mix-blend-mode: multiply; background: transparent !important; background-color: transparent !important; } /* GIF al inicio del título (ej. Categorías), mismo que en Login */ .guia-tallas-gif-al-inicio { vertical-align: middle; margin-right: 0.35rem; margin-left: 0; width: 2.2em; height: 2.2em; mix-blend-mode: multiply; background: transparent !important; background-color: transparent !important; } @media (max-width: 576px) { .guia-tallas-gif-estrellas { width: 36px; height: 36px; } .guia-tallas-gif-al-final { width: 1.8em; height: 1.8em; } .guia-tallas-gif-al-inicio { width: 1.8em; height: 1.8em; } .pagina-login .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.35em; height: 1.35em; } .pagina-guia-tallas .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.35em; height: 1.35em; } .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.35em; height: 1.35em; } } .contenedor-iniciar-sesion.pagina-guia-tallas .card-formulario-interno, .contenedor-iniciar-sesion.pagina-guia-tallas .card-formulario-interno .card-body { text-align: center; } .pagina-guia-tallas .guia-tallas-texto { font-size: 15px !important; font-family: sans-serif !important; color: #222222; line-height: 1.5; margin-bottom: 1rem; text-align: center; } /* ----- Guía de tallas + Login + Catálogo (Categorías): mismo bloque título (rayita bajo el h1) ----- */ .pagina-guia-tallas .guia-tallas-titulo-bloque, .pagina-login .guia-tallas-titulo-bloque, .pagina-cambiar-contrasena .guia-tallas-titulo-bloque, .body-menu-productos .guia-tallas-titulo-bloque, .pagina-catalogo-categoria .guia-tallas-titulo-bloque, .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-bloque { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; margin-top: 1.25rem !important; margin-bottom: 0 !important; padding: 0 0.75rem; } /* CRUD (Buscar/Crear/Modificar/Eliminar): más aire bajo el título */ .body-menu-productos .guia-tallas-titulo-bloque { margin-top: 0.75rem !important; margin-bottom: 1.75rem !important; } .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-bloque { margin-top: 0.5rem !important; margin-bottom: 1rem !important; } .pagina-catalogo-categoria .guia-tallas-titulo-bloque { margin-top: 0.35rem !important; margin-bottom: 0 !important; } /* Categorías, Guía de tallas, Login, Cambiar contraseña, CRUD: sin rayita bajo el título (como el eslogan de inicio) */ .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-principal::after, .pagina-guia-tallas .guia-tallas-titulo-principal::after, .pagina-login .guia-tallas-titulo-principal::after, .pagina-cambiar-contrasena .guia-tallas-titulo-principal::after, .body-menu-productos .guia-tallas-titulo-principal::after, .pagina-catalogo-categoria .guia-tallas-titulo-principal::after { content: none; display: none; } /* Login: estrellas.gif junto al título (default global 2.2em) */ .pagina-login .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } .pagina-cambiar-contrasena .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } .body-menu-productos .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } /* Guía de tallas: mismo criterio — brillos más pequeños que el default 2.2em */ .pagina-guia-tallas .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } .pagina-catalogo-categoria .guia-tallas-titulo-principal .guia-tallas-gif-al-final { width: 1.5em; height: 1.5em; margin-left: 0.28rem; } /* Subtítulo bajo el título principal: mismo estilo base que .texto-presentacion */ .pagina-guia-tallas .guia-tallas-subtitulo, .body-pagina-catalogo .catalogo-seccion-categorias .guia-tallas-subtitulo { margin: 1rem auto 0; max-width: 26rem; font-weight: 300; } /* Guía de tallas: «Consulta la tabla…» — estilo base (si no se fuerza letra de menú) */ .pagina-guia-tallas .guia-tallas-subtitulo.texto-presentacion:not(.texto-menu-mayuscula) { max-width: 30rem; font-size: clamp(0.9rem, 1.35vw, 1.05rem); line-height: 1.5; font-family: var(--texto-cuerpo-interno-font) !important; font-weight: 400 !important; letter-spacing: normal !important; } /* Variante pedida: mismo look del menú + más pequeño */ .pagina-guia-tallas .guia-tallas-subtitulo.texto-menu-mayuscula { max-width: 30rem; font-size: clamp(0.78rem, 1.1vw, 0.92rem); line-height: 1.45; } /* Card: sombra pronunciada + halo superior más suave; esquinas cuadradas */ .pagina-guia-tallas .guia-tallas-card-imagen { background: #ffffff; border-radius: 0; padding: clamp(1rem, 3vw, 1.5rem); overflow: visible; box-shadow: 0 -8px 28px rgba(237, 30, 121, 0.2), 0 -3px 14px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(237, 30, 121, 0.2), 0 28px 70px rgba(237, 30, 121, 0.28), 0 48px 100px rgba(0, 0, 0, 0.14); border: 1px solid rgba(237, 30, 121, 0.14); margin-top: 2rem; width: min(95vw, 1000px); max-width: 100%; box-sizing: border-box; } .pagina-guia-tallas .guia-tallas-imagen-wrap { width: 100%; line-height: 0; display: block; border-radius: 0; overflow: hidden; background: #ffffff; } .pagina-guia-tallas .guia-tallas-imagen { width: 100%; max-width: 100%; height: auto; display: block; vertical-align: top; } @media (max-width: 575.98px) { .pagina-guia-tallas .guia-tallas-card-imagen { margin-top: 1.15rem; padding: clamp(0.65rem, 2.5vw, 1rem); } } /* ========== Página Contacto (Contáctanos) ========== */ .body-pagina-login .contacto-seccion-principal { background: #ffffff; color: #222222; } /* Margen menú→bloque título: cubierto por .guia-tallas-titulo-bloque */ /* Catálogo: mantener su ajuste propio */ .body-pagina-catalogo .catalogo-titulo-con-estrellas { margin-top: 0 !important; } /* Contacto: mismo espacio menú–título que Guía de tallas y Categorías */ .contacto-seccion-principal > .container-fluid.contacto-container-fluid { padding-top: 0 !important; padding-left: 1rem; padding-right: 1rem; } /* Título Contacto: igual que Guía de tallas (rosa #ed1e79 y brillo/estrellas al final) */ .contacto-titulo-con-estrellas { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1.25rem !important; margin-bottom: 0.75rem !important; background: transparent; } .contacto-titulo-con-estrellas .contacto-titulo-texto { margin: 0 !important; width: auto; display: inline-block; color: #ed1e79 !important; font-size: 20px !important; font-weight: 700 !important; font-family: sans-serif !important; letter-spacing: -0.02em; line-height: 1.2; text-align: center; border: none !important; border-bottom: 2px solid #ffffff !important; padding-bottom: 0.25rem; } /* Contáctanos: mismo título que Categorías / Guía / Login (eslogan inicio) */ .body-pagina-contacto .contacto-titulo-con-estrellas .contacto-titulo-texto { font-family: var(--menu-nav-font-family) !important; font-size: clamp(1.35rem, 3.2vw, 2rem) !important; font-weight: var(--menu-nav-font-weight) !important; letter-spacing: var(--menu-nav-letter-spacing) !important; line-height: 1.25 !important; color: #ed1e79 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 14px rgba(255, 179, 209, 0.7), 0 1px 6px rgba(255, 182, 198, 0.55), 0 4px 20px rgba(237, 30, 121, 0.18), 0 0 8px rgba(252, 238, 244, 0.9) !important; } /* Misma disposición; sin rayita bajo el título (como Categorías) */ .body-pagina-contacto .contacto-titulo-con-estrellas { flex-direction: column !important; align-items: center !important; } .body-pagina-contacto .contacto-titulo-con-estrellas::after { content: none; display: none; } /* Contacto: sin borde inferior en el bloque del título */ .body-pagina-contacto .contacto-titulo-con-estrellas { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; } .body-pagina-contacto .contacto-titulo-con-estrellas .contacto-titulo-texto { border-bottom: none !important; padding-bottom: 0 !important; } .contacto-titulo-con-estrellas .guia-tallas-gif-estrellas { width: 48px; height: 48px; vertical-align: middle; margin-left: 0.35rem; mix-blend-mode: multiply; } @media (max-width: 768px) { .contacto-titulo-con-estrellas .guia-tallas-gif-estrellas { width: 36px; height: 36px; } } .contacto-info-block { text-align: left; max-width: min(100%, 38rem); margin-left: 0; margin-right: auto; } /* Bloque dirección / horario / redes: mismo cuerpo que políticas en modal */ .contacto-info-linea { font-family: var(--texto-cuerpo-interno-font) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; color: var(--texto-cuerpo-interno-color) !important; margin: 0; line-height: var(--texto-cuerpo-interno-line-height) !important; } /* Contacto: misma letra que el menú principal (Playfair / --menu-nav-*) */ .body-pagina-contacto .contacto-info-linea { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: var(--texto-cuerpo-interno-line-height) !important; /* Texto oscuro → gris oscuro */ color: #374151 !important; } .contacto-info-item { margin-bottom: 1.25rem !important; } .contacto-info-item:last-of-type { margin-bottom: 0.75rem !important; } /* Etiquetas en negrita (dirección, WhatsApp, horario, redes): fucsia */ .contacto-seccion-principal .contacto-info-block strong { color: #ed1e79; font-weight: var(--menu-nav-font-weight); font-family: var(--menu-nav-font-family) !important; } @media (max-width: 575px) { .contacto-info-block { margin-right: 0; } } .contacto-whatsapp { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem; } .contacto-icono-whatsapp { color: #25d366; font-size: 1.2rem; } .contacto-redes-fila { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; flex-wrap: wrap; } .contacto-redes-fila .contacto-info-linea { margin-bottom: 0 !important; font-weight: 600 !important; color: #ed1e79 !important; } .body-pagina-contacto .contacto-redes-fila .contacto-info-linea { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; line-height: var(--texto-cuerpo-interno-line-height) !important; letter-spacing: normal !important; } .contacto-redes-iconos { display: inline-flex; gap: 1.25rem; justify-content: flex-start; margin-top: 0; flex-wrap: wrap; } /* Iconos redes: estilo moderno y minimalista */ .contacto-redes-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; background: rgba(0, 0, 0, 0.05); } .contacto-redes-link:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: rgba(237, 30, 121, 0.12); } .contacto-redes-link .fa-facebook-f { color: #1877f2 !important; font-size: 1.1rem; } .contacto-redes-link .fa-instagram { color: #e4405f !important; font-size: 1.15rem; } .contacto-redes-item { color: #333; font-size: 1.25rem; } .contacto-redes-item .fa-facebook-f { color: #1877f2; } .contacto-redes-item .fa-instagram { color: #e4405f; } .contacto-redes-item:hover { opacity: 0.85; } /* Título fuera de la caja: tipografía del menú (coherente con INICIO / Catálogo / …) */ .contacto-titulo-caja { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 600 !important; color: #ed1e79; margin: 0 0 1rem 0; text-align: left; letter-spacing: normal !important; } .contacto-titulo-caja-icono-img { width: 20px; height: 20px; margin-right: 0.4rem; vertical-align: middle; display: inline-block; object-fit: contain; } /* Fila paralela: títulos y cajas alineados arriba */ .contacto-fila-paralela { align-items: flex-start; } /* Grid para alinear "¿Cómo comprar?" y "Conozca nuestras políticas" a la misma altura */ /* Grid centrado y equilibrado: dos columnas con máximo ancho para no cargar a la izquierda */ .contacto-grid-paralelo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.5rem 2rem; margin-bottom: 2rem; max-width: 880px; margin-left: auto; margin-right: auto; } .contacto-grid-paralelo .contacto-info-block { margin-bottom: 0; grid-column: 1 / -1; } /* Espaciador oculto cuando el bloque de contacto ocupa toda la fila */ .contacto-grid-paralelo .contacto-espacio-igual { display: none; } .contacto-grid-paralelo .contacto-col-blocks { grid-column: span 1; } /* Espacio vacío en la derecha (misma fila que datos de contacto) para que las cajas queden al mismo nivel */ .contacto-espacio-igual { min-height: 1px; } @media (max-width: 767px) { .contacto-grid-paralelo { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .contacto-grid-paralelo .contacto-info-block { grid-column: 1; } .contacto-espacio-igual { display: none; } .contacto-grid-paralelo .contacto-col-blocks { grid-column: 1; } } .contacto-caja-rosada { font-family: var(--menu-nav-font-family) !important; background: #ed1e79; color: #ffffff; padding: 1.15rem 1.15rem; border-radius: 10px; /* Sombra rosa #f5c6d6 — halo amplio e intenso */ box-shadow: 0 0 92px rgba(245, 198, 214, 0.92), 0 0 150px rgba(245, 198, 214, 0.72), 0 20px 64px rgba(245, 198, 214, 0.72), 0 12px 40px rgba(245, 198, 214, 0.62), 0 4px 20px rgba(0, 0, 0, 0.11); } .contacto-caja-lista { list-style: none; padding: 0; margin: 0; text-align: left; } .contacto-caja-lista li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size) !important; font-weight: 500 !important; line-height: 1.45; letter-spacing: normal !important; } .contacto-caja-lista li:last-child { margin-bottom: 0; } .contacto-caja-lista--politicas .contacto-politica-btn { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; margin: 0; padding: 0; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .contacto-caja-lista--politicas .contacto-politica-btn:hover { text-decoration: underline; text-underline-offset: 0.15em; } .contacto-caja-lista--politicas .contacto-politica-btn:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; border-radius: 4px; } .modal-politica-contacto-cuerpo { padding: 1.5rem 1.35rem 1.65rem; padding-top: 2.35rem; } .modal-politica-contacto-titulo { font-family: var(--menu-nav-font-family); font-size: 1.3rem; font-weight: var(--menu-nav-font-weight); letter-spacing: var(--menu-nav-letter-spacing); color: #ed1e79; margin: 0 0 1rem; text-align: center; } .modal-politica-contacto-texto { font-family: var(--menu-nav-font-family); font-size: clamp(0.9rem, 1.15vw, 1rem); line-height: 1.55; color: var(--texto-cuerpo-interno-color); margin: 0; text-align: left; } .modal-politica-contacto-texto p { margin-bottom: 0.75rem; } .modal-politica-contacto-texto p:last-child { margin-bottom: 0; } .modal-politica-contacto-texto strong { font-weight: 600; color: #2d3748; } .contacto-caja-icono { flex-shrink: 0; width: 24px; text-align: left; color: #ffffff; } .contacto-caja-icono-img { width: 24px; height: 24px; display: block; object-fit: contain; } /* ¿Cómo comprar?: iconos a color (WhatsApp verde, imagen, billete como en el pie) */ .contacto-caja-lista--como-comprar .contacto-caja-icono { display: inline-flex; align-items: center; justify-content: flex-start; width: 1.75rem; min-height: 1.5rem; color: inherit; } .contacto-caja-lista--como-comprar .contacto-caja-icono-fa { font-size: 1.35rem; line-height: 1; } /* WhatsApp «¿Cómo comprar?»: logo sólido verde #25D366 (misma silueta que el pie) */ .contacto-caja-lista--como-comprar .contacto-comprar-paso-wa { display: flex; align-items: flex-start; gap: 0.75rem; color: inherit; text-decoration: none; width: 100%; -webkit-tap-highlight-color: transparent; } .contacto-caja-lista--como-comprar .contacto-comprar-paso-wa:hover { text-decoration: underline; text-underline-offset: 0.15em; } .contacto-caja-lista--como-comprar .contacto-comprar-paso-wa:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; border-radius: 4px; } .contacto-caja-lista--como-comprar .contacto-caja-icono-whatsapp-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; min-width: 1.75rem; min-height: 1.5rem; flex-shrink: 0; } /* Mismo tamaño visual que .contacto-caja-icono-fa (font-size: 1.35rem) */ .contacto-caja-lista--como-comprar .contacto-comprar-whatsapp-svg { display: block; width: 1.35rem; height: 1.35rem; flex-shrink: 0; } /* Verde oficial WhatsApp; evita que `color: inherit` del bloque pinte el icono de blanco */ .contacto-caja-lista--como-comprar .contacto-comprar-whatsapp-svg path { fill: #25d366; } .contacto-caja-lista--como-comprar .contacto-caja-icono-fa--check { color: #4ade80; } .contacto-caja-lista--como-comprar .contacto-caja-icono-fa--tarjeta { color: #93c5fd; } .contacto-caja-lista--politicas .contacto-caja-icono { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; min-height: 1.5rem; color: inherit; } .contacto-caja-lista--politicas .contacto-caja-icono-fa { font-size: 1.35rem; line-height: 1; } .contacto-caja-lista--politicas .contacto-caja-icono-fa--politica-sobre { color: #ffffff; } .contacto-banner { position: relative; width: 100%; overflow: hidden; background: #f0ebe6; line-height: 0; } /* Banner: imagen completa sin recortar */ .contacto-banner-imagen { display: block; width: 100%; max-width: 100%; height: auto; vertical-align: top; } .contacto-banner-texto-grande { position: absolute; bottom: 2rem; left: 2rem; font-family: var(--menu-nav-font-family) !important; font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 400; font-style: normal; color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); letter-spacing: 0.03em; display: block; } /* Texto secundario "New Arrivals" debajo del grande */ .contacto-banner-new-arrivals { position: absolute; bottom: 2rem; left: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .contacto-banner-new-arrivals .contacto-banner-texto-grande { position: static; } .contacto-banner-texto-secondary { font-family: var(--menu-nav-font-family) !important; font-size: clamp(0.9rem, 2vw, 1.1rem); font-weight: 400; color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); letter-spacing: 0.08em; } .contacto-banner-texto-boutique { position: absolute; top: 1.5rem; right: 2rem; font-family: var(--menu-nav-font-family) !important; font-size: 0.9rem; font-weight: 400; color: rgba(135, 135, 135, 0.95); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); letter-spacing: 0.2em; text-transform: uppercase; } .contacto-features { font-family: var(--menu-nav-font-family) !important; background: linear-gradient( 180deg, #ffffff 0%, #fff5f9 22%, #ffe8f2 48%, #ffd0e6 72%, rgba(237, 30, 121, 0.18) 100% ); padding: 1.5rem 0; border-top-left-radius: 12px; border-top-right-radius: 12px; } .contacto-features-fila { min-height: 80px; } .contacto-feature-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; } .contacto-feature-icono { font-size: 1.75rem; } .contacto-feature-emoji { display: inline-block; font-size: 2.25rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.5)); } .contacto-feature-corazon { filter: drop-shadow(0 0 8px rgba(237, 30, 121, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); animation: contacto-corazon-brillo 2.5s ease-in-out infinite; } @keyframes contacto-corazon-brillo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.08); } } .contacto-feature-icono-rojo { color: #EB001B; } .contacto-feature-icono-amarillo { color: #e0b252; } .contacto-feature-texto { font-family: var(--menu-nav-font-family) !important; font-size: var(--texto-cuerpo-interno-size); font-weight: 400; color: var(--texto-cuerpo-interno-color); text-align: center; letter-spacing: normal; line-height: var(--texto-cuerpo-interno-line-height); } /* Campo contraseña con botón «ojo» (mostrar/ocultar) */ .password-toggle-wrap { position: relative; } .password-toggle-wrap .form-control { padding-right: 2.75rem; } .password-toggle-btn { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; padding: 0.35rem 0.5rem; cursor: pointer; color: #6b7280; line-height: 1; border-radius: 0.25rem; } .password-toggle-btn:hover { color: var(--lucre-fucsia, #ed1e79); } .password-toggle-btn:focus-visible { outline: 2px solid var(--lucre-fucsia, #ed1e79); outline-offset: 2px; }