/*
Theme Name:   Serrot
Theme URI:    https://longanizaahumada.cl
Description:  Tema propio de Cecinas Serrot (sin Divi). Identidad visual en
              variables CSS, tienda, ficha, carrito lateral y pago propios.
              Los textos de las páginas se editan con el editor de bloques.
Author:       Cecinas Serrot
Version:      2.3.5
Requires at least: 6.5
Requires PHP: 8.2
Text Domain:  serrot
*/

/* ==========================================================================
   1. TOKENS DE MARCA
   Todo el diseño propio lee estas variables. Para cambiar un color o una
   medida en todo el sitio, se cambia aquí y en ningún otro lugar.
   Valores tomados de los mockups (contexto/pagina-avance, LEEME-traspaso §4).
   ========================================================================== */
:root {
	/* Acento: el único color pensado para cambiar fácil.
	   Alternativas evaluadas en los mockups: #B8371D, #A8321C, #8E2A18, #9A3B12 */
	--serrot-acento:        #B8371D;  /* "brasa": botones, barra superior, destacados */
	--serrot-acento-hover:  #8A2615;
	--serrot-acento-texto:  #A8321C;  /* acento como texto sobre claro ("Ahorras $X") */
	--serrot-acento-claro:  #F2956B;  /* acento sobre fondo oscuro */

	/* Oscuros (cabecera, hero, pie) */
	--serrot-tinta:         #1E1713;  /* texto principal y fondos oscuros */
	--serrot-oscuro-2:      #2B211B;
	--serrot-oscuro-3:      #150F0C;

	/* Claros */
	--serrot-crema:         #F4EEE4;  /* fondo general de página */
	--serrot-crema-2:       #EBE2D3;  /* fondo alterno de secciones */
	--serrot-blanco:        #FFFFFF;  /* tarjetas */
	--serrot-texto-claro:   #F4EEE4;  /* texto sobre oscuro */
	--serrot-texto-claro-2: #CDBFAF;
	--serrot-foto-vacia:    #E4D9CA;  /* fondo mientras carga una foto */

	/* Texto secundario y bordes */
	--serrot-gris-700:      #3D322A;
	--serrot-gris-500:      #5B4E43;
	--serrot-gris-200:      #D9CDB9;  /* bordes */
	--serrot-gris-300:      #CDBFAF;  /* bordes más marcados */
	--serrot-exito:         #2F6B3A;  /* "ya tienes despacho gratis" */

	/* Nombres antiguos usados más abajo: apuntan a los nuevos */
	--serrot-rojo:          var(--serrot-acento);
	--serrot-rojo-oscuro:   var(--serrot-acento-hover);

	/* Tipografías (archivos propios en assets/fonts, sin Google Fonts) */
	--serrot-fuente-titulos: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--serrot-fuente-texto:   'Poppins', 'Helvetica Neue', Arial, sans-serif;

	/* Escala: base 17 px; h1 de portada hasta 68 px; h2 de sección hasta
	   46 px; se achica sola en celular */
	--serrot-texto-sm:   0.875rem;
	--serrot-texto-base: 1.0625rem;
	--serrot-texto-lg:   1.1875rem;
	--serrot-etiqueta:   0.75rem;
	--serrot-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--serrot-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	--serrot-h2: clamp(2rem, 1.3rem + 2.6vw, 2.875rem);
	--serrot-h1: clamp(2.5rem, 1.4rem + 4.2vw, 4.25rem);
	--serrot-precio: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);

	/* Espaciados y anchos */
	--serrot-esp-1: 0.25rem;
	--serrot-esp-2: 0.5rem;
	--serrot-esp-3: 0.75rem;
	--serrot-esp-4: 1rem;
	--serrot-esp-6: 1.5rem;
	--serrot-esp-8: 2rem;     /* padding lateral del contenedor */
	--serrot-esp-12: 3rem;
	--serrot-esp-24: 6rem;    /* padding vertical de secciones */
	--serrot-ancho:        1200px;
	--serrot-ancho-tienda: 1280px;
	--serrot-toque:        44px;   /* alto mínimo de botones y controles */

	/* Formas: esquinas casi rectas */
	--serrot-radio:       18px;   /* tarjetas y fotos: esquinas redondeadas */
	--serrot-radio-boton: 12px;   /* botones, campos y opciones */
	--serrot-radio-chip:  24px;
	--serrot-sombra:      0 8px 30px rgba(30, 23, 19, 0.10);
	--serrot-transicion:  160ms ease;
}

/* ==========================================================================
   2. TIPOGRAFÍA: Poppins (elegida por el dueño), archivos propios woff2,
      solo caracteres latinos, font-display: swap. Licencia OFL en assets/fonts.
   ========================================================================== */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400-latin.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;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500-latin.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;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin.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;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin.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;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/poppins-800-latin.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;
}

/* ==========================================================================
   3. BASE (el tema ya no depende de Divi: aquí va el "reset" mínimo)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--serrot-fuente-texto);
	font-size: var(--serrot-texto-base);
	line-height: 1.55;
	color: var(--serrot-tinta);
	background: var(--serrot-crema);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
p { margin: 0 0 var(--serrot-esp-4); }
ul, ol { margin: 0 0 var(--serrot-esp-4); padding-left: 1.25em; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--serrot-gris-200); margin: var(--serrot-esp-8) 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--serrot-fuente-titulos);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: inherit;
	margin: 0 0 var(--serrot-esp-4);
}
h1 { font-size: var(--serrot-h1); }
h2 { font-size: var(--serrot-h2); }
h3 { font-size: var(--serrot-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--serrot-h4); letter-spacing: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.serrot-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	padding: var(--serrot-esp-3) var(--serrot-esp-4);
	background: var(--serrot-blanco);
	color: var(--serrot-tinta);
}
.serrot-saltar:focus { left: var(--serrot-esp-4); }

/* Contenedor estándar */
.serrot-contenedor {
	width: 100%;
	max-width: calc(var(--serrot-ancho) + 2 * var(--serrot-esp-8));
	margin: 0 auto;
	padding: 0 var(--serrot-esp-8);
}
@media (max-width: 600px) {
	.serrot-contenedor { padding: 0 var(--serrot-esp-4); }
}

/* ==========================================================================
   4. ENLACES Y FOCO
   ========================================================================== */
a { color: var(--serrot-tinta); text-decoration-color: var(--serrot-acento); text-underline-offset: 0.2em; transition: color var(--serrot-transicion); }
a:hover { color: var(--serrot-acento-texto); }

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--serrot-acento);
	outline-offset: 2px;
}

/* ==========================================================================
   5. BOTONES
   Principal (acento): WooCommerce, .serrot-boton y el bloque "Botón".
   Secundario (contorno): .serrot-boton-borde o el estilo "Contorno" del bloque.
   #page-container sube el peso para ganarle a woocommerce.css.
   ========================================================================== */
#page-container a.button,
#page-container button.button,
#page-container input.button,
#page-container #respond input#submit,
.serrot-boton,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--serrot-esp-2);
	min-height: var(--serrot-toque);
	padding: var(--serrot-esp-3) var(--serrot-esp-6);
	font-family: var(--serrot-fuente-titulos);
	font-weight: 700;
	font-size: var(--serrot-texto-base);
	line-height: 1.2;
	text-decoration: none;
	color: var(--serrot-blanco);
	background: var(--serrot-acento);
	border: 2px solid var(--serrot-acento);
	border-radius: var(--serrot-radio-boton);
	cursor: pointer;
	transition: background var(--serrot-transicion), color var(--serrot-transicion), border-color var(--serrot-transicion);
}
#page-container a.button:hover,
#page-container button.button:hover,
#page-container input.button:hover,
.serrot-boton:hover,
.wp-block-button__link:hover {
	color: var(--serrot-blanco);
	background: var(--serrot-acento-hover);
	border-color: var(--serrot-acento-hover);
}
#page-container a.button.alt,
#page-container button.button.alt,
#page-container #place_order,
#page-container a.checkout-button {
	color: var(--serrot-blanco);
	background: var(--serrot-acento);
	border-color: var(--serrot-acento);
}
#page-container a.button.alt:hover,
#page-container button.button.alt:hover,
#page-container #place_order:hover,
#page-container a.checkout-button:hover {
	background: var(--serrot-acento-hover);
	border-color: var(--serrot-acento-hover);
}
#page-container .button:disabled,
#page-container .button.disabled { opacity: 0.6; cursor: not-allowed; }

.serrot-boton-borde,
.is-style-outline .wp-block-button__link {
	color: var(--serrot-tinta);
	background: transparent;
	border-color: var(--serrot-tinta);
}
.serrot-boton-borde:hover,
.is-style-outline .wp-block-button__link:hover {
	color: var(--serrot-blanco);
	background: var(--serrot-tinta);
	border-color: var(--serrot-tinta);
}
/* Sobre fondo oscuro, el contorno va en claro */
.serrot-oscuro .serrot-boton-borde,
.serrot-oscuro .is-style-outline .wp-block-button__link {
	color: var(--serrot-texto-claro);
	border-color: var(--serrot-texto-claro);
}
.serrot-oscuro .serrot-boton-borde:hover,
.serrot-oscuro .is-style-outline .wp-block-button__link:hover {
	color: var(--serrot-tinta);
	background: var(--serrot-texto-claro);
}
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--serrot-esp-3); }

/* ==========================================================================
   6. PRECIOS Y FORMULARIOS
   ========================================================================== */
.woocommerce .price,
.woocommerce-Price-amount {
	font-family: var(--serrot-fuente-titulos);
	font-weight: 700;
	color: var(--serrot-tinta);
}
input, select, textarea, button { font: inherit; color: inherit; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.serrot-campo {
	font-family: var(--serrot-fuente-texto);
	border: 1px solid var(--serrot-gris-300);
	border-radius: var(--serrot-radio-boton);
	min-height: var(--serrot-toque);
	padding: var(--serrot-esp-3);
	color: var(--serrot-tinta);
	background: var(--serrot-blanco);
}

/* ==========================================================================
   7. UTILIDADES (también como "Clase CSS adicional" en el editor de bloques)
   ========================================================================== */
.serrot-fondo-crema   { background-color: var(--serrot-crema) !important; }
.serrot-fondo-crema-2 { background-color: var(--serrot-crema-2) !important; }
.serrot-fondo-blanco  { background-color: var(--serrot-blanco) !important; }
.serrot-oscuro        { background-color: var(--serrot-tinta) !important; color: var(--serrot-texto-claro); }
.serrot-oscuro a:not(.wp-block-button__link):not(.serrot-boton) { color: var(--serrot-texto-claro); }
.serrot-texto-rojo    { color: var(--serrot-acento-texto) !important; }
.serrot-etiqueta {
	font-family: var(--serrot-fuente-texto);
	font-size: var(--serrot-etiqueta);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--serrot-acento-texto);
}
.serrot-oscuro .serrot-etiqueta { color: var(--serrot-acento-claro); }
.serrot-tarjeta {
	background: var(--serrot-blanco);
	border: 1px solid var(--serrot-gris-200);
	border-radius: var(--serrot-radio);
}