@font-face{font-family:"Caprasimo";src:url(../fonts/caprasimo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --tela:#f1ecf4;      /* lino lila de fondo */
  --tela-2:#e6dcec;
  --tinta:#2a1640;     /* ciruela oscuro */
  --morado:#8e1c93;    /* el muñequito del logo */
  --azul:#1d2bd6;      /* las letras del logo */
  --amarillo:#ffe81a;  /* la bombilla */
  --hilo:#b98a1e;      /* hilo dorado de las costuras */
  --papel:#fffdf8;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--tela);color:var(--tinta);
  font:400 1.0625rem/1.65 "Nunito",system-ui,sans-serif;
  /* trama de tela muy suave */
  background-image:
    repeating-linear-gradient(0deg,rgba(42,22,64,.025) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(42,22,64,.025) 0 1px,transparent 1px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
h1,h2{font-family:"Caprasimo",Georgia,serif;font-weight:400;line-height:1.08;margin:0 0 .5em;color:var(--tinta)}
h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3rem)}
p{margin:0 0 1em;max-width:34em}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:.6em 1em;z-index:50}
.saltar:focus{left:1rem;top:1rem}

/* ---------- Cabecera ---------- */
.cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;padding:1.1rem clamp(1rem,4vw,2.5rem);
}
.marca{position:relative;width:min(260px,58vw);aspect-ratio:665/201}
.marca img{position:absolute;inset:0;width:100%;height:100%}
.marca-enlace{position:absolute;inset:0}
/* el botón cubre sólo la zona de la bombilla (aprox. 10%-36% del ancho) */
.bombilla{
  position:absolute;left:10%;top:0;width:26%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
}
.bombilla img{position:absolute;top:0;left:-38.5%;width:385%;max-width:none;height:100%;
  transition:filter .5s ease}
.bombilla:hover img{animation:parpadeo 1.2s ease-in-out 1}
@keyframes parpadeo{0%,100%{filter:none}20%{filter:brightness(.6) saturate(.4)}35%{filter:none}50%{filter:brightness(.7) saturate(.5)}60%{filter:drop-shadow(0 0 8px var(--amarillo))}}

.menu{display:flex;align-items:center;gap:clamp(.8rem,2.5vw,1.8rem);font-weight:700}
.menu a{color:var(--tinta);text-decoration:none;padding:.3em 0;border-bottom:2px dashed transparent}
.menu a:hover{border-bottom-color:var(--hilo)}
.menu .menu-tel{color:#fff;background:var(--morado);padding:.45em 1em;border-radius:999px;border:0}
.menu .menu-tel:hover{background:var(--tinta)}

/* ---------- Portada ---------- */
.portada{
  max-width:1180px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) clamp(1rem,4vw,2.5rem) clamp(3rem,8vw,6rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;
}
.entrada{font-size:1.2rem}
.boton{
  display:inline-block;font:800 1.05rem "Nunito",sans-serif;text-decoration:none;cursor:pointer;
  color:var(--tinta);background:var(--amarillo);border:0;border-radius:999px;padding:.8em 1.6em;
  box-shadow:inset 0 0 0 2px var(--tinta);
  outline:2px dashed var(--tinta);outline-offset:-7px;
}
.boton:hover{background:#fff27a}
.boton:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

.portada-retales{position:relative;min-height:440px}
.retal{
  position:absolute;background:var(--papel);padding:10px;
  box-shadow:0 1px 0 rgba(42,22,64,.08),0 14px 30px -12px rgba(42,22,64,.35);
}
.r1{width:62%;left:0;top:8%;transform:rotate(-4deg);z-index:2}
.r2{width:40%;right:2%;top:0;transform:rotate(5deg)}
.r3{width:36%;left:40%;top:44%;transform:rotate(-1.5deg);z-index:3}

/* costura: puntada dorada dentro de cada foto */
.retal,.pieza img,.taller-mural img{outline:2px dashed var(--hilo);outline-offset:-9px}

/* ---------- Creaciones ---------- */
.creaciones,.taller,.contacto{max-width:1180px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2.5rem)}
.creaciones{border-top:2px dashed rgba(42,22,64,.25)}
.seccion-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.seccion-cabeza p{margin:0;color:#5b4870}

.galeria{list-style:none;margin:0;padding:0;columns:3 260px;column-gap:1.6rem}
.galeria li{break-inside:avoid;margin:0 0 1.8rem}
.pieza{
  display:block;width:100%;padding:10px 10px 6px;border:0;cursor:zoom-in;text-align:left;
  background:var(--papel);color:var(--tinta);
  box-shadow:0 1px 0 rgba(42,22,64,.08),0 10px 24px -14px rgba(42,22,64,.4);
}
.galeria li:nth-child(3n+1) .pieza{transform:rotate(-.8deg)}
.galeria li:nth-child(3n+2) .pieza{transform:rotate(.7deg)}
.pieza img{width:100%}
.pieza span{display:block;font:600 1.45rem/1.2 "Caveat",cursive;color:var(--morado);padding:.35em .2em .1em}

/* ---------- Taller ---------- */
.taller{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:clamp(1.5rem,5vw,4rem);align-items:center;
  border-top:2px dashed rgba(42,22,64,.25)}
.patrones{display:flex;gap:1.2rem;margin-top:1.5rem}
.patrones img{width:130px;background:var(--papel);padding:8px;mix-blend-mode:multiply;transform:rotate(-3deg)}
.patrones img+img{transform:rotate(4deg)}
.taller-mural{margin:0;background:var(--papel);padding:10px 10px 4px;transform:rotate(1.2deg);
  box-shadow:0 14px 30px -12px rgba(42,22,64,.35)}
.taller-mural figcaption{font:600 1.4rem "Caveat",cursive;color:var(--morado);padding:.3em .2em}

/* ---------- Contacto ---------- */
.contacto{text-align:center;border-top:2px dashed rgba(42,22,64,.25)}
.contacto p{margin:0 auto 1rem;font-size:1.15rem}
.correo{
  display:inline-block;font:400 clamp(1.5rem,5vw,2.8rem)/1.1 "Caprasimo",serif;text-decoration:none;
  color:var(--azul);padding:.35em .6em;overflow-wrap:anywhere;
  outline:3px dashed var(--hilo);outline-offset:6px;border-radius:12px;
}
.correo:hover{color:var(--morado)}

.escribe{max-width:640px;margin:3rem auto 0;text-align:left}
.escribe .o{text-align:center;margin:0 auto 1.2rem}
.formulario{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;
  background:var(--papel);padding:1.6rem 1.6rem 1.8rem;border-radius:6px;
  outline:2px dashed var(--hilo);outline-offset:-10px;
  box-shadow:0 14px 30px -14px rgba(42,22,64,.35);
}
.campo{display:flex;flex-direction:column;gap:.3rem}
.campo-ancho{grid-column:1/-1}
.campo label{font:600 1.35rem/1 "Caveat",cursive;color:var(--morado)}
.formulario input[type=text],.formulario input[type=email],.formulario textarea{
  font:inherit;color:var(--tinta);background:#fff;width:100%;
  border:2px solid #cbbcd6;border-radius:8px;padding:.6em .75em;
}
.formulario textarea{resize:vertical;min-height:7em}
.formulario input:focus,.formulario textarea:focus{border-color:var(--morado);outline:none;box-shadow:0 0 0 3px rgba(142,28,147,.18)}
.acepto{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.acepto input{margin-top:.3em;width:1.1em;height:1.1em;accent-color:var(--morado);flex:none}
.formulario .boton{justify-self:start}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{text-align:center;margin:0 auto 1.2rem;padding:.8em 1em;border-radius:8px;font-weight:700;max-width:none}
.aviso.ok{background:#e3f4e1;color:#1f5a1a}
.aviso.mal{background:#fbe3e6;color:#8a1426}
@media (max-width:560px){.formulario{grid-template-columns:1fr;padding:1.2rem 1.1rem 1.4rem}}

.legal{max-width:720px;margin:0 auto;padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2.5rem)}
.legal h1{font-size:clamp(2rem,5vw,3rem)}
.legal h2{font-size:1.5rem;margin-top:1.6em}

.pie{text-align:center;padding:2rem 1rem 3rem;color:#5b4870;font-size:.95rem}
.pie p{margin:0 auto}

/* ---------- Visor ---------- */
.visor{border:0;padding:12px;background:var(--papel);max-width:min(92vw,900px);max-height:92vh;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.visor::backdrop{background:rgba(42,22,64,.82)}
.visor img{max-height:78vh;width:auto;margin:0 auto;outline:2px dashed var(--hilo);outline-offset:-9px}
.visor p{font:600 1.5rem "Caveat",cursive;color:var(--morado);margin:.3em .2em 0}
.cerrar{position:absolute;top:4px;right:6px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--tinta);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.visor form{margin:0}

/* ---------- Sorpresa: se apaga la habitación y se enciende la bombilla ---------- */
.sorpresa{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem;
  background:radial-gradient(circle at var(--bx,15%) var(--by,6%),rgba(255,232,26,.55) 0,rgba(255,232,26,.12) 18%,rgba(20,8,32,.93) 42%);
  opacity:0;transition:opacity .9s ease;
}
.sorpresa[hidden]{display:none}
.sorpresa.visible{opacity:1}
.nota{
  position:relative;max-width:30rem;background:var(--papel);color:var(--tinta);
  padding:2.2rem 2rem 1.8rem;border-radius:6px;transform:rotate(-1.5deg) translateY(16px);
  outline:2px dashed var(--hilo);outline-offset:-12px;
  box-shadow:0 0 0 1px rgba(255,232,26,.4),0 30px 80px -10px rgba(255,232,26,.45);
  transition:transform 1s cubic-bezier(.2,.8,.2,1) .35s;
}
.sorpresa.visible .nota{transform:rotate(-1.5deg) translateY(0)}
.nota h2{color:var(--morado)}
.nota p{font-size:1.15rem}
.nota .firma{font:600 1.9rem/1.15 "Caveat",cursive;color:var(--morado);margin-top:1.2rem}
body.luz .bombilla img{filter:drop-shadow(0 0 6px var(--amarillo)) drop-shadow(0 0 18px var(--amarillo))}
body.luz .bombilla{z-index:101}
body.luz{overflow:hidden}

/* ---------- Móvil ---------- */
@media (max-width:820px){
  .portada,.taller{grid-template-columns:1fr}
  .portada-retales{min-height:0;aspect-ratio:1/0.85;max-width:520px}
  .menu a:not(.menu-tel){display:none}
}
@media (max-width:420px){
  .galeria{columns:2 140px;column-gap:.9rem}
  .galeria li{margin-bottom:1rem}
  .pieza{padding:6px 6px 4px}
  .pieza span{font-size:1.15rem}
  .retal,.pieza img{outline-offset:-6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.error404{min-height:70vh;display:grid;place-content:center}
@media (max-width:520px){
  .cabecera{flex-wrap:nowrap}
  .marca{width:min(190px,50vw);flex:none}
  .menu .menu-tel{padding:.4em .8em;font-size:.95rem;white-space:nowrap}
}
.formulario[hidden],.aviso[hidden]{display:none}