/* ============================================================
   WaterGo · /empresas

   NORTH STAR: la prueba de imprenta. La hoja que el impresor manda
   antes de fabricar — papel cerámico, la botella ya marcada, los
   datos en mono al margen y una casilla al pie para firmar.

   LO QUE SE RECHAZA, que es lo que hace TODA página de regalo de
   empresa: rejilla de cuarenta productos, muro de «confían en
   nosotros», foto de equipo sonriente, tres viñetas con icono,
   contador de botellas salvadas y el precio escondido detrás de un
   «pídenos presupuesto» sin escala. Aquí hay un producto en tres
   tallas, ningún logotipo de cliente verificado y la escalera de
   descuento a la vista: lo único que se pide a cambio del correo es
   el número final.

   REGLAS DE LA CASA QUE ESTE FICHERO CUMPLE:
   · La firma      — un solo botón negro en la página: el del form.
   · El papel crudo — el pastel aparece UNA vez, en las causas.
   · Los cuatro números — los datos van en mono con tabular-nums.
   · La foto real   — solo producto real, en multiply.
   · El gesto único — solo se mueven los euros al escribirse.
   ============================================================ */


/* ------------------------------------------------------------
   01 · La prueba
   ------------------------------------------------------------ */

.emp-prueba {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 900px) {
  .emp-prueba { grid-template-columns: 1.1fr 1fr; gap: var(--e-8); }
}

.emp-prueba__foto { margin: 0; }

.emp-prueba__texto .prosa__entrada {
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  max-width: 44ch;
}

/* El dato al margen de la hoja: mono, versalita, cifras de ancho
   fijo. Es la letra del impresor, no un cintillo decorativo. */
.emp-dato {
  margin-top: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--gris-55);
  font-variant-numeric: tabular-nums;
}

/* El ancla de texto. NO es un botón: el único botón de la página
   es el de la firma. */
.emp-ancla {
  display: inline-block;
  margin-top: var(--e-4);
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-micro, 140ms) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .emp-ancla:hover { border-bottom-color: var(--tinta); }
}


/* ------------------------------------------------------------
   02 · Lo que se queda en la mesa

   Dos columnas: el argumento en serif y la ficha técnica en mono.
   Ninguna foto, para no parecerse a la sección de arriba.
   ------------------------------------------------------------ */

.emp-mesa { display: grid; gap: var(--e-7); }

@media (min-width: 900px) {
  .emp-mesa {
    grid-template-columns: 1.3fr 0.9fr;
    gap: var(--e-9);
    align-items: start;
  }
}

.emp-mesa__datos { align-self: start; }


/* ------------------------------------------------------------
   03 · Tres colores, tres causas

   El ÚNICO pastel de la página, y va atado a un significado: cada
   color financia un objetivo. Tres bandas a sangre.
   ------------------------------------------------------------ */

.emp-causas { padding-bottom: 0; }

.emp-bandas {
  margin-top: var(--e-7);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .emp-bandas { grid-template-columns: repeat(3, 1fr); }
}

.emp-banda {
  padding: var(--e-7) var(--canal) var(--e-6);
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  text-align: center;
}

.emp-banda[data-color="nude"] { background: var(--nude); }
.emp-banda[data-color="pink"] { background: var(--pink); }
.emp-banda[data-color="blue"] { background: var(--blue); }

/* ⚠️⚠️ AQUÍ NO VA `mix-blend-mode: multiply`. NUNCA.

   Las nueve fotos de `assets/img/gama/` van RECORTADAS, con canal
   alfa. Multiply no quita un fondo: multiplica TODO por el color de
   debajo, así que sobre el campo Pink el aro de acero salía cobrizo
   y la botella dos tonos más oscura. Mario lo cazó el 30/07/2026
   —«parece que hay una máscara de color en todo, hasta el acero
   parece rosado»— y lo volvió a cazar aquí el 22/09, en esta misma
   sección, porque lo puse otra vez.

   No canta sobre Nude ni sobre Blue, que son casi blancos: solo
   sobre un campo saturado. Por eso puede estar meses puesto sin que
   nadie lo vea.

   CAJA COMÚN Y APOYADAS ABAJO: las tres fotos no comparten
   proporción (544, 536 y 593 px de alto con el mismo ancho, medido
   en Chrome), así que sin esto cada botella flota a su altura y los
   chips de ODS se descuadran 38 px. */
.emp-banda img {
  width: min(180px, 52vw);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
}

.emp-banda__linea {
  margin: 0;
  max-width: 24ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: color-mix(in srgb, var(--tinta) 82%, transparent);
}


/* ------------------------------------------------------------
   04 · La escalera y la firma · EL MURO
   ------------------------------------------------------------ */

.emp-escalera__cuerpo { display: grid; gap: var(--e-7); }

@media (min-width: 980px) {
  .emp-escalera__cuerpo {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-8);
    align-items: start;
  }
}

.emp-hoja__pie { max-width: 52ch; color: var(--color-secondary); }

.emp-tabla {
  width: 100%;
  margin-top: var(--e-5);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.emp-tabla th,
.emp-tabla td {
  padding: var(--e-3) var(--e-2);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

.emp-tabla thead th {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--gris-55);
  font-weight: 500;
  border-bottom-color: var(--gris-45);
}

.emp-tabla tbody th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-weight: 500;
}

.emp-tabla tbody td:nth-child(2) {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--gris-55);
}

/* La columna de los euros, VACÍA. Una raya de lápiz, no un
   difuminado y no un candado: falta una firma, no se esconde nada.
   El min-width evita que la tabla salte de ancho al llenarse. */
.emp-euro {
  position: relative;
  min-width: 5.4ch;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--tinta);
}

.emp-euro:empty::after,
.emp-tabla:not(.tiene-euros) .emp-euro::after {
  content: "";
  position: absolute;
  right: var(--e-2);
  bottom: 14px;
  width: 3.2ch;
  border-bottom: 1px solid var(--gris-45);
}

/* Los euros se escriben. Único gesto de la página. */
.emp-euro {
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.emp-tabla:not(.tiene-euros) .emp-euro { opacity: 1; }
.emp-euro.esta-escrita { opacity: 1; }

/* La fila del tramo elegido: anillo y peso, no solo color. */
.emp-tabla tbody tr.es-elegida th,
.emp-tabla tbody tr.es-elegida td {
  background: var(--tinte-nude);
  font-weight: 650;
}

.emp-tabla tbody tr.es-elegida th:first-child {
  box-shadow: inset 3px 0 0 var(--tinta);
}

/* --- la firma --- */

.emp-firma {
  padding: var(--e-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Radio grande: esto SÍ es un panel, al revés que la tarjeta del
     héroe, que es un control. */
  border-radius: var(--r-g);
  box-shadow: var(--sombra-s);
}

.emp-firma h3 { font-size: var(--t-h3); text-wrap: balance; }
.emp-firma > p { margin-top: var(--e-3); color: var(--color-secondary); }
.emp-firma .forma { margin-top: var(--e-5); }

/* Las cuatro píldoras del tamaño del pedido. */
.emp-tallas { border: 0; padding: 0; margin: 0; }

.emp-tallas legend {
  padding: 0;
  font-size: var(--t-small);
  color: var(--color-secondary);
  margin-bottom: var(--e-2);
}

.emp-tallas__fila { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.emp-tallas label { position: relative; }

.emp-tallas input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.emp-tallas span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-l);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}

.emp-tallas input:checked + span {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
}

.emp-tallas input:focus-visible + span {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Firmada: el formulario se pliega. Ha hecho su trabajo, y dejarlo
   entero encima de los precios es pedir dos veces lo mismo. */
.forma.esta-firmada > div:not(.forma__aviso),
.forma.esta-firmada > fieldset { display: none; }


/* ------------------------------------------------------------
   05 · Cómo se marca
   ------------------------------------------------------------ */

.emp-marca__cuerpo { display: grid; gap: var(--e-6); }

@media (min-width: 900px) {
  .emp-marca__cuerpo {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--e-8);
    align-items: center;
  }
}


/* ------------------------------------------------------------
   06 · Preguntas
   ------------------------------------------------------------ */

.emp-directo {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-secondary);
}


/* ------------------------------------------------------------
   La tabla a 390

   ⚠️ Visto en Chrome a 390 px: «14,41 €» se partía en dos líneas
   —la cifra arriba y el € debajo— y «−12 %» hacía lo mismo. Una
   tabla de precios con las cifras rotas se lee como un error de
   maquetación, y encima descuadra el alto de cada fila.

   Se arregla con `nowrap` en todo lo que es un número y con menos
   aire lateral, no encogiendo la letra por debajo de lo legible.
   ------------------------------------------------------------ */

@media (max-width: 560px) {
  .emp-tabla th,
  .emp-tabla td {
    padding: var(--e-3) 4px;
    white-space: nowrap;
  }

  .emp-tabla thead th { font-size: 0.62rem; letter-spacing: 0.1em; }

  .emp-tabla tbody th,
  .emp-tabla tbody td:nth-child(2) { font-size: 0.82rem; }

  .emp-euro { font-size: 0.82rem; min-width: 4.8ch; }

  /* La raya de lápiz, alineada con la nueva altura de fila. */
  .emp-euro:empty::after,
  .emp-tabla:not(.tiene-euros) .emp-euro::after {
    right: 4px;
    bottom: 12px;
    width: 2.8ch;
  }

  .emp-firma { padding: var(--e-5) var(--e-4); border-radius: var(--r-m); }
}



/* ============================================================
   01 · El aviso de «personalízalo»

   El «toast» de Mario. Estático y arriba del todo, no flotando:
   una barra pegajosa en una página que ya es una oferta tapa justo
   lo que se ha venido a leer.

   Lleva la misma pestaña de archivador que la tarjeta del héroe
   —de donde viene mucha de esta gente—, y por eso comparte el
   gesto de estar «dejada» sobre el papel.
   ============================================================ */

.emp-aviso-zona { padding-block: 0 var(--pad-seccion); }

.emp-aviso {
  position: relative;
  max-width: 760px;
  margin-top: var(--e-6);
  padding: var(--e-6) var(--e-6) var(--e-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-s) var(--r-g) var(--r-g) var(--r-g);
  box-shadow: var(--sombra-m);
}

.emp-aviso__solapa {
  position: absolute;
  bottom: 100%;
  margin-bottom: -6px;
  left: var(--e-6);

  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: var(--tinta);
  color: var(--ceramica);
  border-radius: 8px 8px 2px 2px;

  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.emp-aviso__texto {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.emp-aviso__pie {
  margin: var(--e-3) 0 0;
  color: var(--color-secondary);
  font-size: var(--t-small);
}


/* ============================================================
   02 · Las dos técnicas

   El láser manda: tiene la foto a tamaño grande. El color va al
   lado, como la alternativa que es. NO son dos tarjetas gemelas.
   ============================================================ */

.emp-marca__foto { margin: 0; }

.emp-tecnica { margin-top: var(--e-5); }
.emp-tecnica h3 { font-size: var(--t-h3); }
.emp-tecnica p { margin-top: var(--e-2); color: var(--color-secondary); max-width: 54ch; }

/* La de color va en su propia caja: es la alternativa, y se ve que
   lo es sin tener que decirlo. */
.emp-tecnica--color {
  padding: var(--e-5);
  background: var(--tinte-nude);
  border-radius: var(--r-m);
}

.emp-tecnica--color p { color: var(--tinta); }


/* ============================================================
   03 · Cómo está hecha · cuatro bloques con icono

   Sustituye la lista de especificaciones dt/dd, que Mario mandó
   fuera: «esa tabla es aburrida y queda mucho de pegote».

   Los iconos son SVG en línea con los trazos de Lucide (ISC). NO
   hay librería: esta casa no carga una dependencia para dibujar
   cuatro líneas. Todos comparten caja de 24 y grosor 1,5, que es
   lo que hace que se lean como una familia y no como cuatro
   dibujos sueltos.
   ============================================================ */

.emp-ficha__titulo { margin-bottom: var(--e-6); }

.emp-ficha {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .emp-ficha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .emp-ficha { grid-template-columns: repeat(4, 1fr); } }

.emp-pieza {
  padding: var(--e-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Radio de tarjeta, no de panel: son cuatro fichas pequeñas. */
  border-radius: var(--r-m);
}

.emp-pieza__icono {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emp-pieza h3 {
  margin-top: var(--e-4);
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.emp-pieza p {
  margin-top: var(--e-2);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--color-secondary);
}


/* ============================================================
   04 · El gancho de los precios

   Mario lo pidió con todas las letras: que se vea el descuento y
   lo que cuesta el grabado ANTES de la tabla. La cifra va en
   display grande y el resto en mono, que es como habla el resto
   de la hoja.
   ============================================================ */

.emp-gancho {
  margin: var(--e-4) 0 var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.emp-gancho__cifra {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.emp-gancho__y {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--gris-55);
  font-variant-numeric: tabular-nums;
}

.emp-gancho__y b { color: var(--tinta); font-weight: 500; }


/* En móvil, una columna de lectura. En pantalla grande pasa a dos,
   más abajo. */
.emp-mesa-sola { max-width: 62ch; }


/* ============================================================
   El ancho de lectura en pantalla grande

   ⚠️ Mario, 22/09: «los textos los haces estrechos como una columna
   central en PC y parece que sea diseño para móvil». Medido en un
   viewport de 1440: los bloques de texto ocupaban 525 px de los
   1280 del límite. Menos de la mitad.

   La solución NO es estirar la línea: una línea de 100 caracteres
   no se lee, y por eso estaban a 60ch. Lo que se hace es usar el
   ancho de otra forma, y cada sección de una manera distinta para
   no repetir la misma familia de maquetación tres veces:

     · El texto largo     → dos columnas de periódico.
     · La entrada de causas → título a un lado, texto al otro.
     · Las preguntas      → dos columnas.

   Por debajo de 900 px todo vuelve a una sola columna, que en un
   móvil es lo único que se lee.
   ============================================================ */

@media (min-width: 900px) {

  /* --- el texto largo, a dos columnas --- */
  .emp-mesa-sola {
    max-width: none;
    columns: 2;
    column-gap: var(--e-9);
  }

  /* El titular cruza las dos columnas: si entrara en el flujo, la
     primera columna empezaría con el título y la segunda a media
     frase, que es como se lee un periódico mal maquetado. */
  .emp-mesa-sola h2 {
    column-span: all;
    margin-bottom: var(--e-5);
  }

  /* Un párrafo partido entre dos columnas obliga a subir la vista
     para seguir leyendo. Aquí caben enteros. */
  .emp-mesa-sola p { break-inside: avoid; }
  .emp-mesa-sola p:first-of-type { margin-top: 0; }

  /* --- la entrada de las causas: título a un lado --- */
  .emp-causas > .limite > .prosa {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    column-gap: var(--e-8);
    align-items: start;
  }

  .emp-causas > .limite > .prosa h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .emp-causas > .limite > .prosa p { grid-column: 2; max-width: 64ch; }
  .emp-causas > .limite > .prosa p:first-of-type { margin-top: 0; }

  /* --- las preguntas, a dos columnas --- */
  .faq .prosa {
    max-width: none;
    columns: 2;
    column-gap: var(--e-9);
  }

  .faq .prosa h2 { column-span: all; margin-bottom: var(--e-5); }

  /* La pregunta y su respuesta no se separan nunca. */
  .faq .prosa h3 { break-after: avoid; break-inside: avoid; }
  .faq .prosa p  { break-inside: avoid; }

  /* El cierre de contacto cruza el ancho entero: es el pie de la
     sección, no una tercera pregunta. */
  .faq .prosa .emp-directo { column-span: all; }

  /* --- la ficha de precios, con más sitio para la tabla --- */
  .emp-hoja__pie { max-width: 60ch; }
}

/* El aviso de lavado, común a las dos técnicas. */
.emp-lavado {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--color-secondary);
  max-width: 58ch;
}


/* ============================================================
   El ancho de lectura en pantalla grande

   ⚠️ Mario, 22/09: «los textos los haces estrechos como una columna
   central en PC y parece que sea diseño para móvil». Medido en un
   viewport de 1440: los bloques de texto ocupaban 525 px de los
   1280 del límite. Menos de la mitad.

   La solución NO es estirar la línea: una línea de 100 caracteres
   no se lee, y por eso estaban a 60ch. Lo que se hace es usar el
   ancho de otra forma, y cada sección de una manera distinta para
   no repetir la misma familia de maquetación tres veces:

     · El texto largo       → dos columnas de periódico.
     · La entrada de causas → título a un lado, texto al otro.
     · Las preguntas        → dos columnas.

   Por debajo de 900 px todo vuelve a una sola columna, que en un
   móvil es lo único que se lee.
   ============================================================ */

@media (min-width: 900px) {

  /* --- el texto largo, a dos columnas --- */
  .emp-mesa-sola {
    max-width: none;
    columns: 2;
    column-gap: var(--e-9);
  }

  /* El titular cruza las dos columnas: si entrara en el flujo, la
     primera columna empezaría con el título y la segunda a media
     frase, que es como se lee un periódico mal maquetado. */
  .emp-mesa-sola h2 {
    column-span: all;
    margin-bottom: var(--e-5);
  }

  /* Un párrafo partido entre dos columnas obliga a subir la vista
     para seguir leyendo. Aquí caben enteros. */
  .emp-mesa-sola p { break-inside: avoid; }
  .emp-mesa-sola p:first-of-type { margin-top: 0; }

  /* --- la entrada de las causas: el título a un lado --- */
  .emp-causas > .limite > .prosa {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    column-gap: var(--e-8);
    align-items: start;
  }

  .emp-causas > .limite > .prosa h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .emp-causas > .limite > .prosa p { grid-column: 2; max-width: 64ch; }
  .emp-causas > .limite > .prosa p:first-of-type { margin-top: 0; }

  /* --- las preguntas, a dos columnas --- */
  .faq .prosa {
    max-width: none;
    columns: 2;
    column-gap: var(--e-9);
  }

  .faq .prosa h2 { column-span: all; margin-bottom: var(--e-5); }

  /* La pregunta y su respuesta no se separan nunca. */
  .faq .prosa h3 { break-after: avoid; break-inside: avoid; }
  .faq .prosa p  { break-inside: avoid; }

  /* El cierre de contacto cruza el ancho entero: es el pie de la
     sección, no una tercera pregunta. */
  .faq .prosa .emp-directo { column-span: all; }

  /* --- la hoja de precios, con sitio para la tabla --- */
  .emp-hoja__pie { max-width: 60ch; }
}