:root {
    --color-tinta: #251b18;
    --color-vino: #5c1f2d;
    --color-vino-oscuro: #3f111c;
    --color-oro: #b99056;
    --color-crema: #f7f2e9;
    --color-marfil: #fcfaf6;
    --color-linea: #dfd7ca;
    --color-verde: #163e32;
    --sombra: 0 24px 70px rgba(44, 26, 19, .14);
    --z-fondo: 0;
    --z-contenido: 1;
    --z-barra-navegacion: 30;
    --z-menu: 40;
    --z-modal-backdrop: 70;
    --z-modal: 80;
    --z-flotante: 60;
    --z-alerta: 90;
    --z-overlay-carga: 100;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-tinta); background: var(--color-marfil); font-family: "DM Sans", sans-serif; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.pagina { overflow: hidden; }
.contenedor { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sobrelinea { margin: 0 0 12px; color: var(--color-oro); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.anuncio { height: 30px; display: flex; align-items: center; justify-content: center; gap: 20px; color: #f8f2e8; background: var(--color-vino-oscuro); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.anuncio span { width: 3px; height: 3px; border-radius: 50%; background: var(--color-oro); }
.cabecera { position: relative; z-index: var(--z-barra-navegacion); background: rgba(252, 250, 246, .97); border-bottom: 1px solid rgba(37, 27, 24, .09); }
.navegacion { height: 82px; display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; }
.marca-principal { display: inline-flex; width: max-content; flex-direction: column; align-items: center; line-height: 1; }
.marca-principal strong { font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: .15em; }
.marca-principal small { margin-top: 7px; color: var(--color-oro); font-size: 7px; font-weight: 700; letter-spacing: .3em; }
.enlaces-navegacion { display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 38px); font-size: 12px; font-weight: 600; }
.enlaces-navegacion a { position: relative; padding: 8px 0; }
.enlaces-navegacion a::after { position: absolute; right: 50%; bottom: 0; left: 50%; height: 1px; content: ""; background: var(--color-vino); transition: .25s; }
.enlaces-navegacion a:hover::after { right: 0; left: 0; }
.acciones-navegacion { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.boton-icono { position: relative; width: 40px; height: 40px; border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.boton-menu { display: none; }
.selector-idioma { margin-left: 4px; padding-left: 8px; display: flex; align-items: center; gap: 3px; border-left: 1px solid var(--color-linea); }
.selector-idioma button { width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s, background .2s, transform .2s; }
.selector-idioma button:hover { opacity: 1; transform: translateY(-1px); }
.selector-idioma button.activo { opacity: 1; border-color: var(--color-oro); background: var(--color-crema); }
.selector-idioma button:focus-visible { outline: 2px solid var(--color-vino); outline-offset: 2px; }
.selector-idioma img { width: 20px; height: 14px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(37, 27, 24, .1); object-fit: cover; }
.contador { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--color-vino); border: 2px solid var(--color-marfil); font-size: 9px; }
.busqueda-global { position: absolute; top: 100%; right: 0; left: 0; z-index: var(--z-menu); visibility: hidden; opacity: 0; transform: translateY(-8px); background: var(--color-marfil); border-top: 1px solid var(--color-linea); box-shadow: 0 18px 45px rgba(39,25,20,.14); transition: .22s; }
.busqueda-global.abierto { visibility: visible; opacity: 1; transform: none; }
.busqueda-global-interior { height: 82px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }
.icono-busqueda { font-size: 27px; }
.busqueda-global input { width: 100%; height: 100%; padding: 0 12px; color: var(--color-tinta); background: transparent; border: 0; outline: 0; font-family: Georgia, serif; font-size: 26px; }
.busqueda-global input::placeholder { color: #aa9f98; }
.busqueda-global-interior > button { width: 42px; height: 42px; background: transparent; border: 0; font-size: 29px; cursor: pointer; }
.resultados-autocomplete { max-height: min(520px, calc(100vh - 220px)); overflow-y: auto; }
.resultado-producto { min-height: 92px; padding: 12px 0; display: grid; grid-template-columns: 58px 1fr auto 35px; align-items: center; gap: 16px; border-top: 1px solid var(--color-linea); transition: padding .2s, background .2s; }
.resultado-producto:hover, .resultado-producto.activo { padding-inline: 12px; background: var(--color-crema); }
.resultado-producto .miniatura-producto {
    width: 58px;
    height: 68px;
    flex: 0 0 58px;
    background-color: #f5f0e8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.resultado-producto > span:nth-child(2) { display: flex; flex-direction: column; }
.resultado-producto small { margin-bottom: 5px; color: var(--color-oro); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.resultado-producto strong { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.resultado-producto > b { font-size: 12px; }
.resultado-producto > i { font-style: normal; }
.estado-autocomplete { margin: 0; padding: 25px 0; color: #897d76; border-top: 1px solid var(--color-linea); font-size: 12px; text-align: center; }

.hero { position: relative; height: min(680px, 72vh); min-height: 560px; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.slide.activo { opacity: 1; visibility: visible; }
.slide-imagen { background: linear-gradient(90deg, rgba(248,238,220,.58) 0%, rgba(248,238,220,.25) 42%, transparent 66%), url('/images/hero-feratso.png?v=0.0.19-SNAPSHOT') center / cover; }
.slide-editorial { background: linear-gradient(90deg, rgba(39,10,17,.9), rgba(68,10,24,.45) 52%, rgba(40,10,15,.2)), url('/images/notas-arabes.png?v=0.0.19-SNAPSHOT') center / cover; }
.slide-gradiente { background: radial-gradient(circle at 70% 30%, #a76255 0, transparent 25%), linear-gradient(125deg, #321019, #6f2637 52%, #ad7660); }
.slide-gradiente::after { position: absolute; width: 420px; height: 540px; top: 60px; right: 14%; content: ""; border: 1px solid rgba(230,193,143,.35); border-radius: 48% 48% 12px 12px; box-shadow: inset 0 0 80px rgba(255,255,255,.06); }
.slide-dinamico { background: radial-gradient(circle at 70% 30%, #a76255 0, transparent 25%), linear-gradient(125deg, #321019, #6f2637 52%, #ad7660); }
.slide-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248,238,220,.7) 0%, rgba(248,238,220,.3) 48%, transparent 78%); }
.slide-texto-claro .slide-velo { background: linear-gradient(90deg, rgba(39,10,17,.9), rgba(68,10,24,.48) 55%, rgba(40,10,15,.2)); }
.slide-texto-claro { color: white; }
.slide-texto-claro .sobrelinea, .slide-texto-claro h1 em { color: #e1bd82; }
.slide-centrado .slide-velo { background: rgba(47,13,22,.54); }
.contenido-slide { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.contenido-slide h1, .contenido-slide h2 { max-width: 620px; margin: 0; font-family: Georgia, serif; font-size: clamp(52px, 6vw, 86px); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.contenido-slide h1 em, .contenido-slide h2 em { color: var(--color-vino); font-weight: 400; }
.contenido-slide > p:not(.sobrelinea) { max-width: 440px; margin: 25px 0 30px; font-size: 15px; line-height: 1.7; }
.contenido-slide-claro { color: white; }
.contenido-slide-claro .sobrelinea { color: #e1bd82; }
.contenido-slide-claro h2 { font-size: clamp(50px, 5.4vw, 76px); }
.contenido-centrado { align-items: center; color: white; text-align: center; }
.contenido-centrado h2 em { color: #e7bd81; }
.boton { min-height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 0; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .2s; }
.boton:hover { transform: translateY(-2px); }
.boton-oscuro { color: white; background: var(--color-vino-oscuro); }
.boton-oscuro:hover { background: var(--color-vino); }
.boton-claro { color: var(--color-vino-oscuro); background: var(--color-crema); }
.controles-hero { position: absolute; right: 0; bottom: 26px; left: 0; z-index: 3; display: flex; align-items: center; gap: 16px; }
.controles-hero > button { width: 36px; height: 36px; color: inherit; background: rgba(255,255,255,.7); border: 0; border-radius: 50%; cursor: pointer; }
.indicadores { display: flex; gap: 8px; }
.indicadores button { width: 24px; height: 2px; padding: 0; background: rgba(63,17,28,.25); border: 0; cursor: pointer; transition: .25s; }
.indicadores button.activo { width: 45px; background: var(--color-vino); }

.beneficios { border-bottom: 1px solid var(--color-linea); background: #fff; }
.cuadricula-beneficios { min-height: 98px; display: grid; grid-template-columns: repeat(4, 1fr); }
.cuadricula-beneficios > div { display: flex; align-items: center; justify-content: center; gap: 13px; border-right: 1px solid var(--color-linea); }
.cuadricula-beneficios > div:first-child { border-left: 1px solid var(--color-linea); }
.cuadricula-beneficios b { color: var(--color-oro); font-size: 25px; font-weight: 400; }
.cuadricula-beneficios p { display: flex; flex-direction: column; margin: 0; }
.cuadricula-beneficios strong { font-family: Manrope, sans-serif; font-size: 12px; }
.cuadricula-beneficios span { margin-top: 4px; color: #8d827b; font-size: 10px; }

.seccion-productos { padding-block: 96px; }
.seccion-todos-productos { background: var(--color-crema); }
.descripcion-seccion { max-width: 510px; margin: 12px 0 0; color: #857970; font-size: 12px; line-height: 1.6; }
.cabecera-seccion { margin-bottom: 35px; display: flex; align-items: end; justify-content: space-between; }
.cabecera-seccion h2, .universo h2, .marcas h2, .boletin h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(38px, 4.4vw, 54px); font-weight: 400; letter-spacing: -.035em; }
.cabecera-seccion > a { padding-bottom: 6px; border-bottom: 1px solid var(--color-tinta); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.grilla-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tarjeta-producto { min-width: 0; cursor: pointer; }
.tarjeta-producto:focus-visible { outline: 2px solid var(--color-vino); outline-offset: 5px; }
.imagen-producto { position: relative; aspect-ratio: .82; overflow: hidden; background-image: url('/images/perfumes-catalogo.png?v=0.0.19-SNAPSHOT'); background-size: 200% 200%; background-repeat: no-repeat; }
.imagen-producto > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-producto { background-position: center; background-size: cover; background-repeat: no-repeat; }
.imagen-producto::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(45,28,22,.05); pointer-events: none; }
.perfume-ambar { background-position: 0 0; }
.perfume-borgona { background-position: 100% 0; }
.perfume-verde { background-position: 0 100%; }
.perfume-azul { background-position: 100% 100%; }
.etiqueta { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 10px; color: white; background: var(--color-vino); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.corazon { position: absolute; top: 13px; right: 13px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); font-size: 22px; cursor: pointer; transition: .2s; }
.corazon:hover, .corazon.activo { color: white; background: var(--color-vino); transform: scale(1.06); }
.corazon span { line-height: 1; }.corazon small { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; color: white; background: var(--color-vino-oscuro); border: 2px solid white; border-radius: 10px; font-size: 8px; }
.datos-producto { padding: 19px 5px 0; }
.marca-producto { margin: 0 0 6px; color: #978880; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.datos-producto h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.datos-producto h3 a { color: inherit; text-decoration: none; }
.calificacion { padding: 0; display:inline-flex;align-items:center;gap:6px;color: #9a8c84; background: transparent; border: 0; cursor: pointer; }
.calificacion span { color: #bd8b42; font-size: 11px; letter-spacing: .06em; }
.calificacion small { font-size: 10px; }.calificacion small b{font-weight:700}.calificacion small i{font-style:normal}
.pie-producto { margin-top: 15px; display: flex; align-items: end; justify-content: space-between; }
.precio { display: flex; flex-direction: column; margin: 0; }
.precio span { color: #9a8d86; font-size: 10px; text-decoration: line-through; }
.precio strong { margin-top: 2px; font-size: 14px; }
.agregar-carrito { width: 38px; height: 38px; color: white; background: var(--color-tinta); border: 0; font-size: 22px; cursor: pointer; transition: .2s; }
.agregar-carrito:hover { background: var(--color-vino); transform: rotate(90deg); }

.universo { padding: 85px 0; color: white; background: var(--color-vino-oscuro); }
.universo-interior { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 8%; }
.universo-imagen { position: relative; min-height: 480px; overflow: hidden; background: linear-gradient(135deg, #6f2637, #b08469); }
.universo-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.universo-imagen-velo { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--color-vino-oscuro)); }
.universo h2 { font-size: clamp(45px, 5vw, 67px); line-height: 1.04; }
.universo h2 em { color: #d9b479; font-weight: 400; }
.universo-texto > p:not(.sobrelinea) { max-width: 470px; margin: 26px 0; color: #d7cac4; font-size: 14px; line-height: 1.8; }
.enlace-subrayado { display: inline-block; padding-bottom: 7px; border-bottom: 1px solid #d9b479; color: #e4c592; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.seccion-categorias { padding: 95px 0; background: var(--color-crema); }
.centrada { justify-content: center; text-align: center; }
.grilla-categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.categoria { position: relative; isolation: isolate; min-height: 385px; padding: 28px; display: flex; flex-direction: column; justify-content: end; color: white; background: linear-gradient(135deg, #6f2637, #b08469); overflow: hidden; }
.categoria > img { position: absolute; z-index: var(--z-fondo); inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.categoria::after { position: absolute; z-index: var(--z-fondo); inset: 0; content: ""; background: linear-gradient(0deg, rgba(25,10,9,.78), transparent 68%); }
.categoria::before { position: absolute; z-index: var(--z-contenido); inset: 12px; content: ""; border: 1px solid rgba(255,255,255,.32); transition: inset .3s; }
.categoria:hover::before { inset: 8px; }
.categoria:hover > img { transform: scale(1.04); }
.categoria span, .categoria h3, .categoria small { position: relative; z-index: var(--z-contenido); }
.categoria span { color: #e3c58c; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.categoria h3 { margin: 7px 0 13px; font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.categoria small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.marcas { padding: 82px 0; border-top: 1px solid var(--color-linea); }
.cabecera-marcas { margin-bottom: 22px; }
.lista-marcas { margin-top: 47px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.lista-marcas > a { padding: 25px 10px; color: #5c514c; font-family: Georgia, serif; font-size: 20px; letter-spacing: .1em; line-height: 1.15; text-align: center; text-transform: uppercase; transition: color .2s, transform .2s; }
.lista-marcas > a:hover { color: var(--color-vino); transform: translateY(-3px); }
.lista-marcas > a:first-child { font-size: 23px; }
.lista-marcas small { display: block; color: var(--color-oro); font-family: sans-serif; font-size: 7px; letter-spacing: .28em; }
.sobre-nosotros { padding: 110px 0; color: white; background: #211a17; }
.sobre-nosotros-interior { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(55px, 8vw, 120px); align-items: center; }
.sobre-nosotros-contenido h2 { margin: 0 0 28px; font-family: Georgia, serif; font-size: clamp(43px, 5vw, 66px); font-weight: 400; line-height: 1.03; letter-spacing: -.04em; }
.sobre-nosotros-contenido h2 em { color: #d9b479; font-weight: 400; }
.texto-sobre-nosotros { max-width: 590px; margin: 0 0 17px; color: #cfc3bd; font-size: 13px; line-height: 1.85; }
.enlace-conocer-mas { margin-top: 10px; display: inline-block; color: #e2bc7e; }
.valores-feratso { margin-top: 38px; border-top: 1px solid rgba(255,255,255,.15); }
.valores-feratso article { padding: 20px 0; display: grid; grid-template-columns: 42px 1fr; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.15); }
.valores-feratso article > span { color: var(--color-oro); font-family: Georgia, serif; font-size: 16px; }
.valores-feratso h3 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .04em; }
.valores-feratso p { margin: 0; color: #aa9e98; font-size: 11px; line-height: 1.6; }
.sobre-nosotros-visual { position: relative; padding: 0 0 70px 55px; }
.imagen-sobre-nosotros { position: relative; min-height: 590px; overflow: hidden; background: linear-gradient(135deg, #49322a, #9b6e58); }
.imagen-sobre-nosotros::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(40,15,19,.2), transparent); }
.imagen-sobre-nosotros img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.imagen-sobre-nosotros.sin-imagen::before { position: absolute; inset: 0; display: grid; place-items: center; content: "FERATZO"; color: rgba(255,255,255,.35); font-family: Georgia, serif; font-size: 34px; letter-spacing: .18em; }
.sobre-nosotros-visual blockquote { position: absolute; right: -30px; bottom: 15px; width: min(360px, 80%); margin: 0; padding: 30px 35px; color: var(--color-tinta); background: var(--color-crema); font-family: Georgia, serif; font-size: 24px; font-style: italic; line-height: 1.35; box-shadow: var(--sombra); }
.datos-feratso { position: absolute; bottom: 0; left: 0; padding: 22px; display: flex; flex-direction: column; gap: 20px; background: var(--color-vino); }
.datos-feratso div { display: flex; flex-direction: column; }
.datos-feratso strong { color: white; font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.datos-feratso span { margin-top: 3px; color: #d6bfc4; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.empresas-publicas { position: relative; padding: 92px 0 100px; overflow: hidden; color: #f9f1e5; background: linear-gradient(135deg, #241018 0%, #421624 58%, #1f1716 100%); }
.empresas-publicas::before { position: absolute; inset: 0; content: ""; opacity: .18; background: radial-gradient(circle at 15% 25%, #c29255 0 1px, transparent 2px), radial-gradient(circle at 85% 70%, #c29255 0 1px, transparent 2px); background-size: 90px 90px, 130px 130px; }
.empresas-publicas-ornamento { position: absolute; top: -145px; right: -35px; color: rgba(255,255,255,.025); font-family: Georgia, serif; font-size: 620px; line-height: 1; pointer-events: none; }
.empresas-publicas-interior { position: relative; }
.empresas-publicas-cabecera { margin-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 410px); gap: 60px; align-items: end; }
.empresas-publicas-cabecera h2 { max-width: 760px; margin: 0; font-family: Georgia, serif; font-size: clamp(42px, 5vw, 62px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.empresas-publicas-cabecera h2 em { color: #d6ad72; font-weight: 400; }
.empresas-publicas-cabecera > p { max-width: 410px; margin: 0 0 3px; color: #c6b7b2; font-size: 12px; line-height: 1.9; }
.carrusel-empresas-publicas { position: relative; padding-inline: 58px; }
.carrusel-empresas-publicas.sin-desborde { padding-inline: 0; }
.empresas-publicas-ventana { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; }
.empresas-publicas-ventana::-webkit-scrollbar { display: none; }
.grilla-empresas-publicas { display: flex; gap: 18px; }
.empresa-publica { position: relative; min-width: 0; flex: 0 0 calc((100% - 54px) / 4); padding: 13px 13px 15px; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.14); background: transparent; transition: transform .3s, border-color .3s; }
.empresa-publica:hover { z-index: var(--z-contenido); transform: translateY(-5px); border-color: rgba(214,173,114,.65); }
.empresa-publica-numero { position: absolute; top: 20px; left: 21px; z-index: var(--z-contenido); color: #a77d4a; font-family: Georgia, serif; font-size: 10px; }
.empresa-publica-logo { aspect-ratio: 1.12; padding: 0; display: grid; place-items: center; overflow: hidden; color: #f1e5d8; background: transparent; }
.empresa-publica-logo img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .35s; }
.empresa-publica:hover .empresa-publica-logo img { transform: scale(1.045); }
.empresa-publica-logo strong { font-family: Georgia, serif; font-size: 22px; font-weight: 400; text-align: center; }
.empresa-publica h3 { margin: 14px 4px 1px; overflow: hidden; color: #e5d8d1; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.control-empresa { position: absolute; top: calc(50% - 24px); z-index: var(--z-contenido); width: 42px; height: 42px; display: grid; place-items: center; color: #f8eadb; background: rgba(29,10,16,.72); border: 1px solid rgba(214,173,114,.5); border-radius: 50%; font-size: 17px; cursor: pointer; transition: background .2s, transform .2s; }
.control-empresa:hover { background: #8a364b; transform: scale(1.06); }
.control-empresa.anterior { left: 0; }
.control-empresa.siguiente { right: 0; }
.control-empresa[hidden], .empresas-publicas-ayuda[hidden] { display: none; }
.empresas-publicas-ayuda { margin: 20px 0 0; color: #957f7c; font-size: 8px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.boletin { padding: 70px 0; color: white; background: #153b30; }
.boletin-interior { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 8%; }
.boletin h2 { font-size: 42px; }
.boletin p:not(.sobrelinea) { margin: 12px 0 0; color: #b9ccc5; font-size: 13px; }
.boletin-suscripcion { display: flex; justify-content: flex-end; }
.boletin-suscripcion button { min-width: 220px; min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; color: white; background: transparent; border: 1px solid rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.boletin-suscripcion button:hover, .boletin-suscripcion button:focus-visible { color: #123e31; background: white; outline: 0; }
.boletin-suscripcion button span { font-size: 15px; }
.pie-pagina { padding: 70px 0 25px; color: #d1c7c0; background: #1d1816; }
.grilla-pie { display: grid; grid-template-columns: minmax(250px, 2fr); grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 55px; }
.marca-pie { color: white; }
.grilla-pie p { margin-top: 23px; font-size: 12px; line-height: 1.8; }
.texto-pie-configurado { white-space: pre-line; }
.grilla-pie h3 { margin: 0 0 21px; color: white; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.grilla-pie > div:not(:first-child) { display: flex; flex-direction: column; gap: 13px; font-size: 11px; }
.grilla-pie button { width: max-content; padding: 0; color: inherit; background: transparent; border: 0; font-size: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.grilla-pie a { transition: color .2s; }
.grilla-pie button:hover, .grilla-pie a:hover { color: white; }
.grilla-pie .presencia-paises { min-width: 165px; }
.banderas-pie { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; }
.banderas-pie img { width: 48px; height: 32px; flex: 0 0 auto; display: block; object-fit: cover; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; box-shadow: 0 7px 18px rgba(0,0,0,.22); }
.legal { margin-top: 60px; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid #3c3532; color: #776e69; font-size: 9px; }
.modal-ayuda-publica { position: fixed; top: 50%; left: 50%; z-index: var(--z-modal); width: min(570px, calc(100% - 30px)); max-height: min(680px, calc(100vh - 40px)); padding: 52px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translate(-50%, -46%); background: var(--color-marfil); box-shadow: var(--sombra); text-align: center; transition: .25s; }
.modal-ayuda-publica.abierto { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.modal-ayuda-publica > button { position: absolute; top: 13px; right: 17px; color: var(--color-tinta); background: transparent; border: 0; font-size: 28px; cursor: pointer; }
.modal-ayuda-publica h2 { margin: 0 0 22px; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 46px); font-weight: 400; }
.modal-ayuda-publica > div { color: #6f635d; font-size: 13px; line-height: 1.85; text-align: left; white-space: pre-line; }
.fondo-ayuda-publica { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); visibility: hidden; opacity: 0; background: rgba(24,15,12,.58); backdrop-filter: blur(3px); transition: .25s; }
.fondo-ayuda-publica.activo { visibility: visible; opacity: 1; }

.boton-whatsapp { position: fixed; right: 25px; bottom: 25px; z-index: var(--z-flotante); height: 54px; padding: 0 18px 0 9px; display: flex; align-items: center; gap: 10px; color: white; background: #1f9d61; border: 0; border-radius: 28px; box-shadow: 0 10px 30px rgba(19, 90, 58, .28); cursor: pointer; }
.boton-whatsapp span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: white; color: #1f9d61; font-size: 24px; }
.boton-whatsapp svg { width: 22px; height: 22px; fill: currentColor; }
.boton-whatsapp small { font-size: 11px; font-weight: 700; }
.boton-volver-arriba { position: fixed; right: 29px; bottom: 94px; z-index: var(--z-flotante); width: 46px; height: 46px; padding: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transform: translateY(12px); color: white; background: var(--color-vino-oscuro); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 10px 28px rgba(58, 13, 27, .26); cursor: pointer; transition: opacity .24s ease, transform .24s ease, visibility .24s ease, background-color .2s ease; }
.boton-volver-arriba.visible { visibility: visible; opacity: 1; transform: none; }
.boton-volver-arriba:hover { background: var(--color-vino); transform: translateY(-2px); }
.boton-volver-arriba:focus-visible { outline: 3px solid rgba(201, 156, 83, .5); outline-offset: 3px; }
.boton-volver-arriba svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel-whatsapp { position: fixed; right: 25px; bottom: 90px; z-index: var(--z-menu); width: min(350px, calc(100% - 30px)); padding: 20px; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(12px); background: white; border-radius: 14px; box-shadow: var(--sombra); transition: .25s; }
.panel-whatsapp.abierto { visibility: visible; opacity: 1; transform: none; }
.cabecera-whatsapp { margin: -20px -20px 18px; padding: 20px; display: flex; justify-content: space-between; color: white; background: #176d48; border-radius: 14px 14px 0 0; }
.cabecera-whatsapp div, .panel-whatsapp a span { display: flex; flex-direction: column; }
.cabecera-whatsapp span { margin-top: 4px; color: #c6e4d5; font-size: 10px; }
.cabecera-whatsapp button, .panel-lateral header button, .cerrar-modal { color: inherit; background: transparent; border: 0; font-size: 27px; cursor: pointer; }
.panel-whatsapp > p { margin: 0 0 13px; color: #766b65; font-size: 11px; }
.panel-whatsapp > a { padding: 12px 2px; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 10px; border-top: 1px solid #eee8e3; }
.panel-whatsapp > a b { width: 38px; min-width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: white; background: var(--color-vino); border-radius: 50%; font-size: 11px; }
.panel-whatsapp > a b img, .foto-vendedor-whatsapp { display: block; width: 38px; min-width: 38px; max-width: 38px; height: 38px; min-height: 38px; max-height: 38px; object-fit: cover; object-position: center; border-radius: 50%; }
.panel-whatsapp > a small { margin-top: 3px; color: #91867f; font-size: 9px; }
.whatsapp-sin-vendedores { padding: 16px 2px 4px; display: flex; flex-direction: column; gap: 5px; color: #766b65; border-top: 1px solid #eee8e3; font-size: 10px; }
.whatsapp-sin-vendedores span { color: #91867f; font-size: 9px; }
.fondo-panel, .fondo-modal { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); visibility: hidden; opacity: 0; background: rgba(24,15,12,.55); backdrop-filter: blur(3px); transition: .25s; }
.fondo-panel.activo, .fondo-modal.activo { visibility: visible; opacity: 1; }
.panel-lateral { position: fixed; z-index: var(--z-modal); top: 0; right: 0; width: min(440px, 100%); height: 100vh; display: flex; flex-direction: column; background: var(--color-marfil); transform: translateX(100%); transition: transform .32s ease; }
.panel-lateral.abierto { transform: none; }
.panel-lateral header { padding: 30px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-linea); }
.panel-lateral header h2 { margin: 0; font-family: Georgia, serif; font-weight: 400; }
.panel-lateral header h2 span { color: var(--color-oro); font-size: 14px; }
.contenido-panel { flex: 1; padding: 25px 30px; overflow-y: auto; }
.estado-vacio { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.estado-vacio b { font-size: 46px; font-weight: 400; }
.estado-vacio h3 { margin: 18px 0 5px; font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.estado-vacio p { max-width: 270px; color: #8a7f79; font-size: 12px; line-height: 1.6; }
.item-panel { padding: 15px 0; display: grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--color-linea); }
.miniatura-producto { width: 68px; aspect-ratio: .82; background-image: url('/images/perfumes-catalogo.png?v=0.0.19-SNAPSHOT'); background-size: 200% 200%; }
.item-panel h4 { margin: 0 0 5px; font-family: Georgia, serif; font-size: 16px; font-weight: 400; }
.item-panel p { margin: 0; font-size: 11px; }
.item-panel button { background: transparent; border: 0; cursor: pointer; }
.resumen-carrito { padding: 22px 30px 30px; border-top: 1px solid var(--color-linea); }
.resumen-carrito div { margin-bottom: 18px; display: flex; justify-content: space-between; }
.resumen-carrito .boton { width: 100%; }
.modal { position: fixed; top: 50%; left: 50%; z-index: var(--z-modal); width: min(500px, calc(100% - 30px)); padding: 48px; visibility: hidden; opacity: 0; transform: translate(-50%, -46%); background: var(--color-marfil); box-shadow: var(--sombra); text-align: center; transition: .25s; }
.modal.abierto { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.cerrar-modal { position: absolute; top: 13px; right: 17px; }
.modal h2 { margin: 0; font-family: Georgia, serif; font-size: 38px; font-weight: 400; }
.modal > p:not(.sobrelinea) { color: #766a64; font-size: 13px; line-height: 1.7; }
.modal form { margin-top: 25px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.modal label { font-size: 11px; font-weight: 700; }
.modal input, .modal textarea { width: 100%; padding: 14px; background: white; border: 1px solid var(--color-linea); outline-color: var(--color-vino); resize: vertical; }
.modal > small { margin-top: 17px; display: block; color: #9b8e87; font-size: 9px; }
.modal-cliente{width:min(610px,calc(100% - 30px));max-height:calc(100vh - 34px);overflow-y:auto}.pestanas-cliente{margin:22px 0 5px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--color-linea)}.pestanas-cliente button{padding:12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#8d817a;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.pestanas-cliente button.activo{color:var(--color-vino);border-bottom-color:var(--color-vino)}.campos-cliente{display:grid;grid-template-columns:1fr 1fr;gap:12px}.campos-cliente label{display:flex;flex-direction:column;gap:6px}.campos-cliente .campo-ancho{grid-column:1/-1}.modal-cliente form .boton{width:100%}.error-cliente{margin:0!important;padding:10px;color:#8c2036!important;background:#f9e9eb;font-size:10px!important;text-align:left}.separador-google{margin:20px 0;display:flex;align-items:center;gap:12px;color:#a0958f;font-size:10px}.separador-google::before,.separador-google::after{height:1px;flex:1;content:"";background:var(--color-linea)}.boton-google{min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--color-linea);background:white;font-size:11px;font-weight:700}.boton-google b{color:#4285f4;font-size:18px}.spinner-cliente{display:none;width:16px;height:16px;border:2px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:girar-cliente .7s linear infinite}.boton[aria-busy="true"] span{display:none}.boton[aria-busy="true"] .spinner-cliente{display:block}@keyframes girar-cliente{to{transform:rotate(360deg)}}
.estrellas-calificar { margin: 24px 0; display: flex; justify-content: center; }
.estrellas-calificar button { color: #d8cec2; background: transparent; border: 0; font-size: 40px; cursor: pointer; }.estrellas-calificar button.activa{color:#b99056}
.modal-calificar > .boton { width: 100%; margin-top: 12px; }
.notificacion { position: fixed; z-index: var(--z-alerta); right: 25px; bottom: 92px; max-width: 330px; padding: 14px 18px; visibility: hidden; opacity: 0; transform: translateY(10px); color: white; background: var(--color-tinta); box-shadow: var(--sombra); font-size: 12px; transition: .25s; }
.notificacion.visible { visibility: visible; opacity: 1; transform: none; }

@media (max-width: 1050px) {
    .sobre-nosotros-interior { grid-template-columns: 1fr; }
    .sobre-nosotros-visual { width: min(100%, 650px); margin-inline: auto; }
}

@media (max-width: 900px) {
    .navegacion { grid-template-columns: 50px 1fr 190px; }
    .boton-menu { display: block; }
    .enlaces-navegacion { position: absolute; top: 112px; left: 0; width: 100%; padding: 25px; display: none; flex-direction: column; align-items: center; background: var(--color-marfil); box-shadow: var(--sombra); }
    .enlaces-navegacion.abierto { display: flex; }
    .acciones-navegacion .boton-icono:first-child { display: block; }
    .grilla-productos { grid-template-columns: repeat(2, 1fr); row-gap: 45px; }
    .grilla-categorias { grid-template-columns: repeat(2, 1fr); }
    .cuadricula-beneficios { grid-template-columns: repeat(2, 1fr); }
    .cuadricula-beneficios > div { min-height: 85px; border-bottom: 1px solid var(--color-linea); }
    .empresas-publicas-cabecera { grid-template-columns: 1fr; gap: 20px; }
    .empresa-publica { flex-basis: calc((100% - 18px) / 2); }
    .universo-interior { grid-template-columns: 1fr; }
    .universo-imagen { min-height: 380px; }
    .universo-texto { padding: 25px 0; }
    .lista-marcas { grid-template-columns: repeat(3, 1fr); gap: 35px; }
    .sobre-nosotros-interior { grid-template-columns: 1fr; }
    .sobre-nosotros-visual { max-width: 650px; margin-inline: auto; }
}

@media (max-width: 600px) {
    .contenedor { width: min(100% - 28px, 1180px); }
    .anuncio { gap: 8px; font-size: 8px; }
    .anuncio span, .anuncio span + * { display: none; }
    .navegacion { height: 68px; grid-template-columns: 36px minmax(92px, 1fr) 158px; }
    .marca-principal strong { font-size: 21px; }
    .marca-principal small { font-size: 6px; }
    .boton-icono { width: 29px; }
    .selector-idioma { margin-left: 1px; padding-left: 4px; gap: 1px; }
    .selector-idioma button { width: 22px; height: 25px; font-size: 15px; }
    .selector-idioma img { width: 18px; height: 12px; }
    .busqueda-global-interior { height: 68px; grid-template-columns: 32px 1fr 35px; }
    .busqueda-global input { padding: 0 5px; font-size: 18px; }
    .resultado-producto { grid-template-columns: 52px 1fr auto 20px; gap: 10px; }
    .resultado-producto .miniatura-producto { width: 50px; height: 60px; }
    .resultado-producto > b { font-size: 10px; }
    .hero { height: 640px; min-height: 0; }
    .slide-imagen { background-position: 63% center; }
    .slide-imagen::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(249,241,226,.96), rgba(249,241,226,.08) 65%); }
    .contenido-slide { justify-content: flex-end; padding-bottom: 95px; }
    .contenido-slide h1, .contenido-slide h2 { font-size: 48px; }
    .contenido-slide > p:not(.sobrelinea) { margin: 18px 0 22px; font-size: 13px; }
    .slide-editorial .contenido-slide { justify-content: center; }
    .slide-gradiente::after { width: 260px; height: 380px; right: -40px; }
    .cuadricula-beneficios { grid-template-columns: 1fr 1fr; }
    .cuadricula-beneficios > div { padding: 15px 5px; flex-direction: column; gap: 4px; text-align: center; }
    .cuadricula-beneficios b { font-size: 20px; }
    .cuadricula-beneficios strong { font-size: 10px; }
    .seccion-productos { padding-block: 65px; }
    .cabecera-seccion h2 { font-size: 38px; }
    .cabecera-seccion > a { font-size: 9px; }
    .grilla-productos { margin-right: -14px; padding-right: 14px; grid-template-columns: repeat(4, 74vw); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .tarjeta-producto { scroll-snap-align: start; }
    .universo { padding: 25px 0 55px; }
    .universo-imagen { min-height: 320px; }
    .universo h2 { font-size: 43px; }
    .seccion-categorias { padding: 65px 0; }
    .grilla-categorias { grid-template-columns: 1fr 1fr; gap: 8px; }
    .categoria { min-height: 280px; padding: 20px; }
    .categoria h3 { font-size: 21px; }
    .lista-marcas { grid-template-columns: repeat(2, 1fr); }
    .sobre-nosotros { padding: 70px 0; }
    .sobre-nosotros-contenido h2 { font-size: 42px; }
    .sobre-nosotros-interior { gap: 48px; }
    .sobre-nosotros-visual { width: 100%; padding: 0; }
    .imagen-sobre-nosotros { min-height: 0; aspect-ratio: 4 / 5; }
    .sobre-nosotros-visual blockquote { position: relative; z-index: 2; right: auto; bottom: auto; width: calc(100% - 24px); margin: -42px auto 0; padding: 24px 22px; font-size: 20px; }
    .datos-feratso { position: relative; z-index: 3; bottom: auto; left: auto; width: calc(100% - 24px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .datos-feratso div { min-width: 0; padding: 15px 12px; border-right: 1px solid rgba(255,255,255,.16); }
    .datos-feratso div:last-child { border-right: 0; }
    .datos-feratso strong { font-size: 17px; }
    .datos-feratso span { overflow-wrap: anywhere; font-size: 7px; line-height: 1.35; }
    .empresas-publicas { padding: 68px 0 75px; }
    .empresas-publicas-cabecera { margin-bottom: 34px; }
    .empresas-publicas-cabecera h2 { font-size: 42px; }
    .carrusel-empresas-publicas { margin-inline: -14px; padding-inline: 43px; }
    .empresa-publica { flex-basis: 78%; }
    .control-empresa { width: 36px; height: 36px; }
    .boletin-interior { grid-template-columns: 1fr; gap: 25px; }
    .boletin-suscripcion { justify-content: flex-start; }
    .grilla-pie { grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-auto-columns: auto; }
    .grilla-pie > div:first-child { grid-column: 1 / -1; }
    .grilla-pie .presencia-paises { grid-column: 1 / -1; min-width: 0; }
    .legal { gap: 10px; flex-direction: column; }
    .modal-ayuda-publica { padding: 45px 27px 35px; }
    .boton-whatsapp { right: 16px; bottom: 16px; width: 54px; padding: 8px; }
    .boton-whatsapp small { display: none; }
    .boton-volver-arriba { right: 20px; bottom: 82px; width: 46px; height: 46px; }
    .panel-whatsapp { right: 15px; bottom: 80px; }
    .modal { padding: 38px 24px; }
    .campos-cliente{grid-template-columns:1fr}.campos-cliente .campo-ancho{grid-column:auto}
}