/* ───────────────────────────────────────────────────────────────────────────
   Plantilla «institucional» — Micrositios VERUMax
   Concepto: una prenda en confección. Lo que falta se ve como un hilván de
   sastre, porque el borrador es la herramienta con la que se le pregunta al
   cliente lo que todavía no nos dijo.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --crema:      #F2EBDC;
  --crema-hond: #E7DECA;
  --papel:      #FBF7EE;
  --tinta:      #23201A;
  --tinta-suave:#5A5348;
  --oliva:      #3E4A2B;
  --oliva-cl:   #5E6E42;
  --tierra:     #7C4A2A;
  --tiza:       #C4432C;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Karla", "Segoe UI", sans-serif;

  --borde: 1px solid color-mix(in srgb, var(--oliva) 22%, transparent);
  --costura: color-mix(in srgb, var(--oliva) 32%, transparent);

  --ancho: 68rem;
  --aire: clamp(3.5rem, 9vw, 7rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--crema);
  /* trama de tela: dos urdimbres finas cruzadas */
  background-image:
    repeating-linear-gradient(90deg, rgba(62,74,43,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg,  rgba(124,74,42,.028) 0 1px, transparent 1px 7px);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .55vw + .9rem, 1.12rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; text-wrap: pretty; }

main { display: block; }

/* ─── Barra de borrador ──────────────────────────────────────────────────── */

.barra-borrador {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--tinta);
  color: var(--crema);
  font-size: .85rem;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.bb-sello {
  font-family: var(--serif);
  font-variation-settings: "WONK" 1;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crema);
  border: 1.5px solid var(--tiza);
  background: color-mix(in srgb, var(--tiza) 28%, transparent);
  padding: .1rem .55rem;
  transform: rotate(-1.6deg);
  flex: none;
}

.bb-texto { margin: 0; flex: 1 1 22ch; opacity: .88; }
.bb-texto strong { color: #F0C9BE; font-weight: 600; }

.bb-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  flex: none;
  user-select: none;
}
.bb-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.bb-pill {
  width: 2.5rem; height: 1.3rem;
  border-radius: 1rem;
  border: 1.5px solid color-mix(in srgb, var(--crema) 45%, transparent);
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.bb-pill::after {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: .9rem;
  border-radius: 50%;
  background: var(--crema);
  transition: transform .18s cubic-bezier(.3,.8,.4,1);
}
.bb-toggle input:checked + .bb-pill { background: var(--tiza); border-color: var(--tiza); }
.bb-toggle input:checked + .bb-pill::after { transform: translateX(1.2rem); }
.bb-toggle input:focus-visible + .bb-pill { outline: 2px solid var(--tiza); outline-offset: 3px; }
.bb-label { white-space: nowrap; opacity: .9; }

/* ─── Tapa ───────────────────────────────────────────────────────────────── */

.tapa {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem) var(--aire);
}

.tapa-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.logo-hueco {
  flex: none;
  width: clamp(7rem, 15vw, 10.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  font-size: .7rem;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--tiza);
  animation: entra .7s .1s both;
}
.logo-hueco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-hueco circle {
  fill: none;
  stroke: var(--tiza);
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
  opacity: .75;
  animation: gira 90s linear infinite;
  transform-origin: 50% 50%;
}
.logo-hueco span { padding: 0 1rem; }

@keyframes gira { to { transform: rotate(360deg); } }

.tapa-tipo {
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oliva-cl);
  margin: 0 0 .7rem;
  animation: entra .7s .15s both;
}

.tapa h1 {
  font-size: clamp(2.9rem, 9vw, 6rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120;
  color: var(--oliva);
  margin: 0;
  animation: entra .8s .2s both;
}

.tapa-lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--tierra);
  margin: .6rem 0 0;
  animation: entra .8s .3s both;
}

.tapa-declara {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.75rem;
  border-top: 2px dashed var(--costura);
  animation: entra .8s .4s both;
}

.declara {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  font-weight: 700;
  color: var(--tinta);
  margin: 0;
}

.remate {
  font-size: 1.05rem;
  color: var(--tierra);
  margin: .4rem 0 0;
  font-style: italic;
}

@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Ley de Talles ──────────────────────────────────────────────────────── */

.talles {
  background: var(--oliva);
  color: var(--crema);
  overflow: hidden;
  position: relative;
}

.talles-cinta {
  display: flex;
  gap: 2rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(242,235,220,.18);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
  animation: corre 44s linear infinite;
  width: max-content;
}
.talles-cinta span { flex: none; }

@keyframes corre { to { transform: translateX(-50%); } }

.talles-cuerpo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2.5rem);
}

.talles h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--crema);
  max-width: 22ch;
}

.talles p {
  margin: .9rem 0 0;
  color: color-mix(in srgb, var(--crema) 80%, transparent);
  font-size: 1.05rem;
}

/* ─── Secciones ──────────────────────────────────────────────────────────── */

.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--aire) clamp(1.25rem, 5vw, 2.5rem);
  border-bottom: 2px dashed var(--costura);
}
.seccion:last-of-type { border-bottom: 0; }

.seccion-titulo {
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  color: var(--oliva);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.seccion-titulo::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1.5px dashed var(--costura);
}

.bajada {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  max-width: 46ch;
  color: var(--tinta-suave);
}

/* ─── Capacidades ────────────────────────────────────────────────────────── */

.capacidades {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--costura);
  border: var(--borde);
}

.capacidades li {
  background: var(--papel);
  padding: 1.5rem 1.4rem 1.6rem;
  transition: background .25s ease, transform .25s ease;
}
.capacidades li:hover { background: var(--crema-hond); transform: translateY(-2px); }

.capacidades h3 {
  font-size: 1.22rem;
  color: var(--tierra);
  margin-bottom: .45rem;
}
.capacidades p { margin: 0; font-size: .96rem; color: var(--tinta-suave); }

.para-quien {
  margin-top: 2.25rem;
  font-size: 1.08rem;
  max-width: 52ch;
}

.etiqueta {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oliva-cl);
  border-bottom: 1px solid currentColor;
  margin-right: .5rem;
  padding-bottom: .1rem;
}

/* ─── Cita grande ────────────────────────────────────────────────────────── */

.cita-grande blockquote {
  margin: 0;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  border-left: 3px solid var(--tierra);
}
.cita-grande p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.15;
  color: var(--oliva);
  margin: 0;
}
.cita-pie {
  font-size: 1.05rem !important;
  font-family: var(--sans) !important;
  color: var(--tinta-suave) !important;
  margin-top: .9rem !important;
}

/* ─── Trabajos ───────────────────────────────────────────────────────────── */

.trabajos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.trabajos li {
  padding: 1.4rem 1.3rem;
  background: var(--papel);
  border: var(--borde);
  border-left: 3px solid var(--tierra);
}
.trabajos h3 { font-size: 1.15rem; color: var(--tinta); margin-bottom: .35rem; }
.trabajos p { margin: 0; font-size: .95rem; color: var(--tinta-suave); }
.trabajo-donde { font-size: .82rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--oliva-cl) !important; margin-top: .5rem !important; }

/* ─── Precios ────────────────────────────────────────────────────────────── */

.precios-aviso {
  background: color-mix(in srgb, var(--tiza) 9%, var(--papel));
  border: 1.5px dashed var(--tiza);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .95rem;
}
.precios-aviso p { margin: .5rem 0 0; }
.precios-fecha { color: var(--tinta-suave); font-size: .88rem; }

table.precios {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  font-size: 1.02rem;
}
table.precios th,
table.precios td {
  text-align: left;
  padding: .75rem .5rem;
  border-bottom: 1px dashed var(--costura);
  font-weight: 400;
}
table.precios td {
  text-align: right;
  font-family: var(--serif);
  font-variation-settings: "WONK" 0;
  font-size: 1.2rem;
  color: var(--oliva);
}
table.precios tr.destacada th,
table.precios tr.destacada td { color: var(--tierra); font-weight: 600; }
.precios-nota { margin-top: 1rem; font-size: .92rem; color: var(--tinta-suave); }

/* ─── Dónde ──────────────────────────────────────────────────────────────── */

.puntos {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.punto {
  background: var(--papel);
  border: var(--borde);
  padding: 1.4rem 1.35rem;
  position: relative;
}
.punto h3 { font-size: 1.2rem; color: var(--oliva); margin-bottom: .5rem; }
.punto-dir { margin: 0; }
.punto-hora {
  margin: .35rem 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-variation-settings: "WONK" 1;
  color: var(--tierra);
}
.punto-dudoso { border-style: dashed; }
.punto-duda { margin: .9rem 0 0 !important; font-size: .85rem; color: var(--tinta-suave); }

/* ─── Contacto ───────────────────────────────────────────────────────────── */

.contacto-grilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.contacto-real {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 1.5rem 1.4rem;
  background: var(--oliva);
  color: var(--crema);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.contacto-real:hover { background: var(--tinta); transform: translateY(-2px); }
.contacto-real .etiqueta { color: color-mix(in srgb, var(--crema) 72%, transparent); border-color: currentColor; }
.contacto-real strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 600;
}
.contacto-nota {
  font-size: .85rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--crema) 70%, transparent);
  margin-top: .3rem;
}

/* ─── EL HUECO ───────────────────────────────────────────────────────────────
   No es un error de la página: es la pregunta que le hacemos al cliente.
   Por eso se ve siempre, con marcas prendidas o apagadas.
   ─────────────────────────────────────────────────────────────────────────── */

.hueco {
  position: relative;
  border: 2px dashed var(--tiza);
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--tiza) 6%, transparent) 0 8px,
      transparent 8px 18px
    );
  padding: 1.5rem 1.35rem 1.35rem;
  margin: 1.5rem 0 0;
}

.hueco-tag {
  display: inline-block;
  position: absolute;
  top: -.72rem;
  left: 1rem;
  background: var(--tiza);
  color: var(--papel);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  transform: rotate(-1.2deg);
}
.hueco-tag.caduco { position: static; transform: rotate(-.8deg); }
.hueco-tag.chico { position: static; font-size: .6rem; padding: .1rem .4rem; }

.hueco-rotulo {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 600;
  color: var(--tiza);
  margin: 0;
}

/* el porqué de cada hueco aparece sólo con las marcas prendidas */
.hueco-detalle {
  font-size: .92rem;
  color: var(--tinta-suave);
  margin: .5rem 0 0;
  max-width: 58ch;
  display: none;
}

.hueco-grande { min-height: 9rem; display: flex; flex-direction: column; justify-content: center; }

/* Hueco «en gestión»: no es una pregunta para el cliente, es trabajo nuestro con
   otra punta. Va en oliva, no en bermellón, para que no lo lea como tarea suya. */
.hueco-gestion {
  border-color: var(--oliva-cl);
  border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--oliva) 7%, transparent) 0 8px,
    transparent 8px 18px
  );
}
.hueco-gestion .hueco-tag { background: var(--oliva); }
.hueco-gestion .hueco-rotulo { color: var(--oliva); }

/* ─── Pie ────────────────────────────────────────────────────────────────── */

.pie {
  background: var(--tinta);
  color: var(--crema);
  padding: var(--aire) clamp(1.25rem, 5vw, 2.5rem) 3rem;
}
.pie > * { max-width: var(--ancho); margin-inline: auto; }

.pie-nombre {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  /* `auto` en el eje horizontal, no `0`: si no, pisa el centrado de `.pie > *`
     y el nombre queda desalineado del bloque legal. */
  margin: 0 auto 1.5rem;
}

.pie-legal {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.pie .hueco {
  background: repeating-linear-gradient(-45deg, rgba(196,67,44,.16) 0 8px, transparent 8px 18px);
  margin-top: 0;
}
.pie .hueco-rotulo { color: #E98D79; }
.pie .hueco-detalle { color: color-mix(in srgb, var(--crema) 62%, transparent); }

.pie-sello {
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(242,235,220,.22);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crema) 55%, transparent);
}

/* ─── Pendientes: la lista completa, sólo con marcas ─────────────────────── */

.pendientes {
  display: none;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--aire) clamp(1.25rem, 5vw, 2.5rem);
}
.pendientes h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--tiza); }
.pendientes-bajada { color: var(--tinta-suave); margin-top: .5rem; }
.pendientes ol {
  margin: 1.75rem 0 0;
  padding: 0 0 0 1.4rem;
  display: grid;
  gap: .7rem;
  max-width: 54ch;
}
.pendientes li { padding-left: .3rem; }
.pendientes li::marker { color: var(--tiza); font-family: var(--serif); font-weight: 700; }

/* ─── Marcas de confección: el hilván ────────────────────────────────────────
   Apagadas, el cliente ve su sitio. Prendidas, ve qué dato salió de dónde.
   ─────────────────────────────────────────────────────────────────────────── */

body:has(#marcas:checked) .obs {
  text-decoration: underline wavy var(--tiza) 1.5px;
  text-underline-offset: .28em;
  text-decoration-skip-ink: none;
}

body:has(#marcas:checked) .obs[data-fuente] { position: relative; cursor: help; }

body:has(#marcas:checked) .obs[data-fuente]:hover::after,
body:has(#marcas:checked) .obs[data-fuente]:focus-visible::after {
  content: attr(data-fuente);
  position: absolute;
  left: 0;
  top: calc(100% + .6rem);
  z-index: 20;
  width: max-content;
  max-width: 26ch;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--sans);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  padding: .45rem .7rem;
  box-shadow: 0 6px 20px rgba(35,32,26,.22);
}

body:has(#marcas:checked) .hueco-detalle { display: block; }
body:has(#marcas:checked) .pendientes { display: block; }

body:has(#marcas:checked) .talles h2::after {
  content: "";
  display: block;
  margin-top: .9rem;
  width: 4rem;
  border-top: 2px dashed var(--tiza);
}

/* ─── Accesibilidad y variantes ──────────────────────────────────────────── */

a:focus-visible,
input:focus-visible,
.obs:focus-visible { outline: 2px solid var(--tiza); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .barra-borrador, .bb-toggle { display: none; }
  body { background: #fff; }
  .hueco-detalle, .pendientes { display: block; }
}