/* =========================================================================
   PERFUMERÍA, PERFUMES ORIGINALES (assets/php/perfumeria_originales.php, assets/js/perfumeria-originales.js)
   El índice "Inspirados en" (originales_perfumes.php), la página de cada original (original_perfume.php), el bloque de
   la página de inicio, "Parecidos a" del buscador, los chips "le recuerda a" de la ficha y el ahorro frente al original
   (ficha, popover "Inspirado en" de las tarjetas y página del original). Lo carga head.php sólo en los sitios con
   Perfumería y alguna de las dos funciones prendida.
   Se apoya en lo que ya existe: los tokens --fp-* y los acordes de la ficha (ficha-premium.css), el vacío de Favoritos y
   las secciones de la ventana del buscador (buscador.css). Las fotos de los originales van siempre sobre blanco, como el
   círculo y el recuadro "Inspirado en": vienen de Fragrantica con fondo blanco. En los sitios oscuros, la paleta --oscuro-*.
   ========================================================================= */

/* ---------- El índice ---------- */
.originales-perfumeria-cabecera{ max-width:680px; margin:0 auto 2.2rem; text-align:center; }
.originales-perfumeria-cabecera p{ opacity:.85; }
.originales-perfumeria-buscar{ max-width:560px; margin:0 auto; }
.originales-perfumeria-buscar .form-control{ border-radius:999px 0 0 999px !important; padding-left:1.4rem; }
.originales-perfumeria-buscar > label{ padding-left:1.4rem; }
.originales-perfumeria-buscar .btn{ border-radius:0 999px 999px 0 !important; padding-left:1.3rem; padding-right:1.4rem; }
.originales-perfumeria-contenedor{ min-height:240px; transition:opacity .2s ease; }
.originales-perfumeria-contenedor.cargando{ opacity:.45; }
.originales-perfumeria-cantidad{ margin-bottom:1rem; font-size:13px; font-weight:600; letter-spacing:.04em; opacity:.7; }

.original-perfumeria-tarjeta{
	display:flex; flex-direction:column; height:100%; border:1px solid var(--fp-border); border-radius:var(--fp-radius); background:#fff;
	color:inherit; text-decoration:none; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.original-perfumeria-tarjeta:hover,
.original-perfumeria-tarjeta:focus-visible{ border-color:var(--color-primario); box-shadow:var(--fp-shadow-hover); transform:translateY(-2px); color:inherit; }
.original-perfumeria-tarjeta-foto{
	display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; margin:10px 10px 0; border-radius:12px; background:#fff;
	overflow:hidden; color:var(--fp-muted); font-size:2.2rem;
}
.original-perfumeria-tarjeta-foto img{ width:100%; height:100% !important; padding:8%; object-fit:contain; }
.original-perfumeria-tarjeta-texto{ display:flex; flex-direction:column; gap:2px; padding:.75rem 1rem 1rem; min-width:0; }
.original-perfumeria-tarjeta-casa{ font-size:.56rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-primario); }
.original-perfumeria-tarjeta-nombre{ font-size:.8rem; font-weight:600; line-height:1.25; color:var(--fp-ink); overflow-wrap:anywhere; }
.original-perfumeria-tarjeta-cant{ margin-top:2px; font-size:.64rem; color:var(--fp-muted); }

/* ---------- La página de un original ---------- */
.original-perfumeria-cabecera{ margin-bottom:1rem; }
.original-perfumeria-foto{
	display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; max-width:360px; margin:0 auto; border:1px solid var(--fp-border);
	border-radius:var(--fp-radius); background:#fff; box-shadow:var(--fp-shadow); overflow:hidden; color:var(--fp-muted); font-size:4rem;
}
.original-perfumeria-foto img{ width:100%; height:100%; padding:9%; object-fit:contain; }
.original-perfumeria-casa{ display:block; margin-bottom:.35rem; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primario); }
.original-perfumeria-bajada{ margin-bottom:1rem; font-size:1.05rem; opacity:.85; }
.original-perfumeria-ahorro{
	display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; padding:.5rem 1rem; border-radius:999px; background:var(--fp-green-bg);
	color:var(--fp-green); font-size:.92rem; font-weight:600; line-height:1.3;
}
.original-perfumeria-ahorro i{ font-size:1.1rem; }
.original-perfumeria-acordes{ max-width:520px; }
.original-perfumeria-seccion{ margin-top:3.2rem; }
.original-perfumeria-seccion-bajada{ margin-bottom:1.6rem; opacity:.8; }
.original-perfumeria-preguntas{ max-width:860px; }
.original-perfumeria-preguntas .card-body a{ font-weight:600; }
.original-perfumeria-volver{ margin-top:2.6rem; text-align:center; }

/* ---------- El bloque de la página de inicio (assets/ajax/bloques/originales_perfumes.php) ---------- */
.bloque-originales-perfumeria{ padding:30px 34px; border:1px solid rgba(127,127,127,.2); border-radius:20px; background:rgba(127,127,127,.05); }
.bloque-originales-perfumeria-arriba{ display:flex; align-items:center; gap:20px 32px; }
.bloque-originales-perfumeria-texto{ flex:1 1 auto; min-width:0; }
.bloque-originales-perfumeria-texto h2{ margin-bottom:.35rem; }
.bloque-originales-perfumeria-texto p{ margin-bottom:0; opacity:.85; }
.bloque-originales-perfumeria-buscar{ flex:0 1 440px; }
.bloque-originales-perfumeria-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.bloque-originales-perfumeria-chip{
	display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:3px 13px 3px 3px; border:1px solid rgba(127,127,127,.22);
	border-radius:999px; color:inherit; font-size:.68rem; font-weight:600; line-height:1.2; text-decoration:none;
	transition:border-color .18s ease, transform .18s ease;
}
.bloque-originales-perfumeria-chip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bloque-originales-perfumeria-chip:hover,
.bloque-originales-perfumeria-chip:focus-visible{ border-color:var(--color-primario); transform:translateY(-1px); color:inherit; }
.bloque-originales-perfumeria-chip img{ flex:0 0 auto; width:28px; height:28px !important; border-radius:50%; background:#fff; object-fit:contain; padding:2px; }
.bloque-originales-perfumeria-chip.bloque-originales-perfumeria-todos{ padding:3px 10px 3px 14px; min-height:36px; color:var(--color-primario); }

/* ---------- La ficha: chips "A la gente le recuerda a" y el ahorro en el recuadro "Inspirado en" ---------- */
.fp-perfumeria-recuerda{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:.2rem 0 .7rem; }
.fp-perfumeria-recuerda-label{ margin-right:2px; font-size:.56rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fp-muted); }
.fp-perfumeria-recuerda-chip{
	display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 11px 3px 3px; border:1px solid var(--fp-border); border-radius:999px;
	background:var(--fp-soft); color:var(--fp-ink); font-size:.66rem; font-weight:600; line-height:1.2; text-decoration:none; transition:border-color .18s ease;
}
.fp-perfumeria-recuerda-chip:hover,
.fp-perfumeria-recuerda-chip:focus-visible{ border-color:var(--color-primario); color:var(--fp-ink); }
.fp-perfumeria-recuerda-chip img{ flex:0 0 auto; width:24px; height:24px !important; border-radius:50%; background:#fff; object-fit:contain; padding:2px; }
.fp-perfumeria-recuerda-chip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.fp-perfumeria-imita-ahorro{ font-size:.66rem; font-weight:600; line-height:1.3; color:var(--fp-green); }

/* ---------- El popover "Inspirado en" de las tarjetas (abrirPopoverImitaPerfumeria en assets/js/productos.js) ---------- */
.pop-imita-perfumeria-ahorro{ margin-top:2px; font-size:12px; font-weight:600; line-height:1.3; color:var(--fp-green); }
.pop-imita-perfumeria-ahorro[hidden]{ display:none; }

/* ---------- El buscador: "Parecidos a" (assets/ajax/secciones/buscar/_parecidos_buscador.php) ---------- */
/* En la ventana del buscador son las secciones y la lista del panel (buscador.css); acá sólo la foto del original */
.parecidos-buscador{ margin-bottom:1.1rem; }
.parecidos-buscador .buscador-seccion-titulo{ display:inline-flex; align-items:center; gap:8px; }
.parecidos-buscador-original{ width:26px; height:26px; border-radius:50%; background:#fff; object-fit:contain; padding:2px; }
.parecidos-buscador .buscador-lista-avatar{ background:#fff; }
.parecidos-buscador .buscador-lista-avatar img{ object-fit:contain; }

/* En la página de resultados del buscador: el recuadro "Inspirado en" de la ficha, con los frascos de la tienda al costado */
.parecidos-pagina-buscador{
	display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%; margin:0 0 1.6rem; padding:.5rem 1rem .5rem .5rem;
	border:1px solid var(--fp-border); border-radius:var(--fp-radius-sm); background:var(--fp-soft); color:inherit; text-decoration:none;
	transition:border-color .18s ease;
}
.parecidos-pagina-buscador:hover,
.parecidos-pagina-buscador:focus-visible{ border-color:var(--color-primario); color:inherit; }
.parecidos-pagina-buscador-foto{ flex:0 0 auto; width:3.6rem; height:3.6rem; border-radius:10px; background:#fff; overflow:hidden; }
.parecidos-pagina-buscador-foto img{ width:100%; height:100% !important; padding:.2rem; object-fit:contain; }
.parecidos-pagina-buscador-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.parecidos-pagina-buscador-label{ font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-primario); }
.parecidos-pagina-buscador-nombre{ font-size:1rem; font-weight:600; line-height:1.25; color:var(--fp-ink); }
.parecidos-pagina-buscador-detalle{ font-size:.78rem; color:var(--fp-muted); }
.parecidos-pagina-buscador-frascos{ display:flex; flex:0 0 auto; margin-left:6px; }
.parecidos-pagina-buscador-frascos img{
	width:2.4rem; height:2.4rem !important; margin-left:-.6rem; border:2px solid #fff; border-radius:50%; background:#fff; object-fit:contain;
	box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.parecidos-pagina-buscador-frascos img:first-child{ margin-left:0; }
.parecidos-pagina-buscador-ir{ flex:0 0 auto; color:var(--fp-muted); font-size:1.2rem; transition:transform .18s ease, color .18s ease; }
.parecidos-pagina-buscador:hover .parecidos-pagina-buscador-ir{ color:var(--color-primario); transform:translateX(3px); }

/* ---------- Celular ---------- */
@media (max-width:767.98px){
	.original-perfumeria-foto{ max-width:260px; }
	.original-perfumeria-cabecera h1.display-5{ font-size:1.35rem; line-height:1.3; }
	.original-perfumeria-ahorro{ border-radius:14px; }
	.original-perfumeria-seccion{ margin-top:2.4rem; }
	.bloque-originales-perfumeria{ padding:22px 18px; }
	.bloque-originales-perfumeria-arriba{ flex-direction:column; align-items:stretch; }
	.bloque-originales-perfumeria-buscar{ flex:1 1 auto; }
	/* En el celular, los seis primeros y "Ver todos" */
	.bloque-originales-perfumeria-chip:nth-child(n+7):not(.bloque-originales-perfumeria-todos){ display:none; }
	.original-perfumeria-tarjeta-texto{ padding:.6rem .75rem .8rem; }
	.original-perfumeria-tarjeta-nombre{ font-size:.74rem; }
	.parecidos-pagina-buscador-frascos{ display:none; }
}

/* ---------- Sitios oscuros (modo-oscuro.css: html.sitio-oscuro y la paleta --oscuro-*) ---------- */
html.sitio-oscuro .original-perfumeria-tarjeta{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); }
html.sitio-oscuro .original-perfumeria-tarjeta:hover,
html.sitio-oscuro .original-perfumeria-tarjeta:focus-visible{ border-color:var(--oscuro-acento); box-shadow:0 14px 34px -12px rgba(0,0,0,.8); }
html.sitio-oscuro .original-perfumeria-tarjeta-casa,
html.sitio-oscuro .original-perfumeria-casa,
html.sitio-oscuro .parecidos-pagina-buscador-label,
html.sitio-oscuro .bloque-originales-perfumeria-todos{ color:var(--oscuro-acento); }
html.sitio-oscuro .original-perfumeria-tarjeta-nombre,
html.sitio-oscuro .parecidos-pagina-buscador-nombre,
html.sitio-oscuro .originales-perfumeria-cabecera h1,
html.sitio-oscuro .original-perfumeria-cabecera h1,
html.sitio-oscuro .original-perfumeria-seccion h2,
html.sitio-oscuro .bloque-originales-perfumeria-texto h2{ color:var(--oscuro-texto); }
html.sitio-oscuro .original-perfumeria-tarjeta-cant,
html.sitio-oscuro .parecidos-pagina-buscador-detalle,
html.sitio-oscuro .original-perfumeria-bajada,
html.sitio-oscuro .original-perfumeria-seccion-bajada,
html.sitio-oscuro .originales-perfumeria-cabecera p,
html.sitio-oscuro .bloque-originales-perfumeria-texto p{ color:var(--oscuro-texto-suave); opacity:1; }
html.sitio-oscuro .original-perfumeria-foto{ border-color:var(--oscuro-borde); box-shadow:0 18px 40px -18px rgba(0,0,0,.9); }
html.sitio-oscuro .original-perfumeria-ahorro,
html.sitio-oscuro .fp-perfumeria-imita-ahorro,
html.sitio-oscuro .pop-imita-perfumeria-ahorro{ color:#6fd39d; }
html.sitio-oscuro .original-perfumeria-ahorro{ background:rgba(46,180,110,.14); }
html.sitio-oscuro .bloque-originales-perfumeria{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); }
html.sitio-oscuro .bloque-originales-perfumeria-chip{ border-color:var(--oscuro-borde-acento); color:var(--oscuro-texto); }
html.sitio-oscuro .bloque-originales-perfumeria-chip:hover,
html.sitio-oscuro .bloque-originales-perfumeria-chip:focus-visible{ border-color:var(--oscuro-acento); color:var(--oscuro-texto); }
html.sitio-oscuro .fp-perfumeria-recuerda-label{ color:var(--oscuro-texto-suave); }
html.sitio-oscuro .fp-perfumeria-recuerda-chip{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); color:var(--oscuro-texto); }
html.sitio-oscuro .fp-perfumeria-recuerda-chip:hover,
html.sitio-oscuro .fp-perfumeria-recuerda-chip:focus-visible{ border-color:var(--oscuro-acento); color:var(--oscuro-texto); }
html.sitio-oscuro .parecidos-pagina-buscador{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); }
html.sitio-oscuro .parecidos-pagina-buscador:hover{ border-color:var(--oscuro-acento); }
html.sitio-oscuro .parecidos-pagina-buscador-frascos img{ border-color:var(--oscuro-panel); }
html.sitio-oscuro .original-perfumeria-preguntas .card{ background:var(--oscuro-panel); }