/* ==========================================================================
   Vectiss Rental – Single Vehículo
   Premium design · Airbnb/Booking.com quality
   Todos los selectores van prefijados con  body .vr-sv-main  y usan
   !important  en propiedades clave para sobrescribir Elementor.
   ========================================================================== */

/* ── Box-sizing global dentro del wrapper */
body .vr-sv-main *,
body .vr-sv-main *::before,
body .vr-sv-main *::after {
	box-sizing: border-box !important;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */
body .vr-sv-main {
	font-family: var(--vr-fuente, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif) !important;
	max-width:   1140px !important;
	margin:      0 auto !important;
	padding:     48px 28px 96px !important;
	color:       var(--vr-texto, #0f172a) !important;
	background:  var(--vr-fondo, #f8fafc) !important;
}

/* ==========================================================================
   HERO — dos columnas 1.2fr / 1fr
   ========================================================================== */
body .vr-sv-main .vr-sv-hero {
	display:               grid !important;
	grid-template-columns: 1.2fr 1fr !important;
	gap:                   48px !important;
	align-items:           start !important;
	margin-bottom:         60px !important;
}

/* ── Columna imagen ── */
body .vr-sv-main .vr-sv-hero-imagen {
	position:      relative !important;
	border-radius: 20px !important;
	overflow:      hidden !important;
	box-shadow:    var(--vr-sombra-lg, 0 16px 40px rgba(0, 0, 0, .16)) !important;
}

body .vr-sv-main .vr-sv-foto {
	width:       100% !important;
	height:      420px !important;
	object-fit:  cover !important;
	display:     block !important;
	transition:  transform .45s cubic-bezier(.4, 0, .2, 1) !important;
}

body .vr-sv-main .vr-sv-hero-imagen:hover .vr-sv-foto {
	transform: scale(1.04) !important;
}

body .vr-sv-main .vr-sv-foto-placeholder {
	width:           100% !important;
	height:          420px !important;
	background:      var(--vr-fondo-card, #ffffff) !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:           var(--vr-texto-leve, #94a3b8) !important;
}

/* Badge categoría encima de la imagen */
body .vr-sv-main .vr-sv-badge-cat {
	position:                absolute !important;
	top:                     16px !important;
	left:                    16px !important;
	z-index:                 2 !important;
	background:              rgba(15, 23, 42, .75) !important;
	color:                   #ffffff !important;
	font-size:               11px !important;
	font-weight:             700 !important;
	letter-spacing:          .06em !important;
	text-transform:          uppercase !important;
	padding:                 5px 14px !important;
	border-radius:           20px !important;
	backdrop-filter:         blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	line-height:             1.6 !important;
}

/* ── Columna info lateral ── */
body .vr-sv-main .vr-sv-hero-info {
	display:        flex !important;
	flex-direction: column !important;
	gap:            0 !important;
	padding-top:    8px !important;
}

/* Etiqueta de categoría (texto sobre el título) */
body .vr-sv-main .vr-sv-cat-label {
	display:        inline-block !important;
	font-size:      12px !important;
	font-weight:    700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	color:          var(--vr-primario, #2563eb) !important;
	margin-bottom:  10px !important;
}

/* Título */
body .vr-sv-main .vr-sv-titulo {
	font-size:     30px !important;
	font-weight:   800 !important;
	color:         var(--vr-texto, #0f172a) !important;
	margin:        0 0 20px !important;
	line-height:   1.18 !important;
}

/* ── Precio destacado ── */
body .vr-sv-main .vr-sv-precio-dest {
	display:        flex !important;
	align-items:    baseline !important;
	gap:            6px !important;
	margin-bottom:  24px !important;
}

body .vr-sv-main .vr-sv-precio-monto {
	font-size:   42px !important;
	font-weight: 900 !important;
	color:       var(--vr-primario, #2563eb) !important;
	line-height: 1 !important;
}

body .vr-sv-main .vr-sv-precio-por {
	font-size:   16px !important;
	color:       var(--vr-texto-suave, #64748b) !important;
	font-weight: 400 !important;
}

/* ==========================================================================
   SPECS RÁPIDAS — chips pill
   ========================================================================== */
body .vr-sv-main .vr-sv-specs-rapidas {
	display:       flex !important;
	flex-wrap:     wrap !important;
	gap:           8px !important;
	margin-bottom: 28px !important;
}

body .vr-sv-main .vr-sv-chip {
	display:       inline-flex !important;
	align-items:   center !important;
	gap:           5px !important;
	font-size:     13px !important;
	font-weight:   500 !important;
	color:         var(--vr-texto-suave, #64748b) !important;
	background:    var(--vr-fondo-card, #ffffff) !important;
	border:        1px solid var(--vr-borde, #e2e8f0) !important;
	padding:       6px 14px !important;
	border-radius: 20px !important;
	transition:    border-color .15s ease !important;
	line-height:   1.4 !important;
}

body .vr-sv-main .vr-sv-chip:hover {
	border-color: var(--vr-primario, #2563eb) !important;
}

body .vr-sv-main .vr-sv-chip svg {
	color:       var(--vr-texto-leve, #94a3b8) !important;
	flex-shrink: 0 !important;
}

/* ── Grupo de CTAs en la columna de info ── */
body .vr-sv-main .vr-sv-cta-group {
	display:        flex !important;
	gap:            12px !important;
	flex-direction: column !important;
}

body .vr-sv-main .vr-sv-cta {
	justify-content: center !important;
	width:           100% !important;
}

/* ==========================================================================
   ARTÍCULO — contenedor de las secciones de detalle
   ========================================================================== */
body .vr-sv-main .vr-sv-articulo {
	display:        flex !important;
	flex-direction: column !important;
}

/* ==========================================================================
   SECCIONES DE CONTENIDO
   ========================================================================== */
body .vr-sv-main .vr-sv-seccion {
	background:    var(--vr-fondo-card, #ffffff) !important;
	border:        1px solid var(--vr-borde, #e2e8f0) !important;
	border-radius: 16px !important;
	padding:       28px !important;
	margin-bottom: 24px !important;
}

/* Subtítulos de sección */
body .vr-sv-main .vr-sv-subtitulo {
	font-size:     18px !important;
	font-weight:   700 !important;
	color:         var(--vr-texto, #0f172a) !important;
	margin:        0 0 20px !important;
	padding-bottom: 14px !important;
	border-bottom: 2px solid var(--vr-borde, #e2e8f0) !important;
	line-height:   1.3 !important;
}

/* ==========================================================================
   SPECS COMPLETAS — grid
   ========================================================================== */
body .vr-sv-main .vr-sv-specs-grid {
	display:               grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap:                   12px !important;
}

body .vr-sv-main .vr-sv-spec-item {
	display:       flex !important;
	align-items:   center !important;
	gap:           12px !important;
	background:    var(--vr-fondo, #f8fafc) !important;
	border:        1px solid var(--vr-borde, #e2e8f0) !important;
	border-radius: 12px !important;
	padding:       14px 16px !important;
	transition:    border-color .15s ease !important;
}

body .vr-sv-main .vr-sv-spec-item:hover {
	border-color: var(--vr-primario, #2563eb) !important;
}

/* Icono de spec: círculo de 40px con fondo alfa primario */
body .vr-sv-main .vr-sv-spec-icono {
	width:           40px !important;
	height:          40px !important;
	background:      var(--vr-primario-alfa, rgba(37, 99, 235, .12)) !important;
	border-radius:   50% !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;
	color:           var(--vr-primario, #2563eb) !important;
}

body .vr-sv-main .vr-sv-spec-texto {
	display:        flex !important;
	flex-direction: column !important;
	gap:            2px !important;
	min-width:      0 !important;
}

body .vr-sv-main .vr-sv-spec-label {
	font-size:      11px !important;
	color:          var(--vr-texto-leve, #94a3b8) !important;
	font-weight:    600 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}

body .vr-sv-main .vr-sv-spec-valor {
	font-size:     14px !important;
	font-weight:   600 !important;
	color:         var(--vr-texto, #0f172a) !important;
	white-space:   nowrap !important;
	overflow:      hidden !important;
	text-overflow: ellipsis !important;
}

/* ==========================================================================
   TARIFAS
   ========================================================================== */
body .vr-sv-main .vr-sv-tarifas-grid {
	display:               grid !important;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
	gap:                   12px !important;
}

body .vr-sv-main .vr-sv-tarifa-card {
	background:    var(--vr-fondo, #f8fafc) !important;
	border:        1.5px solid var(--vr-borde, #e2e8f0) !important;
	border-radius: 12px !important;
	padding:       20px 16px !important;
	text-align:    center !important;
	transition:    border-color .15s ease, box-shadow .15s ease !important;
}

body .vr-sv-main .vr-sv-tarifa-card:hover {
	border-color: var(--vr-primario, #2563eb) !important;
	box-shadow:   0 4px 14px var(--vr-primario-alfa, rgba(37, 99, 235, .12)) !important;
}

body .vr-sv-main .vr-sv-tarifa-periodo {
	display:        block !important;
	font-size:      11px !important;
	color:          var(--vr-texto-suave, #64748b) !important;
	font-weight:    700 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	margin-bottom:  10px !important;
}

body .vr-sv-main .vr-sv-tarifa-precio {
	display:     block !important;
	font-size:   24px !important;
	font-weight: 900 !important;
	color:       var(--vr-primario, #2563eb) !important;
	line-height: 1.1 !important;
}

/* ==========================================================================
   TEXTO DE CUERPO / DESCRIPCIÓN
   ========================================================================== */
body .vr-sv-main .vr-sv-texto-cuerpo {
	font-size:   15px !important;
	line-height: 1.8 !important;
	color:       var(--vr-texto-suave, #64748b) !important;
}

body .vr-sv-main .vr-sv-texto-cuerpo p {
	margin: 0 0 16px !important;
}

body .vr-sv-main .vr-sv-texto-cuerpo p:last-child {
	margin-bottom: 0 !important;
}

body .vr-sv-main .vr-sv-texto-cuerpo h2,
body .vr-sv-main .vr-sv-texto-cuerpo h3 {
	color:       var(--vr-texto, #0f172a) !important;
	font-weight: 700 !important;
	margin:      24px 0 10px !important;
}

body .vr-sv-main .vr-sv-texto-cuerpo ul,
body .vr-sv-main .vr-sv-texto-cuerpo ol {
	padding-left: 20px !important;
	margin:       0 0 16px !important;
}

body .vr-sv-main .vr-sv-texto-cuerpo li {
	margin-bottom: 6px !important;
}

/* ==========================================================================
   FAQ ACORDEÓN
   ========================================================================== */
body .vr-sv-main .vr-sv-faq {
	display:        flex !important;
	flex-direction: column !important;
	gap:            8px !important;
}

body .vr-sv-main .vr-faq-acordeon {
	background:    var(--vr-fondo-card, #ffffff) !important;
	border:        1px solid var(--vr-borde, #e2e8f0) !important;
	border-radius: 12px !important;
	overflow:      hidden !important;
	transition:    box-shadow .18s ease !important;
}

body .vr-sv-main .vr-faq-acordeon:has(.vr-faq-btn[aria-expanded="true"]) {
	border-color: var(--vr-primario, #2563eb) !important;
	box-shadow:   0 4px 14px var(--vr-primario-alfa, rgba(37, 99, 235, .1)) !important;
}

body .vr-sv-main .vr-faq-btn {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	width:           100% !important;
	background:      transparent !important;
	border:          none !important;
	padding:         18px 20px !important;
	text-align:      left !important;
	cursor:          pointer !important;
	font-family:     var(--vr-fuente, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
	font-size:       15px !important;
	font-weight:     600 !important;
	color:           var(--vr-texto, #0f172a) !important;
	gap:             12px !important;
	transition:      color .15s ease !important;
}

body .vr-sv-main .vr-faq-btn:hover {
	color: var(--vr-primario, #2563eb) !important;
}

body .vr-sv-main .vr-faq-btn[aria-expanded="true"] {
	color: var(--vr-primario, #2563eb) !important;
}

body .vr-sv-main .vr-faq-btn span {
	flex: 1 !important;
}

body .vr-sv-main .vr-faq-icono {
	flex-shrink: 0 !important;
	transition:  transform .25s cubic-bezier(.4, 0, .2, 1) !important;
	color:       var(--vr-texto-leve, #94a3b8) !important;
}

body .vr-sv-main .vr-faq-btn[aria-expanded="true"] .vr-faq-icono {
	transform: rotate(180deg) !important;
}

body .vr-sv-main .vr-faq-respuesta {
	padding:    0 20px 18px !important;
	font-size:  14px !important;
	line-height: 1.7 !important;
	color:      var(--vr-texto-suave, #64748b) !important;
	animation:  vr-faq-open .22s ease-out !important;
}

body .vr-sv-main .vr-faq-respuesta[hidden] {
	display: none !important;
}

body .vr-sv-main .vr-faq-respuesta p {
	margin: 0 !important;
}

@keyframes vr-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   CTA FOOTER
   ========================================================================== */
body .vr-sv-main .vr-sv-cta-footer {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	gap:             24px !important;
	background:      var(--vr-primario-alfa, rgba(37, 99, 235, .12)) !important;
	border:          1.5px solid var(--vr-primario, #2563eb) !important;
	border-radius:   20px !important;
	padding:         32px 40px !important;
	margin-top:      8px !important;
}

body .vr-sv-main .vr-sv-cta-texto h3 {
	font-size:   22px !important;
	font-weight: 800 !important;
	color:       var(--vr-texto, #0f172a) !important;
	margin:      0 0 6px !important;
}

body .vr-sv-main .vr-sv-cta-texto p {
	font-size: 14px !important;
	color:     var(--vr-texto-suave, #64748b) !important;
	margin:    0 !important;
}

/* ==========================================================================
   DARK MODE — .vr-sv-main[data-vr-theme="dark"]
   ========================================================================== */
body .vr-sv-main[data-vr-theme="dark"] {
	--vr-fondo:       #0f172a !important;
	--vr-fondo-card:  #1e293b !important;
	--vr-borde:       #334155 !important;
	--vr-texto:       #f1f5f9 !important;
	--vr-texto-suave: #94a3b8 !important;
	--vr-texto-leve:  #64748b !important;
	--vr-sombra:      0 2px 8px  rgba(0, 0, 0, .30) !important;
	--vr-sombra-md:   0 8px 24px rgba(0, 0, 0, .40) !important;
	--vr-sombra-lg:   0 16px 40px rgba(0, 0, 0, .50) !important;
}

/* Re-aplicar colores de fondo/texto al contenedor en dark */
body .vr-sv-main[data-vr-theme="dark"] {
	background: var(--vr-fondo) !important;
	color:      var(--vr-texto) !important;
}

/* ==========================================================================
   RESPONSIVE — 900px: apila el hero
   ========================================================================== */
@media (max-width: 900px) {
	body .vr-sv-main .vr-sv-hero {
		grid-template-columns: 1fr !important;
		gap:                   28px !important;
	}

	body .vr-sv-main .vr-sv-foto,
	body .vr-sv-main .vr-sv-foto-placeholder {
		height: 300px !important;
	}

	body .vr-sv-main .vr-sv-titulo {
		font-size: 26px !important;
	}

	body .vr-sv-main .vr-sv-precio-monto {
		font-size: 34px !important;
	}

	body .vr-sv-main {
		padding: 32px 20px 72px !important;
	}
}

/* ==========================================================================
   RESPONSIVE — 600px: compacto
   ========================================================================== */
@media (max-width: 600px) {
	body .vr-sv-main {
		padding: 24px 16px 60px !important;
	}

	body .vr-sv-main .vr-sv-seccion {
		padding: 20px 18px !important;
	}

	body .vr-sv-main .vr-sv-foto,
	body .vr-sv-main .vr-sv-foto-placeholder {
		height: 220px !important;
	}

	body .vr-sv-main .vr-sv-titulo {
		font-size: 22px !important;
	}

	body .vr-sv-main .vr-sv-precio-monto {
		font-size: 30px !important;
	}

	body .vr-sv-main .vr-sv-specs-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	body .vr-sv-main .vr-sv-tarifas-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	body .vr-sv-main .vr-sv-cta-footer {
		flex-direction: column !important;
		text-align:     center !important;
		padding:        24px 20px !important;
	}

	body .vr-sv-main .vr-sv-cta-footer .vectiss-btn {
		width:           100% !important;
		justify-content: center !important;
	}
}

/* ── Extra pequeño: 400px */
@media (max-width: 400px) {
	body .vr-sv-main .vr-sv-specs-grid {
		grid-template-columns: 1fr !important;
	}

	body .vr-sv-main .vr-sv-tarifas-grid {
		grid-template-columns: 1fr !important;
	}
}