/* =========================================================================
 * CERVO — BASE (cimientos del sistema de diseño)
 *
 * UN SOLO SITIO donde viven los colores, tipografías, espaciados y anchos.
 * Todo lo nuevo bebe de aquí. Lo viejo (cart, checkout, header…) se irá
 * migrando a estos tokens conforme se toque cada pieza.
 *
 * POR QUÉ EXISTE: cada archivo definía sus propios tokens y ya habían
 * divergido — la "tinta" era #141210 en carrito/checkout pero #0f0f0f en el
 * header; las líneas eran #e8e5e0 / #e5e2dc / #e8e8e8. Tres grises casi
 * iguales que no lo son. Aquí se fija uno solo de cada cosa.
 *
 * PREFIJO: --cv-  (Cervo)
 * ========================================================================= */

:root {

	/* ---------------------------------------------------------------------
	 * 1) COLOR
	 * ------------------------------------------------------------------- */
	--cv-ink:       #141210;   /* texto principal */
	--cv-ink-soft:  #3a3733;   /* texto secundario */
	--cv-mut:       #6d6a66;   /* texto apagado / metadatos */
	--cv-line:      #e5e2dc;   /* bordes y separadores */
	--cv-line-soft: #f0eeea;   /* separadores muy sutiles */
	--cv-bg:        #ffffff;   /* fondo base */
	--cv-bg-soft:   #faf9f7;   /* fondo de tarjetas / secciones */
	--cv-bg-deep:   #0f0f0f;   /* fondo oscuro (lightbox, footer) */

	--cv-gold:      #c8a96e;   /* acento de marca */
	--cv-gold-deep: #8a6d3b;   /* acento sobre fondo claro (legible) */
	--cv-ok:        #3aa76d;   /* stock, éxito */
	--cv-warn:      #c0392b;   /* agotado, error */

	/* ---------------------------------------------------------------------
	 * 2) TIPOGRAFÍA
	 * Cormorant Garamond (títulos) + Jost (texto). Ya se cargan globalmente.
	 * Las medidas son FLUIDAS: crecen solas con la pantalla, sin media queries.
	 * ------------------------------------------------------------------- */
	--cv-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--cv-sans:  'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;

	--cv-t-xs:  0.75rem;                              /* 12px — etiquetas */
	--cv-t-sm:  0.8125rem;                            /* 13px — metadatos */
	--cv-t-md:  clamp(0.875rem, 0.83rem + 0.2vw, 1rem);       /* 14→16 cuerpo */
	--cv-t-lg:  clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);      /* 16→19 destacado */
	--cv-t-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);      /* 20→28 subtítulo */
	--cv-t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);         /* 28→48 título */
	--cv-t-3xl: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);         /* 36→72 display */

	--cv-lh-tight: 1.15;
	--cv-lh-body:  1.6;

	/* Medida de lectura: ningún texto largo debe pasar de aquí, por muy
	   ancha que sea la pantalla (si no, cansa leerlo). */
	--cv-measure: 68ch;

	/* ---------------------------------------------------------------------
	 * 3) ESPACIADO (escala fluida)
	 * ------------------------------------------------------------------- */
	--cv-s1: 0.25rem;   /*  4px */
	--cv-s2: 0.5rem;    /*  8px */
	--cv-s3: 0.75rem;   /* 12px */
	--cv-s4: 1rem;      /* 16px */
	--cv-s5: 1.5rem;    /* 24px */
	--cv-s6: 2rem;      /* 32px */
	--cv-s7: clamp(2.5rem, 2rem + 2vw, 4rem);   /* 40→64 — entre bloques */
	--cv-s8: clamp(3.5rem, 2.5rem + 4vw, 7rem); /* 56→112 — entre secciones */

	/* ---------------------------------------------------------------------
	 * 4) ANCHO Y CONTENEDORES  ⭐ (el corazón del "que ocupe todo el ancho")
	 *
	 * El tema encajonaba TODO en .__os-container__ (max-width 1170px, y solo
	 * 1300px por encima de 1400px). En un monitor de 2560px el contenido se
	 * quedaba en una columna central con medio pantallazo vacío.
	 *
	 * Aquí no hay caja fija: el ancho es el de la pantalla y lo que se ajusta
	 * es el MARGEN LATERAL, que crece de forma continua con clamp(). Así se ve
	 * bien en un móvil de 360px, en un portátil de 1440 y en un monitor de 2560
	 * sin escalones ni media queries.
	 * ------------------------------------------------------------------- */

	/* Margen lateral: 16px en móvil → hasta 88px en pantallas grandes. */
	--cv-gutter: clamp(1rem, 0.4rem + 2.6vw, 5.5rem);

	/* Tope de cordura para pantallas gigantes (>2200px, TV/ultrawide).
	   Sin esto, en un ultrawide de 3440px el contenido se deforma. */
	--cv-max: 2200px;

	/* ---------------------------------------------------------------------
	 * 5) FORMA Y MOVIMIENTO
	 * ------------------------------------------------------------------- */
	--cv-radius:    14px;
	--cv-radius-sm: 8px;
	--cv-shadow:    0 2px 8px rgba(0, 0, 0, 0.05);
	--cv-shadow-up: 0 12px 40px rgba(0, 0, 0, 0.12);

	--cv-ease:     cubic-bezier(0.16, 1, 0.3, 1);      /* salida suave (por defecto) */
	--cv-ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
	--cv-ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);  /* rebote sutil */
	--cv-fast:     0.18s;
	--cv-slow:     0.5s;
}

/* =========================================================================
 * CONTENEDORES
 *
 * .cv-wrap       → el contenedor normal: todo el ancho, con márgenes fluidos.
 * .cv-wrap--text → para texto largo: se frena en la medida de lectura.
 * .cv-bleed      → a sangre: rompe los márgenes y toca los bordes (fotos).
 * ========================================================================= */

.cv-wrap {
	width: 100%;
	max-width: var(--cv-max);
	margin-inline: auto;
	padding-inline: var(--cv-gutter);
	box-sizing: border-box;
}

/* Texto largo dentro de un .cv-wrap: legible por ancha que sea la pantalla. */
.cv-wrap--text > * {
	max-width: var(--cv-measure);
}

/* Imagen/banner que ocupa el 100% real, ignorando los márgenes del padre. */
.cv-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

/* =========================================================================
 * SACAR A PRODUCTO Y CATÁLOGO DE LA JAULA DEL TEMA
 *
 * Solo se aplica cuando el <body> lleva la clase .cervo-fluid (la pone el PHP
 * únicamente en las páginas que ya usan el sistema nuevo). La home, el carrito
 * y el checkout NO se tocan: siguen en el contenedor del tema, como hoy.
 * ========================================================================= */

body.cervo-fluid .__os-container__ {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

/* El tema mete el contenido en una grilla tipo Bootstrap (.row > .col-*).
   La columna ya es completa (el PHP quita la barra lateral); aquí solo se
   neutraliza la gotera de 15px que añadía la grilla. */
body.cervo-fluid .__os-woo-page-wrap__ .row {
	margin-left: 0;
	margin-right: 0;
}

body.cervo-fluid .__os-woo-page-wrap__ .row > [class*='col-'] {
	padding-left: 0;
	padding-right: 0;
}

/* =========================================================================
 * SIN RECUADRO EN LAS CAJAS  (override del tema — NO se toca su CSS)
 *
 * El tema pinta en `main-style.css` un `border:1px solid #eef1fd` + una sombra
 * muy tenue sobre un montón de cajas de WooCommerce (resumen de producto,
 * galería, pestañas, etc.). En la ficha nueva ese recuadro azulado sobra: los
 * bloques ya se separan con su propio espaciado.
 *
 * En vez de editar el CSS del tema (frágil y se pierde), se NEUTRALIZA aquí,
 * scopeado bajo .cervo-fluid → solo afecta a la ficha nueva; la tienda real
 * (sin esa clase) se queda EXACTAMENTE igual.
 *
 * ⚠️ OJO CON EL `.woocommerce`: en la regla del tema `.woocommerce` es el
 * PROPIO <body> (no hay ningún div descendiente con esa clase exacta; los demás
 * son `woocommerce-*`). Por eso las clases del body (`.woocommerce`,
 * `.woocommerce-page`) van PEGADAS a `.cervo-fluid` en el mismo compuesto
 * (`body.cervo-fluid.woocommerce`, sin espacio). Si se dejan con espacio, el
 * selector busca un descendiente inexistente y NO coincide → el borde no se va.
 * La mayor especificidad del prefijo gana sin necesidad de !important.
 * ========================================================================= */

body.cervo-fluid .product-main-wrap,
body.cervo-fluid.woocommerce .cart-collaterals .cart_totals,
body.cervo-fluid.woocommerce .lost_reset_password,
body.cervo-fluid.woocommerce .woocommerce-ResetPassword,
body.cervo-fluid.woocommerce .woocommerce-cart-form,
body.cervo-fluid.woocommerce .woocommerce-customer-details address,
body.cervo-fluid.woocommerce div.product div.images.woocommerce-product-gallery,
body.cervo-fluid.woocommerce div.product div.summary,
body.cervo-fluid.woocommerce form.checkout_coupon,
body.cervo-fluid.woocommerce form.login,
body.cervo-fluid.woocommerce form.register,
body.cervo-fluid.woocommerce-account .woocommerce-MyAccount-content,
body.cervo-fluid.woocommerce-page .cart-collaterals .cart_totals,
body.cervo-fluid.woocommerce-page .wishlist_table,
body.cervo-fluid.woocommerce-page .woocommerce ul.order_details,
body.cervo-fluid.woocommerce-page .woocommerce-MyAccount-navigation,
body.cervo-fluid.woocommerce-page .woocommerce-additional-fields,
body.cervo-fluid.woocommerce-page .woocommerce-billing-fields,
body.cervo-fluid.woocommerce-page .woocommerce-cart-form,
body.cervo-fluid.woocommerce-page .woocommerce-checkout-review-order,
body.cervo-fluid.woocommerce-page .woocommerce-order-details,
body.cervo-fluid.woocommerce-page .woocommerce-shipping-fields,
body.cervo-fluid.woocommerce div.product .woocommerce-tabs,
body.cervo-fluid.woocommerce-page div.product .woocommerce-tabs,
body.cervo-fluid.woocommerce-page form .form-row.create-account,
body.cervo-fluid aside.secondary-widget-area .widget {
	border: 0;
	box-shadow: none;
}

/* =========================================================================
 * ACCESIBILIDAD
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}