/* ==========================================================================
   Madeira International
   Mundo: el cuarto oscuro bajo luz de seguridad.
   El ámbar es la luz de la sala; las copias conservan su color.
   Paleta oficial de la marca: negro, blanco y los dos dorados.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Michroma";src:url("/fonts/michroma.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* marca */
  --negro:#000000;
  --oro:#EABF3C;
  --oro-hondo:#C88301;
  --blanco:#FFFFFF;

  /* el cuarto */
  --copia-negra:#0A0908;
  --cuarto:#15100A;
  --cuarto-alto:#211809;
  --crema:#F3E6C4;
  --plata:#BDBDBD;
  --revelador:#8A8A8A;

  --display:"Archivo",system-ui,sans-serif;
  --cuadrada:"Michroma","Archivo",system-ui,sans-serif;
  --nota:"Courier Prime",ui-monospace,monospace;

  --medida:64ch;
  --borde:clamp(1.25rem,5vw,4.5rem);
  --salto:clamp(4rem,11vw,9rem);
  --curva:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--copia-negra);
  color:var(--crema);
  font-family:var(--display);
  font-size:clamp(1rem,.95rem + .28vw,1.125rem);
  line-height:1.6;
  overflow-x:hidden;
}

/* la lámpara de seguridad: una sola fuente cálida arriba a la derecha */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120vw 90vh at 82% -12%, rgba(234,191,60,.16), transparent 62%),
    radial-gradient(70vw 60vh at 8% 8%, rgba(200,131,1,.09), transparent 64%);
}
/* grano de película sobre todo */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
::selection{background:var(--oro);color:var(--negro)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

.saltar{
  position:absolute;left:-999px;top:0;z-index:60;
  background:var(--oro);color:var(--negro);padding:.75rem 1.25rem;
  font-family:var(--cuadrada);font-size:.6875rem;letter-spacing:.12em;text-decoration:none;
}
.saltar:focus{left:0}

/* ---------- voces tipográficas ------------------------------------------ */

h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}

/* la etiqueta de bote y de bandeja: cuadrada, mayúscula, muy espaciada */
.rotulo{
  font-family:var(--cuadrada);
  font-size:.625rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oro);
  line-height:1.5;
}
.rotulo--tenue{color:var(--oro-hondo)}

/* la anotación a lápiz sobre la hoja de contactos */
.nota{font-family:var(--nota);font-size:.875rem;color:var(--plata);line-height:1.55}

/* ---------- cabecera ----------------------------------------------------- */

.cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1rem,3vw,1.6rem) var(--borde);
  border-bottom:1px solid rgba(234,191,60,.18);
}
.marca{width:clamp(42px,8vw,56px);height:auto}
.cabecera .rotulo{text-align:right}

/* ---------- botones ------------------------------------------------------ */

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:52px;padding:.9rem 1.9rem;
  background:var(--oro);color:var(--negro);
  font-family:var(--cuadrada);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--oro);border-radius:0;cursor:pointer;
  transition:background .2s var(--curva),color .2s var(--curva),box-shadow .2s var(--curva);
}
.boton:hover,.boton:focus-visible{background:var(--blanco);border-color:var(--blanco);box-shadow:0 0 28px -6px rgba(234,191,60,.5)}
.boton[disabled]{background:var(--revelador);border-color:var(--revelador);color:var(--copia-negra);cursor:progress;box-shadow:none}
.boton--linea{background:transparent;color:var(--oro)}
.boton--linea:hover,.boton--linea:focus-visible{background:var(--oro);color:var(--negro)}
.icono{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- la copia: una foto revelada, con su borde de papel ---------- */

.copia{margin:0;background:var(--blanco);padding:.7rem .7rem 0;box-shadow:0 24px 50px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.copia img{width:100%}
.copia figcaption{
  padding:.7rem .2rem .8rem;
  font-family:var(--nota);font-size:.75rem;color:#3A3226;line-height:1.4;
}
.copia figcaption b{display:block;font-weight:700;color:var(--negro);letter-spacing:.04em}

/* colgada del tendedero, con una leve inclinación */
.tendida{position:relative;transform:rotate(var(--giro,-1.4deg));transition:transform .4s var(--curva)}
.tendida:hover{transform:rotate(0deg)}
.tendida::before{
  content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:3px;height:22px;background:linear-gradient(180deg,var(--plata),#6b6b6b);
  box-shadow:0 0 6px rgba(0,0,0,.7);
}

.cuerda{position:relative;padding-top:1.6rem}
.cuerda::before{
  content:"";position:absolute;top:.55rem;left:calc(var(--borde) * -1);right:calc(var(--borde) * -1);
  height:1px;background:linear-gradient(90deg,transparent,rgba(234,191,60,.5) 12%,rgba(234,191,60,.5) 88%,transparent);
}

/* ---------- formulario --------------------------------------------------- */

.campo{display:grid;gap:.85rem;border:0;padding:0;margin:0}
.campo__titulo{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--crema);margin:0}
.campo__ayuda{margin:0;font-family:var(--nota);font-size:.8125rem;color:var(--revelador)}

.fichas{display:flex;flex-wrap:wrap;gap:.55rem}
.ficha{
  position:relative;display:inline-flex;align-items:center;min-height:46px;
  padding:.7rem 1.1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(234,191,60,.34);
  color:var(--crema);
  font-family:var(--display);font-size:.9375rem;line-height:1.2;
  cursor:pointer;
  transition:border-color .18s var(--curva),background .18s var(--curva),color .18s var(--curva);
}
.ficha:hover{border-color:var(--oro);background:rgba(234,191,60,.08)}
.ficha input{position:absolute;opacity:0;width:0;height:0}
.ficha:has(input:focus-visible){outline:2px solid var(--oro);outline-offset:3px}
.ficha:has(input:checked){background:var(--oro);border-color:var(--oro);color:var(--negro);font-weight:600}

label.entrada{display:grid;gap:.45rem}
input[type=text],input[type=tel],input[type=password]{
  width:100%;min-height:52px;padding:.85rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(234,191,60,.34);border-radius:0;
  color:var(--crema);font-family:var(--display);font-size:1.0625rem;
  transition:border-color .18s var(--curva),box-shadow .18s var(--curva),background .18s var(--curva);
}
input::placeholder{color:#6f665a;opacity:1}
input:hover{border-color:rgba(234,191,60,.6)}
input:focus{outline:0;border-color:var(--oro);background:rgba(234,191,60,.06);box-shadow:0 0 0 3px rgba(234,191,60,.14)}
input[aria-invalid=true]{border-color:#E06A4A;background:rgba(224,106,74,.08)}

.error{margin:0;font-family:var(--nota);font-size:.8125rem;color:#F09173}
.error--bloque{padding:.85rem 1rem;border:1px solid #E06A4A;background:rgba(224,106,74,.1)}

/* ---------- pie ---------------------------------------------------------- */

.pie{
  padding:clamp(2.5rem,6vw,4rem) var(--borde);
  border-top:1px solid rgba(234,191,60,.18);
  display:grid;gap:1rem;
}
.pie a{color:var(--oro);text-underline-offset:4px}

/* ---------- movimiento: el revelado ------------------------------------- */

@keyframes revelar{
  from{opacity:0;filter:brightness(.25) contrast(.4) blur(6px)}
  to{opacity:1;filter:none}
}
.revelando{animation:revelar 1.5s var(--curva) both}

@media (prefers-reduced-motion:reduce){
  .revelando{animation:none}
  .tendida{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}