/* Cuartel del Musico - landing (front-page.php) */

:root{
	color-scheme:dark;
	--cdm-ink:#0c0c0e;
	--cdm-ink-2:#151417;
	--cdm-card:#1a1719;
	--cdm-line:rgba(255,255,255,.09);
	--cdm-paper:#f3ede4;
	--cdm-paper-dim:rgba(243,237,228,.68);
	--cdm-red:#9c1d1d;
	--cdm-red-2:#c62828;
	--cdm-red-glow:rgba(198,40,40,.35);
	--cdm-radius:18px;
	--cdm-shadow:0 20px 50px rgba(0,0,0,.45);
	--cdm-font-display:'Oswald', 'Arial Narrow', sans-serif;
	--cdm-font-body:'Manrope', system-ui, sans-serif;
}

html:has(body.cdm-landing){ overflow-x:hidden; }
.cdm-landing, .cdm-landing *{ box-sizing:border-box; min-width:0; }
.cdm-landing{
	background:var(--cdm-ink);
	color:var(--cdm-paper);
	font-family:var(--cdm-font-body);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
	width:100%;
	overflow-wrap:break-word;
}
.cdm-landing img,
.cdm-landing svg,
.cdm-landing iframe{ max-width:100%; }
.cdm-landing h1,
.cdm-landing h2,
.cdm-landing h3,
.cdm-landing h4{
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.02em;
	line-height:1.12;
	margin:0 0 .5em;
	color:#fff;
}
.cdm-landing p{ margin:0 0 1em; }
.cdm-landing a{ color:inherit; text-decoration:none; }
.cdm-landing ul{ margin:0; padding:0; list-style:none; }
.cdm-landing svg{ width:100%; height:100%; }

.cdm-kicker{
	display:inline-block;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.18em;
	font-size:.78rem;
	color:var(--cdm-red-2);
	margin-bottom:.9em;
}

/* Botones */
.cdm-btn{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	padding:.85em 1.6em;
	border-radius:999px;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:.88rem;
	font-weight:600;
	border:1px solid transparent;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
	white-space:nowrap;
}
.cdm-btn.cdm-btn--primary{
	background:linear-gradient(135deg, var(--cdm-red-2), var(--cdm-red));
	color:#fff;
	box-shadow:0 10px 30px var(--cdm-red-glow);
}
.cdm-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px var(--cdm-red-glow); }
.cdm-btn.cdm-btn--ghost{
	border-color:rgba(255,255,255,.25);
	color:#fff;
}
.cdm-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.cdm-btn.cdm-btn--light{
	background:#fff;
	color:var(--cdm-red);
	box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cdm-btn--light:hover{ transform:translateY(-2px); background:var(--cdm-paper); }
.cdm-btn.cdm-btn--whatsapp{
	background:rgba(255,255,255,.06);
	border:1px solid var(--cdm-line);
	color:#fff;
	padding:.6em 1.1em;
	font-size:.8rem;
}
.cdm-btn--whatsapp:hover{ background:rgba(255,255,255,.12); }
.cdm-btn--whatsapp svg{ width:18px; height:18px; }

/* Header */
.cdm-header{
	position:sticky;
	top:0;
	z-index:40;
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:1.5rem;
	padding:1rem clamp(1.25rem, 4vw, 3rem);
	background:rgba(12,12,14,.82);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--cdm-line);
}
.cdm-brand{ display:flex; align-items:center; gap:.75rem; justify-self:start; }
.cdm-header .cdm-btn--whatsapp{ justify-self:end; }
.cdm-mark{ width:38px; height:38px; color:var(--cdm-red-2); flex:none; }
.cdm-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.cdm-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.cdm-brand-text strong{
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.04em;
	font-size:1.05rem;
	color:#fff;
}
.cdm-brand-text em{ font-style:normal; font-size:.72rem; color:var(--cdm-paper-dim); }
.cdm-nav{ display:flex; gap:2rem; justify-self:center; }
.cdm-nav a{
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.08em;
	font-size:.82rem;
	color:var(--cdm-paper-dim);
	transition:color .15s ease;
}
.cdm-nav a:hover{ color:#fff; }
.cdm-nav a.cdm-nav-live{ display:flex; align-items:center; gap:.5em; color:#fff; }

@keyframes cdm-pulse{
	0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
	70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); }
	100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.cdm-live-dot{
	display:inline-block;
	width:7px; height:7px;
	border-radius:50%;
	background:#fff;
	flex:none;
}
.cdm-nav-live .cdm-live-dot{
	background:var(--cdm-red-2);
	box-shadow:0 0 0 0 rgba(198,40,40,.55);
	animation:cdm-pulse-red 2s infinite;
}
@keyframes cdm-pulse-red{
	0%{ box-shadow:0 0 0 0 rgba(198,40,40,.55); }
	70%{ box-shadow:0 0 0 7px rgba(198,40,40,0); }
	100%{ box-shadow:0 0 0 0 rgba(198,40,40,0); }
}

/* Hero */
.cdm-hero{
	position:relative;
	padding:clamp(4rem,12vw,7rem) clamp(1.25rem,6vw,3rem) clamp(3.5rem,8vw,5rem);
	text-align:center;
	overflow:hidden;
}
.cdm-hero-bg{
	position:absolute; inset:0;
	/* La foto queda bastante mas visible que antes: solo un oscurecido
	   parejo liviano + una sombra enfocada detras del bloque de texto (para
	   que el h1 blanco siga legible), en vez del velo casi opaco (88-94%)
	   que tenia antes y hacia que la foto de fondo se perdiera del todo. */
	background:
		radial-gradient(75% 65% at 50% 42%, rgba(12,12,14,.62), transparent 72%),
		radial-gradient(60% 55% at 50% 0%, rgba(198,40,40,.28), transparent 70%),
		radial-gradient(120% 60% at 50% 100%, rgba(156,29,29,.18), transparent 70%),
		linear-gradient(rgba(12,12,14,.42), rgba(12,12,14,.6)),
		url('img/hero-bg.jpg');
	background-size:cover;
	background-position:center;
	pointer-events:none;
}
.cdm-hero-inner{ position:relative; max-width:820px; margin:0 auto; }
.cdm-eyebrow{
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.22em;
	font-size:.78rem;
	color:var(--cdm-paper-dim);
	margin-bottom:1.4em;
	text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.cdm-hero h1{ font-size:clamp(2.3rem, 5.6vw, 4rem); text-shadow:0 4px 24px rgba(0,0,0,.55); }
.cdm-hero-inner .cdm-lead{
	max-width:640px;
	margin:1.2em auto 2em;
	color:var(--cdm-paper-dim);
	text-shadow:0 2px 16px rgba(0,0,0,.55);
	font-size:1.08rem;
}
.cdm-hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cdm-hero-actions--left{ justify-content:flex-start; }

/* Streaming (CTA hacia streaming.cuarteldelmusico.cl) */
.cdm-streaming{
	background:linear-gradient(135deg, var(--cdm-red), var(--cdm-red-2));
	padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,6vw,3rem);
	text-align:center;
}
.cdm-streaming-inner{ max-width:720px; margin:0 auto; }
.cdm-streaming-live{
	display:inline-flex;
	align-items:center;
	gap:.55em;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.18em;
	font-size:.78rem;
	color:#fff;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.35);
	border-radius:999px;
	padding:.4em 1em;
	margin-bottom:1.2em;
}
.cdm-streaming-live .cdm-live-dot{ animation:cdm-pulse 2s infinite; }
.cdm-streaming h2{ color:#fff; font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:.5em; }
.cdm-streaming p{ color:rgba(255,255,255,.9); margin-bottom:1.6em; }

/* Secciones genericas */
.cdm-servicios, .cdm-spotlight, .cdm-split, .cdm-gallery, .cdm-contacto{
	padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,6vw,3rem);
}
.cdm-section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.cdm-section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); }

/* Fachada (foto real del local, seccion previa a Contacto/mapa en la home) */
.cdm-storefront{
	position:relative;
	display:flex;
	align-items:flex-end;
	min-height:clamp(320px, 42vw, 480px);
	overflow:hidden;
}
.cdm-storefront-bg{
	position:absolute; inset:0;
	background-size:cover;
	background-position:center;
}
.cdm-storefront::before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(to top, rgba(12,12,14,.55), rgba(12,12,14,.1) 55%, rgba(12,12,14,.1));
}
/* El texto va sobre una tarjeta oscura propia (no solo el degradado de la
   foto) - la foto de la fachada tiene ventanas/fierros claros justo donde
   cae el texto y el degradado solo no alcanzaba a dar contraste parejo
   (reportado por el usuario: "el texto no se ve muy bien"). */
.cdm-storefront-inner{
	position:relative;
	max-width:640px;
	margin:0;
	padding:clamp(1.6rem,4vw,2.5rem) clamp(1.5rem,5vw,3rem);
	background:linear-gradient(100deg, rgba(12,12,14,.92) 75%, rgba(12,12,14,.75));
	backdrop-filter:blur(3px);
	border-top-right-radius:20px;
}
.cdm-storefront-inner h2{ font-size:clamp(1.6rem,3.6vw,2.3rem); }
.cdm-storefront-inner p{ color:var(--cdm-paper-dim); margin-bottom:0; }

/* Grid de servicios */
.cdm-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1.25rem;
	max-width:1180px;
	margin:0 auto;
}
.cdm-card{
	display:flex;
	flex-direction:column;
	background:linear-gradient(160deg, var(--cdm-card), var(--cdm-ink-2));
	border:1px solid var(--cdm-line);
	border-radius:var(--cdm-radius);
	padding:1.8rem 1.5rem;
	transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cdm-card:hover{
	transform:translateY(-4px);
	border-color:rgba(198,40,40,.45);
	box-shadow:var(--cdm-shadow);
}
.cdm-card-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:46px; height:46px;
	border-radius:12px;
	background:rgba(198,40,40,.14);
	color:var(--cdm-red-2);
	margin-bottom:1.1em;
}
.cdm-card-icon svg{ width:24px; height:24px; }
.cdm-card h3{ font-size:1.02rem; margin-bottom:.45em; }
.cdm-card p{ font-size:.9rem; color:var(--cdm-paper-dim); margin-bottom:0; }
.cdm-card-link{
	display:inline-flex;
	align-items:center;
	gap:.4em;
	margin-top:auto;
	padding-top:1.1em;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.05em;
	font-size:.78rem;
	color:var(--cdm-red-2);
	transition:gap .15s ease, color .15s ease;
}
.cdm-card-link:hover{ gap:.6em; color:#fff; }

/* Link de texto suelto (columnas de taller/clases, footer sin mapa) */
.cdm-text-link{
	display:inline-flex;
	align-items:center;
	gap:.4em;
	margin-top:.4em;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.05em;
	font-size:.82rem;
	color:var(--cdm-red-2);
	transition:gap .15s ease, color .15s ease;
}
.cdm-text-link:hover{ gap:.6em; color:#fff; }

/* Link "volver" en la parte superior de una pagina de servicio */
.cdm-page-intro{
	max-width:1180px;
	margin:0 auto;
	padding:2rem clamp(1.25rem,6vw,3rem) 0;
}
.cdm-back-link{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:.8rem;
	color:var(--cdm-paper-dim);
	transition:color .15s ease;
}
.cdm-back-link:hover{ color:#fff; }

/* Spotlight (salas/estudio) */
.cdm-spotlight{
	max-width:1180px;
	margin:0 auto;
	background:var(--cdm-ink-2);
	border:1px solid var(--cdm-line);
	border-radius:24px;
	padding:clamp(2rem,5vw,3.5rem);
}
.cdm-spotlight-top{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:3rem;
	align-items:center;
}
.cdm-spotlight-text h2{ font-size:clamp(1.7rem,3.6vw,2.3rem); }
.cdm-spotlight-panel{
	position:relative;
	aspect-ratio:4/5;
	max-width:360px;
	margin:0 auto;
	border-radius:20px;
	border:1px solid var(--cdm-line);
	overflow:hidden;
	box-shadow:var(--cdm-shadow);
}
.cdm-spotlight-panel img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
}
.cdm-panel-badge{
	position:absolute;
	right:.9rem; bottom:.9rem;
	width:52px; height:52px;
	border-radius:50%;
	background:rgba(12,12,14,.55);
	backdrop-filter:blur(2px);
	border:1px solid rgba(255,255,255,.18);
	display:flex;
	align-items:center;
	justify-content:center;
}
.cdm-panel-badge img{ width:70%; height:70%; object-fit:contain; opacity:.92; }

.cdm-spotlight-photos{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1.1rem;
	margin-top:2.5rem;
}
.cdm-spotlight-photo{
	display:block;
	aspect-ratio:4/3;
	border-radius:14px;
	overflow:hidden;
	border:1px solid var(--cdm-line);
}
.cdm-spotlight-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.cdm-check-list{ margin:1.2em 0 1.6em; display:flex; flex-direction:column; gap:.6em; }
.cdm-check-list li{
	position:relative;
	padding-left:1.6em;
	color:var(--cdm-paper-dim);
	font-size:.96rem;
}
.cdm-check-list li::before{
	content:"";
	position:absolute; left:0; top:.5em;
	width:9px; height:9px;
	border-radius:50%;
	background:var(--cdm-red-2);
}
.cdm-check-list + .cdm-btn{ margin-top:.6em; }

/* Split (taller / clases) */
.cdm-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(2rem,5vw,4rem);
	max-width:1180px;
	margin:0 auto;
}
.cdm-split-photo{
	display:block;
	aspect-ratio:1000/680;
	border-radius:16px;
	overflow:hidden;
	border:1px solid var(--cdm-line);
	margin-bottom:1.4em;
}
.cdm-split-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cdm-split-col h2{ font-size:clamp(1.6rem,3.4vw,2.1rem); }
.cdm-pill-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1em; }
.cdm-pill-list span{
	border:1px solid var(--cdm-line);
	border-radius:999px;
	padding:.5em 1.1em;
	font-family:var(--cdm-font-display);
	text-transform:uppercase;
	letter-spacing:.05em;
	font-size:.8rem;
	color:var(--cdm-paper-dim);
}

/* Galeria */
.cdm-gallery-wrap{
	position:relative;
	max-width:1180px;
	margin:0 auto;
}
.cdm-gallery-track{
	display:flex;
	gap:1.25rem;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding-bottom:.5rem;
	margin:0 -.25rem;
	padding-left:.25rem;
	padding-right:.25rem;
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.cdm-gallery-track::-webkit-scrollbar{ display:none; }
.cdm-gallery-item{
	flex:0 0 auto;
	width:clamp(230px, 32vw, 340px);
	aspect-ratio:1000/750;
	border-radius:16px;
	overflow:hidden;
	border:1px solid var(--cdm-line);
	scroll-snap-align:start;
	margin:0;
}
.cdm-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.cdm-gallery-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:50%;
	translate:0 -50%;
	width:44px; height:44px;
	border-radius:50%;
	border:1px solid var(--cdm-line);
	background:rgba(12,12,14,.72);
	backdrop-filter:blur(6px);
	color:#fff;
	font-size:1.6rem;
	line-height:1;
	cursor:pointer;
	z-index:2;
}
.cdm-gallery-nav:hover{ background:var(--cdm-red-2); border-color:var(--cdm-red-2); }
.cdm-gallery-prev{ left:-14px; }
.cdm-gallery-next{ right:-14px; }
@media (max-width:768px){
	.cdm-gallery-nav{ display:none; }
}

/* Contacto */
.cdm-contacto{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(2rem,5vw,4rem);
	max-width:1180px;
	margin:0 auto;
	align-items:stretch;
}
.cdm-info-block{ margin-bottom:1.5em; }
.cdm-info-block h4{
	font-size:.82rem;
	letter-spacing:.14em;
	color:var(--cdm-paper-dim);
	margin-bottom:.4em;
}
.cdm-info-block p{ font-size:1.02rem; color:#fff; }
.cdm-info-block a:hover{ color:var(--cdm-red-2); }
.cdm-social{ display:flex; gap:.9rem; margin-top:1.6em; }
.cdm-social a{
	width:38px; height:38px;
	display:flex; align-items:center; justify-content:center;
	border:1px solid var(--cdm-line);
	border-radius:50%;
	color:var(--cdm-paper-dim);
	transition:color .15s ease, border-color .15s ease;
}
.cdm-social a:hover{ color:#fff; border-color:#fff; }
.cdm-social svg{ width:17px; height:17px; }
.cdm-map{
	border-radius:var(--cdm-radius);
	overflow:hidden;
	border:1px solid var(--cdm-line);
	min-height:340px;
	filter:grayscale(.25) contrast(1.05);
}
.cdm-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* Footer */
.cdm-footer{
	padding:2rem clamp(1.25rem,6vw,3rem);
	text-align:center;
	border-top:1px solid var(--cdm-line);
	color:var(--cdm-paper-dim);
	font-size:.85rem;
}

/* Boton flotante de WhatsApp (reemplaza el "subir arriba" generico de Astra,
   que se desactiva por Customizer - ver PROYECTO.md). Mismo lenguaje visual
   que el resto de los botones: circulo rojo degradado + halo, no el verde
   generico de WhatsApp, para no romper la paleta negro/rojo del sitio. */
.cdm-whatsapp-float{
	position:fixed;
	right:clamp(1rem,3vw,1.8rem);
	bottom:clamp(1rem,3vw,1.8rem);
	z-index:60;
	width:56px; height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:linear-gradient(135deg, var(--cdm-red-2), var(--cdm-red));
	color:#fff;
	box-shadow:0 10px 28px var(--cdm-red-glow);
	transition:transform .18s ease, box-shadow .18s ease;
}
.cdm-whatsapp-float svg{ width:26px; height:26px; }
.cdm-whatsapp-float:hover{ transform:translateY(-3px); box-shadow:0 14px 34px var(--cdm-red-glow); }
@media (max-width:560px){
	.cdm-whatsapp-float{ width:50px; height:50px; }
	.cdm-whatsapp-float svg{ width:23px; height:23px; }
}

/* Responsive */
@media (max-width:980px){
	.cdm-grid{ grid-template-columns:repeat(2, 1fr); }
	.cdm-spotlight-top{ grid-template-columns:1fr; text-align:center; }
	.cdm-spotlight-top .cdm-hero-actions{ justify-content:center; }
	.cdm-spotlight-top .cdm-pill-list{ justify-content:center; }
	.cdm-check-list{ align-items:center; }
	.cdm-check-list li{ padding-left:0; }
	.cdm-check-list li::before{ display:none; }
	.cdm-split{ grid-template-columns:1fr; }
	.cdm-contacto{ grid-template-columns:1fr; }
	.cdm-nav{ display:none; }
}
@media (max-width:560px){
	.cdm-grid{ grid-template-columns:1fr; }
	.cdm-spotlight-photos{ grid-template-columns:1fr; }
	.cdm-header{ padding:.85rem 1rem; gap:.75rem; }
	.cdm-brand-text em{ display:none; }
	.cdm-brand-text strong{ font-size:.9rem; }
	.cdm-btn--whatsapp .cdm-btn-label{ display:none; }
	.cdm-btn--whatsapp{ padding:.6em; }
}