/* Extraído literalmente del sitio estático: los mismos bytes, sin reescribir
   ni reordenar. Los cortes caen en límite de regla. Sólo: darkroom.html */

/* ============ PÁGINA SERVICIOS (lista simple por bloques) ============ */
.phead{padding-block:clamp(4rem,7vw,9rem) var(--space-l);}
.phead__h1{font-size:var(--text-3xl);max-width:20ch;margin-bottom:var(--space-m);}
.phead__sub{font-size:var(--text-m);color:rgba(255,255,255,.7);max-width:58ch;}
.sblock{padding-block:var(--space-l);border-top:1px solid var(--line);}
#digitalizacion.sblock{border-top:0;}
.sblock__head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.sblock__title{font-size:var(--text-xl);margin-bottom:var(--space-m);}
.sblock__head .sblock__title{margin-bottom:0;}
.sblock__head{margin-bottom:var(--space-m);}
.sblock__all{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.25rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;white-space:nowrap;}
.sblock__all:hover{color:var(--tertiary);}
/* ---- hoja de precios: sin cajas, filete superior + filetes verticales ---- */
.psheet{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);border-top:1px solid rgba(255,255,255,.28);}
.psheet__c{display:flex;flex-direction:column;padding:2.6rem clamp(1.8rem,2.4vw,3.2rem) 0;border-right:1px solid var(--line);}
.psheet__c:first-child{padding-left:0;}
.psheet__c:last-child{border-right:0;padding-right:0;}
.psheet__idx{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.15rem;letter-spacing:.14em;color:rgba(255,255,255,.32);}
.psheet__name{font-family:Rubik,sans-serif;font-weight:600;font-size:var(--text-l);line-height:1.12;margin-top:1.4rem;}
.psheet__name em{display:block;font-style:normal;color:var(--tertiary);}
.psheet__spec{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:1.1rem;}
.psheet__desc{font-size:1.42rem;color:rgba(255,255,255,.6);margin-top:1.2rem;padding-bottom:2.6rem;}
.psheet__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem;}
.psheet__price{font-family:Rubik,sans-serif;font-weight:700;font-size:2.2rem;line-height:1;white-space:nowrap;}
.psheet__price span{font-size:.6em;color:var(--tertiary);margin-left:.2rem;}
.psheet__add{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tertiary);background:none;border:0;padding:0;cursor:pointer;transition:color .25s;white-space:nowrap;}
.psheet__add:hover{color:#fff;}

/* 4 servicios -> 4 columnas en pantalla ancha, 2 en tablet */
.psheet--4{--cols:4;}
@media(max-width:1180px){
  .psheet--4{--cols:2;}
  .psheet--4 .psheet__c:nth-child(2n){border-right:0;padding-right:0;}
  .psheet--4 .psheet__c:nth-child(2n+1){padding-left:0;}
  .psheet--4 .psheet__c:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:2.6rem;}
}
@media(max-width:820px){
  .psheet{--cols:1!important;}
  .psheet__c{border-right:0;border-bottom:1px solid var(--line);padding:2.4rem 0;}
  .psheet__c:last-child{border-bottom:0;}
  .psheet--4 .psheet__c:nth-child(-n+2){padding-bottom:2.4rem;}
}

/* ---- servicios: motivos de marca de la home ---- */
.phero{min-height:46vh;}
.phero .vhero__body{padding-block:7rem;}
.phero h1{max-width:22ch;}
.sblock__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:var(--space-m);}
.sfinal__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.2rem;}
.sfinal__mark{height:8rem;width:auto;transform:rotate(-6deg);filter:drop-shadow(0 10px 26px rgba(0,0,0,.7));}
.sfinal__txt{font-family:Rubik,sans-serif;font-weight:600;font-size:clamp(2rem,2.4vw,3rem);line-height:1.3;max-width:30ch;}
.sfinal__txt .hl{color:var(--tertiary);}
.sfinal__ctas{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;}
@media(max-width:620px){.sfinal__mark{height:6.4rem;}}

/* ---- carrusel en móvil: una tarjeta por pantalla, flechas debajo y a la derecha ---- */
@media(max-width:620px){
  .shop-grid,.offer-grid#shopTrack{grid-auto-columns:100%;}
  /* tienda de la home: las flechas bajan del encabezado a debajo del carrusel */
  #tienda .inner{display:flex;flex-direction:column;}
  #tienda .shop-grid{order:1;}
  #tienda .shop-head{order:2;margin:1.6rem 0 0;}
  #tienda .sec-cta{order:3;}
  .shop-nav{gap:1rem;}
  /* carrusel de talleres: las flechas dejan de flotar sobre la tarjeta */
  .carousel{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;}
  .carousel #shopTrack{order:1;flex:0 0 100%;}
  .carousel .shop-arrow{position:static;transform:none;order:2;box-shadow:none;}
  .carousel .shop-arrow:hover{transform:none;background:var(--tertiary);}
  .carousel .shop-arrow--prev{margin-left:auto;}
  .shop-arrow{width:4.8rem;height:4.8rem;font-size:1.8rem;}
}

/* ---- fecha de la próxima sesión en la tarjeta de taller ---- */
.offer__photo{display:block;}
/* "Próximamente" va SOBRE la foto (como el chip ISO de la tienda) para que los
   títulos de todas las tarjetas queden alineados, lleven badge o no. */
.offer__fecha{position:absolute;top:1rem;left:1rem;font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.05rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--tertiary);border:1px solid var(--tertiary);border-radius:3px;padding:.4rem .8rem;}
.offer__pronto{position:absolute;top:1rem;left:1rem;font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.05rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:.4rem .8rem;}

/* ---- darkroom: pequeños añadidos sobre el sistema de servicios ---- */
.dk__aviso{border-left:3px solid var(--tertiary);padding:1.2rem 0 1.2rem 2rem;margin-top:var(--space-m);font-size:1.45rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:106rem;}
.dk__aviso strong{color:#fff;}
.dk__aviso a{color:var(--tertiary);}
.dk__nota{font-size:1.42rem;color:rgba(255,255,255,.55);margin-top:var(--space-m);max-width:60ch;line-height:1.6;}
.offer__foot .offer__price{max-width:58%;} .offer__foot .offer__note{white-space:normal;line-height:1.4;}
/* La cita de Dave es larga (~180 car.): con el max-width de 30ch que hereda de
   servicios se parte en 5 líneas estrechas. Se ensancha la medida sólo aquí. */
.sfinal__txt{max-width:46ch;}
.sfinal__autor{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:-1rem;}
.psheet__name em{font-size:.72em;}
/* Las dos franjas van en una sola celda: repetir «miércoles a sábado» dos veces
   sugería dos horarios distintos. b y em heredan el tipo de .psheet__name. */
.dk__franjas{margin-top:1.4rem;display:flex;flex-direction:column;gap:1.1rem;}
.dk__franjas p{font-family:Rubik,sans-serif;font-weight:600;font-size:var(--text-l);line-height:1.12;}
.dk__franjas b{font-weight:600;}
.dk__franjas em{display:block;font-style:normal;font-size:.62em;color:var(--tertiary);margin-top:.2rem;}
/* --- #como: las dos opciones, algo menores que una tarjeta de taller.
   Acotado a #como: .offer lo comparten el carrusel de #equipo y las tarjetas de
   /talleres, /servicios y la portada, que no se tocan. --- */
#como .offer-grid--2{max-width:106rem;}
#como .offer__photo{aspect-ratio:16/10;}
#como .offer__body{padding:calc(var(--space-m) * .8);}
#como .offer__name,#como .offer__price{font-size:clamp(1.8rem,calc(.4vw + 1.6rem),2.1rem);}
#como .offer__meta{margin-bottom:.8rem;}
#como .offer__desc{margin-bottom:1.2rem;}
@media(max-width:900px){ #como .offer__body{padding:calc(var(--space-m) * .7);} }
/* --- #que-es: un solo bloque horizontal, los dos párrafos uno debajo del otro
   con aire entre ellos (antes eran dos columnas de un psheet). --- */
.dk__intro{max-width:106rem;border-top:1px solid rgba(255,255,255,.28);padding-top:var(--space-m);display:flex;flex-direction:column;gap:1.8rem;}
.dk__intro p{font-size:var(--text-m);line-height:1.7;color:rgba(255,255,255,.8);}
.dk__intro strong{color:#fff;font-weight:600;}
/* El h1 cabe en una línea en escritorio; el tope de 22ch que hereda de .phero lo
   partía en dos. En móvil sigue partiéndose, que es lo correcto. */
@media(min-width:901px){ .phero h1{max-width:none;} }
/* --- modal de reserva --- */
.dkmodal{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;color:#fff;width:min(68rem,92vw);max-height:90vh;height:fit-content;overflow:visible;}
.dkmodal::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(3px);}
.dkmodal[open]{animation:dkAparece .22s ease-out;}
@keyframes dkAparece{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){ .dkmodal[open]{animation:none;} }
.dkmodal__caja{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(2rem,2.4vw,3rem);max-height:90vh;overflow-y:auto;}
.dkmodal__x{position:absolute;top:.8rem;right:1.2rem;background:transparent;border:0;color:rgba(255,255,255,.55);font-size:3rem;line-height:1;cursor:pointer;padding:.2rem .8rem;z-index:2;}
.dkmodal__x:hover{color:#fff;}
.dkmodal__title{font-family:Rubik,sans-serif;font-weight:700;font-size:clamp(1.9rem,2vw,2.4rem);line-height:1.25;color:#fff;text-transform:uppercase;padding-right:4rem;}
.dkmodal__sub{font-size:1.4rem;color:rgba(255,255,255,.6);line-height:1.6;margin:.8rem 0 2rem;}
.dkmodal__embed{background:transparent;border-radius:8px;overflow:hidden;}
.dkmodal__embed iframe{display:block;border:0;width:100%;}
.dkmodal__embed button,.dkmodal__embed .fillout-button,.dkmodal__embed [role="button"]{
  width:100%!important;font-family:'Roboto Mono',ui-monospace,monospace!important;font-weight:600!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  background:var(--tertiary)!important;border:1px solid var(--tertiary)!important;color:#fff!important;
  border-radius:4px!important;padding:1.4rem 2rem!important;cursor:pointer;}
/* showModal no siempre bloquea el scroll de fondo en iOS */
html:has(dialog[open]){overflow:hidden;}
@media(max-width:1180px){ .psheet[style*="--cols:5"]{--cols:3 !important;} .psheet[style*="--cols:5"] .psheet__c:nth-child(3n){border-right:0;padding-right:0} .psheet[style*="--cols:5"] .psheet__c:nth-child(3n+1){padding-left:0} .psheet[style*="--cols:5"] .psheet__c:nth-child(-n+3){border-bottom:1px solid var(--line);padding-bottom:2.4rem} }
@media(max-width:820px){ .psheet[style*="--cols"]{--cols:1 !important;} }