/**
 * Culture Racing — Páginas de servicio (/servicios/, /tapizado/, …)
 *
 * Ajustes de composición compartidos por las páginas de servicio. Se encola
 * vía cr_is_servicio_page() (functions.php) y depende de cr-global (tokens) +
 * cr-sections (patrones reutilizables: eyebrow, título, secciones). El scope
 * body.cr-servicio-page lo aplica functions.php a todas esas páginas por igual.
 *
 * IMPORTANTE: no dupliques patrones de sections.css acá. El widget de reseñas
 * ("Zenth Reseñas") trae su propio CSS desde el plugin (zenth-toolkit/assets/
 * css/reviews.css). Este archivo es solo para composición/ajustes a nivel de
 * páginas de servicio.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Reseñas — "LO QUE DICE LA GANG"  (widget Zenth Reseñas en cr-section)
 *   §2  Hero de servicio — "TU SILLA CON EL MEJOR ESTILO"  (armada en Elementor)
 *   §3  Responsive — TODOS los @media de tamaño consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1263 (chips) · 1024 (tablet) · 768 (tablet-chico) ·
 *   767 (mobile: recomposición del hero) · 600 (mobile-small).
 *   Son @media de tamaño (max-width) en §3, de más ancho a más angosto. Hay
 *   además 1 media de ACCESIBILIDAD (prefers-reduced-motion, apaga el pulso del
 *   badge) en su propia subsección al final de §3. El @keyframes del pulso vive
 *   junto al badge en §2 (no en §3).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · RESEÑAS — "LO QUE DICE LA GANG"
   ───────────────────────────────────────────────────────────────────────
   El eyebrow + título se arman en Elementor con los patrones de sections.css
   (.cr-section-eyebrow, .cr-section-title + spans __solid / __outline). El
   widget Zenth Reseñas va debajo. El ajuste de padding móvil vive en §3.
   ═══════════════════════════════════════════════════════════════════════ */

.cr-title-services-h1 {
    display: none !important;
}

/* Aire entre el bloque de título y el grid de reseñas. */
body.cr-servicio-page .cr-reviews-section .zenth-reviews {
	margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HERO DE SERVICIO — "TU SILLA CON EL MEJOR ESTILO"
   ───────────────────────────────────────────────────────────────────────
   Composición armada en Elementor (container con imagen de fondo + clases).
   Replica el patrón de la hero de la home: bg cover + overlay gradient
   (izquierda oscura, para leer el texto) + contenido sobre el lado oscuro.
   Reutiliza .cr-dual-btn--white para los CTAs y los spans de título de
   sections.css (__solid / __solid--red / __outline).

   Estructura armada en Elementor:
     .cr-service-hero            (container con la imagen de fondo)
       .cr-service-hero__top     (fila: título izq · badge der)
         .cr-service-hero__title
         .cr-service-hero__badge
       .cr-service-hero__bottom  (fila: lead izq · chips der)
         .cr-service-hero__lead  (precio + .cr-dual-btn--white)
           .cr-service-hero__price
         .cr-service-hero__chips
           .cr-service-hero__chip  (×N)

   Los badges/chips/título/precio se arman con widgets Heading; el CSS apunta
   a .elementor-heading-title interno. Los @media del hero viven en §3.
   ═══════════════════════════════════════════════════════════════════════ */

/* Container raíz: alto de hero, overlay y layout en 2 filas. */
body.cr-servicio-page .cr-service-hero,
body.cr-servicio-page .cr-service-hero.e-con,
body.cr-servicio-page .cr-service-hero.e-con-full {
	position: relative !important;
	min-height: clamp(560px, 83vh, 880px) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: clamp(88px, 10vh, 120px) var(--cr-container-pad, 32px) clamp(40px, 6vh, 72px) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: var(--cr-color-black, #000);
	color: var(--cr-color-white, #fff);
	overflow: hidden !important;
}

/* Overlay: oscuro a la izquierda → casi transparente a la derecha. */
body.cr-servicio-page .cr-service-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.6) 35%,
		rgba(0, 0, 0, 0.25) 65%,
		rgba(0, 0, 0, 0.05) 100%
	);
}

/* Degradado a negro en los 4 lados: funde la foto con el fondo negro de la
   página en los bordes (efecto "imagen sangrando a negro"). Va encima del
   overlay del texto (::before). Ajustá el segundo % de cada gradiente para
   más/menos fundido por lado (mayor % = fundido más ancho). */
body.cr-servicio-page .cr-service-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top,    var(--cr-color-black, #000) 0%, rgba(0, 0, 0, 0) 24%),
		linear-gradient(to bottom, var(--cr-color-black, #000) 0%, rgba(0, 0, 0, 0) 24%),
		linear-gradient(to left,   var(--cr-color-black, #000) 0%, rgba(0, 0, 0, 0) 16%),
		linear-gradient(to right,  var(--cr-color-black, #000) 0%, rgba(0, 0, 0, 0) 16%);
}

/* Todo el contenido, por encima de los overlays. */
body.cr-servicio-page .cr-service-hero > * {
	position: relative;
	z-index: 2;
}

/* ── Filas top / bottom ──────────────────────────────────────── */
body.cr-servicio-page .cr-service-hero__top,
body.cr-servicio-page .cr-service-hero__bottom {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	gap: 24px !important;
	width: 100% !important;
}
body.cr-servicio-page .cr-service-hero__top { align-items: flex-start !important; }
body.cr-servicio-page .cr-service-hero__bottom { align-items: flex-end !important; }

/* ── Título (3 líneas; los spans solid/outline/red vienen de sections.css) ── */
body.cr-servicio-page .cr-service-hero__title,
body.cr-servicio-page .cr-service-hero__title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif) !important;
	font-style: italic !important;
	font-size: clamp(44px, 4vw, 104px) !important;
	font-weight: 400 !important;
	line-height: 0.95 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	color: var(--cr-color-white, #fff) !important;
    text-shadow: 1px 1px 30px rgb(0 0 0 / 50%), 0px 30px 20px rgb(0 0 0 / 60%);
}

.cr-service-hero__title h2 span:nth-last-child(1 of .cr-section-title__solid) {
    font-size: clamp(44px, 7vw, 104px) !important;
}

/* "CON EL" — acento rojo, más chico, inline junto a la primera línea. */
body.cr-servicio-page .cr-service-hero__title-accent {
	color: var(--cr-color-primary, #c00000) !important;
	-webkit-text-fill-color: var(--cr-color-primary, #c00000) !important;
	font-size: 0.42em;
	letter-spacing: 0.04em;
	vertical-align: 0.12em;
}

/* ── Badge "SERVICIO ESTRELLA" (pill rojo en el heading-title) ── */
body.cr-servicio-page .cr-service-hero__badge { align-self: flex-start; }
body.cr-servicio-page .cr-service-hero__badge .elementor-heading-title {
	display: inline-block;
	margin: 0 !important;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--cr-color-primary, #c00000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif) !important;
	font-size: clamp(11px, 0.9vw, 13px) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	white-space: nowrap;
	/* Pulso: anillo rojo que late. Se anima box-shadow (NO transform) para no
	   chocar con la animación de entrada GSAP del badge. */
	animation: cr-hero-badge-pulse 2.4s ease-out infinite;
}

@keyframes cr-hero-badge-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(192, 0, 0, 0.55); }
	70%  { box-shadow: 0 0 0 16px rgba(192, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(192, 0, 0, 0); }
}

/* ── Lead (precio + CTAs) ────────────────────────────────────── */
body.cr-servicio-page .cr-service-hero__lead {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: clamp(24px, 3vw, 36px) !important;
}

/* ── Precio (DESDE + monto) ──────────────────────────────────── */
body.cr-servicio-page .cr-service-hero__price .elementor-heading-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0 !important;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}
body.cr-servicio-page .cr-service-hero__price-label {
	color: var(--cr-color-primary, #c00000);
	font-family: var(--cr-font-heading, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(1.2rem, 10vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}
body.cr-servicio-page .cr-service-hero__price-value {
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-size: clamp(36px, 4.5vw, 64px);
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ── Chips de garantías (pills outline) ──────────────────────── */
body.cr-servicio-page .cr-service-hero__chips {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	padding-right: 0;
	margin-right: -0.9rem;
}
body.cr-servicio-page .cr-service-hero__chip .elementor-heading-title {
	display: inline-block;
	margin: 0 !important;
	padding: 12px 22px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif) !important;
	font-size: clamp(11px, 0.9vw, 13px) !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	white-space: nowrap;
}

body.cr-servicio-page .cr-service-hero__chip .elementor-heading-title:hover {
    border-color: var(--cr-color-primary);
    cursor: pointer;
    transition: border-color 0.4s ease;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Tablet-chico (≤768) → Mobile-small (≤600).
   Las reglas base correspondientes quedan ANTES (§1–§2). No hay @media de
   accesibilidad en este archivo.
   ═══════════════════════════════════════════════════════════════════════ */



@media (max-width: 1263px) {
    body.cr-servicio-page .cr-service-hero__chips {
        flex-direction: column !important;
        align-items: end !important;
        padding: 0;
    }
}


/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {
	/* §2 · Hero: filas top/bottom pasan a columna. El BADGE va ARRIBA del título
	   (column-reverse) y los chips en FILA al fondo. Todo a la izquierda; el
	   bloque mobile ≤767 re-centra encima sin romper esto. */
	body.cr-servicio-page .cr-service-hero__bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: clamp(24px, 4vw, 36px) !important;
	}
	body.cr-servicio-page .cr-service-hero__top {
		flex-direction: column-reverse !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
	body.cr-servicio-page .cr-service-hero__badge {
		align-self: flex-start !important;
	}

	/* Chips en FILA repartidos a lo ancho (pisa la columna forzada de ≤1263). */
	body.cr-servicio-page .cr-service-hero__chips {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}
}


/* ──────────────────────── TABLET-CHICO · max-width: 768px ─────────────── */
@media (max-width: 768px) {
	/* §2 · Hero: más opacidad en el overlay para legibilidad sobre la foto. */
	body.cr-servicio-page .cr-service-hero::before {
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.92) 0%,
			rgba(0, 0, 0, 0.8) 50%,
			rgba(0, 0, 0, 0.55) 100%
		);
	}
}


/* ───────────────────────── MOBILE · max-width: 767px ──────────────────────
   Recompone el hero como el mockup móvil: badge ARRIBA del título, la silla
   visible al medio, y abajo precio + CTAs (en fila) + chips (en fila). Solo
   toca móvil (las vistas ≥768 quedan como están). */
@media (max-width: 767px) {
	/* Overlay VERTICAL: oscurece arriba (badge+título) y abajo (precio+CTAs+chips)
	   y deja ver la silla al medio. Pisa el gradiente horizontal de desktop. */
	body.cr-servicio-page .cr-service-hero::before {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.45) 26%,
			rgba(0, 0, 0, 0.30) 52%,
			rgba(0, 0, 0, 0.88) 100%
		) !important;
	}

	/* Fila top → columna con el BADGE primero (DOM: título, badge → reverse) y
	   TODO centrado (diseño mobile "image-forward"). */
	body.cr-servicio-page .cr-service-hero__top {
		flex-direction: column-reverse !important;
		align-items: center !important;
		gap: 18px !important;
	}
	body.cr-servicio-page .cr-service-hero__badge {
		align-self: center !important;
	}

	/* Título centrado y compacto. "CON EL" pasa a su PROPIA línea (ver abajo). */
	body.cr-servicio-page .cr-service-hero__title,
	body.cr-servicio-page .cr-service-hero__title .elementor-heading-title {
		font-size: clamp(28px, 8.5vw, 44px) !important;
		text-align: center !important;
	}

	body.cr-servicio-page .cr-service-hero__title h2 span:nth-last-child(1 of .cr-section-title__solid) {
		font-size: clamp(28px, 20vw, 3rem) !important;
	}

	/* "CON EL" en su PROPIA línea (acento rojo centrado entre "TU SILLA" y
	   "MEJOR"). Pasándolo a block se mete en su renglón; ocultamos el <br> que
	   lo seguía para que no quede un renglón vacío. */
	body.cr-servicio-page .cr-service-hero__title-accent {
		display: block !important;
		margin: 0.1em 0 !important;
	}
	body.cr-servicio-page .cr-service-hero__title-accent + br {
		display: none !important;
	}

	/* Precio + CTAs ocupan todo el ancho, CENTRADOS. */
	body.cr-servicio-page .cr-service-hero__bottom {
		align-items: center !important;
	}
	body.cr-servicio-page .cr-service-hero__lead {
		width: 100% !important;
		align-items: center !important;
	}
	body.cr-servicio-page .cr-service-hero__price .elementor-heading-title {
		align-items: center !important;
	}
	body.cr-servicio-page .cr-service-hero__price-label,
	body.cr-servicio-page .cr-service-hero__price-value {
		text-align: center !important;
	}

	/* CTAs en FILA lado a lado (pisa el apilado de .cr-dual-btn ≤480 de
	   sections.css). Dos mitades 50/50, SIN el overlap -5rem de desktop. */
	body.cr-servicio-page .cr-service-hero .cr-dual-btn,
	body.cr-servicio-page .cr-service-hero .cr-dual-btn.e-con,
	body.cr-servicio-page .cr-service-hero .cr-dual-btn.e-con-inner {
		flex-direction: row !important;
		width: 100% !important;
		border-radius: 6rem !important;
	}
	body.cr-servicio-page .cr-service-hero .cr-dual-btn > .elementor-element {
		flex: 1 1 0 !important;
	}
	/* Pill unido: izquierda redondeada / derecha redondeada, sin overlap ni apilado. */
	body.cr-servicio-page .cr-service-hero .cr-dual-btn__primary.elementor-element {
		border-radius: 6rem !important;
	}
	body.cr-servicio-page .cr-service-hero .cr-dual-btn__secondary.elementor-element {
		margin-left: -2rem !important;
		margin-top: 0 !important;
		border-radius: 0 6rem 6rem 0 !important;
	}
	/* Texto/padding compactos + cada botón llena su mitad. */
	body.cr-servicio-page .cr-service-hero .cr-dual-btn .elementor-button {
		width: 100% !important;
		padding: 14px 8px !important;
		font-size: 11px !important;
		letter-spacing: 0.02em !important;
	}

	/* Chips en FILA con wrap (pisa la columna forzada de ≤1263). */
	body.cr-servicio-page .cr-service-hero__chips {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px !important;
		margin-right: 0 !important;
		width: 100% !important;
	}
	body.cr-servicio-page .cr-service-hero__chip .elementor-heading-title {
		padding: 10px 16px !important;
		font-size: 11px !important;
	}
	
	.cr-service-hero__lead {
	    padding: 0;    
	}
}


/* ─────────────────────── MOBILE-SMALL · max-width: 600px ──────────────── */
@media (max-width: 600px) {

	/* §1 · Reseñas: reducir el padding lateral del widget para ganar ancho de
	   card (el global ya aplica overflow-x: clip como red de seguridad). */
	body.cr-servicio-page .zenth-reviews {
		padding-inline: var(--cr-container-pad-mobile, 20px);
	}

	/* §2 · Hero: alto y padding más compactos en móvil (el tamaño de título y la
	   recomposición móvil viven en el bloque ≤767, arriba). */
	body.cr-servicio-page .cr-service-hero,
	body.cr-servicio-page .cr-service-hero.e-con,
	body.cr-servicio-page .cr-service-hero.e-con-full {
		min-height: 80vh !important;
		padding: clamp(2rem, 1vh, 100px) var(--cr-container-pad-mobile, 20px) clamp(32px, 5vh, 48px) !important;
	}
	
    .cr-dual-btn__secondary.elementor-element {
        margin-top: .6rem;
        margin-left: 0 !important;
    }	
    
    .cr-service-hero__bottom {
        padding: 0;
    }
}

@media (max-width: 360px) {
    
    body.cr-servicio-page .cr-service-hero__price-label {
        font-size: 1.2rem;
    }
    
    body.cr-servicio-page .cr-service-hero__chips {
        gap: 4px !important
    }
    
    body.cr-servicio-page .cr-service-hero, body.cr-servicio-page .cr-service-hero.e-con, body.cr-servicio-page .cr-service-hero.e-con-full {
        padding: clamp(2rem, 1vh, 100px) var(--cr-container-pad-mobile, 0px) clamp(32px, 5vh, 48px) !important;
    }
    
    .cr-service-hero {
        gap: 4rem;
    }
    
    .cr-service-hero__chip:last-child {
        margin-top: .6rem;
    }
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ─────────────────
   Va aparte de los @media de tamaño. La entrada GSAP del hero ya cae a un fade
   con reduced-motion (lo maneja configurador-animations.js); acá solo apagamos
   el pulso CSS del badge. */
@media (prefers-reduced-motion: reduce) {
	body.cr-servicio-page .cr-service-hero__badge .elementor-heading-title {
		animation: none !important;
	}
}