/* Coworky — web publica. Ritmo: calle (inmersiva) → pasos (densa) → informe (explicativa)
   → señales (tranquila) → principios (tinta) → precios (decisiva). */

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio) var(--suave);
}
.cabecera.con-sombra { border-bottom-color: var(--regla); }
.cabecera__fila { display: flex; align-items: center; gap: var(--e-6); min-height: 4rem; }
.logo { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--tinta); }
.logo span { font: 700 1.35rem/1 var(--f-titular); letter-spacing: -0.035em; }
.logo__icono { width: 1.35rem; height: 1.35rem; color: var(--terracota); transform: rotate(-8deg); }
.menu { display: flex; gap: var(--e-5); margin-left: auto; font-size: var(--t-s); }
.menu a { text-decoration: none; color: var(--tinta-suave); }
.menu a:hover { color: var(--terracota); }
.cabecera__acciones { display: flex; align-items: center; gap: var(--e-4); }
.logo + .cabecera__acciones { margin-left: auto; }
.enlace-entrar { font-size: var(--t-s); font-weight: 600; text-decoration: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2rem, 0.5rem + 4vw, 4rem); }
.hero__texto { display: grid; gap: var(--e-5); }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.7vw, 4.6rem); max-width: 19ch; font-stretch: 88%; }
.hero__pie { display: grid; grid-template-columns: minmax(0, 36rem) auto; justify-content: space-between; align-items: end; gap: var(--e-5) var(--e-7); }
.hero__entrada { font-size: var(--t-l); color: var(--tinta-suave); }
.hero__cta { display: grid; gap: var(--e-2); justify-items: start; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.hero__nota { font: 400 var(--t-xs)/1.4 var(--f-datos); color: var(--piedra); }

/* La calle: imagen panoramica con etiquetas que cuelgan de las placas de cada tienda */
.calle { margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; }
.calle__recorrido { max-width: 1800px; margin-inline: auto; }
.calle__lienzo { position: relative; aspect-ratio: 2752 / 1197; container-type: inline-size; }
.calle__lienzo img { width: 100%; height: 100%; object-fit: cover; }
.calle__lienzo::after { /* funde el borde inferior con el papel */
  content: ""; position: absolute; inset: auto 0 0; height: 18%;
  background: linear-gradient(to bottom, transparent, var(--papel));
  pointer-events: none;
}
.calle__etiquetas { list-style: none; margin: 0; padding: 0; }
.colgante {
  position: absolute; top: 29%; left: var(--x);
  translate: -50% 0;
  transform-origin: 50% 0.65rem;
}
.colgante:nth-child(1) { --x: 12.8%; --retardo: 0ms; }
.colgante:nth-child(2) { --x: 33%; --retardo: 140ms; }
.colgante:nth-child(3) { --x: 52.2%; --retardo: 280ms; }
.colgante:nth-child(4) { --x: 70.2%; --retardo: 420ms; }
.colgante::before { /* hilo hasta la placa */
  content: ""; position: absolute; left: 50%; bottom: calc(100% - 0.75rem); width: 1.5px; height: 4.4cqi;
  background: #2a2620; z-index: 1;
}
.colgante .etiqueta { font-size: clamp(0.62rem, 0.4rem + 0.55cqi, 0.8rem); min-width: 0; width: clamp(9rem, 13cqi, 13.5rem); }
.colgante .etiqueta__nombre { font-size: clamp(0.8rem, 0.5rem + 0.6cqi, 1rem); }
.colgante .etiqueta__puntos { font-size: clamp(1.15rem, 0.6rem + 1.4cqi, 1.9rem); }
.js .colgante { opacity: 0; }
.js .calle.visible .colgante { animation: colgar 1100ms var(--retardo) both cubic-bezier(0.3, 0.6, 0.3, 1); }
@keyframes colgar {
  0% { opacity: 0; transform: translateY(-14px) rotate(-9deg); }
  25% { opacity: 1; }
  45% { transform: translateY(0) rotate(5deg); }
  65% { transform: rotate(-2.5deg); }
  82% { transform: rotate(1deg); }
  100% { opacity: 1; transform: rotate(0); }
}
.colgante:hover .etiqueta { transform: rotate(-2deg); }
.colgante .etiqueta { transition: transform var(--medio) var(--suave); transform-origin: 50% 0.65rem; }

.calle__pie {
  display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  margin-top: var(--e-3); font: 400 var(--t-xs)/1.4 var(--f-datos); color: var(--piedra);
}
.calle__pista { display: none; }

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--e-9); }
.seccion--hundida { background: var(--papel-hundido); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta .marca-dato { color: color-mix(in srgb, var(--papel) 60%, transparent); }
.seccion__cabeza { display: grid; gap: var(--e-3); margin-bottom: var(--e-7); max-width: 46rem; }
.seccion__cabeza h2 { font-size: var(--t-xl); }
.seccion__entrada { color: var(--tinta-suave); font-size: var(--t-m); }

/* Pasos: como tiques de turno */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tinta); }
.paso { display: grid; align-content: start; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-5) 0; }
.paso + .paso { padding-left: var(--e-5); border-left: 1px dashed var(--regla); }
.paso__num { font: 500 0.85rem/1 var(--f-datos); color: var(--terracota); }
.paso h3 { font-size: 1.6rem; }
.paso p { color: var(--tinta-suave); }
.paso .paso__coste { margin-top: var(--e-2); font: 500 var(--t-xs)/1 var(--f-datos); color: var(--piedra); text-transform: uppercase; letter-spacing: 0.06em; }

/* Informe de ejemplo */
.informe { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.informe__texto { display: grid; gap: var(--e-4); position: sticky; top: 6rem; }
.informe__texto h2 { font-size: var(--t-xl); }
.informe__texto > p { color: var(--tinta-suave); }
.lista-check { list-style: none; padding: 0; margin: var(--e-2) 0 0; display: grid; gap: var(--e-3); }
.lista-check li { position: relative; padding-left: 1.6rem; color: var(--tinta-suave); }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.8rem; height: 0.45rem;
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); rotate: -45deg;
}
.ficha {
  background: var(--papel-claro); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); display: grid; gap: var(--e-5);
  border-top: 4px solid var(--terracota);
}
.ficha__datos { padding-block: var(--e-4); border-block: 1px dashed var(--regla); }
.ficha__cabeza { display: flex; justify-content: space-between; align-items: start; gap: var(--e-4); }
.ficha__nombre { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: var(--e-1); }
.ficha__etiqueta { min-width: 7.5rem; text-align: center; justify-items: center; rotate: 3deg; background: var(--papel); }
.ficha__datos { margin: 0; display: grid; gap: var(--e-2); }
.ficha__datos div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-3); align-items: baseline; font-size: var(--t-s); }
.ficha__datos dt { font: 500 var(--t-xs)/1.4 var(--f-datos); text-transform: uppercase; letter-spacing: 0.05em; color: var(--piedra); }
.ficha__datos dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline; }
.ficha__bloque { display: grid; gap: var(--e-2); }
.ficha__bloque h4 { font-size: 1.05rem; display: flex; gap: var(--e-2); align-items: center; }
.ficha__bloque p { color: var(--tinta-suave); font-size: var(--t-s); }
.ficha__guion { border-left: 3px solid var(--terracota); padding-left: var(--e-4); }
.ficha__guion p { font-style: italic; color: var(--tinta); }

/* Señales */
.senales { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--regla); border: 1px solid var(--regla); }
.senal { background: var(--papel); padding: var(--e-5); display: grid; gap: var(--e-2); align-content: start; }
.senal h3 { font-size: 1.15rem; }
.senal p { font-size: var(--t-s); color: var(--tinta-suave); }
.senales--recursos { grid-template-columns: repeat(3, 1fr); }
.senales--recursos h3 a { color: var(--tinta); text-decoration-color: var(--terracota); text-underline-offset: 0.2em; }
.senales--recursos h3 a::after { content: " →"; color: var(--terracota); }
.recursos__guias { margin-top: var(--e-5); color: var(--tinta-suave); }

/* Principios (sobre tinta) */
.principios { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-7); }
.principio { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid color-mix(in srgb, var(--papel) 25%, transparent); }
.principio h3 { font-size: 1.4rem; color: var(--papel); }
.principio p { color: color-mix(in srgb, var(--papel) 78%, transparent); }

/* Para quien */
.quien__lista { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5) var(--e-7); }
.quien__lista div { display: grid; gap: var(--e-1); padding-bottom: var(--e-4); border-bottom: 1px solid var(--regla); }
.quien__lista dt { font: 650 1.25rem/1.2 var(--f-titular); }
.quien__lista dd { margin: 0; color: var(--tinta-suave); }

/* Precios */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); align-items: stretch; }
.plan {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--e-4);
  background: var(--papel-claro); border: 1px solid var(--regla); border-radius: var(--radio); padding: var(--e-5);
}
.plan h3 { font-size: 1.3rem; }
.plan__precio { font: 400 var(--t-s)/1 var(--f-texto); color: var(--piedra); }
.plan__precio span { font: 650 2.4rem/1 var(--f-titular); color: var(--tinta); letter-spacing: -0.03em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-suave); }
.plan ul strong { color: var(--tinta); font-family: var(--f-datos); font-weight: 500; }
.plan--destacado { border-color: var(--terracota); box-shadow: var(--sombra); }
.plan__sello {
  position: absolute; top: -0.7rem; left: var(--e-5); padding: 0.15rem 0.55rem; border-radius: 3px;
  background: var(--terracota); color: var(--sobre-acento); font: 500 0.7rem/1.4 var(--f-datos); letter-spacing: 0.06em; text-transform: uppercase;
}
.planes__nota { margin-top: var(--e-5); font-size: var(--t-s); color: var(--piedra); }

/* Preguntas */
.preguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--e-7); align-items: start; }
.acordeon { border-top: 1px solid var(--tinta); }
.acordeon details { border-bottom: 1px solid var(--regla); }
.acordeon summary {
  cursor: pointer; list-style: none; padding: var(--e-4) 2rem var(--e-4) 0; position: relative;
  font: 650 1.1rem/1.3 var(--f-titular);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%;
  font: 400 1.4rem/1 var(--f-datos); color: var(--terracota); transition: rotate var(--rapido) var(--suave);
}
.acordeon details[open] summary::after { rotate: 45deg; }
.acordeon p { padding: 0 0 var(--e-5); color: var(--tinta-suave); max-width: 42rem; }

/* Cierre */
.cierre { padding-block: var(--e-9); }
.cierre__caja { display: grid; justify-items: center; text-align: center; gap: var(--e-4); }
.cierre h2 { font-size: var(--t-xl); }
.cierre p { color: var(--tinta-suave); }

/* Pie */
.pie { border-top: 1px solid var(--regla); padding-block: var(--e-7) var(--e-6); font-size: var(--t-s); }
.pie__fila { display: flex; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; }
.pie__texto { margin-top: var(--e-3); color: var(--piedra); }
.pie__legal { display: flex; gap: var(--e-5); flex-wrap: wrap; align-items: start; }
.pie__legal a { color: var(--tinta-suave); }
.pie__fuentes { margin-top: var(--e-6); font: 400 var(--t-xs)/1.5 var(--f-datos); color: var(--piedra); }

/* ---------- Responsive ---------- */
@media (max-width: 63.99rem) {
  .menu { display: none; }
  .cabecera__acciones { margin-left: auto; }
  .senales { grid-template-columns: repeat(2, 1fr); }
  .senales--recursos { grid-template-columns: 1fr; }
  .planes { grid-template-columns: repeat(2, 1fr); }
  .informe, .preguntas { grid-template-columns: minmax(0, 1fr); }
  .informe__texto { position: static; }
}

/* En movil la calle no se encoge: se recorre deslizando, tienda a tienda */
@media (max-width: 47.99rem) {
  .calle__recorrido {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .calle__recorrido::-webkit-scrollbar { display: none; }
  .calle__lienzo { width: 58rem; }
  .colgante { scroll-snap-align: center; }
  .calle__pista { display: inline; color: var(--terracota); }
  .pasos { grid-template-columns: 1fr; }
  .paso, .paso + .paso { padding: var(--e-5) 0; border-left: 0; }
  .paso + .paso { border-top: 1px dashed var(--regla); }
  .principios, .quien__lista { grid-template-columns: 1fr; }
  .ficha__datos div { grid-template-columns: 1fr; gap: var(--e-1); }
  .ficha__cabeza { flex-direction: column-reverse; }
  .hero__acciones .boton { flex: 1 1 auto; }
  .hero__pie { grid-template-columns: 1fr; }
  .hero__entrada { font-size: var(--t-m); }
  .hero__cta { justify-items: stretch; }
}
@media (max-width: 35rem) {
  .senales, .planes { grid-template-columns: 1fr; }
  .enlace-entrar { display: none; }
}

/* ---------- Paginas legales ---------- */
.legal { max-width: 46rem; padding-block: var(--e-7) var(--e-8); display: grid; gap: var(--e-4); }
.legal h1 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.legal h2 { font-size: 1.35rem; margin-top: var(--e-5); }
.legal p, .legal li { color: var(--tinta-suave); }
.legal ul { padding-left: 1.2rem; display: grid; gap: var(--e-2); margin: 0; }
.legal__datos { margin: 0; display: grid; gap: var(--e-2); }
.legal__datos div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e-3); }
.legal__datos dt { font: 500 var(--t-xs)/1.6 var(--f-datos); text-transform: uppercase; letter-spacing: 0.05em; color: var(--piedra); }
.legal__datos dd { margin: 0; }
.legal__tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); display: block; overflow-x: auto; }
.legal__tabla th, .legal__tabla td { text-align: left; vertical-align: top; padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: 1px solid var(--regla); }
.legal__tabla th { font: 500 var(--t-xs)/1.4 var(--f-datos); text-transform: uppercase; letter-spacing: 0.04em; color: var(--piedra); }
.pendiente { background: #ffe58a; color: #1c1b18; padding: 0 0.25em; border-radius: 2px; font-weight: 600; }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); padding-block: var(--e-7) var(--e-8); align-items: start; }
.contacto__texto { display: grid; gap: var(--e-4); }
.contacto__texto h1 { font-size: var(--t-xl); }
.contacto__texto > p { color: var(--tinta-suave); }
.contacto__nota { margin-top: var(--e-4); padding: var(--e-4) var(--e-5); border-left: 3px solid var(--terracota); background: var(--papel-claro); display: grid; gap: var(--e-2); }
.contacto__nota h2 { font-size: 1.15rem; }
.contacto__nota p { color: var(--tinta-suave); font-size: var(--t-s); }
.contacto__form, .contacto__ok { display: grid; gap: var(--e-4); background: var(--papel-claro); border: 1px solid var(--regla); border-radius: var(--radio); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.contacto__ok { justify-items: start; outline: none; }
.contacto__ok .etiqueta { background: var(--papel); }
.contacto__ok h2 { font-size: 1.5rem; }
.contacto label { display: grid; gap: var(--e-1); font-size: var(--t-s); font-weight: 600; }
.contacto .pista { font-weight: 400; color: var(--piedra); }
.contacto input, .contacto select, .contacto textarea {
  font: 400 var(--t-m)/1.4 var(--f-texto); color: var(--tinta); background: var(--papel);
  border: 1px solid var(--regla); border-radius: var(--radio); padding: 0.65rem 0.8rem; width: 100%;
}
.contacto input:focus, .contacto select:focus, .contacto textarea:focus { outline: 2px solid var(--terracota); outline-offset: 0; border-color: transparent; }
.contacto textarea { resize: vertical; }
.contacto .casilla { display: flex; align-items: start; gap: var(--e-2); font-weight: 400; }
.contacto .casilla input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--terracota); flex: none; }
.formulario__error { color: var(--terracota); font-size: var(--t-s); }
.formulario__error:empty { display: none; }
@media (max-width: 47.99rem) { .contacto { grid-template-columns: minmax(0, 1fr); } }