/* =========================================================
   cynan.net — hoja de estilos única
   El sitio se comporta como una hoja de datos: etiqueta a la
   izquierda, hecho a la derecha, una línea entre cada renglón.
   Sin tarjetas, sin sombras, sin esquinas redondeadas.
   ========================================================= */

:root {
  --papel:        #F4F4F1;
  --papel-alto:   #EBEBE6;  /* renglón bajo el cursor */
  --papel-claro:  #FAFAF8;  /* campos de formulario */
  --tinta:        #141414;
  --tinta-70:     rgba(20, 20, 20, .70);
  --tinta-50:     rgba(20, 20, 20, .52);
  --verde:        #1F5C43;
  --verde-claro:  #2C7A59;

  --linea:        rgba(20, 20, 20, .16);
  --linea-fina:   rgba(20, 20, 20, .08);

  --medida:       64rem;
  --canal:        1.5rem;
  --etiqueta:     10.5rem;   /* ancho de la columna de etiquetas */

  --p2: .7rem;
  --p3: 1.4rem;
  --p4: 2.4rem;
  --p5: 4rem;
  --p6: 6rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 11vw, 6rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.045em;
  line-height: .95;
}

h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }

h3 { font-size: 1.125rem; letter-spacing: -.012em; line-height: 1.3; }

p { margin: 0 0 var(--p3); max-width: 60ch; }
p:last-child { margin-bottom: 0; }

.guia {
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--tinta-70);
  line-height: 1.55;
  max-width: 52ch;
}

.nota { font-size: .875rem; color: var(--tinta-50); line-height: 1.55; }

a { color: inherit; }

.enlace {
  color: var(--verde);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}
.enlace:hover { color: var(--verde-claro); background: rgba(31, 92, 67, .08); }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* ---------- Estructura ---------- */

.contenido {
  max-width: var(--medida);
  margin: 0 auto;
  padding-inline: var(--canal);
}

@media (min-width: 56rem) { .contenido { padding-inline: 3rem; } }

.seccion { padding-block: var(--p5); border-top: 1px solid var(--linea); }

@media (min-width: 56rem) { .seccion { padding-block: var(--p6); } }

.seccion-oscura {
  background: var(--tinta);
  color: var(--papel);
  border-top: 0;
}
.seccion-oscura h2 { color: var(--papel); }
.seccion-oscura .guia { color: rgba(244, 244, 241, .72); }
.seccion-oscura .nota { color: rgba(244, 244, 241, .55); }

/* Título de sección: corto, al margen izquierdo, sin versalitas. */
.titulo-seccion {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--tinta-50);
  margin-bottom: var(--p3);
}

.seccion-oscura .titulo-seccion { color: rgba(244, 244, 241, .55); }

/* ---------- Navegación ---------- */

.barra { border-bottom: 1px solid var(--linea); }

.barra .contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--p2) var(--p3);
  padding-block: 1.05rem;
}

.marca {
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -.035em;
  text-decoration: none;
  margin-right: auto;
}
.marca span { color: var(--tinta-50); font-weight: 500; letter-spacing: -.02em; }

.barra nav { display: flex; flex-wrap: wrap; gap: var(--p3); }

.barra nav a {
  text-decoration: none;
  color: var(--tinta-70);
  font-size: .9375rem;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.barra nav a:hover { color: var(--tinta); border-bottom-color: var(--linea); }
.barra nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--verde); }

/* ---------- Encabezado de página ---------- */

.cabeza { padding-block: var(--p5) var(--p4); }

@media (min-width: 56rem) { .cabeza { padding-block: 5rem 3rem; } }

.cabeza h1 { margin-bottom: var(--p3); }
.cabeza .guia { margin-bottom: var(--p4); }
.cabeza .guia:last-child { margin-bottom: 0; }

.subtitulo {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 500;
  color: var(--tinta-50);
  letter-spacing: -.02em;
  margin-bottom: var(--p3);
}

/* ---------- Aviso de la reforma ---------- */

.aviso { background: var(--tinta); color: var(--papel); }

.aviso .contenido {
  padding-block: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem var(--p3);
}

.aviso p { margin: 0; max-width: none; font-size: .9375rem; }
.aviso a { color: var(--papel); font-weight: 600; }

/* ---------- La ficha ---------- */

.ficha { margin: 0; border-top: 1px solid var(--linea); }

.renglon {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding: var(--p3) 0;
  border-bottom: 1px solid var(--linea-fina);
}

.renglon:last-child { border-bottom: 1px solid var(--linea); }

@media (min-width: 40rem) {
  .renglon {
    grid-template-columns: var(--etiqueta) minmax(0, 1fr);
    gap: var(--p3);
    align-items: baseline;
  }
}

.renglon dt {
  color: var(--tinta-50);
  font-size: .9375rem;
  font-weight: 500;
}

.renglon dd { margin: 0; max-width: 56ch; }

.renglon dd p { font-size: .9375rem; color: var(--tinta-70); margin: .3rem 0 0; }

/* Renglón que es un enlace entero (los productos) */
a.renglon {
  text-decoration: none;
  color: inherit;
  transition: background 110ms linear;
  padding-inline: var(--canal);
  margin-inline: calc(var(--canal) * -1);
}

a.renglon:hover { background: var(--papel-alto); }

a.renglon .titulo-producto {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.025em;
  display: block;
}

a.renglon .ir {
  color: var(--verde);
  font-weight: 600;
  font-size: .9375rem;
  display: inline-block;
  margin-top: .5rem;
  border-bottom: 1px solid currentColor;
}

a.renglon:hover .ir { color: var(--verde-claro); }

.fuera .titulo-producto::after {
  content: "↗";
  font-size: .75em;
  margin-left: .3em;
  color: var(--tinta-50);
  vertical-align: super;
}

/* ---------- Botones ---------- */

.acciones { display: flex; flex-wrap: wrap; gap: var(--p2); }

.boton {
  display: inline-block;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--tinta);
  transition: background 110ms linear, border-color 110ms linear;
}
.boton:hover { background: var(--verde); border-color: var(--verde); }

.boton-hueco { background: transparent; color: var(--tinta); }
.boton-hueco:hover { background: rgba(20, 20, 20, .07); color: var(--tinta); border-color: var(--tinta); }

.seccion-oscura .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.seccion-oscura .boton:hover { background: var(--verde); border-color: var(--verde); color: var(--papel); }

/* ---------- Rejilla de módulos ---------- */

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}

@media (min-width: 40rem) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.celda {
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: var(--p3);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
  min-height: 11rem;
  transition: background 110ms linear;
}

a.celda:hover { background: var(--papel-alto); }

.celda p { font-size: .9375rem; color: var(--tinta-70); margin: 0; line-height: 1.5; }

.celda .estado {
  margin-top: auto;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--tinta-50);
  display: flex;
  align-items: center;
  gap: .45rem;
}

.celda .estado::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: currentColor;
  flex: none;
}

.celda .estado.activo { color: var(--verde); }

/* ---------- Cuenta regresiva ---------- */

.reloj {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(244, 244, 241, .28);
  margin-bottom: var(--p4);
  max-width: 30rem;
}

.reloj div {
  flex: 1 1 0;
  min-width: 4.2rem;
  padding: .85rem .4rem;
  text-align: center;
  border-right: 1px solid rgba(244, 244, 241, .28);
}
.reloj div:last-child { border-right: 0; }

.reloj b {
  display: block;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.reloj span { font-size: .75rem; color: rgba(244, 244, 241, .65); font-weight: 500; }

/* ---------- Listas y tablas ---------- */

.lista { list-style: none; padding: 0; margin: 0; max-width: 60ch; }

.lista li {
  padding: var(--p2) 0 var(--p2) 1.4rem;
  border-bottom: 1px solid var(--linea-fina);
  position: relative;
}
.lista li:last-child { border-bottom: 0; }

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: .55rem;
  height: 1px;
  background: var(--verde);
}

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }

.pasos li {
  counter-increment: paso;
  padding: var(--p3) 0 var(--p3) 2.8rem;
  border-top: 1px solid var(--linea);
  position: relative;
  max-width: 60ch;
}
.pasos li:last-child { border-bottom: 1px solid var(--linea); }

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: calc(var(--p3) - .05rem);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--verde);
}

.pasos h3 { margin-bottom: .25rem; }
.pasos p { font-size: .9375rem; color: var(--tinta-70); }

.envoltura-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }

th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: top; }

thead th { font-weight: 700; border-bottom: 2px solid var(--tinta); }

tbody th { font-weight: 500; color: var(--tinta-70); }

td.si { color: var(--verde); font-weight: 600; }

/* ---------- Dos columnas ---------- */

.par { display: grid; gap: var(--p4); align-items: start; }

@media (min-width: 56rem) {
  .par { grid-template-columns: var(--etiqueta) minmax(0, 1fr); gap: var(--p3); }
  .par-igual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--p5); }
}

/* ---------- Preguntas ---------- */

.pregunta { border-top: 1px solid var(--linea); padding: var(--p3) 0; max-width: 60ch; }
.pregunta:last-of-type { border-bottom: 1px solid var(--linea); }

.pregunta summary {
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  line-height: 1.35;
}
.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::after { content: "+"; color: var(--verde); font-weight: 700; flex: none; }
.pregunta[open] summary::after { content: "–"; }

.pregunta p { margin-top: var(--p2); color: var(--tinta-70); }

/* ---------- Formulario ---------- */

.formulario { display: grid; gap: var(--p3); max-width: 32rem; }

.campo { display: grid; gap: .35rem; }

.campo label { font-weight: 600; font-size: .9375rem; }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--papel-claro);
  border: 1px solid var(--linea);
  padding: .75rem .85rem;
  width: 100%;
  border-radius: 0;
}

.campo textarea { min-height: 7rem; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta); }

/* ---------- Pie ---------- */

.pie {
  background: var(--tinta);
  color: rgba(244, 244, 241, .70);
  padding-block: var(--p4);
  font-size: .9375rem;
}

.pie .contenido { display: grid; gap: var(--p3); }

@media (min-width: 56rem) {
  .pie .contenido { grid-template-columns: 1fr auto; align-items: end; }
}

.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie-enlaces { display: flex; flex-wrap: wrap; gap: var(--p3); }

.pie .marca { color: var(--papel); display: block; margin-bottom: .25rem; }
.pie .marca span { color: rgba(244, 244, 241, .55); }