/* El Baúl de Bea · estilos de la web (PrestaLab, nov-2026)
   Base: la maqueta del 25-sep. Crema, tela Aida, burdeos, azul marino y madera.
   Fuentes servidas desde la propia web, con font-display:optional y precarga: cero saltos (CLS 0). */
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:optional;src:url(/fuentes/karla.woff2) format('woff2')}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:optional;src:url(/fuentes/young-serif.woff2) format('woff2')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:optional;src:url(/fuentes/silkscreen.woff2) format('woff2')}

:root{
  --crema:#FBF5EA;--aida:#F2E9DA;--blanco:#FFFFFF;
  --burdeos:#7B1E2E;--burdeos-2:#5E1522;--marino:#1E3A5F;--marino-2:#152B47;
  --naranja:#D9772B;--madera:#C8955A;--madera-2:#9C6A35;
  --tinta:#2A2622;--tinta-2:#5F574E;--borde:#E6DCCB;
  --verde:#1F7A4D;--verde-2:#18633E;
  --ease:cubic-bezier(.32,.72,0,1);
  --sombra:0 22px 40px -28px rgba(42,38,34,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:'Young Serif',Georgia,'Times New Roman',serif;font-weight:400;margin:0;line-height:1.1;color:var(--marino);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--burdeos);outline-offset:3px;border-radius:8px}
[id]{scroll-margin-top:16px}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-80px;z-index:100;background:var(--marino);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none}
.saltar:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* tela Aida y fila de puntadas */
.aida{background-color:var(--aida);background-image:linear-gradient(rgba(42,38,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(42,38,34,.05) 1px,transparent 1px);background-size:9px 9px}
.puntadas{height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M3 2l8 8M11 2l-8 8' stroke='%23D9772B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center}
.pix{font-family:'Silkscreen',ui-monospace,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--burdeos)}
.nota{font-size:15px;color:var(--tinta-2);margin-top:12px}
.nota em{font-style:italic}

/* ---------- cabecera ---------- */
.cab{background:var(--crema);border-bottom:1px solid var(--borde)}
.cab-in{max-width:1140px;margin:0 auto;padding:10px 16px 4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.marca{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:48px;text-decoration:none}
.marca img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px var(--blanco),0 0 0 3px var(--borde)}
.marca b{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:21px;color:var(--burdeos);line-height:1;display:block}
.marca small{display:block;font-size:13px;color:var(--tinta-2);margin-top:3px}
.wa-cab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 12px;border-radius:999px;background:var(--verde);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s var(--ease)}
.wa-cab:hover{background:var(--verde-2)}
.wa-cab span{display:none}
.menu{flex:1 0 100%;display:flex;justify-content:center;gap:2px;list-style:none;margin:2px 0 0;padding:0}
.menu a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font-weight:700;font-size:15.5px;color:var(--marino);text-decoration:none;border-radius:12px;border-bottom:3px solid transparent}
.menu a:hover{background:var(--aida)}
.menu a[aria-current="page"]{color:var(--burdeos);border-bottom-color:var(--naranja);border-radius:12px 12px 0 0}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:14px;border:0;background:var(--burdeos);color:#fff;font-weight:700;font-size:16px;text-decoration:none;text-align:center;transition:background .25s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--burdeos-2)}
.btn:active{transform:scale(.98)}
.btn.borde{background:transparent;color:var(--marino);box-shadow:inset 0 0 0 2px var(--marino)}
.btn.borde:hover{background:var(--aida)}
.btn.verde{background:var(--verde)}
.btn.verde:hover{background:var(--verde-2)}
.btn svg{flex:0 0 auto}
.botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------- títulos de sección ---------- */
.sec{padding-top:60px}
.tit{margin-bottom:22px}
.tit h1{font-size:clamp(38px,10vw,62px);margin-top:10px}
.tit h2{font-size:clamp(30px,8vw,48px);margin-top:8px}
.tit p{color:var(--tinta-2);margin-top:12px;max-width:56ch}
.separa{margin-top:44px}

/* ---------- portada con bastidor ---------- */
.hero{padding:28px 0 6px;display:grid;gap:30px;justify-items:start}
.hero h1{font-size:clamp(42px,11vw,72px);margin:12px 0 14px}
.hero h1 em{font-style:normal;color:var(--burdeos)}
.hero p{color:var(--tinta-2);font-size:18px;max-width:40ch}
.bastidor{justify-self:center;position:relative;width:min(78vw,360px)}
.bastidor svg{width:100%;height:auto;display:block}
.bastidor .chip{position:absolute;right:-4px;bottom:16%;background:var(--blanco);border:2px dashed var(--naranja);border-radius:14px;padding:6px 12px;font-size:15px;font-weight:700;color:var(--marino);transform:rotate(-4deg)}

/* ---------- tarjetas de «lo que hago» ---------- */
.cosas{border-radius:26px;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}
.cosa{background:var(--blanco);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:100%;text-decoration:none;box-shadow:0 1px 0 var(--borde);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cosa:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.cosa .f{aspect-ratio:1;overflow:hidden;background:var(--aida);display:block}
.cosa .f img,.cosa .f svg{width:100%;height:100%;object-fit:cover}
.cosa .c{padding:10px 12px 14px}
.cosa b{display:block;font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:19px;color:var(--marino);line-height:1.15}
.cosa span.p{display:block;font-size:14.5px;color:var(--tinta-2);margin-top:3px}

/* ---------- fichas de producto ---------- */
.atajos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:18px}
.atajos a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--blanco);border:1px solid var(--borde);font-weight:700;font-size:15px;color:var(--marino);text-decoration:none}
.atajos a:hover{border-color:var(--burdeos)}
.ficha{display:grid;gap:20px;align-items:start}
.fotos{display:grid;gap:10px}
.fotos figure{margin:0}
.fotos .g{border-radius:22px;overflow:hidden;background:var(--aida)}
.fotos .g img{width:100%;height:100%;object-fit:cover}
.fotos .g.cuad{aspect-ratio:1}
.fotos .g.alta{aspect-ratio:4/5}
.fotos .g.ancha{aspect-ratio:4/3}
.fotos .minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fotos figcaption{font-size:14.5px;color:var(--tinta-2);margin-top:8px}
.info h2{font-size:clamp(30px,8vw,44px)}
.info .desc{color:var(--tinta-2);margin-top:10px;max-width:52ch}
.info h3{font-family:'Silkscreen',ui-monospace,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--burdeos);margin:22px 0 10px}

/* filas de precio: cada una abre WhatsApp con su mensaje */
.precios{display:grid;gap:8px;list-style:none}
.opc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;min-height:64px;background:var(--blanco);border:2px solid var(--borde);border-radius:16px;padding:10px 14px;text-decoration:none;color:var(--tinta);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.opc:hover{border-color:var(--burdeos);transform:translateY(-2px)}
.opc.estrella{border-color:var(--burdeos)}
.opc b{display:block;font-weight:700;font-size:17px;color:var(--marino)}
.opc .s{display:block;font-size:14.5px;color:var(--tinta-2)}
.opc .eti{display:inline-block;margin-top:4px;font-family:'Silkscreen',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--burdeos);color:#fff;padding:3px 8px;border-radius:6px}
.opc .d{text-align:right}
.opc em{display:block;font-style:normal;font-family:'Young Serif',Georgia,serif;font-size:23px;color:var(--burdeos);white-space:nowrap;line-height:1.1}
.opc .pedir{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--verde);white-space:nowrap}
.consultar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.consultar .pc{font-family:'Young Serif',Georgia,serif;font-size:21px;color:var(--marino)}

/* banda marino (llaveros y lo marinero) */
.banda{background:var(--marino);color:#EEF1F6;border-radius:26px;padding:22px 16px;display:grid;gap:18px;align-items:center}
.banda h2{color:#fff}
.banda .pix{color:#F6C69A}
.banda .desc,.banda p{color:#D6DEE9}
.banda .opc{background:rgba(255,255,255,.08);border-color:rgba(246,198,154,.55);border-style:dashed;color:#EEF1F6}
.banda .opc b,.banda .opc em{color:#fff}
.banda .opc .s{color:#D6DEE9}
.banda .opc .pedir{color:#9FE0BC}
.banda .btn{background:#F6C69A;color:var(--tinta)}
.banda .btn:hover{background:#fff}
.banda .ilus{border-radius:20px;overflow:hidden;background:var(--aida);aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.banda .ilus svg{width:100%;height:100%;display:block}
.mar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none}
.mar li{margin:0}
.mar img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.mar span{display:block;font-size:14px;color:#D6DEE9;margin-top:6px}

/* patrones en PDF */
.patrones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}
.patron{display:flex;flex-direction:column;height:100%;background:var(--blanco);border:2px solid var(--borde);border-radius:18px;overflow:hidden;text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.patron:hover{border-color:var(--burdeos);transform:translateY(-2px)}
.patron .f{aspect-ratio:4/3;overflow:hidden;background:var(--aida)}
.patron .f img{width:100%;height:100%;object-fit:cover}
.patron .c{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.patron b{font-weight:700;color:var(--marino);line-height:1.25}
.patron em{font-style:normal;font-family:'Young Serif',Georgia,serif;font-size:21px;color:var(--burdeos)}
.patron .pedir{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--verde)}

/* pasos (cómo pedir) */
.pasos{display:grid;gap:12px;list-style:none;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;background:var(--blanco);border-radius:18px;padding:16px 16px 16px 64px;box-shadow:0 1px 0 var(--borde)}
.pasos li:before{content:counter(paso);position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;border:2px dashed var(--naranja);display:flex;align-items:center;justify-content:center;font-family:'Young Serif',Georgia,serif;font-size:19px;color:var(--burdeos)}
.pasos b{display:block;color:var(--marino);font-size:17.5px}
.pasos span{display:block;color:var(--tinta-2);margin-top:2px}
.bloque{border-radius:26px;padding:18px}

/* galería de encargos */
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--aida)}
.galeria figcaption{font-size:14.5px;color:var(--tinta-2);margin-top:6px}

/* tira de Instagram (imágenes que enlazan a su perfil, sin incrustar nada) */
.insta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin-top:6px}
.insta a{display:block;border-radius:14px;overflow:hidden}
.insta img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s var(--ease)}
.insta a:hover img{transform:scale(1.04)}

/* contacto */
.canales{display:grid;gap:12px;list-style:none}
.canal{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;min-height:84px;background:var(--blanco);border:2px solid var(--borde);border-radius:18px;padding:14px 16px;text-decoration:none;transition:border-color .2s var(--ease)}
.canal:hover{border-color:var(--burdeos)}
.canal .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--marino)}
.canal.wa .ico{background:var(--verde)}
.canal.ig .ico{background:var(--burdeos)}
.canal b{display:block;color:var(--marino);font-size:18px}
.canal span{display:block;color:var(--tinta-2);font-size:15.5px;overflow-wrap:anywhere}

/* páginas de texto (aviso legal) */
.texto{max-width:72ch}
.texto h2{font-size:clamp(26px,6vw,34px);margin:40px 0 12px}
.texto h3{font-size:21px;margin:26px 0 8px}
.texto p,.texto li{color:var(--tinta-2);margin-top:10px}
.texto ul{padding-left:20px}
.hueco{background:#FFF1E2;border:2px dashed var(--naranja);border-radius:6px;padding:0 6px;color:var(--tinta);font-weight:700}
.aviso-modelo{background:#FFF1E2;border:2px dashed var(--naranja);border-radius:16px;padding:14px 16px;color:var(--tinta);margin-top:18px}

/* ---------- pie ---------- */
.pie{background:var(--marino);color:#DDE4EE;margin-top:72px}
.pie .puntadas{opacity:.9}
.pie-in{max-width:1140px;margin:0 auto;padding:32px 16px 20px;display:grid;gap:24px}
.pie .marca b{color:#fff}
.pie .marca small{color:#C9D3E0}
.pie-in p{font-size:15.5px;margin-top:12px;max-width:38ch}
.pie h2{font-family:'Silkscreen',ui-monospace,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#F6C69A;margin-bottom:4px}
.pie ul{list-style:none}
.pie a.l{display:flex;align-items:center;min-height:44px;font-size:16px;text-decoration:none;color:#EEF1F6}
.pie a.l:hover{text-decoration:underline}
.legal{text-align:center;font-size:13.5px;color:#C9D3E0;padding:0 16px 26px;line-height:1.5}
.legal a{color:#EEF1F6}

/* ---------- pantallas grandes ---------- */
@media(min-width:600px){
  .wa-cab span{display:inline}
  .cosas{padding:18px;gap:16px}
  .patrones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .insta{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pie-in{grid-template-columns:1.4fr 1fr 1fr}
}
@media(min-width:900px){
  .cab-in{flex-wrap:nowrap;padding:12px 16px;gap:16px}
  .marca{margin-right:0}
  .menu{flex:0 1 auto;margin:0 auto;order:0}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding-top:48px}
  .cosas{grid-template-columns:repeat(3,minmax(0,1fr));padding:22px}
  .ficha{grid-template-columns:1fr 1.1fr;gap:44px}
  .ficha.al-reves .fotos{order:2}
  .banda{grid-template-columns:.9fr 1.1fr;padding:36px;gap:36px}
  .bloque{padding:30px}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .canales{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria{grid-template-columns:repeat(4,minmax(0,1fr))}
  .patrones{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:359px){.marca b{font-size:19px}.menu a{padding:0 7px;font-size:15px}.cosa b{font-size:17px}}

/* añadidos: separación corta, foto en bastidor (encargos) y foto en la banda */
.separa-s{margin-top:16px}
.bastidor .redonda{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:16px solid var(--madera);box-shadow:var(--sombra),0 0 0 3px var(--madera-2)}
.banda .ilus img{width:100%;height:100%;object-fit:cover}
.fotos.peque{max-width:300px;width:100%;justify-self:center}
@media(max-width:599px){.cosa b{font-size:17.5px;hyphens:manual}}
@media(min-width:900px){.cab-in nav{margin-left:auto}}
.banda .ilus.ancha{aspect-ratio:3/2;max-width:none}
.fotos .g.apaisada{aspect-ratio:3/2}
.firma{text-align:center;font-size:12.5px;color:#AFBCCD;padding:0 16px 22px;margin-top:-14px}
.firma a{color:#C9D3E0;text-decoration:underline;text-underline-offset:2px}
.firma a:hover{color:#fff}

/* hero como en la maqueta (Juanma, 4-nov): bastidor de madera con la foto del corazón a medio bordar */
.bastidor-foto{justify-self:center;position:relative;width:min(80vw,380px);aspect-ratio:1;border-radius:50%;padding:14px;background:linear-gradient(145deg,#D9A76A,#B07A40);box-shadow:var(--sombra),inset 0 2px 0 rgba(255,255,255,.35)}
.bastidor-foto:before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:34px;height:26px;border-radius:6px;background:linear-gradient(#A8753D,#8C5E2E)}
.bastidor-foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 4px rgba(0,0,0,.08)}
.bastidor-foto .chip{position:absolute;right:-6px;bottom:18px;background:var(--blanco);border:2px dashed var(--naranja);border-radius:14px;padding:6px 12px;font-size:15px;font-weight:700;color:var(--marino);transform:rotate(-4deg)}

/* repaso del 4-nov */
.legal span,.legal a{white-space:nowrap}
/* tableta y móvil: una ficha en una columna no deja la foto a todo lo ancho (a 768 px medía casi 1000 de alto) */
@media (max-width:899px){
  .ficha .fotos{width:100%;max-width:480px;justify-self:center}
  .ficha .fotos.peque{max-width:300px}
}
.envios{display:grid;gap:24px;align-items:center}
.envios .tit{margin-bottom:0}
.envios-foto{margin:0;width:min(70vw,300px);justify-self:center}
.envios-foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:12px solid var(--madera);box-shadow:var(--sombra)}
.envios-foto figcaption{margin-top:10px;text-align:center;font-size:14.5px;color:var(--tinta-2)}
@media (min-width:900px){.envios{grid-template-columns:1fr auto;gap:48px;padding:36px 48px}}
/* «¡La bordamos!» va junto si cabe; a 320 px se parte por dentro en vez de salirse */
.junto{display:inline-block}
/* móvil: marca y WhatsApp arriba, el menú en su propia fila (a 320 px el WhatsApp se quedaba solo en una tercera fila) */
@media (max-width:899px){
  .cab-in nav{order:3;flex:1 0 100%}
  .cab-in .menu{justify-content:space-around}
}
@media (max-width:359px){.btn{padding:0 16px}}