/* ============================================================
   Blancopixel — sistema de diseño (dirección D · editorial "Reseda")
   Compartido por todas las páginas. Pulir aquí = cambia todo el sitio.
   ============================================================ */

:root {
  --bone:   #f1efe8;
  --bone-2: #e7e3d9;
  --paper:  #faf9f5;
  --ink:    #1b1a17;
  --ink-2:  #57534a;
  --ink-3:  #8a8479;
  --line:   #1b1a17;
  --hair:   rgba(27,26,23,0.14);
  --accent: #b0672e;            /* ámbar quemado (hora dorada) */
  --accent-soft: #c98a4f;
  --disp: 'Archivo', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --maxw: 1360px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--mono); background:var(--bone); color:var(--ink);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { display:block; width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.3rem,4vw,3.5rem); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---- imágenes y placeholders ---- */
.frame { position:relative; overflow:hidden; background:var(--bone-2); }
.frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.frame:hover img { transform:scale(1.04); }
.ph { position:relative; background:var(--bone-2); border:1px solid var(--line); overflow:hidden; }
.ph::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent 0 16px, rgba(27,26,23,.045) 16px 17px); }
.ph::after { content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.2rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }

/* ---- botones ---- */
.btn { display:inline-block; font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border:1px solid var(--ink); padding:.85rem 1.4rem; cursor:pointer; background:transparent; transition:background .22s ease, color .22s ease, border-color .22s; }
.btn:hover { background:var(--ink); color:var(--bone); }
.btn--solid { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--solid:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---- nav ---- */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--bone); border-bottom:1px solid var(--line); }
.nav__in { display:flex; align-items:center; justify-content:space-between; padding:1.05rem clamp(1.3rem,4vw,3.5rem); max-width:var(--maxw); margin:0 auto; }
.nav__brand { font-family:var(--disp); font-weight:700; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; }
.nav__brand b { color:var(--accent); }
.nav__links { display:flex; gap:1.9rem; align-items:center; }
.nav__links a:not(.btn) { font-family:var(--disp); font-weight:500; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); transition:color .2s; }
.nav__links a:not(.btn):hover, .nav__links a:not(.btn)[aria-current="page"] { color:var(--ink); }
.nav__toggle { display:none; background:none; border:0; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
@media (max-width:900px){
  .nav__links { position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; background:var(--bone); border-left:1px solid var(--line); padding:2rem; transform:translateX(100%); transition:transform .35s ease; }
  .nav__links.open { transform:none; }
  .nav__links a { font-size:1rem; }
  .nav__toggle { display:block; z-index:101; }
}

/* ---- hero: wordmark gigante ---- */
.hero { padding-top:4.6rem; }
.hero__word { font-family:var(--disp); font-weight:900; color:var(--ink); font-size:clamp(3.2rem,16vw,15rem); line-height:.82; letter-spacing:-.03em; padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.2rem,2.5vw,1.8rem); white-space:nowrap; }
.hero__word b { color:var(--accent); }

/* hero de carrusel (home) */
.hero__grid { display:grid; grid-template-columns:1fr; gap:clamp(1.8rem,4vw,3rem); align-items:end; padding-bottom:clamp(2.5rem,6vw,4.5rem); }
@media (min-width:900px){ .hero__grid { grid-template-columns:1.55fr 1fr; } }
.hero__frame { aspect-ratio:3/2; }
.hero__tag { font-family:var(--disp); font-weight:800; font-size:clamp(1.5rem,2.6vw,2.35rem); line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; }
.hero__meta { font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; color:var(--ink-2); margin:1.1rem 0 1.6rem; max-width:34ch; }

/* hero de página vertical */
.phero { padding:6rem 0 clamp(2rem,5vw,3.5rem); }
.phero__crumb { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:1.4rem; }
.phero__crumb a:hover { color:var(--accent); }
.phero__num { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2); margin-bottom:.9rem; }
.phero__num b { color:var(--accent); }
.phero h1 { font-family:var(--disp); font-weight:900; font-size:clamp(2.6rem,8vw,6rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; max-width:16ch; }
.phero__sub { font-family:var(--mono); font-size:.95rem; color:var(--ink-2); max-width:52ch; margin-top:1.4rem; }
.phero__media { aspect-ratio:16/8; margin-top:clamp(2rem,5vw,3.5rem); }

/* carrusel (compartido) */
.hslide { position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hslide.active { opacity:1; }
.hslide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hdots { display:flex; gap:.55rem; margin-top:1.4rem; }
.hdots button { width:26px; height:6px; border:1px solid var(--ink); background:transparent; padding:0; cursor:pointer; transition:background .3s; }
.hdots button.active { background:var(--ink); }

/* ---- reglas ---- */
.rule { border-top:1px solid var(--line); }
.rule--double { border-top:1px solid var(--line); box-shadow:0 3px 0 -1px var(--line); }

/* ---- secciones ---- */
section { padding:clamp(3.5rem,8vw,7rem) 0; }
.kicker { font-family:var(--mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.h-lg { font-family:var(--disp); font-weight:800; font-size:clamp(1.9rem,5.2vw,3.6rem); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; }
.prose { font-family:var(--mono); font-size:.9rem; line-height:1.75; color:var(--ink); max-width:46ch; }
.prose--2 { max-width:62ch; }

.split { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:900px){ .split { grid-template-columns:1fr 1fr; } .split--rev > .split__media { order:-1; } }
.split__media { aspect-ratio:4/5; }
.split__body .kicker { margin-bottom:1.2rem; }
.split__body .prose { margin:1.3rem 0 1.8rem; }

/* ---- filas de verticales (home) ---- */
.vrow { display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (min-width:900px){ .vrow { grid-template-columns:1fr 1.15fr; } .vrow--rev .vrow__media { order:-1; } }
.vrow__num { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2); margin-bottom:1rem; }
.vrow__num b { color:var(--accent); font-weight:700; }
.vrow__title { font-family:var(--disp); font-weight:800; font-size:clamp(1.8rem,4.4vw,3rem); line-height:.98; letter-spacing:-.015em; text-transform:uppercase; }
.vrow__desc { font-family:var(--mono); font-size:.9rem; line-height:1.75; color:var(--ink-2); max-width:40ch; margin:1.1rem 0 1.7rem; }
.vrow__media { aspect-ratio:4/3; }
.vrow__media.ph { aspect-ratio:4/3; }
.vsep { height:clamp(2.5rem,6vw,4.5rem); }

/* ---- break: texto sobre foto (full-bleed) ---- */
.break { position:relative; height:clamp(360px,64vh,660px); overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.break img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.break__scrim { position:absolute; inset:0; background:rgba(20,17,12,0.5); }
.break__in { position:relative; z-index:2; max-width:22ch; padding:0 1.3rem; color:#f1efe8; }
.break__in h2 { font-family:var(--disp); font-weight:900; font-size:clamp(2.2rem,6.5vw,4.6rem); line-height:.96; letter-spacing:-.02em; text-transform:uppercase; }
.break__in p { font-family:var(--mono); font-size:.85rem; margin-top:1.1rem; opacity:.9; }

/* ---- galería multicolumna ---- */
.gallery__head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,4vw,2.6rem); }
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
@media (min-width:900px){ .gallery { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .gallery { grid-template-columns:repeat(4,1fr); } }
.gallery .gcol { display:grid; gap:12px; align-content:start; }
.gallery .frame { aspect-ratio:auto; }
.gallery .frame img { position:static; height:auto; }

/* ---- lista de "qué incluye" / proceso ---- */
.grid3 { display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,3vw,2.4rem); margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:760px){ .grid3 { grid-template-columns:repeat(3,1fr); } }
.card { border-top:1px solid var(--line); padding-top:1.2rem; }
.card__n { font-family:var(--disp); font-weight:900; font-size:1.4rem; color:var(--accent); }
.card h3 { font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; margin:.7rem 0 .5rem; }
.card p { font-family:var(--mono); font-size:.85rem; color:var(--ink-2); line-height:1.7; }

/* ---- formulario de cotización ---- */
.quote { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quote__grid { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width:900px){ .quote__grid { grid-template-columns:0.85fr 1.15fr; } }
.quote__intro .h-lg { margin:1rem 0; }
.quote__intro .prose { color:var(--ink-2); }
.form { display:grid; gap:1.1rem; }
.form__row { display:grid; gap:1.1rem; }
@media (min-width:620px){ .form__row--2 { grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.field label .req { color:var(--accent); }
.field input, .field select, .field textarea {
  font-family:var(--mono); font-size:.9rem; color:var(--ink); background:var(--bone);
  border:1px solid var(--hair); border-radius:0; padding:.8rem .9rem; width:100%;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--ink); outline:none; }
.field textarea { min-height:120px; resize:vertical; }
.form__note { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); }
.form__status { font-family:var(--mono); font-size:.85rem; padding:.9rem 1rem; border:1px solid var(--hair); display:none; }
.form__status.show { display:block; }
.form__status.ok { border-color:var(--accent); color:var(--ink); }
.form__status.err { border-color:#a13a2e; color:#a13a2e; }

/* ---- cross-links a otras verticales ---- */
.cross__list { display:grid; grid-template-columns:1fr; gap:1px; border-top:1px solid var(--line); }
.cross__item { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2rem); align-items:center; padding:clamp(1.2rem,2.6vw,1.8rem) 0; border-bottom:1px solid var(--line); transition:padding-left .3s ease; }
.cross__item:hover { padding-left:.6rem; }
.cross__n { font-family:var(--mono); font-size:.78rem; color:var(--accent); }
.cross__t { font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.1rem,2.4vw,1.6rem); letter-spacing:-.01em; }
.cross__arrow { font-size:1.3rem; color:var(--ink-2); transition:transform .25s, color .25s; }
.cross__item:hover .cross__arrow { color:var(--accent); transform:translateX(6px); }

/* ---- CTA ---- */
.cta { text-align:center; }
.cta h2 { font-family:var(--disp); font-weight:900; font-size:clamp(2.2rem,7vw,5rem); line-height:.92; letter-spacing:-.025em; text-transform:uppercase; }
.cta p { font-family:var(--mono); font-size:.9rem; color:var(--ink-2); max-width:46ch; margin:1.4rem auto 2rem; }

/* ---- footer ---- */
.footer { border-top:1px solid var(--line); background:var(--paper); }
.footer__grid { display:grid; grid-template-columns:1fr; gap:2rem; padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
@media (min-width:760px){ .footer__grid { grid-template-columns:1.4fr 1fr 1fr; } }
.footer__brand { font-family:var(--disp); font-weight:900; font-size:1.6rem; letter-spacing:-.01em; text-transform:uppercase; }
.footer__brand b { color:var(--accent); }
.footer__tag { font-family:var(--mono); font-size:.82rem; color:var(--ink-2); margin-top:.8rem; max-width:32ch; }
.footer h4 { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; }
.footer ul { list-style:none; display:grid; gap:.6rem; }
.footer a { font-family:var(--mono); font-size:.85rem; color:var(--ink-2); transition:color .2s; }
.footer a:hover { color:var(--accent); }
.footer__bar { border-top:1px solid var(--hair); padding:1.4rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer__bar span { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); }

/* ---- animación de entrada ---- */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .fade-up{ opacity:1; transform:none; transition:none; } .frame img, .hslide{ transition:none; } }