/* Tema Ana Salmerón · portada. */

.as-portada { padding-top: 0 !important; }
.as-antetitulo { margin: 0; font-size: 0.8125rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--as-acento); }

/* Hero */
.as-hero { display: grid; background: var(--as-bloque); }
.as-hero__texto { padding: 36px var(--as-margen) 32px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.as-hero__texto > * { margin: 0 !important; }
.as-hero__titulo { font-size: var(--wp--preset--font-size--portada) !important; line-height: 1.06 !important; max-width: 16ch; }
.as-hero__entradilla { font-size: 1.0625rem; color: #44403C; max-width: 46ch; }
.as-hero__botones { gap: 12px; margin-top: 6px !important; }
.as-hero__imagen { margin: 0 !important; background: #EDE3DD; }
/* WEB-18: foto de producto con fondo blanco → el fondo toma el tono y los envases blancos se distinguen por sus sombras */
.as-hero__imagen img { mix-blend-mode: multiply; }
.as-hero__imagen img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
@media (min-width: 900px) {
	.as-hero { grid-template-columns: 5fr 7fr; min-height: 520px; }
	.as-hero__texto { padding: 64px 56px 64px max(var(--as-margen), calc((100vw - var(--as-ancho)) / 2)); }
	.as-hero__imagen img { max-height: none; min-height: 520px; }
}

.as-tema .is-style-outline .wp-block-button__link { background: transparent !important; color: var(--as-texto) !important; border: 1.5px solid var(--as-texto); }
.as-tema .is-style-outline .wp-block-button__link:hover { background: var(--as-texto) !important; color: #fff !important; }

/* Franja de ventajas */
.as-franja { border-bottom: 1px solid var(--as-borde); padding-top: 20px; padding-bottom: 20px; }
.as-franja .as-ventajas { grid-template-columns: 1fr 1fr; gap: 16px; font-size: .875rem; }
@media (min-width: 900px) { .as-franja .as-ventajas { grid-template-columns: repeat(4, 1fr); } }

/* Secciones */
.as-seccion { padding-top: clamp(40px, 6vw, 72px); }
.as-seccion__cabeza { margin-bottom: 20px; }
.as-seccion__cabeza .as-seccion__titulo { margin: 0 !important; }
.as-seccion__enlace { margin: 0; font-weight: 700; }
.as-seccion__enlace a { text-decoration: underline; text-underline-offset: 3px; }
.as-chips--envolver { flex-wrap: wrap; overflow: visible; }
.as-chips--envolver a { min-height: 46px; padding: 0 22px; font-size: .9375rem; }

/* Categorías */
.as-categorias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .as-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .as-categorias { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.as-categorias a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.as-categorias__img { display: block; aspect-ratio: 1; border: 1px solid var(--as-borde); border-radius: 16px; overflow: hidden; background: #fff; }
.as-categorias__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.as-categorias a:hover img { transform: scale(1.04); }
.as-categorias__pie { display: flex; flex-direction: column; }
.as-categorias__pie strong { font-size: 1rem; }
.as-categorias__pie span { font-size: .8125rem; color: var(--as-suave); }

/* Zona profesional */
.as-zona-pro { display: grid; background: var(--as-texto); color: #F5EFE9; border-radius: 24px; overflow: hidden; }
.as-zona-pro__texto { padding: 32px 24px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.as-zona-pro__texto > * { margin: 0 !important; }
.as-zona-pro__texto p { color: #D6D3D1; }
.as-zona-pro .as-antetitulo { color: var(--as-acento-claro); }
.as-zona-pro__titulo { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important; }
.as-zona-pro__imagen { margin: 0 !important; background: #fff; }
.as-zona-pro__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; max-height: 320px; }
.as-tema .as-boton-claro .wp-block-button__link { background: var(--as-acento-claro) !important; color: var(--as-texto) !important; }
.as-tema .as-boton-borde-claro .wp-block-button__link { color: #fff !important; border-color: #fff !important; }
.as-tema .as-boton-borde-claro .wp-block-button__link:hover { background: #fff !important; color: var(--as-texto) !important; }
@media (min-width: 900px) {
	.as-zona-pro { grid-template-columns: 1fr 1fr; min-height: 400px; }
	.as-zona-pro__texto { padding: 56px 64px; }
	.as-zona-pro__imagen img { max-height: none; }
}

/* Marcas */
.as-marcas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .as-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .as-marcas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.as-marcas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 96px; border: 1px solid var(--as-borde); border-radius: 14px; text-decoration: none; text-align: center; padding: 10px; }
.as-marcas a:hover { border-color: var(--as-texto); }
.as-marcas strong { font-family: var(--as-titulos); font-size: 1.125rem; font-weight: 700; }
.as-marcas span { font-size: .75rem; color: var(--as-suave); }

/* Aparatología y maquillaje */
.as-destacados { display: grid; gap: 16px; }
@media (min-width: 900px) { .as-destacados { grid-template-columns: 1fr 1fr; gap: 20px; } }
.as-destacado { position: relative; display: block; height: 260px; border-radius: 20px; overflow: hidden; text-decoration: none; background: var(--as-gris); }
.as-destacado img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.as-destacado:hover img { transform: scale(1.03); }
.as-destacado__texto { position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.as-destacado__texto strong { font-family: var(--as-titulos); font-size: 1.25rem; }
.as-destacado__texto span { font-size: .875rem; font-weight: 700; text-decoration: underline; color: var(--as-acento); }
@media (min-width: 900px) { .as-destacado { height: 300px; } }
.as-categorias__img img.is-ambiente { object-fit: cover; }