/* GC Digital: colores de los tintes naturales de Oaxaca (añil, grana cochinilla, pericón) sobre blanco.
   Una sola familia, Alegreya Sans (Huerta Tipográfica). Lo llamativo es el título de la portada
   con «bien hecho» en grana; todo lo demás se queda quieto. */
:root {
  --anil: #1B2A4A;
  --anil-suave: #47536B;
  --grana: #9B1D34;
  --grana-oscura: #761426;
  --pericon: #E2B23A;
  --fondo: #F0F2F6;
  --piedra: #E4E8EF;
  --linea: #CFD5DF;
  --blanco: #FFFFFF;
  --ajolote: #0E3B2C;
  --costeo: #F6DCCB;
  --copal: #F6E1EA;
  --calculadoras: #DDEFE6;
  --letra: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --ancho: 1080px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo) url(img/greca-lectura.svg) 0 0 / 48px 24px;
  color: var(--anil);
  font: 400 19px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--grana); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--anil);
  outline-offset: 3px;
}
/* En los bloques oscuros el contorno añil no se vería */
.tus-datos :focus-visible, .cierre :focus-visible { outline-color: var(--pericon); }

/* Enlace para saltar el menú con el teclado; aparece solo al enfocarlo */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 2; background: var(--anil); color: var(--blanco);
  padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 500; text-decoration: none; }
.saltar:focus { top: 0; }
.saltar:focus-visible { outline-color: var(--pericon); }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* Encabezado del sitio */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.marca { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--anil); text-decoration: none; }
.barra nav { display: flex; gap: 22px; font-weight: 500; font-size: 17px; }
.barra nav a { color: var(--anil-suave); text-decoration: none; }
.barra nav a:hover { color: var(--anil); text-decoration: underline; }
@media (max-width: 720px) {
  .barra { flex-wrap: wrap; row-gap: 8px; padding-block: 18px 14px; }
  .barra nav { gap: 0 22px; width: 100%; font-size: 16px; }
  .barra nav a { padding-block: 6px; }
}

/* Lo memorable: el título de la marca, con «bien hecho» en grana */
.portada { padding-block: 48px 64px; }
.titulo-marca { margin: 0; font-weight: 800; font-size: clamp(48px, 9.6vw, 112px); line-height: 0.98; letter-spacing: -0.03em; color: var(--anil); max-width: 11em; }
.titulo-marca span { color: var(--grana); white-space: nowrap; }
.portada-acciones { margin: 32px 0 0; }
.disponibles { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 17px; }
.disponibles p { margin: 0; color: var(--anil-suave); }
.disponibles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.disponibles a { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; color: var(--anil); font-weight: 500; text-decoration: none; }
.disponibles a:hover { text-decoration: underline; text-decoration-color: var(--pericon); text-decoration-thickness: 2px; }
.disponibles img { width: 28px; height: 28px; border-radius: 7px; }
/* Jícara grande a la derecha del título, solo donde sobra espacio.
   Al cargar se acomoda como si la dejaran en la mesa; con el mouse se inclina y la pintura gira. */
.sello { display: none; }
@media (min-width: 1240px) {
  .portada .presentacion { max-width: 30em; }
  .portada .sello { display: block; position: absolute; width: 400px; height: auto; left: calc(100% - 340px); top: 50%;
    transform: translateY(calc(-48% + var(--alza, 0px))) rotate(var(--inclina, 0deg)); transform-origin: 50% 92%;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1); }
  .sello-pintura { transform: translateX(var(--giro, 0px)); transition: transform 0.5s cubic-bezier(.2,.7,.3,1); }
}
@media (min-width: 1240px) and (prefers-reduced-motion: no-preference) {
  .portada .sello { animation: acomodarse 1.1s cubic-bezier(.3,.6,.3,1) 0.2s backwards; }
}
@keyframes acomodarse {
  0% { transform: translateY(calc(-48% - 14px)) rotate(-6deg); opacity: 0; }
  35% { transform: translateY(-48%) rotate(3deg); opacity: 1; }
  65% { transform: translateY(-48%) rotate(-1.2deg); }
  100% { transform: translateY(-48%) rotate(0deg); }
}
.presentacion { max-width: 36em; margin: 36px 0 0; font-size: 21px; color: var(--anil-suave); }

/* Una sección por app */
.app-seccion { border-top: 1px solid var(--linea); padding: 64px 0; }
.app-rejilla { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
  .app-rejilla { grid-template-columns: 1fr 1fr; gap: 64px; }
  .app-seccion.invertida .app-texto { order: 2; }
}
.app-texto h2 { font-weight: 800; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; margin: 0 0 6px; letter-spacing: -0.015em; }
.para-quien { margin: 0 0 18px; font-size: 20px; font-weight: 500; color: var(--grana); }
.app-texto p { margin: 0 0 16px; max-width: 32em; }
.app-texto ul { margin: 0 0 20px; padding-left: 1.1em; max-width: 32em; }
.app-texto li { margin-bottom: 6px; }
.app-texto li::marker { color: var(--grana); }
.detalle { font-size: 17px; color: var(--anil-suave); margin: 0 0 22px; }

.captura { margin: 0; border-radius: 18px; padding: 28px; display: flex; justify-content: center; }
.captura img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 0 rgba(27, 42, 74, 0.08), 0 12px 32px -18px rgba(27, 42, 74, 0.45); }
.captura.telefono img { max-width: 300px; border-radius: 22px; }
.captura.ajolote { background: var(--ajolote); }
.captura.costeo { background: var(--costeo); }
.captura.copal { background: var(--copal); }
.captura.calculadoras { background: var(--calculadoras); }
.captura figcaption { position: absolute; left: -9999px; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 10px;
  font: 800 18px var(--letra); text-decoration: none; cursor: pointer; border: 2px solid var(--grana);
}
.boton.lleno { background: var(--grana); color: var(--blanco); }
.boton.lleno:hover { background: var(--grana-oscura); border-color: var(--grana-oscura); }
.boton.borde { background: transparent; color: var(--grana); }
.boton.borde:hover { background: #F8EDEF; }
.boton:disabled { opacity: 0.6; cursor: default; }

/* Formulario para pedir una app */
.pedir { background: var(--piedra) url(img/greca-lectura.svg) 0 0 / 48px 24px; padding: 64px 0; }
.pedir h2 { font-weight: 800; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; margin: 0 0 10px; }
.pedir > .envoltura > p { max-width: 34em; margin: 0 0 28px; color: var(--anil-suave); }
.pedir form { display: grid; gap: 18px; max-width: 560px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 800; font-size: 17px; }
.campo input, .campo select, .campo textarea {
  font: 500 18px var(--letra); color: var(--anil); background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: 10px; padding: 12px 14px; width: 100%;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--anil); }
.ayuda { font-size: 16px; color: var(--anil-suave); margin: 0; }
.estado { margin: 0; font-weight: 500; min-height: 1.4em; }
.oculto { position: absolute; left: -9999px; }

/* Quién lo hace */
.nosotros { padding-block: 64px; }
.nosotros h2 { font-weight: 800; font-size: 30px; margin: 0 0 12px; }
.nosotros p { max-width: 36em; margin: 0 0 14px; }

/* Pie */
footer { border-top: 1px solid var(--linea); padding: 28px 0 40px; font-size: 16px; color: var(--anil-suave); }
footer .envoltura { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
footer a { color: var(--anil-suave); }

/* Páginas de texto (aviso de privacidad, gracias) */
.texto-largo { max-width: 40em; padding-block: 24px 64px; }
.texto-largo h1 { font-weight: 800; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; margin: 12px 0 18px; letter-spacing: -0.02em; }
.texto-largo h2 { font-weight: 800; font-size: 24px; margin: 36px 0 8px; }
.texto-largo p, .texto-largo li { margin: 0 0 12px; }
.pendiente { background: #FBF1D3; border-radius: 8px; padding: 2px 6px; }

/* Artículos */
.articulo .volver { margin: 0; font-weight: 500; }
.articulo .fecha { color: var(--anil-suave); font-size: 17px; margin: -8px 0 24px; }
.entrada-articulo { font-size: 22px; line-height: 1.5; }
.llamada { background: var(--piedra); border-radius: 14px; padding: 22px 24px; margin: 32px 0; display: grid; gap: 14px; justify-items: start; }
.llamada p { margin: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 17px; margin: 8px 0 12px; }
.tabla th { text-align: left; font-weight: 800; border-bottom: 2px solid var(--anil); padding: 8px 8px 8px 0; }
.tabla td { border-bottom: 1px solid var(--linea); padding: 8px 8px 8px 0; vertical-align: top; }
.tabla .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .total td { font-weight: 800; border-bottom: 0; }
.fuentes { font-size: 17px; }
.aviso-articulo { font-size: 16px; color: var(--anil-suave); border-top: 1px solid var(--linea); padding-top: 16px; margin-top: 32px; }
.lista-articulos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 28px; }
.lista-articulos a { text-decoration: none; }
.titulo-articulo { font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--anil); }
.lista-articulos a:hover .titulo-articulo, .lista-articulos a:focus-visible .titulo-articulo { text-decoration: underline; text-decoration-color: var(--pericon); text-decoration-thickness: 3px; }
.lista-articulos p { margin: 6px 0 0; color: var(--anil-suave); }
.inicio-articulos { border-top: 1px solid var(--linea); padding-block: 64px 8px; }
.inicio-articulos h2 { font-weight: 800; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; margin: 0; }

/* Secciones del inicio: problemas, tus datos, cómo funciona, para qué sirve, preguntas, cierre */
.te-suena { padding-block: 8px 64px; }
.te-suena h2, .como-funciona h2, .para-quien-es h2, .preguntas h2 { font-weight: 800; font-size: clamp(30px, 4.2vw, 42px); line-height: 1.05; margin: 0 0 24px; letter-spacing: -0.015em; }
.problemas { margin: 0; display: grid; gap: 26px; max-width: 46em; }
.problemas dt { font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; }
.problemas dd { margin: 6px 0 0; color: var(--anil-suave); }

.tus-datos { background: var(--anil) url(img/greca-clara.svg) 0 0 / 48px 24px; color: var(--blanco); padding-block: 72px; }
.tus-datos h2 { font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1.02; margin: 0 0 32px; letter-spacing: -0.02em; color: var(--blanco); }
.datos-rejilla { display: grid; gap: 22px 48px; }
@media (min-width: 760px) { .datos-rejilla { grid-template-columns: 1fr 1fr; } }
.datos-rejilla p { margin: 0; color: #D9DEE8; max-width: 30em; }
.datos-rejilla b { display: block; color: var(--pericon); font-size: 22px; margin-bottom: 4px; }

.como-funciona { padding-block: 64px 24px; }
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 40em; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; font-size: 20px; }
.pasos li::before { content: counter(paso); font-weight: 800; font-size: 30px; color: var(--grana); line-height: 1; }

.para-quien-es { padding-block: 40px 64px; }
.tabla-caja { overflow-x: auto; }
.comparar { font-size: 18px; min-width: 560px; }
.comparar tbody th { font-weight: 800; white-space: nowrap; padding: 8px 16px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.comparar td { color: var(--anil); }

.preguntas { padding-block: 64px; }
.preguntas details, .preguntas h2 { max-width: 46rem; }
.preguntas details { border-bottom: 1px solid var(--linea); padding-block: 14px; }
.preguntas details:first-of-type { border-top: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; font-weight: 800; font-size: 21px; list-style-position: inside; }
.preguntas summary::marker { color: var(--grana); }
.preguntas details p { margin: 10px 0 0; color: var(--anil-suave); }

.cierre { background: var(--grana) url(img/greca-clara.svg) 0 0 / 48px 24px; color: var(--blanco); padding-block: 56px; }
.cierre h2 { font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; margin: 0 0 10px; color: var(--blanco); }
.cierre p { margin: 0 0 22px; color: #F6E3E7; }
.boton.claro { background: var(--blanco); color: var(--grana); border-color: var(--blanco); }
.boton.claro:hover { background: #F8EDEF; }
.cierre .boton:focus-visible { outline-color: var(--pericon); }

/* Logo (jícara) e íconos de cada app */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca img { width: 34px; height: 34px; }
.icono-app { display: block; width: 64px; height: 64px; border-radius: 15px; margin-bottom: 18px; }

/* Catálogo: las apps como hermanas, mismo orden en cada una (ícono, nombre, lema, qué hace, requisito, enlaces) */
.catalogo { padding-block: 8px 72px; }
.catalogo h2, .novedades h2, .app-bloque h2 { font-weight: 800; font-size: clamp(30px, 4.2vw, 42px); line-height: 1.05; margin: 0 0 28px; letter-spacing: -0.015em; }
/* Grupos del catálogo por para quién es la app; solo se muestran los que tienen apps */
.grupo + .grupo { margin-top: 56px; }
.grupo-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; border-top: 2px solid var(--anil); padding-top: 14px; margin-bottom: 28px; }
.grupo-cabeza h3 { margin: 0; font-weight: 800; font-size: 24px; }
.grupo-cabeza p { margin: 0; color: var(--anil-suave); font-size: 18px; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 900px) {
  .apps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .apps li { padding: 0 32px; border-left: 1px solid var(--linea); }
  .apps li:first-child { padding-left: 0; border-left: 0; }
  .apps li:last-child { padding-right: 0; }
}
.apps li { display: flex; flex-direction: column; }
.apps img { width: 72px; height: 72px; border-radius: 16px; }
.apps h4 { font-weight: 800; font-size: 30px; line-height: 1.1; margin: 16px 0 4px; }
.apps h4 a { color: var(--anil); text-decoration: none; }
.apps h4 a:hover { text-decoration: underline; text-decoration-color: var(--pericon); text-decoration-thickness: 3px; }
.apps .lema { font-weight: 500; color: var(--grana); font-size: 20px; margin: 0 0 10px; }
.apps p { margin: 0 0 12px; }
.apps .requisito { font-size: 17px; color: var(--anil-suave); }
.apps .enlaces { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 800; }

/* Novedades */
.novedades { padding-block: 64px 24px; }
.lista-novedades, .versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 46rem; }
.lista-novedades li, .versiones > li { border-left: 3px solid var(--pericon); padding-left: 16px; }
.lista-novedades p, .versiones p { margin: 0; }
.cuando { font-size: 16px; font-weight: 500; color: var(--anil-suave); }
.versiones ul { margin: 6px 0 0; padding-left: 1.1em; }

/* Página de cada app */
.app-portada { padding-block: 24px 64px; }
.app-portada h1 { font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; margin: 0 0 8px; letter-spacing: -0.02em; }
.app-bloque { border-top: 1px solid var(--linea); padding-block: 56px; }
.usos { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px 48px; }
@media (min-width: 760px) { .usos { grid-template-columns: 1fr 1fr; } }
.usos b { display: block; font-size: 22px; }
.dos-columnas { display: grid; gap: 24px 64px; }
@media (min-width: 860px) { .dos-columnas { grid-template-columns: 1.3fr 1fr; } }
.dos-columnas ul { margin: 0; padding-left: 1.1em; }
.dos-columnas li { margin-bottom: 8px; }
.dos-columnas li::marker { color: var(--grana); }
.dos-columnas h2.separado { margin-top: 36px; }

/* Pie con directorio de apps */
footer.directorio { border-top: 1px solid var(--linea); padding-block: 44px 36px; font-size: 17px; }
footer.directorio .envoltura { display: block; }
.directorio-rejilla { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.directorio-titulo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--anil); margin: 0 0 8px; }
.directorio-titulo img { border-radius: 5px; }
footer.directorio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.directorio a { color: var(--anil-suave); }
.derechos { margin: 32px 0 0; color: var(--anil-suave); font-size: 16px; }

/* Fondo: greca escalonada de Mitla (Oaxaca). Marcada en la portada, casi invisible en el resto para que leer no canse,
   y en franja grana sobre el pie */
body { overflow-x: clip; }
.barra { position: relative; z-index: 1; }
.portada, .app-portada, .texto-largo { position: relative; isolation: isolate; }
.portada::before, .app-portada::before {
  content: ""; position: absolute; z-index: -1;
  top: -240px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: #E9EDF3 url(img/greca-tenue.svg) 0 0 / 48px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
footer.directorio { position: relative; border-top: 0; padding-top: 60px; }
footer.directorio::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: url(img/greca-borde.svg) 0 0 / 32px 16px repeat-x;
}

/* Página «De dónde viene el diseño» */
.tintes { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 22px; }
.tintes li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; margin: 0; }
.tintes .muestra { width: 64px; height: 64px; border-radius: 50%; }
.tintes h3 { margin: 2px 0 4px; font-size: 21px; font-weight: 800; }
.tintes p { margin: 0; }
.muestra-greca { height: 32px; margin: 16px 0 18px; background: url(img/greca-borde.svg) 0 0 / 64px 32px repeat-x; }
.jicara-diseno { display: block; width: min(320px, 80%); height: auto; margin: 16px 0 20px; }
.fuentes { font-size: 16px; }
.muestra.anil { background: var(--anil); }
.muestra.grana { background: var(--grana); }
.muestra.pericon { background: var(--pericon); }

/* Galería de capturas (página de Copal): fila que se desliza y visor al tocar. */
.galeria-nota { margin: -12px 0 20px; color: var(--anil-suave); }
.galeria { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.galeria li { flex: none; scroll-snap-align: start; }
.galeria-mini { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; }
.galeria-mini img { display: block; width: auto; height: 240px; border-radius: 14px; box-shadow: 0 1px 0 rgba(27, 42, 74, 0.08), 0 10px 24px -16px rgba(27, 42, 74, 0.5); transition: transform 0.15s; }
.galeria.ancha .galeria-mini img { height: 168px; }
.galeria-mini:hover img { transform: translateY(-3px); }
.galeria-mini:focus-visible { outline: 3px solid var(--anil); outline-offset: 3px; }
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(14, 20, 36, 0.86); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.visor img { max-height: calc(100vh - 110px); max-width: calc(100vw - 32px); width: auto; height: auto; border-radius: 18px; }
.visor figcaption { color: #fff; font-size: 17px; text-align: center; max-width: 520px; padding: 0 16px; }
.visor button { position: fixed; border: 0; border-radius: 50%; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.92); color: var(--anil); font-size: 30px; line-height: 1; cursor: pointer; }
.visor button:focus-visible { outline: 3px solid var(--pericon); outline-offset: 2px; }
.visor-cerrar { top: 16px; right: 16px; }
.visor-ant { left: 16px; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .visor-ant, .visor-sig { top: auto; bottom: 16px; transform: none; } .visor img { max-height: calc(100vh - 170px); } }