/* =========================================================
   WOW! MAKER · premium.css
   Tema "taller de autor": tinta casi negra, abedul y latón,
   serif editorial en titulares, líneas finas en vez de píldoras.
   Se carga el último y sobrescribe base/components/landing/pop.
   ========================================================= */
:root {
  --azul: #E9DCC6;          /* titulares y enlaces → abedul */
  --azul-700: #FFFFFF;
  --azul-900: #0A0D11;      /* secciones oscuras */
  --abedul: #1C2028;        /* fondos de foto */
  --abedul-2: #232833;
  --veta: #8E877C;
  --crema: #0E1116;         /* fondo de página */
  --blanco: #161A21;        /* superficies */
  --tinta: #CFC6B8;         /* texto */
  --tinta-suave: #8E877C;
  --linea: rgba(233,220,198,.14);
  --laton: #C8A46A;
  --grad-wow: linear-gradient(160deg, rgba(200,164,106,.16), rgba(200,164,106,0) 70%);
  --f-titular: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 2px; --radio-s: 2px;
  --sombra: none; --sombra-l: 0 30px 60px -30px rgba(0,0,0,.6);
  color-scheme: dark;
}
body { background: var(--crema); color: var(--tinta); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; line-height: 1.04; color: var(--azul); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
strong { color: var(--azul); font-weight: 600; }
a { color: var(--azul); }
a:hover { color: #fff; }
::selection { background: var(--laton); color: var(--crema); }
:focus-visible { outline-color: var(--laton); }
.eyebrow { color: var(--laton); font-size: .72rem; letter-spacing: .32em; font-weight: 600; }
em { font-style: italic; }

/* Botones */
.btn { border-radius: 2px !important; box-shadow: none !important; font-family: var(--f-texto) !important; font-weight: 600 !important; letter-spacing: .02em; transform: none !important; }
.btn--primario, .btn--wow { background: var(--azul) !important; color: var(--crema) !important; border: 1px solid var(--azul) !important; }
.btn--primario:hover, .btn--wow:hover { background: #fff !important; border-color: #fff !important; color: var(--crema) !important; }
.btn--borde, .btn--borde-claro { background: transparent !important; color: var(--azul) !important; border: 1px solid rgba(233,220,198,.45) !important; }
.btn--borde:hover, .btn--borde-claro:hover { border-color: var(--azul) !important; background: rgba(233,220,198,.06) !important; }
.btn--whatsapp { background: #1E6B47 !important; color: #fff !important; border: 1px solid #1E6B47 !important; }
.btn--whatsapp:hover { background: #24805A !important; }

/* Cabecera y pie */
.site-header { background: rgba(14,17,22,.86); border-bottom: 1px solid var(--linea); }
.nav a { color: var(--azul); opacity: .85; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: #fff; }
.nav a[aria-current="page"] { text-decoration-color: var(--laton); }
.nav .btn { opacity: 1; }
.nav-toggle { color: var(--azul); }
@media (max-width: 900px) { .nav { background: var(--crema) !important; border-bottom: 1px solid var(--linea); } }
.site-footer { background: var(--azul-900); border-top: 1px solid var(--linea); color: var(--tinta-suave); }
.site-footer h2 { color: var(--laton); font-family: var(--f-texto); font-weight: 600; font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; }
.site-footer a { color: var(--tinta); }
.footer__bottom { border-top: 1px solid var(--linea); }
.mobile-cta { background: rgba(14,17,22,.94); border-top: 1px solid var(--linea); }
.breadcrumb, .breadcrumb a { color: var(--tinta-suave); }

/* Hero de páginas interiores */
.hero::before { display: none !important; }
.hero h1 { color: var(--azul); font-size: clamp(2.6rem, 6vw, 5rem); }
.hero h1 .hl { background: none !important; color: #F6D0A0; font-style: italic; padding: 0; }
.hero__lead { color: var(--tinta); }
.hero__badges li { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; color: var(--tinta-suave); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; padding: 10px 14px 0 0; }
.hero-foto img, .hero-video video { border-radius: 2px; }
.hero-foto__a, .hero-foto__b { transform: none !important; }
.hero-foto__b { border-color: var(--crema) !important; }
.hero-foto__tag { background: var(--laton) !important; color: var(--crema) !important; border-radius: 2px !important; transform: none !important; font-family: var(--f-texto) !important; font-weight: 600 !important; box-shadow: none !important; }
.hero-foto__tag b { color: var(--crema) !important; }

/* Secciones */
.section--blanco { background: var(--blanco); }
.section--abedul { background: #12161C; }
.section--oscuro { background: var(--azul-900); }
.section--wow { background: var(--blanco); border-top: 1px solid var(--linea); }
.section__head p { color: var(--tinta); }
.turn { background: var(--blanco) !important; border-block: 1px solid var(--linea); }
.turn p, .turn p span { color: var(--azul) !important; font-weight: 400; }
.turn p span { color: #F6D0A0 !important; font-style: italic; }
.trustbar { background: var(--blanco); border-block: 1px solid var(--linea); }
.trustbar li { font-family: var(--f-texto); font-weight: 500; color: var(--tinta); }
.trustbar li::before { color: var(--laton); }

/* Tarjetas y bloques */
.card, .pain, .service, .deadline__item, .stat, .calc, .scene, .review, .loop li, .bubble {
  background: var(--blanco) !important; border: 1px solid var(--linea) !important; border-radius: 2px !important; box-shadow: none !important; color: var(--tinta) !important; transform: none !important;
}
.card__icon { background: rgba(200,164,106,.12) !important; color: var(--laton) !important; border-radius: 2px !important; }
.pain__num, .stat b, .price-tag b, .deadline__days, .calc__row--total b, .loop b { color: var(--azul) !important; font-family: var(--f-titular) !important; font-weight: 400 !important; }
.deadline__days span { color: var(--laton) !important; font-family: var(--f-texto) !important; }
.price-tag { background: transparent !important; border: 1px solid var(--linea) !important; border-radius: 2px !important; color: var(--tinta) !important; }
.checks li::before, .steps li::before { color: var(--laton) !important; border-color: var(--laton) !important; background: transparent !important; }
.steps h3 { font-size: 1.6rem; }
.review__name { color: var(--azul); }
.review__stars { color: var(--laton); }
.faq details { border-color: var(--linea) !important; background: transparent !important; }
.faq summary { color: var(--azul); font-family: var(--f-texto); font-weight: 600; }
.faq summary::after { color: var(--laton); }
.timer::before { background: var(--crema); }
.timer { background: conic-gradient(var(--laton) 0 50%, rgba(233,220,198,.1) 50% 100%); }
.timer b { color: var(--azul); font-family: var(--f-titular); font-weight: 400; }
.material-swatch { filter: saturate(.9); }
.split__media img, .service__media img { border-radius: 2px; }
.service__media { background: var(--abedul) !important; }
.service__price, .service__link { color: var(--laton); font-family: var(--f-texto); font-weight: 600; }

/* Bento / pack */
.bento__card { border-radius: 2px !important; border: 1px solid var(--linea); background: var(--blanco) !important; color: var(--tinta) !important; }
.bento__card:hover { transform: none !important; border-color: var(--laton); }
.bento__big { font-family: var(--f-titular) !important; font-weight: 400 !important; letter-spacing: -.02em !important; color: var(--azul) !important; text-shadow: none !important; }
.bento__kicker { color: var(--laton) !important; font-weight: 600; font-size: .72rem; }
.bento__go { color: var(--laton) !important; font-family: var(--f-texto) !important; font-weight: 600 !important; }
.bento__deco { display: none !important; }
.bento__card.is-current { outline: 1px solid var(--laton); outline-offset: -1px; }
.pack__here { background: var(--laton) !important; color: var(--crema) !important; border-radius: 2px !important; font-family: var(--f-texto) !important; font-weight: 600 !important; }

/* Galerías */
.obra__foto { border-radius: 2px !important; background: var(--abedul) !important; }
.obra figcaption { border-top: 1px solid var(--linea); padding-top: 12px; flex-direction: row !important; justify-content: space-between; gap: 16px; }
.obra figcaption b { color: var(--azul) !important; font-family: var(--f-texto) !important; font-weight: 600 !important; font-size: .9rem !important; }
.obra figcaption span { text-align: right; }

/* Formulario */
.quote__intro h2 { color: var(--azul); }
.form { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.field label, .pill-group legend { color: var(--tinta); font-weight: 600; }
.field input, .field textarea { background: var(--crema) !important; border: 1px solid var(--linea) !important; border-radius: 2px !important; color: var(--azul) !important; }
.field input:focus, .field textarea:focus { border-color: var(--laton) !important; box-shadow: none !important; }
.pill-check span { background: transparent !important; border: 1px solid var(--linea) !important; border-radius: 2px !important; color: var(--tinta) !important; box-shadow: none !important; }
.pill-check input:checked + span { background: var(--laton) !important; border-color: var(--laton) !important; color: var(--crema) !important; }
.form__legal, .form__msg { color: var(--tinta-suave); }

/* Franja de vídeo de la portada clásica */
.laser-band::after { background: linear-gradient(90deg, rgba(14,17,22,.94) 0%, rgba(14,17,22,.78) 42%, rgba(14,17,22,.1) 78%, rgba(14,17,22,0) 100%) !important; }
.laser-band { background: var(--crema); }
.laser-band__eyebrow { color: var(--laton) !important; }

/* Legal */
.legal h1, .legal h2 { color: var(--azul); }

/* Cinta: sin inclinación ni colores de feria */
.marquee { transform: none !important; background: var(--blanco) !important; border-block: 1px solid var(--linea) !important; box-shadow: none !important; margin: 0 !important; }
.marquee__track span { font-family: var(--f-titular) !important; font-weight: 400 !important; color: var(--azul) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: clamp(1.4rem, 2.6vw, 2rem) !important; }
.marquee__track i { color: var(--laton) !important; }
.section--oscuro .eyebrow, .pain li::marker, .pain__num { color: var(--laton) !important; }
.pain__num { font-family: var(--f-texto) !important; font-size: .72rem !important; letter-spacing: .28em; }
.hero__badges li { display: inline-flex; align-items: center; gap: 8px; }
.hero__badges li::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--laton); transform: rotate(45deg); }

/* Fotos: esquinas redondeadas y bordes que se funden con el fondo */
.pieza__foto, .obra__foto, .hero-foto img, .hero-video video, .grabado video, .split__media img, .service__media {
  border-radius: 18px !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
  box-shadow: none !important;
}
.pieza__foto img, .obra__foto img { border-radius: 0 !important; }
.hero-foto__b { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 14px !important; }
.pieza figcaption, .obra figcaption { border-top: 0 !important; }

.obras--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 520px) { .obras--2 { grid-template-columns: 1fr; } }

/* Familias (páginas interiores) */
.familias { display: grid; gap: clamp(48px, 6vw, 80px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.familia { grid-column: 1 / -1; display: grid; gap: 22px; }
.familia--half { grid-column: auto; }
.familia__head { border-top: 1px solid var(--linea); padding-top: 18px; }
.familia__tag { display: block; font: 600 .72rem/1 var(--f-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--laton); }
.familia__head h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: .5rem 0 .3rem; }
.familia--graffiti .familia__head h3 { font-style: italic; color: #F6D0A0; }
.familia__head p { margin: 0; max-width: 40rem; color: var(--tinta); }
.familia__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.familia--n2 .familia__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.familia--half .familia__grid { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
@media (max-width: 760px) {
  .familias { grid-template-columns: 1fr; }
  .familia--half { grid-column: 1 / -1; }
  .familia__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familia--n3 .familia__grid > :first-child { grid-column: 1 / -1; }
  .familia--half .familia__grid { max-width: none; }
}
/* Familia Arcade */
.familia--n4 .familia__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.familia--arcade .familia__head h3 { color:#7FE3F0; }
@media (max-width:760px){ .familia--n4 .familia__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:760px){ .familia .obra figcaption { display:flex; flex-direction:column !important; align-items:flex-start; gap:2px; } .familia .obra figcaption span { text-align:left; } }
.familia--laser .familia__head h3 { color:#D9A86C; }
.familia .obra figcaption { display:flex; flex-direction:column !important; align-items:flex-start; gap:2px; } .familia .obra figcaption span { text-align:left; }
/* Graffiti: rosa neón */
.familia--graffiti .familia__head h3 { color:#FF4FB3 !important; text-shadow:0 0 6px rgba(255,79,179,.75), 0 0 18px rgba(255,79,179,.45), 0 0 36px rgba(255,79,179,.25); }
