/* La web para negocios de J&G (DEC-0080): el sistema visual de la app (src/escanea_y_juega/estaticos/estilo.css), lo
   justo para estas páginas. Las variables se llaman igual y valen lo mismo que en la app (lo vigila
   test/test_web_negocios.py); las letras y las figuras son las suyas. El modo oscuro lo elige el móvil
   (prefers-color-scheme): esta web no lleva JavaScript ni guarda nada. Lo que solo tiene esta web va con «--web-»: los
   títulos algo más grandes en escritorio, el botón de 52 px y el aire entre secciones (como en el boceto aprobado el
   10-11, enlazado en DEC-0080). Móvil primero; desde 40rem, con más margen; desde 60rem, a dos columnas. */

/* Letras (las de la app, con su licencia OFL junto a ellas): solo el juego «latin», que trae todo el español */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/estaticos/letras/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/estaticos/letras/bricolage-grotesque.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url("/estaticos/letras/caveat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --color-fondo: #faf8f5;
  --color-superficie: #ffffff;
  --color-texto: #1f2328;
  --color-texto-secundario: #5b616b;
  --color-linea: #e7e3dc;
  --color-borde-control: #858a93;
  --color-principal: #c2410c;          /* solo «Escríbenos» */
  --color-principal-hover: #9a3412;
  --color-principal-suave: #fff1e8;
  --color-sobre-principal: #ffffff;
  --color-acento: #8a4b0f;             /* la tinta del sello */
  --color-acento-oscuro: #6e3b0b;
  --color-acento-suave: #fdf1de;

  --letra: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-titulos: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-mano: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --texto-base: 1.0625rem;
  --texto-pequeno: 0.9375rem;
  --titulo-2: 1.375rem;

  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;

  --radio: 12px;
  --radio-control: 10px;
  --sombra: 0 1px 2px rgb(31 35 40 / 0.06), 0 1px 1px rgb(31 35 40 / 0.04);
  --sombra-destacada: 0 1px 2px rgb(31 35 40 / 0.06), 0 6px 18px rgb(154 52 18 / 0.08);
  --transicion: 150ms ease;
  --objetivo-tactil: 48px;

  /* Solo de esta web */
  --web-ancho: 70rem;                   /* 1.120 px: la columna en escritorio */
  --web-margen: var(--espacio-5);       /* a los lados: 24 px en el móvil, 40 desde 40rem */
  --web-titulo-1: 2.25rem;              /* 36 px; 48 en escritorio */
  --web-titulo-2: var(--titulo-2);      /* 22 px; 28 en escritorio */
  --web-resumen: 1.1875rem;             /* 19 px */
  --web-seccion: var(--espacio-7);      /* entre secciones: 48 px; 112 en escritorio */
  --web-boton-alto: 3.25rem;            /* 52 px: la única acción de la página, cómoda para el dedo */
  --web-sombra-nota: 0 2px 4px rgb(31 35 40 / 0.12);  /* el papelito de la nota, encima de la foto */
}

/* El modo oscuro de la app (los mismos nombres; solo cambian los valores) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #171412;
    --color-superficie: #221e1a;
    --color-linea: #3b352f;
    --color-texto: #f3ede6;
    --color-texto-secundario: #b8afa4;
    --color-borde-control: #857c72;
    --color-principal: #f07a3e;
    --color-principal-hover: #f59a6a;
    --color-principal-suave: #3a2219;
    --color-sobre-principal: #1a120c;
    --color-acento: #e0a458;
    --color-acento-oscuro: #f2c58a;
    --color-acento-suave: #3a2a17;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-destacada: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.35);
    --web-sombra-nota: 0 2px 4px rgb(0 0 0 / 0.45);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--letra);
  font-size: var(--texto-base);
  line-height: 1.6;
}

h1, h2, h3 { margin: 0; font-family: var(--letra-titulos); line-height: 1.2; }
h1 { font-size: var(--web-titulo-1); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--web-titulo-2); font-weight: 650; line-height: 1.25; }
h3 { font-size: 1.1875rem; font-weight: 650; line-height: 1.3; }
p, ol, ul, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--color-principal-hover); text-underline-offset: 0.2em; }

/* Foco visible y claro para quien va con el teclado */
:focus-visible {
  outline: 3px solid var(--color-principal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto solo para el lector de pantalla («Sí» y «No» de la tabla) */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.texto-secundario { color: var(--color-texto-secundario); }
.texto-pequeno { font-size: var(--texto-pequeno); line-height: 1.45; }
.enlace { color: var(--color-principal-hover); font-weight: 700; overflow-wrap: anywhere; }  /* un correo largo se parte */
.nota { font-family: var(--letra-mano); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--color-acento); }

/* La columna: a lo ancho en el móvil y de 1.120 px como mucho */
.contenedor {
  width: 100%;
  max-width: calc(var(--web-ancho) + 2 * var(--web-margen));
  margin-inline: auto;
  padding-inline: var(--web-margen);
}

/* ---------- Botones (los de la app) ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--web-boton-alto);
  padding: 0 var(--espacio-5);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transicion), transform var(--transicion);
}
.boton:active { transform: scale(0.98); }
.boton--principal { background: var(--color-principal); color: var(--color-sobre-principal); }
.boton--secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde-control); }

@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover { background: var(--color-principal-hover); }
  .boton--secundario:hover { background: var(--color-fondo); }
}

/* ---------- La portada ---------- */

.cabecera { padding-block: var(--espacio-4) var(--espacio-2); }
.marca-jg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-tactil);
  min-height: var(--objetivo-tactil);
}
.marca-jg img { width: 2.75rem; height: 2.75rem; filter: drop-shadow(0 2px 3px rgb(154 52 18 / 0.18)); }

/* Las rejillas, con su columna en minmax(0, 1fr): lo que no cabe se parte dentro y nunca ensancha la página (R-84) */
.seccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5); padding-block-end: var(--web-seccion); }

/* Arriba: qué es, la acción y el bodegón del mostrador con su nota a mano */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); padding-block: var(--espacio-2) var(--web-seccion); }
.portada__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); }
.portada__resumen { max-width: 32rem; font-size: var(--web-resumen); line-height: 1.5; }
.portada__accion { display: grid; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.portada__accion .boton { width: 100%; }
.portada__foto { position: relative; max-width: 30rem; margin-top: var(--espacio-6); }
.portada__foto img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-destacada); }
.portada__nota {
  position: absolute;
  top: calc(-1 * var(--espacio-5));
  left: calc(-1 * var(--espacio-2));
  max-width: calc(100% + var(--espacio-2));
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-2);
  background: var(--color-acento-suave);
  color: var(--color-acento-oscuro);
  transform: rotate(-4deg);
  box-shadow: var(--web-sombra-nota);
}

/* Así funciona: los tres pasos y la tarjeta de ejemplo */
.como__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5); }
.pasos-tienda { display: grid; gap: var(--espacio-5); padding: 0; list-style: none; }
.paso-tienda { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--espacio-4); align-items: start; }
.paso-tienda__numero {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-principal-suave);
  color: var(--color-principal-hover);
  font-family: var(--letra-titulos);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
}
.paso-tienda__texto { display: grid; gap: var(--espacio-1); }
.paso-tienda__texto strong { line-height: 1.4; }
.paso-tienda__figura { grid-column: 2; width: 6.5rem; }

.ejemplo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2); max-width: 27.5rem; }
.tarjeta-ejemplo {
  padding: var(--espacio-5);
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-ejemplo__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.tarjeta-ejemplo__cabeza img { flex: none; width: 3rem; height: 3rem; }
.tarjeta-ejemplo__nombre { min-width: 0; font-family: var(--letra-titulos); font-size: 1.25rem; font-weight: 650; line-height: 1.25; }
.tarjeta-ejemplo__meta { margin-top: var(--espacio-3); }

/* Los huecos de la tarjeta de sellos, como en la app (estilo.css, «Huecos de la tarjeta de sellos»): sellado = tinta con
   el borde a mano (#tembleque) y una ✓; vacío = círculo discontinuo */
.huecos { display: grid; grid-template-columns: repeat(4, minmax(0, 3rem)); gap: var(--espacio-3); margin-top: var(--espacio-4); }
.hueco { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.hueco circle { fill: none; stroke: var(--color-borde-control); stroke-width: 2; stroke-dasharray: 4 4; }
.hueco--lleno .hueco__tinta { fill: var(--color-acento-suave); stroke: var(--color-acento); stroke-width: 2.6; stroke-dasharray: none; }
.hueco__marca { fill: none; stroke: var(--color-acento-oscuro); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.filtro-tinta { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Para qué tiendas: los oficios, con sus figuras de la app */
.tiendas__texto { max-width: 40rem; }
.oficios { display: flex; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-3); margin-top: var(--espacio-2); padding: 0; list-style: none; }
.oficio { display: grid; justify-items: start; gap: var(--espacio-1); width: 6rem; font-size: var(--texto-pequeno); font-weight: 700; }
.oficio img { width: 4.5rem; height: 4.5rem; }

/* Qué trae cada plan: solo lo que J&G ya hace. Si la tabla no cabe (la letra muy grande en un móvil estrecho), se desliza
   ella sola de lado, y la página no: una tabla puede hacerlo (WCAG 1.4.10) */
.planes__marco { overflow-x: auto; }
.planes__tabla { width: 100%; max-width: 50rem; border-collapse: collapse; font-size: var(--texto-pequeno); line-height: 1.45; }
.planes__tabla thead th {
  width: 4.5rem;
  padding: var(--espacio-2) var(--espacio-1);
  border-bottom: 2px solid var(--color-texto);
  font-family: var(--letra-titulos);
  font-size: var(--texto-base);
  font-weight: 650;
  text-align: center;
}
.planes__tabla thead th:first-child { width: auto; padding-inline-start: 0; text-align: left; }
.planes__tabla tbody th {
  padding: var(--espacio-3) var(--espacio-2) var(--espacio-3) 0;
  border-bottom: 1px solid var(--color-linea);
  font-weight: 400;
  text-align: left;
}
.planes__tabla td { border-bottom: 1px solid var(--color-linea); text-align: center; }
.planes__si {
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
  vertical-align: middle;
  fill: none;
  stroke: var(--color-acento);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.planes__cifra { font-weight: 700; font-variant-numeric: tabular-nums; }
.planes__no { color: var(--color-texto-secundario); }
.planes__precio { display: grid; gap: var(--espacio-1); margin-top: var(--espacio-4); }

/* Lo que nos preguntan: se abren sin JavaScript */
.preguntas { gap: var(--espacio-4); }
.preguntas__lista { max-width: 47.5rem; border-top: 1px solid var(--color-linea); }
.pregunta { padding-block: var(--espacio-1); border-bottom: 1px solid var(--color-linea); }
.pregunta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--web-boton-alto);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pregunta__titulo::-webkit-details-marker { display: none; }
.pregunta__flecha {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--color-texto-secundario);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transicion);
}
.pregunta[open] .pregunta__flecha { transform: rotate(180deg); }
.pregunta__respuesta { max-width: 40rem; padding-bottom: var(--espacio-4); }

/* ¿Te lo enseñamos?: la banda del final, del color del papel de la nota */
.contacto { padding-block: var(--espacio-7); background: var(--color-acento-suave); }
.contacto__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); }
.contacto__texto { max-width: 40rem; }
.contacto .boton { width: 100%; }

.pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-3);
  padding-block: var(--espacio-6) var(--espacio-7);
  color: var(--color-texto-secundario);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
}
.pie__marca { display: flex; align-items: center; gap: var(--espacio-3); }
.pie__marca img { flex: none; width: 2rem; height: 2rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-5); }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: var(--objetivo-tactil); color: var(--color-texto); }

/* ---------- El aviso legal y «No encontramos esta página» ---------- */

.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-6); padding-block: var(--espacio-4) var(--espacio-7); }
.legal > * { max-width: 44rem; }
.legal__parte { display: grid; gap: var(--espacio-3); }
.legal__datos { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--espacio-2) var(--espacio-5); }
.legal__datos dt { font-weight: 700; }
.legal__datos dd { overflow-wrap: anywhere; }
.legal .boton { justify-self: start; }

.error { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--espacio-4); padding-block: var(--espacio-6) var(--espacio-7); }
.error__texto { max-width: 32rem; font-size: var(--web-resumen); line-height: 1.5; }

/* ---------- Más ancho: más margen y el botón a su tamaño ---------- */

@media (min-width: 40rem) {
  :root { --web-margen: 2.5rem; }
  .portada__accion { justify-items: start; }
  .portada__accion .boton, .contacto .boton { width: auto; padding-inline: 2.25rem; }
  .contacto__cuerpo { justify-items: start; }
}

/* ---------- Escritorio: a dos columnas ---------- */

@media (min-width: 60rem) {
  :root {
    --web-titulo-1: 3rem;
    --web-titulo-2: 1.75rem;
    --web-seccion: 7rem;
  }
  h1 { max-width: 12.5em; line-height: 1.08; letter-spacing: -0.015em; }
  .seccion { gap: var(--espacio-6); }

  .cabecera { padding-block-start: var(--espacio-5); }
  .portada { grid-template-columns: minmax(0, 1fr) 30rem; gap: 4.5rem; align-items: center; padding-block-start: 2.5rem; }
  .portada__texto { gap: 1.25rem; }
  .portada__accion { margin-top: var(--espacio-3); }
  .portada__foto { margin-top: 0; }
  .portada__nota { top: -1.625rem; left: -1.75rem; padding: var(--espacio-2) var(--espacio-4) 0.625rem; font-size: 1.6875rem; }

  .como__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 27.5rem; gap: 4.5rem; align-items: start; }
  .pasos-tienda { gap: var(--espacio-6); max-width: 36rem; }
  .paso-tienda { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; }
  .paso-tienda--con-figura { grid-template-columns: 2.75rem minmax(0, 1fr) 7.5rem; }
  .paso-tienda__numero { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
  .paso-tienda__texto strong { font-size: 1.1875rem; }
  .paso-tienda__figura { grid-column: 3; grid-row: 1; width: 7.5rem; }
  .tarjeta-ejemplo { padding: var(--espacio-5) var(--espacio-6) var(--espacio-6); }
  .tarjeta-ejemplo__cabeza img { width: 3.5rem; height: 3.5rem; }
  .tarjeta-ejemplo__nombre { font-size: var(--titulo-2); }

  .oficios { gap: var(--espacio-5) 2.5rem; margin-top: var(--espacio-3); }
  .oficio { gap: var(--espacio-2); width: 8.5rem; font-size: var(--texto-base); }
  .oficio img { width: 7rem; height: 7rem; }

  .planes__tabla { font-size: var(--texto-base); }
  .planes__tabla thead th { width: 8rem; padding: 0.625rem var(--espacio-2); font-size: 1.1875rem; }
  .planes__tabla tbody th { padding: 0.875rem var(--espacio-4) 0.875rem 0; }
  .planes__si { width: 1.5rem; height: 1.5rem; }
  .planes__precio { margin-top: 1.25rem; }
  .planes__precio h3 { font-size: 1.3125rem; }

  .pregunta { padding-block: 0.375rem; }
  .pregunta__titulo { gap: var(--espacio-5); min-height: 3.5rem; font-size: 1.1875rem; }
  .pregunta__flecha { width: 1.5rem; height: 1.5rem; }
  .pregunta__respuesta { padding-bottom: 1.125rem; }

  .contacto { padding-block: 5rem; }
  .contacto__cuerpo { gap: 1.125rem; }
  .contacto__texto { font-size: var(--web-resumen); line-height: 1.5; }

  .pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-4) var(--espacio-6); padding-block: 2.5rem 3.5rem; }
  .pie__enlaces { gap: 0 1.75rem; }
}

/* Quien pide menos movimiento: ni el botón encoge ni la flecha gira; los cambios de color se quedan */
@media (prefers-reduced-motion: reduce) {
  .boton:active { transform: none; }
  .pregunta__flecha { transition: none; }
}