:root{
  --papel:#F8F0EC; --lino:#EFE4DC; --arena:#E3D4C9; --moca:#7A6258; --oro:#9D8C6B;
  --tinta:#1E1B1A; --granate:#5B1A2B; --blanco:#FFFDFB;
  --display:"Bodoni Moda", "Didot", Georgia, serif;
  --texto:"Fira Sans", system-ui, sans-serif;
  --firma:"Allura", cursive;
  --ancho:1180px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font:300 17px/1.65 var(--texto);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--granate);outline-offset:3px}
.wrap{width:min(var(--ancho),100% - 32px);margin-inline:auto}
main p.firma,.firma{font-family:var(--firma);font-weight:400;color:var(--oro);font-size:clamp(30px,4vw,42px);line-height:1}
.corazon{display:inline-block;width:14px;height:14px;color:var(--tinta)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.7em;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);font:400 15px/1 var(--texto);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--granate);border-color:var(--granate)}
.btn.claro{background:transparent;color:var(--tinta)}
.btn.claro:hover{background:var(--tinta);color:var(--papel)}
.btn svg{width:18px;height:18px}

/* aviso + cabecera */
.aviso{background:var(--tinta);color:var(--papel);text-align:center;font-size:13.5px;padding:.55em 16px;letter-spacing:.02em}
.aviso a{text-decoration:none;border-bottom:1px solid #ffffff55}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papel) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--arena)}
.cab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 0 10px}
.cab .logo{grid-column:2}.cab .logo img{height:42px;width:auto}
.menu-btn{grid-column:1}
.cab .wa{grid-column:3;justify-self:end;display:flex;gap:.5em;align-items:center;font-size:14px;text-decoration:none}
.cab .wa svg{width:22px;height:22px}
nav ul{display:flex;justify-content:center;gap:clamp(14px,3vw,38px);list-style:none;padding:4px 0 14px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:14.5px;letter-spacing:.03em;padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--tinta)}
.menu-btn{display:none;background:none;border:0;justify-self:start;cursor:pointer;padding:6px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,7vw,96px) 0}
.hero h1{font-size:clamp(46px,7.2vw,96px);margin:.18em 0 .3em}
.hero p{max-width:30em;color:var(--moca);font-size:18px}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero figure{position:relative;justify-self:end;width:100%;max-width:470px}
.hero .foto{aspect-ratio:4/5;object-fit:cover;width:100%}
.hero .tarjeta{position:absolute;left:-18%;bottom:-8%;width:46%;border:10px solid var(--blanco);box-shadow:0 18px 40px -18px #5b1a2b55;aspect-ratio:1;object-fit:cover}
.hero figcaption{position:absolute;right:0;top:100%;margin-top:10px;font-size:13px;color:var(--moca)}

/* secciones */
section{padding:clamp(56px,8vw,110px) 0}
.titular{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.titular h2{font-size:clamp(40px,5.5vw,68px);margin-top:.1em}
.titular p{color:var(--moca);max-width:36em;margin:.8em auto 0}

/* tarjetas modelo */
.fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin}
.fila .modelo{scroll-snap-align:start}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:34px 22px}
.modelo{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.modelo .img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--lino)}
.modelo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.modelo:hover img{transform:scale(1.04)}
.modelo .nuevo{position:absolute;top:10px;left:10px;background:var(--papel);font-size:12.5px;padding:.25em .7em}
.modelo .n{font-family:var(--display);font-size:30px;margin-top:12px;line-height:1}
.modelo .c{font-size:14px;color:var(--moca);margin-top:4px}

/* banda rasgada */
.banda{position:relative;background:var(--lino);margin-top:40px}
.banda::before,.banda::after{content:"";position:absolute;left:0;right:0;height:34px;background:var(--lino);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20l40-6 38 9 55-12 47 7 62-10 41 8 70-9 35 6 64-11 52 10 46-7 58 9 49-12 61 8 44-6 57 10 39-8 66 7 48-11 53 9 45-5 51 8 39-4 40 3V34z'/%3E%3C/svg%3E") center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20l40-6 38 9 55-12 47 7 62-10 41 8 70-9 35 6 64-11 52 10 46-7 58 9 49-12 61 8 44-6 57 10 39-8 66 7 48-11 53 9 45-5 51 8 39-4 40 3V34z'/%3E%3C/svg%3E") center/100% 100%}
.banda::before{top:-33px}
.banda::after{bottom:-33px;transform:scaleY(-1)}
.ver-todo{text-align:center;margin-top:48px}

/* taller */
.taller{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.collage{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(420px,52vw,620px)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage img:first-child{grid-row:span 2}
.taller h2{font-size:clamp(38px,4.6vw,58px);margin:.15em 0 .5em}
.taller p{color:var(--moca);margin-bottom:1em;max-width:34em}
.proceso{list-style:none;padding:0;margin-top:26px;border-top:1px solid var(--arena)}
.proceso li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--arena);font-size:15.5px}
.proceso b{font-weight:500}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);counter-reset:p}
.paso{counter-increment:p}
.paso::before{content:counter(p);display:block;font-family:var(--display);font-style:italic;font-size:64px;line-height:1;color:var(--oro);margin-bottom:10px}
.paso h3{font-size:28px;margin-bottom:.4em}
.paso p{color:var(--moca);font-size:16px}
.pasos-cta{text-align:center;margin-top:48px}

/* personalizados */
.personal{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,80px);align-items:center;background:var(--blanco);padding:clamp(24px,4vw,48px)}
.personal .par{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.personal .par img{aspect-ratio:3/4;object-fit:cover;width:100%}
.personal .par figcaption{grid-column:span 2;font-size:13px;color:var(--moca)}
.personal h2{font-size:clamp(36px,4.4vw,54px);margin:.15em 0 .5em}
.personal p{color:var(--moca);margin-bottom:1.6em;max-width:32em}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
details{border-bottom:1px solid var(--arena);padding:18px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:400;font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 26px/.8 var(--texto);color:var(--oro);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--moca);margin-top:10px;font-size:16px;max-width:34em}

/* pie */
footer{background:var(--tinta);color:#e9dfd8;padding:64px 0 28px;margin-top:40px}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie img{height:40px;width:auto;margin-bottom:16px}
.pie p,.pie li{font-size:15px;color:#cbbdb4}
.pie h4{font:500 14px/1 var(--texto);letter-spacing:.06em;color:#fff;margin-bottom:16px}
.pie ul{list-style:none;padding:0;display:grid;gap:8px}
.pie a{text-decoration:none}
.pie a:hover{text-decoration:underline}
.legal{border-top:1px solid #ffffff22;margin-top:44px;padding-top:20px;font-size:13px;color:#a8998f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ficha (diálogo) */
dialog{border:0;padding:0;width:min(1040px,100% - 24px);max-height:calc(100% - 24px);background:var(--papel);color:var(--tinta)}
dialog::backdrop{background:#1e1b1acc}
.ficha{display:grid;grid-template-columns:1.1fr 1fr}
.ficha .vista{background:var(--lino);position:relative}
.ficha .vista img{width:100%;aspect-ratio:1;object-fit:cover}
.ficha .flecha{position:absolute;top:50%;translate:0 -50%;background:var(--papel);border:0;width:42px;height:42px;cursor:pointer;font-size:20px}
.ficha .flecha.izq{left:10px}.ficha .flecha.der{right:10px}
.ficha .info{padding:clamp(22px,4vw,44px);display:flex;flex-direction:column}
.ficha h3{font-size:clamp(48px,6vw,72px)}
.ficha .estilo{font-family:var(--firma);color:var(--oro);font-size:30px;margin:.1em 0 .5em}
.ficha .desc{color:var(--moca);font-size:16px}
.ficha .colores{margin:22px 0 8px;font-size:14px}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.miniaturas button{width:58px;height:58px;padding:0;border:1px solid transparent;background:none;cursor:pointer}
.miniaturas button[aria-pressed=true]{border-color:var(--tinta);outline:2px solid var(--papel);outline-offset:-3px}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.ficha .pedir{margin-top:auto;padding-top:26px}
.ficha .nota{font-size:13px;color:var(--moca);margin-top:10px}
.cerrar{position:absolute;top:10px;right:12px;background:var(--papel);border:0;width:40px;height:40px;font-size:24px;cursor:pointer;z-index:2}

.etiqueta-muestra-x{position:fixed;bottom:14px;right:14px;z-index:30;background:var(--granate);color:#fff;font-size:12.5px;padding:.45em .9em}

@media (max-width:860px){
  .hero,.taller,.personal,.ficha{grid-template-columns:1fr}
  .hero figure{justify-self:center;max-width:420px;margin-bottom:40px}
  .hero .tarjeta{left:4%;width:40%;bottom:-10%}
  .pasos,.faq,.pie{grid-template-columns:1fr}
  .collage{height:420px}
  .proceso li{grid-template-columns:1fr;gap:2px}
  .cab .wa span{display:none}
  .menu-btn{display:block}
  nav ul{display:none;flex-direction:column;align-items:center;gap:14px;padding:14px 0 18px}
  nav.abierto ul,#menu-t:checked ~ nav ul{display:flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.menu-t{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* ---- web completa ---- */
.cab .logo img{height:42px}
.cabecera-pag{padding:clamp(48px,7vw,90px) 0 clamp(24px,3vw,40px);text-align:center}
.cabecera-pag h1{font-size:clamp(52px,8vw,104px)}
.cabecera-pag p:not(.firma){color:var(--moca);max-width:36em;margin:1em auto 0}
.filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:0 auto 44px}
.filtros button{font:400 14.5px/1 var(--texto);padding:.7em 1.15em;border:1px solid var(--arena);background:transparent;color:var(--tinta);cursor:pointer;border-radius:999px}
.filtros button[aria-pressed=true]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.filtros input{font:300 15px/1 var(--texto);padding:.75em 1em;border:1px solid var(--arena);background:var(--blanco);min-width:220px;border-radius:999px}
.contador{text-align:center;color:var(--moca);font-size:14px;margin:-26px 0 34px}
.vacio{text-align:center;color:var(--moca);padding:40px 0}
.galeria{columns:3 260px;column-gap:14px}
.galeria img{width:100%;margin-bottom:14px;break-inside:avoid}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:start}
.contacto-tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contacto-tarjetas a{display:block;padding:28px;background:var(--blanco);text-decoration:none;border:1px solid var(--arena)}
.contacto-tarjetas a:hover{border-color:var(--tinta)}
.contacto-tarjetas h3{font-size:30px;margin-bottom:.3em}
.contacto-tarjetas p{color:var(--moca);font-size:15px}
.ficha .compartir{font-size:13px;color:var(--moca);margin-top:8px}
@media (max-width:860px){.dos-col,.contacto-tarjetas{grid-template-columns:1fr}.filtros input{min-width:0;width:100%}}
@media (max-width:600px){
  .rejilla{grid-template-columns:repeat(2,1fr);gap:24px 12px}
  .fila{grid-auto-columns:46%}
  .modelo .n{font-size:24px}
  .modelo .c{font-size:13px}
  .filtros{gap:8px}
  .filtros button{padding:.6em .95em;font-size:14px}
}

.modelo.proximo{text-decoration:none;display:block}
.modelo.proximo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--blanco);border:1px dashed var(--arena);font-size:14px;color:var(--moca);letter-spacing:.04em}
.modelo.proximo .ph b{font-family:var(--display);font-style:italic;font-weight:500;font-size:28px;color:var(--tinta);letter-spacing:0}

.artesana{padding:clamp(10px,2vw,30px) 0 clamp(56px,8vw,100px);text-align:center}
.artesana .wrap{max-width:640px}
.artesana h2{font-size:clamp(44px,6vw,72px);margin:.1em 0 .45em}
.artesana p:not(.firma){color:var(--moca);font-size:18px;margin-bottom:1em}
.artesana .firma-ana{font-family:var(--firma);color:var(--tinta)!important;font-size:46px!important;margin-top:.2em}

.contacto-tarjetas p{overflow-wrap:anywhere}
@media (max-width:1100px) and (min-width:861px){.contacto-tarjetas{grid-template-columns:repeat(2,1fr)}}