/* Página de acceso de Extractor Preset: paleta y tipografía de luiartfotografia.com. Sin cursivas. */
:root {
  --black:#0C0C0A; --dark:#111110; --panel:#141412; --line:#2A2A28;
  --cream:#EDE8E0; --grey:#9A9A97; --gold:#B8A082; --gold-light:#D4C4AA; --error:#FFB9AD; --ok:#BFD8B8;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',Arial,sans-serif;
  color-scheme:dark; accent-color:var(--gold);
}
* { box-sizing:border-box; font-style:normal !important; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--black); color:var(--cream); font:300 .95rem/1.7 var(--sans); }
h1,h2,h3,p,ul { margin:0; padding:0; }
a { color:var(--gold-light); text-underline-offset:.25em; }
a:hover { color:var(--cream); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.saltar { position:absolute; left:-999px; top:0; background:var(--gold); color:var(--black); padding:.6rem 1rem; z-index:10; }
.saltar:focus { left:0; }

.cab { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(12,12,10,.92); backdrop-filter:blur(8px); z-index:5; }
.marca { text-decoration:none; font:400 .85rem var(--sans); letter-spacing:.35em; color:var(--cream); }
.marca span { color:var(--gold); letter-spacing:.2em; margin-left:.8rem; font-size:.68rem; text-transform:uppercase; }
.cab nav { display:flex; gap:1.6rem; align-items:center; }
.cab nav a { text-decoration:none; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.cab nav a:hover { color:var(--cream); }
.cab nav a.entrar { color:var(--gold); border:1px solid var(--gold); padding:.55rem 1rem; }

main { max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,3rem); }
.etiqueta { font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.centro { text-align:center; }
.titulo { font:300 clamp(2rem,4.5vw,3.2rem)/1.1 var(--serif); text-align:center; margin-bottom:2.5rem; }
.titulo-izq { font:300 clamp(2rem,4vw,3rem)/1.1 var(--serif); margin-bottom:1.2rem; }
.texto { color:var(--grey); max-width:34rem; margin-bottom:1.6rem; }
.mini { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin-bottom:.5rem; }
.nota { margin-top:1.4rem; font-size:.78rem; color:var(--grey); max-width:34rem; }

/* Portada centrada */
.portada { text-align:center; padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,6vw,4rem); }
.portada h1 { font:300 clamp(2.6rem,6.5vw,5.2rem)/1.04 var(--serif); max-width:60rem; margin:0 auto 1.6rem; }
.oro { color:var(--gold-light); }
.intro { color:var(--grey); max-width:42rem; margin:0 auto 2rem; font-size:1rem; }
.acciones { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.5rem; }
.ventajas { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); text-align:left; }
.ventajas li { padding:1.6rem; display:grid; gap:.25rem; border-right:1px solid var(--line); }
.ventajas li:last-child { border-right:0; }
.ventajas b { font:300 3rem/1 var(--serif); color:var(--gold-light); }
.ventajas strong { font-weight:500; }
.ventajas span { color:var(--grey); font-size:.85rem; }

/* Botones */
.boton { display:inline-block; background:var(--gold); color:var(--black); border:1px solid var(--gold); padding:1rem 1.8rem; font:500 .72rem var(--sans); letter-spacing:.2em; text-transform:uppercase; text-align:center; text-decoration:none; cursor:pointer; transition:background .25s; }
.boton:hover { background:var(--gold-light); color:var(--black); }
.boton[disabled] { opacity:.5; cursor:wait; }
.boton.sec { background:transparent; color:var(--gold); }
.boton.sec:hover { background:rgba(184,160,130,.14); color:var(--gold-light); }
form .boton, .tarjeta .boton { width:100%; margin-top:1.4rem; }

/* Demostración: foto a la izquierda, controles a la derecha */
.demo, .herramientas, .registro { padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid var(--line); }
.demo-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.marco { position:relative; background:var(--panel); border:1px solid var(--line); line-height:0; overflow:hidden; aspect-ratio:5/4; }
.marco canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#c-despues { clip-path:inset(0 0 0 50%); }
.linea { position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--cream); box-shadow:0 0 0 1px rgba(0,0,0,.4); pointer-events:none; }
.chip { position:absolute; top:.8rem; padding:.3rem .7rem; background:rgba(12,12,10,.75); font:400 .62rem var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--cream); line-height:1.4; }
.chip.izq { left:.8rem; } .chip.der { right:.8rem; }
.cargando { position:absolute; inset:0; display:grid; place-items:center; background:var(--panel); color:var(--grey); line-height:1.4; font-size:.85rem; }
.rango { display:block; text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--cream); margin:1rem 0 0; }
.rango input { width:100%; margin-top:.6rem; }
.escala { display:flex; justify-content:space-between; font-size:.62rem; color:var(--grey); margin-top:.3rem; }
.estilos { display:grid; gap:.5rem; margin-bottom:.8rem; }
.estilos button { text-align:left; background:transparent; border:1px solid var(--line); color:var(--cream); padding:.7rem 1rem; font:inherit; font-size:.85rem; cursor:pointer; }
.estilos button[aria-pressed="true"] { border-color:var(--gold); background:rgba(184,160,130,.14); color:var(--gold-light); }

/* Herramientas */
.rejilla { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.rejilla article { border-top:1px solid var(--gold); padding:1.4rem 0 0; }
.num { display:block; font:300 .8rem var(--sans); letter-spacing:.2em; color:var(--gold); margin-bottom:.8rem; }
.rejilla h3 { font:400 1.7rem var(--serif); margin-bottom:.6rem; }
.rejilla p { color:var(--grey); font-size:.9rem; }

/* Registro */
.registro-grid { display:grid; grid-template-columns:1fr 440px; gap:clamp(2rem,6vw,6rem); align-items:start; }
.lista { margin:0 0 1rem 1.1rem; color:var(--grey); max-width:34rem; }
.lista li { margin-bottom:.4rem; }
.tarjeta { background:var(--panel); border:1px solid var(--line); padding:clamp(1.4rem,3vw,2.2rem); }
.tarjeta h2 { font:400 1.7rem var(--serif); margin-bottom:1.2rem; }
.pestanas { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-bottom:1.2rem; }
.pestanas button { background:transparent; color:var(--grey); border:0; padding:.7rem .5rem; font:inherit; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
.pestanas button[aria-selected="true"] { background:var(--gold); color:var(--black); }
label { display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin:1rem 0 .35rem; }
input:not([type=checkbox]):not([type=range]) { width:100%; background:var(--black); color:var(--cream); border:1px solid var(--line); padding:.75rem .8rem; font:inherit; font-size:.95rem; }
input:not([type=checkbox]):not([type=range]):focus { border-color:var(--gold); outline:none; }
.casilla { display:flex; gap:.7rem; align-items:flex-start; text-transform:none; letter-spacing:0; font-size:.8rem; color:var(--grey); margin:.9rem 0 0; line-height:1.5; }
.casilla input { margin-top:.2rem; flex:none; }
.ayuda { font-size:.75rem; color:var(--grey); margin-top:.4rem; }
.aviso { min-height:1.4em; margin-top:1rem; font-size:.85rem; color:var(--error); }
.aviso.bien { color:var(--ok); }
.legal { margin-top:1rem; font-size:.72rem; color:var(--grey); }
.pie { border-top:1px solid var(--line); padding:2rem 1rem; text-align:center; font-size:.75rem; color:var(--grey); }

@media (max-width:900px) {
  .demo-grid, .registro-grid { grid-template-columns:1fr; }
  .ventajas, .rejilla { grid-template-columns:1fr; }
  .ventajas li { border-right:0; border-bottom:1px solid var(--line); }
  .ventajas li:last-child { border-bottom:0; }
  .cab nav a:not(.entrar) { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }