/*
Theme Name:   El 23
Description:  Tema hijo de El 23 sobre Flatsome. La identidad visual vive aquí; la lógica del negocio vive en el plugin el23-core (CLAUDE.md §5).
Template:     flatsome
Version:      0.2.0
Text Domain:  el23-child
*/

/* Maqueta v2 aprobada el 2026-09-23 (docs/09 Q-DIS-5): negro, blanco y gris; Montserrat en mayúsculas espaciadas. */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--el23-negro: #1A1A1B;
	--el23-gris-texto: #55575B;
	--el23-gris-fondo: #F4F4F3;
	--el23-gris-heroe: #F2F2F0;
	--el23-linea: #ECECEA;
	--el23-plata: #C9CACC;
	--el23-verde: #1E7B45;
}

body, .nav > li > a, h1, h2, h3, h4, h5, h6, .heading-font, .alt-font, button, input, select, textarea {
	font-family: 'Montserrat', system-ui, sans-serif;
}
body { color: var(--el23-negro); }
a { color: var(--el23-negro); }

.el23-mayus { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: 13px; margin: 0; }
.el23-gris { color: var(--el23-gris-texto); }
.el23-plata { color: var(--el23-plata); }
.el23-titulo { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }

.el23-boton {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
	background: var(--el23-negro); color: #fff; border: 1.5px solid var(--el23-negro);
	text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 600; text-decoration: none;
}
.el23-boton:hover { background: #3A3B3E; color: #fff; }
.el23-boton--contorno { background: transparent; color: var(--el23-negro); }
.el23-boton--contorno:hover { background: var(--el23-negro); color: #fff; }
.el23-boton--claro { background: #fff; color: var(--el23-negro); border-color: #fff; }
.el23-boton--claro:hover { background: var(--el23-plata); color: var(--el23-negro); }
.el23-boton--contorno-claro { background: transparent; color: #fff; border-color: #fff; }
.el23-boton--contorno-claro:hover { background: #fff; color: var(--el23-negro); }
.el23-boton--whatsapp { background: var(--el23-verde); border-color: var(--el23-verde); }
.el23-boton--whatsapp:hover { background: #17633A; }
.el23-boton[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Encabezado de Flatsome ---------- */
.header-top { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.header-main .nav > li > a, .header-main .html { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 500; }
.header-bottom { border-bottom: 1px solid var(--el23-linea); }
.header-bottom .nav > li > a { letter-spacing: .12em; font-size: 14px; font-weight: 500; color: var(--el23-negro); }
.header-bottom .nav > li.active > a, .header-bottom .nav > li > a:hover { color: var(--el23-gris-texto); }
.header-main .searchform .search-field { background: var(--el23-gris-fondo); border: 0; border-bottom: 1px solid var(--el23-negro); box-shadow: none; }
.el23-cabecera-enlace { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.el23-cabecera-enlace svg { flex-shrink: 0; }
.el23-lista-contador:empty { display: none; }

/* ---------- Portada ---------- */
.el23-inicio { background: #fff; }
.el23-heroe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--el23-gris-heroe); min-height: 600px; }
.el23-heroe__texto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 8%; text-align: center; }
.el23-heroe__texto h1 { font-size: 38px; margin: 0; }
.el23-heroe__texto p { font-size: 18px; line-height: 1.6; max-width: 420px; margin: 0; }
.el23-heroe__foto { overflow: hidden; }
.el23-heroe__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.el23-seccion { padding: 72px 32px 16px; text-align: center; }
.el23-seccion > .el23-titulo { font-size: 32px; margin: 0 0 36px; }
.el23-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.el23-cat { position: relative; display: block; height: 380px; background: var(--el23-gris-fondo); overflow: hidden; text-decoration: none; }
.el23-cat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.el23-cat:hover img { transform: scale(1.03); }
@media (min-width: 850px) { .el23-cat--solo-celular { display: none; } }
.el23-cat__nombre { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--el23-gris-fondo); display: flex; align-items: center; justify-content: center; }
.el23-cat__nombre span { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: 14px; border-bottom: 1.5px solid var(--el23-negro); padding-bottom: 4px; }

.el23-carrusel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-bottom: 72px; }
.el23-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--el23-negro); }
.el23-tarjeta__foto { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--el23-gris-fondo); }
.el23-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el23-tarjeta__cat { font-size: 12px; margin-top: 8px; }
.el23-tarjeta__nombre { font-size: 15px; }
.el23-tarjeta__precio { font-size: 15px; font-weight: 600; }

.el23-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.el23-bloque { position: relative; min-height: 540px; background: var(--el23-negro); color: #fff; overflow: hidden; display: flex; }
.el23-bloque--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; opacity: .45; }
.el23-bloque__texto { position: relative; margin: auto; padding: 48px 8%; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.el23-bloque__texto h2 { color: #fff; font-size: 44px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.el23-bloque__texto p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 440px; }
.el23-bloque__texto .el23-mayus { letter-spacing: .2em; font-weight: 500; }

/* ---------- Franja y pie ---------- */
.el23-franja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 56px 64px; border-top: 1px solid var(--el23-linea); border-bottom: 1px solid var(--el23-linea); background: #fff; text-align: center; }
.el23-franja__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--el23-gris-texto); }
.el23-franja__item .el23-mayus { color: var(--el23-negro); margin-bottom: 8px; }
.el23-pie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 56px 64px 48px; background: var(--el23-gris-fondo); font-size: 14px; }
.el23-pie__col { display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.el23-pie__col .el23-mayus { margin-bottom: 6px; }
.el23-pie__col a { text-decoration: none; }
.el23-pie__logo img { height: 96px; width: auto; }

/* ---------- Catálogo ---------- */
.product-small .box-image { background: var(--el23-gris-fondo); }
.product-small .box-text { text-align: center; padding-top: 14px; }
.product-small .box-text .category { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: 11px; opacity: 1; color: var(--el23-negro); }
.product-small .box-text .name { font-size: 15px; }
.product-small .price { font-weight: 600; font-size: 15px; color: var(--el23-negro); }
.shop-page-title .page-title, .category-page-row .page-title { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }

/* ---------- Ficha ---------- */
.single-product .product-gallery { background: var(--el23-gris-fondo); }
.single-product .product-info .product-title { font-weight: 500; letter-spacing: .04em; }
.single-product .product-info .price { color: var(--el23-negro); font-weight: 600; }
.el23-ficha-antetitulo { color: var(--el23-gris-texto); font-size: 11px; margin-bottom: 8px; }
.el23-ficha-cotizar { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.el23-ficha-iva { font-size: 13px; color: var(--el23-gris-texto); margin: 0 0 20px; }
.el23-ficha-acciones { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 24px; max-width: 420px; }
.el23-ficha-acciones .el23-boton { width: 100%; gap: 8px; }
.el23-ficha-aviso { font-size: 13px; color: var(--el23-gris-texto); }
.product-footer .accordion-title { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; }

/* ---------- Mi lista ---------- */
.el23-lista { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }
.el23-lista__intro { text-align: center; color: var(--el23-gris-texto); font-size: 14px; line-height: 1.6; }
.el23-lista__vacia { text-align: center; padding: 32px 0; }
.el23-lista__pieza { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--el23-linea); }
.el23-lista__pieza:last-child { border-bottom: 1px solid var(--el23-linea); }
.el23-lista__foto { width: 84px; height: 100px; object-fit: cover; background: var(--el23-gris-fondo); flex-shrink: 0; }
.el23-lista__datos { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.el23-lista__datos .el23-mayus { font-size: 11px; color: var(--el23-gris-texto); }
.el23-lista__precio { font-weight: 600; }
.el23-lista__agotada { color: #A1261B; font-size: 12px; font-weight: 600; }
.el23-lista__quitar { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; margin: 0; padding: 0; }
.el23-lista__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; }
.el23-lista__total strong { font-size: 22px; }
.el23-lista__acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.el23-lista__acciones .el23-boton { width: 100%; gap: 10px; }

/* ---------- Páginas de texto ---------- */
.el23-pagina { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; text-align: center; }
.el23-pagina h1 { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }

/* ---------- Botón flotante de WhatsApp (el23-core) ---------- */
.el23-wa-flotante {
	position: fixed; right: 24px; bottom: 24px; z-index: 999;
	display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px;
	border-radius: 28px; background: var(--el23-verde); color: #fff; text-decoration: none;
	text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 600;
	box-shadow: 0 6px 20px rgba(26, 26, 27, .25);
}
.el23-wa-flotante:hover { background: #17633A; color: #fff; }
.el23-icono-wa { flex-shrink: 0; }
.el23-wa-flotante:focus-visible { outline: 3px solid var(--el23-negro); outline-offset: 3px; }
@media (max-width: 849px) {
	.el23-wa-flotante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; }
}

/* El pie propio reemplaza al de Flatsome (widgets apagados en los ajustes; la franja inferior también se oculta). */
.footer-wrapper .absolute-footer { display: none; }

/* ---------- Celular y tableta ---------- */
@media (max-width: 849px) {
	.el23-solo-escritorio { display: none; }
	.el23-heroe { grid-template-columns: 1fr; min-height: 0; }
	.el23-heroe__foto { order: -1; height: 360px; }
	.el23-heroe__texto { padding: 32px 24px 40px; }
	.el23-heroe__texto h1 { font-size: 26px; }
	.el23-heroe__texto p { font-size: 15px; }
	.el23-seccion { padding: 48px 16px 8px; }
	.el23-seccion > .el23-titulo { font-size: 22px; margin-bottom: 24px; }
	.el23-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.el23-cat { height: 210px; }
	.el23-cat__nombre { height: 48px; }
	.el23-cat__nombre span { font-size: 12px; }
	.el23-carrusel { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 48px; scroll-snap-type: x mandatory; }
	.el23-tarjeta { flex: 0 0 160px; scroll-snap-align: start; }
	.el23-duo { grid-template-columns: 1fr; gap: 0; }
	.el23-bloque { min-height: 420px; }
	.el23-bloque__texto h2 { font-size: 30px; }
	.el23-franja { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 24px; text-align: left; gap: 24px 16px; }
	.el23-pie { grid-template-columns: 1fr; text-align: center; padding: 40px 24px; }
	.el23-pie__logo { justify-self: center; }
}