/* ============================================================
   WaterGo · páginas interiores

   Todo lo que no es la landing ni la ficha de producto: TrueSip,
   misión, personalización, empresas, contacto, legales y 404.

   Hereda base, primitivas, cabecera, botones y pie de estilo.css.
   ============================================================ */

/* ---------- cabecera de página ---------- */

.cabeza {
  padding-block: clamp(104px, 13vw, 168px) var(--e-9);
  background: var(--color-background);
}
.cabeza--tenida { background: var(--tinte-nude); }
/* .cabeza__cuerpo NO lleva max-width propio. Comparte elemento con
   .limite, así que cualquier max-width aquí pisa el del contenedor:
   con 62ch la cabecera entera se centraba (h1 en x=505, miga en x=136)
   y con `none` se iba al canal. La medida se limita en el TEXTO. */
.cabeza__titulo {
  max-width: 15ch;
  font-size: var(--t-hero); letter-spacing: -0.045em;
  text-wrap: balance;
}
.cabeza__entrada {
  margin-top: var(--e-5);
  max-width: 46ch;
  font-size: var(--t-lead);
  color: var(--color-secondary);
  text-wrap: pretty;
}
.cabeza__fecha { margin-top: var(--e-6); color: var(--color-muted); }

/* migas · el sitio ya tiene profundidad, hace falta saber dónde se está */
.migas {
  padding-top: clamp(88px, 11vw, 132px);
  padding-bottom: 0;
  font-size: var(--t-small);
  color: var(--color-muted);
}
.migas + .cabeza { padding-top: var(--e-6); }
.migas ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.migas a { text-decoration: none; color: var(--color-secondary); }
.migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.migas__sep { color: var(--color-border); }
.migas [aria-current] { color: var(--color-on-background); }


/* ---------- prosa · legales y texto largo ---------- */

.prosa {
  max-width: 60ch;
  color: var(--color-secondary);
}
.prosa > * + * { margin-top: var(--e-5); }

.prosa h2 {
  margin-top: var(--e-9);
  font-size: var(--t-h3);
  color: var(--color-on-background);
  scroll-margin-top: 120px;
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 {
  margin-top: var(--e-7);
  font-family: var(--f-display);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-on-background);
}
.prosa strong { color: var(--color-on-background); font-weight: 600; }
.prosa a { color: var(--color-on-background); text-underline-offset: 3px; }

.prosa ul, .prosa ol { margin-left: 0; padding-left: var(--e-5); }
.prosa li + li { margin-top: var(--e-3); }
.prosa li::marker { color: var(--color-muted); }

/* datos identificativos: pares clave-valor, no un párrafo corrido */
.prosa dl {
  margin: var(--e-5) 0 0;
  border-top: 1px solid var(--color-border);
  max-width: 560px;
}
.prosa dl div {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.prosa dt {
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-muted);
}
.prosa dd { margin: 0; color: var(--color-on-background); text-align: right; }

/* aviso · lo que hay que leer sí o sí */
.aviso {
  margin-top: var(--e-6);
  padding: var(--e-5);
  background: var(--tinte-azul);
  border-radius: var(--r-m);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
  color: var(--color-on-background);
}
.aviso .dato { display: block; margin-bottom: var(--e-2); color: var(--color-secondary); }

/* borrador · lo que todavía no ha revisado nadie con carrera de derecho */
.borrador {
  margin-bottom: var(--e-8);
  padding: var(--e-5);
  background: color-mix(in srgb, var(--color-warning) 10%, var(--blanco));
  border-left: 3px solid var(--color-warning);
  border-radius: var(--r-s);
  color: var(--color-on-background);
  max-width: 68ch;
}
.borrador b { font-family: var(--f-display); }

/* índice de un legal largo */
.indice {
  position: sticky; top: 108px;
  align-self: start;
}
.indice__et { margin-bottom: var(--e-4); color: var(--color-muted); }
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice li + li { margin-top: var(--e-1); }
.indice a {
  display: block;
  padding: var(--e-2) 0;
  font-size: var(--t-small);
  color: var(--color-secondary);
  text-decoration: none;
}
.indice a:hover { color: var(--color-on-background); text-decoration: underline; text-underline-offset: 3px; }

.legal__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}


/* ---------- bloques de contenido reutilizables ---------- */

.bloque { padding-block: var(--pad-seccion); }
.bloque--tenido { background: var(--tinte-nude); }
.bloque--ceramica { background: var(--color-surface-alt); }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.duo--invertido > :first-child { order: 2; }

.foto-marco {
  margin: 0;
  background: linear-gradient(160deg,
              var(--tinte, var(--tinte-nude)) 0%,
              color-mix(in srgb, var(--tinte, var(--tinte-nude)) 30%, var(--blanco)) 100%);
  border-radius: var(--r-g);
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-l);
}
.foto-marco img {
  width: 100%;
  border-radius: calc(var(--r-g) - 12px);
  background: var(--blanco);
}
.foto-marco figcaption {
  margin-top: var(--e-4);
  padding-inline: var(--e-2);
  font-size: var(--t-small);
  color: var(--color-secondary);
}

/* foto a sangre, sin marco: para contexto real */
.foto-plena { margin: 0; }
.foto-plena img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-g);
  box-shadow: var(--sombra-l);
}

/* pasos numerados · sustituye a la rejilla de tarjetas iguales */
.pasos { counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5);
  padding: var(--e-6) 0;
  border-top: 1px solid var(--color-border);
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  color: var(--color-muted);
  padding-top: 5px;
}
.paso__titulo { font-size: var(--t-h3); }
.paso__texto { margin-top: var(--e-3); color: var(--color-secondary); max-width: 56ch; }

/* las cuatro colecciones */
.colecciones {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
}
.coleccion {
  display: flex; flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--m);
  border-radius: var(--r-g);
  color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
}
/* mezclado contra --m (el pastel) el chip se lavaba: 3,59:1 sobre
   Pink. Rebajado contra transparente y al 74 %, como en la portada. */
.coleccion__ods { color: color-mix(in srgb, var(--tinta) 74%, transparent); }
.coleccion__nombre { font-size: var(--t-h3); }
.coleccion__meta { font-size: var(--t-small); }
.coleccion--sin-color {
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-secondary);
}


/* ---------- formulario ---------- */

.forma { display: grid; gap: var(--e-5); max-width: 560px; }
.forma__fila { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.forma label {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-secondary);
}
.forma input, .forma select, .forma textarea {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-4);
  font: inherit; font-size: var(--t-body);
  color: var(--color-on-background);
  background: var(--blanco);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-m);
}
.forma textarea { min-height: 140px; resize: vertical; }
.forma input:focus-visible, .forma select:focus-visible, .forma textarea:focus-visible {
  outline: 2px solid var(--color-ring); outline-offset: 2px;
}
.forma__consent {
  display: flex; align-items: flex-start; gap: var(--e-3);
  font-size: var(--t-small); color: var(--color-secondary);
}
.forma__consent input { width: 20px; min-height: 20px; height: 20px; flex: none; margin-top: 3px; }
.forma__consent label {
  margin: 0; font-family: var(--f-body); font-size: var(--t-small);
  letter-spacing: 0; text-transform: none; color: inherit;
}
.forma__error {
  margin-top: var(--e-2);
  font-size: var(--t-small);
  color: var(--color-destructive);
}
.forma__error[hidden] { display: none; }
.forma input[aria-invalid="true"], .forma textarea[aria-invalid="true"] {
  border-color: var(--color-destructive);
}
.forma__aviso {
  padding: var(--e-5);
  background: var(--tinte-azul);
  border-radius: var(--r-m);
  color: var(--color-on-background);
}
.forma__aviso[hidden] { display: none; }


/* ---------- 404 ---------- */

.perdido {
  min-height: 62vh;
  display: grid; align-content: center;
  padding-block: clamp(104px, 13vw, 168px) var(--e-9);
}
.perdido__cifra {
  font-family: var(--f-mono);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--tinta) 55%, transparent);
}
.perdido__titulo { margin-top: var(--e-5); font-size: var(--t-h2); }
.perdido__salidas {
  list-style: none; margin: var(--e-7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e-4);
}


/* ---------- banda de cierre ---------- */

.cierre { background: #2A2A27; color: #F7F3F0; padding-block: var(--pad-seccion); }
.cierre .rotulo__titulo { font-size: var(--t-h2); }
.cierre .parrafo { color: #C9C4BE; }
.cierre .btn--primario { background: #F7F3F0; color: var(--tinta); }


/* ---------- aviso de cookies ---------- */

.galleta {
  position: fixed;
  left: var(--e-4); right: var(--e-4); bottom: var(--e-4);
  z-index: var(--z-modal);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--e-5);
  background: color-mix(in srgb, var(--blanco) 94%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-l);
}
.galleta[hidden] { display: none; }
.galleta__texto { font-size: var(--t-small); color: var(--color-secondary); }
.galleta__texto a { color: var(--color-on-background); }
.galleta__botones {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin-top: var(--e-5);
}
.galleta .btn { flex: 1 1 auto; }
.btn--suave {
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
  color: var(--color-on-background);
}
.btn--suave:hover { background: color-mix(in srgb, var(--tinta) 11%, transparent); }


/* ---------- puntos de ruptura ---------- */

@media (min-width: 700px) {
  .colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forma__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos li { grid-template-columns: 64px minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .legal__rejilla { grid-template-columns: 220px minmax(0, 1fr); }
  .colecciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- catálogo ----------
   Doble bisel otra vez: la foto de producto viene sobre blanco y un
   blanco suelto encima del papel cálido se lee como un recorte. La
   tarjeta entera es pulsable con un enlace estirado desde el nombre,
   así que en el árbol de accesibilidad solo hay UN enlace por artículo. */

.catalogo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-6);
  grid-template-columns: minmax(0, 1fr);
}

.articulo {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--tinte);
  border-radius: var(--r-g);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-s);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.articulo:hover { transform: translateY(-6px); box-shadow: var(--sombra-l); }

.articulo__foto {
  position: relative;
  display: block;
  background: var(--blanco);
  border-radius: calc(var(--r-g) - 8px);
  padding: var(--e-4);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9);
  overflow: hidden;
}
.articulo__foto img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  transition: transform 620ms var(--ease-out);
}
.articulo:hover .articulo__foto img { transform: scale(1.04); }

.articulo__medalla {
  position: absolute; top: var(--e-4); left: var(--e-4);
  z-index: 1;
  background: var(--tinta); color: var(--papel);
  padding: 5px var(--e-3);
  border-radius: var(--r-l);
}

.articulo__foto { flex: none; }
.articulo__ficha {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5) var(--e-4) var(--e-4);
}
.articulo__et { color: var(--color-muted); }
.articulo__nombre { font-size: var(--t-h3); }
.articulo__nombre a { text-decoration: none; }
.articulo__nombre a::after { content: ""; position: absolute; inset: 0; }
.articulo__nombre a:hover { text-decoration: underline; text-underline-offset: 4px; }
.articulo__texto { color: var(--color-secondary); font-size: var(--t-small); max-width: 40ch; }
.articulo__precio {
  margin-top: auto; padding-top: var(--e-2);
  font-size: 1.35rem; text-transform: none; letter-spacing: 0;
}

@media (min-width: 700px) {
  .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
  .catalogo--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* ---------- entidades socias ----------
   Vivían en estilo.css, que se reescribió para la portada. Solo las
   usa /mision, así que su sitio es este. */

.causas__socios { margin-top: var(--e-8); }
.socios {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-7);
}
.socios img {
  height: 44px; width: auto;
  /* los logos vienen en colores y pesos distintos; unificarlos a la
     tinta evita el confeti de marcas ajenas sobre el pastel */
  filter: grayscale(1) contrast(1.1);
  opacity: .78;
  mix-blend-mode: multiply;
}