/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1784219327
Updated: 2026-07-16 16:28:47

*/

/* Tokens del sitio (globales, para que var() resuelva en header y footer). */
:root {
	--color-primario:   #1a1a1d;
	--color-secundario: #c36170;
	--color-fondo-1:    #ffffff;
	--color-fondo-2:    #fdeeee;

	--fuente-titulos: 'Bodoni Moda', Georgia, serif;
	--fuente-texto:   'Roboto', system-ui, sans-serif;

	--ancho-body: 90vw;   /* móvil, tablet y desktop */
}

/* Header (Turbo H&F): el plugin fuerza position:relative en #tahefobu-header
   (regla ID) pero le setea top = alto del admin bar (--ta-sticky-top), lo que
   empuja el header hacia abajo y deja un hueco arriba (visible logueado).
   Se fuerza top:0 (la especificidad ID vence a .ta-sticky-header). */
#tahefobu-header { top: 0; }

/* Padding vertical del contenido principal en páginas WooCommerce
   (tienda, categorías, single, carrito, checkout) y en resultados de búsqueda.
   No afecta al header ni al footer (están fuera de estos contenedores). */
.cosmetica-catalog { padding-block: 70px; }
body.search main#content.site-main { padding-block: 70px; }

/* Notices de WooCommerce (info · success · error) en todo el sitio con la marca
   del sitio (por defecto son azules/verde/rojo). Prefijo `body` para vencer las
   reglas de woocommerce.css sin !important. */
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error {
	border-top-color: var(--color-secundario);
}
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before {
	color: var(--color-secundario);
}

/* Título de página (hello `.page-header .entry-title`) alineado a la izquierda y
   con su borde izquierdo en var(--ancho-body), coincidiendo con el logo del
   header, en todas las páginas con plantilla de hello (normales, mi cuenta,
   carrito, checkout, legales, etc.). Hello lo capa a 1140px centrado → queda
   corrido a la derecha. El calc centra un box de var(--ancho-body) respecto del
   centro del contenedor (que está centrado), así el borde izquierdo cae en 5vw
   esté o no capado el .site-main. Especificidad (0,2,1) para vencer a hello. */
body .page-header .entry-title {
	width: var(--ancho-body);
	max-width: var(--ancho-body);
	margin-left: calc(50% - var(--ancho-body) / 2);
	margin-right: 0;
	padding-inline: 0;
	text-align: left;
}
/* 70px arriba del título (el título está fuera del contenido, pegado al header). */
body .page-header {
	padding-top: 70px;
}

/* Título de sección (h2): alineado a la izquierda con una línea corta debajo.
   Clase reutilizable — no se aplica a `h2` a secas porque los títulos de las
   cards de producto y de los resúmenes también son h2 y llevarían la línea. */
.cosmetica-h2 {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	color: var(--color-primario);
	text-align: left;
	margin: 0 0 32px;
}
.cosmetica-h2::after {
	content: "";
	display: block;
	width: 70px;
	margin-top: 16px;
	border-bottom: 3px solid var(--color-secundario);
}

/* =========================================================================
 * Botón global del sitio — mismo look que el botón del hero
 * (`.bdt-prime-slider-skin-general .bdt-slide-btn`, Prime Slider):
 * pastilla transparente, borde 2px secundario, radius 80px, Roboto 400,
 * sin mayúsculas, y un círculo secundario con flecha pegado al borde derecho
 * (de ahí el padding derecho grande). En hover el botón se rellena de
 * secundario, el texto queda primario, el círculo se invierte a primario y la
 * flecha pasa a secundario. Transición .3s, igual que el hero.
 *
 * El hero arma la flecha con un `<span class="bdt-slide-btn-icon">` + SVG.
 * Acá se reproduce con ::after (círculo) y ::before (chevron con bordes), así
 * ningún botón necesita cambiar su HTML ni se usa ninguna imagen.
 *
 * SIN excepciones: todos los botones de TEXTO del sitio entran acá. Los
 * botones de ICONO (card, flechas del carrusel, X de eliminar, lupa, cierres
 * de modal) no están en estos selectores y quedan intactos.
 * ====================================================================== */
.cosmetica-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce .shipping-calculator-button,
.woocommerce-Button,
.woocommerce-button,
button.single_add_to_cart_button,
#place_order,
.elementor-button,
.cosmetica-co__btn,
.cosmetica-search-form__submit {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	padding: 8px 55px 8px 20px;
	background: transparent;
	color: var(--color-primario);
	border: 2px solid var(--color-secundario);
	border-radius: 80px;
	font-family: var(--fuente-texto);
	font-weight: 400;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.6;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}

/* Círculo de la flecha (equivale a `.bdt-slide-btn-icon` del hero). */
.cosmetica-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce a.button.alt::after,
.woocommerce button.button.alt::after,
.woocommerce .checkout-button::after,
.woocommerce .shipping-calculator-button::after,
.woocommerce-Button::after,
.woocommerce-button::after,
button.single_add_to_cart_button::after,
#place_order::after,
.elementor-button::after,
.cosmetica-co__btn::after,
.cosmetica-search-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1px;
	width: 31px;
	height: 31px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--color-secundario);
	transition: background-color .3s;
	pointer-events: none;
}
/* Flecha dentro del círculo (chevron con bordes: sin imagen ni SVG). */
.cosmetica-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce a.button.alt::before,
.woocommerce button.button.alt::before,
.woocommerce .checkout-button::before,
.woocommerce .shipping-calculator-button::before,
.woocommerce-Button::before,
.woocommerce-button::before,
button.single_add_to_cart_button::before,
#place_order::before,
.elementor-button::before,
.cosmetica-co__btn::before,
.cosmetica-search-form__submit::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	z-index: 1;
	width: 6px;
	height: 6px;
	transform: translateY(-50%) rotate(45deg);
	border-top: 2px solid var(--color-primario);
	border-right: 2px solid var(--color-primario);
	transition: border-color .3s;
	pointer-events: none;
}

.cosmetica-btn:hover,
.cosmetica-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover,
.woocommerce .shipping-calculator-button:hover,
.woocommerce-Button:hover,
.woocommerce-button:hover,
button.single_add_to_cart_button:hover,
#place_order:hover,
.elementor-button:hover,
.cosmetica-co__btn:hover,
.cosmetica-search-form__submit:hover {
	background: var(--color-secundario);
	color: var(--color-primario);
	text-decoration: none;
}

/* Botones de widget Button de Elementor.
   Elementor genera `.elementor-widget-button .elementor-button{background:var(--e-global-color-accent)}`
   en el CSS de la página (0,2,0), que pisa el fondo transparente del botón del
   sitio (`.elementor-button`, 0,1,0) y lo deja relleno rosa. Se neutraliza con
   0,2,1 para que use la misma estética (outline + flecha) que el resto. */
/* `color` va acá y no en el grupo global porque `frontend.min.css` de Elementor
   trae `.elementor-button{color:#fff}` con la MISMA especificidad (0,1,0) que la
   del grupo global: quién gana depende solo del orden de carga (style.css va
   después, así que normalmente gana), y basta con que un caché o un optimizador
   reordene/concatene el CSS para que el texto salga blanco. Con (0,2,1) el color
   primario gana por especificidad, sin depender del orden. */
body .elementor-widget-button .elementor-button {
	background: transparent;
	color: var(--color-primario);
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus {
	background: var(--color-secundario);
	color: var(--color-primario);
}
.cosmetica-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce a.button.alt:hover::after,
.woocommerce button.button.alt:hover::after,
.woocommerce .checkout-button:hover::after,
.woocommerce .shipping-calculator-button:hover::after,
.woocommerce-Button:hover::after,
.woocommerce-button:hover::after,
button.single_add_to_cart_button:hover::after,
#place_order:hover::after,
.elementor-button:hover::after,
.cosmetica-co__btn:hover::after,
.cosmetica-search-form__submit:hover::after {
	background: var(--color-primario);
}
.cosmetica-btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce a.button.alt:hover::before,
.woocommerce button.button.alt:hover::before,
.woocommerce .checkout-button:hover::before,
.woocommerce .shipping-calculator-button:hover::before,
.woocommerce-Button:hover::before,
.woocommerce-button:hover::before,
button.single_add_to_cart_button:hover::before,
#place_order:hover::before,
.elementor-button:hover::before,
.cosmetica-co__btn:hover::before,
.cosmetica-search-form__submit:hover::before {
	border-color: var(--color-secundario);
}

/* El kit de Elementor (`.elementor-kit-N button, … input[type=submit], …
   .elementor-button`, 0,1,1) fija font-family/size/weight y además se carga
   después de style.css, así que le ganaba a los selectores de una sola clase.
   Se repite la clase para llegar a (0,2,0) y vencerlo sin !important. */
.cosmetica-btn.cosmetica-btn,
.cosmetica-co__btn.cosmetica-co__btn,
.cosmetica-search-form__submit.cosmetica-search-form__submit,
.woocommerce-Button.woocommerce-Button,
.woocommerce-button.woocommerce-button,
button.single_add_to_cart_button.single_add_to_cart_button,
.elementor-button.elementor-button {
	font-family: var(--fuente-texto);
	font-weight: 400;
	font-size: clamp(14px, 1vw, 16px);
}

/* `<input>` no admite ::before/::after, así que no puede llevar el círculo:
   se le da padding simétrico para que no quede el hueco de la flecha. */
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	padding-right: 20px;
}

/* Desktop: el hero agranda padding y círculo a partir de 768px. */
@media (min-width: 768px) {
	.cosmetica-btn,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce a.button.alt,
	.woocommerce button.button.alt,
	.woocommerce input.button.alt,
	.woocommerce #respond input#submit,
	.woocommerce .checkout-button,
	.woocommerce .shipping-calculator-button,
	.woocommerce-Button,
	.woocommerce-button,
	button.single_add_to_cart_button,
	#place_order,
	.elementor-button,
	.cosmetica-co__btn,
	.cosmetica-search-form__submit {
		padding: 12px 75px 12px 30px;
	}
	.woocommerce input.button,
	.woocommerce input.button.alt,
	.woocommerce #respond input#submit {
		padding-right: 30px;
	}
	.cosmetica-btn::after,
	.woocommerce a.button::after,
	.woocommerce button.button::after,
	.woocommerce a.button.alt::after,
	.woocommerce button.button.alt::after,
	.woocommerce .checkout-button::after,
	.woocommerce .shipping-calculator-button::after,
	.woocommerce-Button::after,
	.woocommerce-button::after,
	button.single_add_to_cart_button::after,
	#place_order::after,
	.elementor-button::after,
	.cosmetica-co__btn::after,
	.cosmetica-search-form__submit::after {
		right: 4px;
		width: 37px;
		height: 37px;
	}
	.cosmetica-btn::before,
	.woocommerce a.button::before,
	.woocommerce button.button::before,
	.woocommerce a.button.alt::before,
	.woocommerce button.button.alt::before,
	.woocommerce .checkout-button::before,
	.woocommerce .shipping-calculator-button::before,
	.woocommerce-Button::before,
	.woocommerce-button::before,
	button.single_add_to_cart_button::before,
	#place_order::before,
	.elementor-button::before,
	.cosmetica-co__btn::before,
	.cosmetica-search-form__submit::before {
		right: 19px;
	}
}

/* =========================================================================
 * Submenú del menú del header (widget "Navigation Menu" de Turbo H&F).
 * El widget no expone estos controles, así que se resuelven por CSS.
 *
 * Markup real del plugin (prefijo `tahefobu-`):
 *   · Desktop  → `.tahefobu-nav-menu-container` > `ul.tahefobu-nav-menu`
 *                submenú: `ul.tahefobu-sub-menu` > `li` > `a.tahefobu-sub-menu-item`
 *   · Móvil    → `.tahefobu-mobile-nav-menu-container` > `ul.tahefobu-mobile-nav-menu`
 *                submenú: `ul.tahefobu-mobile-sub-menu` (el JS del plugin le
 *                cambia la clase `tahefobu-sub-menu` por `tahefobu-mobile-sub-menu`
 *                al inicializar) > `li` > `a.tahefobu-mobile-sub-menu-item`
 *
 * El widget está en modo `tahefobu-nav-menu-bp-tablet`: hasta 1024px se oculta
 * el menú desktop y se muestra el móvil (hamburguesa). Por eso el corte de los
 * media queries es 1024/1025 y no 1023/1024: es el punto donde el propio plugin
 * cambia de markup.
 *
 * Especificidad (0,3,0) con `.elementor-widget-tahefobu-navigation-menu` para
 * vencer a las reglas del plugin (0,2,0) sin !important.
 * ====================================================================== */

/* Flecha del ítem con submenú ("Tienda"), en desktop y en móvil.
 * El plugin la dibuja con Font Awesome (`content:"\f0d7"`), pero NO encola
 * Font Awesome y Elementor tampoco lo hace (solo la carga cuando algún widget
 * renderiza un icono FA, y acá los del header son SVG). Verificado: el glifo
 * mide igual en "Font Awesome 5 Free", Roboto y serif → ninguna fuente lo
 * tiene, se veía el cuadrito de glifo faltante. Además el plugin declara
 * `font-family:"Font Awesome 5 Free"` SOLO en el selector móvil; el de desktop
 * confía en la clase `.fas`, que viene del CSS de FA que no está.
 *
 * Se reemplaza por un chevron hecho con bordes — sin fuente, sin SVG y sin
 * imagen, igual que la flecha del botón global. `currentColor` para que siga
 * el color que el widget define en Elementor, incluido el de hover.
 *
 * Especificidad: las reglas del plugin son (0,2,0) en desktop y (0,3,1) en
 * móvil, y `navigation-menu-hf.css` carga DESPUÉS de style.css, así que un
 * empate lo perdería. Se sube por encima en los dos casos.
 * En móvil el `::after` del plugin ya usa `transform:translateY(-50%)` para
 * centrarse: hay que repetirlo antes del `rotate` o se descentra. */
.elementor-widget-tahefobu-navigation-menu .tahefobu-nav-menu .tahefobu-sub-icon::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.elementor-widget-tahefobu-navigation-menu .tahefobu-mobile-nav-menu .menu-item-has-children.menu-item-has-children > a::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* --- Desktop (menú desktop visible: > 1024px) --- */
@media (min-width: 1025px) {
	/* El plugin fija `width: 180px`; se pasa a ancho según contenido.
	   Sin padding propio: lo pone el plugin en `.tahefobu-nav-menu ul{padding:0}`
	   (0,1,1), que es como estaba antes.
	   El fondo del submenú lo pone el widget en el ÍTEM
	   (`.tahefobu-sub-menu-item{background-color:var(--e-global-color-fondo2cc)}`,
	   post-48.css), no en el `<ul>`; se le da también al contenedor para que el
	   panel quede lleno pase lo que pase con el ancho. En móvil no hace falta:
	   ahí el fondo lo lleva el `li` (`.tahefobu-mobile-nav-menu li`), por detrás. */
	.elementor-widget-tahefobu-navigation-menu .tahefobu-nav-menu .tahefobu-sub-menu {
		width: max-content;
		background-color: var(--color-fondo-2);
	}
	/* Sin `margin-bottom` en los `li`: es lo único nuestro que separaba un ítem
	   del siguiente y hacía que el primero (que solo tiene encima el borde del
	   panel) se viera más pegado que el resto. Sacándolo todos los ítems quedan
	   con el mismo espaciado que el primero, sin tocar el padding de ninguno. */
	.elementor-widget-tahefobu-navigation-menu .tahefobu-nav-menu .tahefobu-sub-menu > li {
		margin-bottom: 0;
	}
}

/* --- Tablet y móvil (menú hamburguesa: <= 1024px) --- */
@media (max-width: 1024px) {
	/* Panel desplegable (ul.tahefobu-mobile-nav-menu, position:absolute): que no
	   ocupe todo el ancho, se ajuste al contenido con tope de 80vw y se ancle al
	   lado derecho, debajo del header. La combinación de dos clases del widget
	   (0,3,0) vence a las reglas del plugin (0,2,0), que carga después de
	   style.css. `left:auto; right:0` fuerza el anclado derecho aunque el plugin
	   ponga left:0. `text-align:left` acá cascadea a todos los ítems del menú
	   principal (son inline-block y heredan la alineación). */
	.elementor-widget-tahefobu-navigation-menu.tahefobu-mobile-menu-item-align-center .tahefobu-mobile-nav-menu {
		width: auto;
		max-width: 80vw;
		left: auto !important;
		right: 0 !important;
		text-align: left;
	}
	/* Todos los ítems del menú principal (incluido el activo "Inicio" y
	   "Contacto") alineados a la izquierda. El plugin centra por herencia con
	   `.tahefobu-mobile-menu-item-align-center` (0,2,0); acá (0,4,0) gana. El
	   enlace es inline-block, pero se deja justify-content por si algún estado
	   lo vuelve flex. */
	.elementor-widget-tahefobu-navigation-menu.tahefobu-mobile-menu-item-align-center .tahefobu-mobile-nav-menu .tahefobu-mobile-menu-item {
		text-align: left;
		justify-content: flex-start;
	}
	/* Dentro del panel móvil el submenú es estático y ocuparía todo el ancho:
	   se le da ancho según contenido y se ancla a la izquierda. */
	.elementor-widget-tahefobu-navigation-menu .tahefobu-mobile-nav-menu .tahefobu-mobile-sub-menu {
		width: max-content;
		max-width: 100%;
		margin-right: auto;
		text-align: left;
	}
	.elementor-widget-tahefobu-navigation-menu .tahefobu-mobile-nav-menu .tahefobu-mobile-sub-menu > li {
		margin-bottom: 0;
		text-align: left;
	}
	/* Ítems del submenú: alineados a la izquierda y con sangría de 30px. El
	   padding-left lo fija Elementor por-widget (id + inline, 0,4,0), así que
	   acá `!important` es imprescindible para vencerlo. */
	.elementor-widget-tahefobu-navigation-menu .tahefobu-mobile-nav-menu .tahefobu-mobile-sub-menu-item {
		text-align: left;
		padding-left: 30px !important;
	}
}

/* =========================================================================
 * Headings en móvil (≤767px): reducción global del 15% sobre los tamaños
 * actuales del kit de Elementor (h1–h4) y del reset (h5/h6). Cada valor es el
 * actual × 0.85 (en clamp se escala cada componente, así baja igual el mínimo,
 * el preferido y el máximo).
 *
 * Se usa `body.elementor-kit-5 hN` (0,1,2) para superar al kit
 * (`.elementor-kit-5 hN`, 0,1,1 — que además carga después de style.css) y al
 * reset (`hN`, 0,0,1), SIN !important. Queda por debajo de los tamaños por
 * widget de Elementor (presets `.elementor-size-*` = 0,3,0; tamaño custom por
 * elemento = 0,4,0), así los headings con tamaño propio conservan el suyo.
 * (Un `hN` a secas no funcionaría: el kit lo supera y no reduciría nada.)
 *
 * Actuales → reducidos:
 *   h1 clamp(2.5rem,5vw,4rem)   → clamp(2.125rem,4.25vw,3.4rem)
 *   h2 clamp(2rem,4vw,3rem)     → clamp(1.7rem,3.4vw,2.55rem)
 *   h3 clamp(1.5rem,3vw,2rem)   → clamp(1.275rem,2.55vw,1.7rem)
 *   h4 1.25rem                  → 1.0625rem
 *   h5 1.25rem (reset)          → 1.0625rem
 *   h6 1rem (reset)             → 0.85rem
 * ====================================================================== */
@media (max-width: 767px) {
	body.elementor-kit-5 h1 { font-size: clamp(2.125rem, 4.25vw, 3.4rem); }
	body.elementor-kit-5 h2 { font-size: clamp(1.7rem, 3.4vw, 2.55rem); }
	body.elementor-kit-5 h3 { font-size: clamp(1.275rem, 2.55vw, 1.7rem); }
	body.elementor-kit-5 h4 { font-size: 1.0625rem; }
	body.elementor-kit-5 h5 { font-size: 1.0625rem; }
	body.elementor-kit-5 h6 { font-size: 0.85rem; }
}

/* =========================================================================
 * Footer (plantilla de Elementor, post 49) SOLO en tablet (768–1024px).
 * El contenedor `c965dcc` apila en columna sus tres hijos (logo, contacto,
 * categorías). Se pasa su `.e-con-inner` a fila con wrap para dejar:
 *   Fila 1 → logo (55141ae) + contacto (5aac874), 50% / 50%
 *   Fila 2 → categorías (bf3eb0d), 100%, debajo.
 *
 * Los IDs de contenedor son la única referencia estable: Elementor no expone
 * clases propias en estos `e-con`. El contenedor tiene gap de 20px, por eso el
 * ancho de logo/contacto es `calc(50% - 10px)` (par + gap = 100% exacto; con
 * 50% pelado se rompería a tres filas). Se usa `--width` (que Elementor mapea a
 * `width:var(--width)`) y prefijo `body` (0,x,1) para vencer al CSS responsive
 * del propio Elementor sin !important. Desktop y móvil quedan intactos (fuera
 * del media query). No cambia contenido, iconos, colores ni tipografía.
 * ====================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-49 .elementor-element.elementor-element-c965dcc > .e-con-inner {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	body .elementor-49 .elementor-element.elementor-element-55141ae,
	body .elementor-49 .elementor-element.elementor-element-5aac874 {
		--width: calc(50% - 10px);
	}
	body .elementor-49 .elementor-element.elementor-element-bf3eb0d {
		--width: 100%;
	}
}

/* ======================================================================
 * Descripción larga del producto (post_content) en la ficha individual.
 * Entre el resumen y "También te puede interesar". Hereda el ancho de
 * .cosmetica-catalog (var(--ancho-body)). Márgenes 50px = mismo ritmo que
 * .cosmetica-related (margin-top:50px). Solo tipografía, color y espaciado.
 * ====================================================================== */
.cosmetica-descripcion-larga {
	margin: 50px 0;
	font-family: var(--fuente-texto);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-primario);
}
.cosmetica-descripcion-larga > :first-child { margin-top: 0; }
.cosmetica-descripcion-larga > :last-child { margin-bottom: 0; }

/* Línea separadora antes del título "Descripción del producto". Ancho completo
   del body (--ancho-body, heredado del contenedor de la ficha). Mismo border y
   color que .cosmetica-qv__sep (la línea de "Capacidad" del resumen). Es el
   primer hijo, por eso el selector empata al reset `> :first-child` (0,2,0) y
   gana por orden de aparición (va después). */
.cosmetica-descripcion-larga > .cosmetica-descripcion-larga__sep {
	margin: 60px 0;
	border-bottom: 1px solid var(--color-primario);
}

/* Fila de dos columnas: descripción (col 1) + cards de campos (col 2).
   Gap 32px = mismo split que el resumen (.cosmetica-qv). Móvil: una columna. */
.cosmetica-descripcion-larga__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.cosmetica-descripcion-larga__main > :first-child { margin-top: 0; }
.cosmetica-descripcion-larga__main > :last-child { margin-bottom: 0; }
/* Separación superior entre secciones de la descripción larga (columna izq): los
   h3 del the_content (Beneficios, Ideal para, Ingredientes destacados, …) llevan
   margin-top 30px. El primer h3 queda a ras por el reset > :first-child de arriba.
   NO toca los h3 de las cards (.cosmetica-descripcion-larga__cards) ni el h2 título. */
.cosmetica-descripcion-larga__main h3 { margin-top: 30px; }

/* Cards apiladas, una por campo. Fondo = #FDEEEE al 50% vía rgba (NUNCA opacity,
   así el texto de la card no se atenúa). "Precauciones" lo pisa con color sólido
   (regla de abajo). Sin imágenes ni fondos por imagen. */
.cosmetica-descripcion-larga__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cosmetica-descripcion-larga__card {
	border: 1px solid #c66474;
	border-radius: 20px;
	background: rgba(253, 238, 238, 0.5); /* #FDEEEE al 50% */
	padding: 24px;
}
.cosmetica-descripcion-larga__card > :last-child { margin-bottom: 0; }
/* "Precauciones": fondo sólido, sin transparencia. Misma especificidad que el
   base (0,1,0); gana por orden (va después). */
.cosmetica-descripcion-larga__card--precauciones {
	background: var(--color-secundario); /* #C36170 sólido */
	color: var(--color-fondo-2); /* texto (h3 + contenido) #FDEEEE, solo esta card */
}
.cosmetica-descripcion-larga__card-title {
	margin: 0 0 12px;
	font-family: var(--fuente-titulos);
	font-weight: 500;
}

/* h3 de la ficha (descripción larga + cards) un 20% más chicos que el tamaño
   vigente. El h3 del sitio es `.elementor-kit-5 h3` = clamp(1.5rem, 3vw, 2rem)
   (en móvil `body.elementor-kit-5 h3` = clamp(1.275rem, 2.55vw, 1.7rem), bloque
   de arriba). Acotado a .cosmetica-single-product .cosmetica-descripcion-larga
   (existe solo en la ficha) y con especificidad (0,2,1) para vencer al kit sin
   !important; NO afecta h3 de otras plantillas. Valores = 0.8 × el clamp vigente. */
.cosmetica-single-product .cosmetica-descripcion-larga h3 {
	font-size: clamp(1.2rem, 2.4vw, 1.6rem); /* 0.8 × clamp(1.5rem, 3vw, 2rem) */
}

/* Tablet: h3 de la ficha +15% sobre el tamaño vigente en tablet (= la regla base
   clamp(1.2rem, 2.4vw, 1.6rem)) y en negrita. Desktop (≥1024) queda igual. */
@media (min-width: 768px) and (max-width: 1023px) {
	.cosmetica-single-product .cosmetica-descripcion-larga h3 {
		font-size: clamp(1.38rem, 2.76vw, 1.84rem); /* +15% sobre clamp(1.2, 2.4vw, 1.6) */
		font-weight: 700;
	}
}

/* Tablet y menos (breakpoint del tema = 1023px, igual que .cosmetica-related en
   tienda.css): la fila pasa a una sola columna — descripción a ancho completo y
   debajo las cards apiladas en orden (Cómo utilizar, Información, Precauciones). */
@media (max-width: 1023px) {
	.cosmetica-descripcion-larga__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.cosmetica-single-product .cosmetica-descripcion-larga h3 {
		/* Móvil: +15% sobre el tamaño vigente clamp(1.02rem, 2.04vw, 1.36rem) + negrita. */
		font-size: clamp(1.173rem, 2.346vw, 1.564rem);
		font-weight: 700;
	}
}