/* ==========================================================================
   Marca · Esteban Solarte · "Del cuaderno al control"
   Fuente única de diseño para el catálogo (estebansolarte.dev/catalogo) y el
   portafolio freelance (estebansolarte.dev). Ambos sitios enlazan o copian
   ESTE archivo sin modificar los valores. Versión 1.1 · 13 nov 2026 (1.1: tokens fijos --banda-marca).
   Fuentes (poner en el <head>, antes de este archivo):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Caveat:wght@500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   Tema: sigue prefers-color-scheme; se fuerza con <html data-tema="claro|oscuro">.
   ========================================================================== */

:root {
  /* --- Paleta (claro) --- */
  --papel: #F6F1E7;        /* fondo principal: papel crema */
  --papel-2: #EFE8DA;      /* fondo alterno de secciones */
  --tarjeta: #FFFDF8;      /* superficies elevadas */
  --tinta: #1B1A17;        /* texto principal */
  --tinta-2: #3F3C35;      /* texto secundario */
  --suave: #6E6A60;        /* texto terciario, notas */
  --linea: #E2DACA;        /* bordes y divisores */
  --verde: #0F6B4B;        /* color de marca: control, acción principal */
  --verde-hondo: #0B4F37;  /* hover de acción, fondos de cierre */
  --verde-claro: #DDEFE5;  /* fondos suaves de marca, etiquetas */
  --ambar: #E9A21B;        /* acento cálido: subrayados, foco, destacados */
  --ambar-claro: #FBEBC8;  /* fondo de sellos y avisos */
  --rojo: #C2412D;         /* "antes", errores, tachones */
  --renglon: #A9BFDD;      /* renglones de cuaderno */
  --margen: #E7A3A0;       /* margen de cuaderno */
  --cuaderno: #FFFEF6;     /* hoja de cuaderno */
  --cuaderno-tinta: #2A3F6A; /* letra a mano */
  --whatsapp: #1FA855;     /* SOLO el botón flotante de WhatsApp */
  --sobre-verde: #FFFFFF;  /* texto sobre --verde */

  /* --- Banda de marca (franja y cierre verde). FIJOS: no cambian en modo oscuro,
         porque ahí --verde y --verde-hondo se aclaran y la banda quedaría brillante. --- */
  --banda-marca: #0B4F37;         /* fondo de la banda verde, igual en claro y oscuro */
  --sobre-banda-marca: #F6F1E7;   /* texto y botón claro sobre la banda */
  --acento-banda-marca: #F0B33E;  /* ámbar legible sobre la banda (letra a mano, foco) */

  /* --- Tipografía --- */
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; /* títulos */
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* cuerpo */
  --mano: "Caveat", "Comic Sans MS", cursive; /* SOLO notas a mano / "antes" */
  --t-xs: 13px;
  --t-s: 15px;
  --t-base: 17px;
  --t-m: 19px;
  --t-l: 22px;
  --t-xl: clamp(26px, 3.4vw, 32px);
  --t-2xl: clamp(32px, 5vw, 52px);
  --t-3xl: clamp(40px, 7.4vw, 76px);
  --interlineado: 1.6;
  --interlineado-titulo: 1.08;
  --tracking-titulo: -0.02em;

  /* --- Espaciado (base 4) --- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 84px;
  --gutter: 16px;          /* margen lateral mínimo en celular */
  --ancho: 1160px;         /* ancho máximo del contenido */

  /* --- Radios --- */
  --radio-xs: 6px;         /* hoja de cuaderno */
  --radio-s: 14px;         /* columnas internas, iconos */
  --radio: 22px;           /* tarjetas */
  --radio-telefono: 42px;  /* marco de celular */
  --radio-pildora: 999px;  /* botones, chips, etiquetas */

  /* --- Sombras --- */
  --sombra: 0 1px 2px rgba(27, 26, 23, .06), 0 8px 24px rgba(27, 26, 23, .08);
  --sombra-alta: 0 2px 4px rgba(27, 26, 23, .06), 0 24px 60px rgba(27, 26, 23, .16);
  --sombra-boton: 0 6px 18px rgba(15, 107, 75, .28);
  --sombra-boton-hover: 0 10px 26px rgba(15, 107, 75, .34);

  /* --- Movimiento --- */
  --rapido: 150ms;
  --medio: 220ms;
  --lento: 600ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-salida: ease-out;

  /* --- Capas --- */
  --z-base: 1;
  --z-flotante: 40;
  --z-cabecera: 30;
  --z-saltar: 50;

  color-scheme: light;
}

/* --- Paleta (oscuro) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #121210; --papel-2: #1A1A17; --tarjeta: #1E1E1B; --tinta: #F2EDE3; --tinta-2: #D6D0C4; --suave: #A39E93;
    --linea: #33322D; --verde: #3FBF88; --verde-hondo: #2E9C6C; --verde-claro: #16362A; --ambar: #F0B33E; --ambar-claro: #3A2E14;
    --rojo: #F07A64; --renglon: #34465F; --margen: #6B3A38; --cuaderno: #24272B; --cuaderno-tinta: #C9D6EE; --sobre-verde: #0B1A13;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
    --sombra-boton: 0 6px 18px rgba(0,0,0,.35); --sombra-boton-hover: 0 10px 26px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --papel: #121210; --papel-2: #1A1A17; --tarjeta: #1E1E1B; --tinta: #F2EDE3; --tinta-2: #D6D0C4; --suave: #A39E93;
  --linea: #33322D; --verde: #3FBF88; --verde-hondo: #2E9C6C; --verde-claro: #16362A; --ambar: #F0B33E; --ambar-claro: #3A2E14;
  --rojo: #F07A64; --renglon: #34465F; --margen: #6B3A38; --cuaderno: #24272B; --cuaderno-tinta: #C9D6EE; --sobre-verde: #0B1A13;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  --sombra-boton: 0 6px 18px rgba(0,0,0,.35); --sombra-boton-hover: 0 10px 26px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: var(--t-base)/var(--interlineado) var(--texto); }
h1, h2, h3, h4 { font-family: var(--display); line-height: var(--interlineado-titulo); letter-spacing: var(--tracking-titulo); text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

/* Contenedor */
.envoltura { width: min(100% - (var(--gutter) * 2), var(--ancho)); margin-inline: auto; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--radio-pildora);
  font: 600 16px/1 var(--texto); text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition-property: transform, background-color, box-shadow, border-color, color;
  transition-duration: var(--rapido); transition-timing-function: var(--curva-salida);
}
.boton:active { transform: scale(.97); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-primario { background: var(--verde); color: var(--sobre-verde); box-shadow: var(--sombra-boton); }
.boton-primario:hover { background: var(--verde-hondo); box-shadow: var(--sombra-boton-hover); }
.boton-secundario { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { border-color: var(--tinta-2); }
.boton-pequeno { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* Etiqueta (kicker de sección) */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radio-pildora);
  font: 600 var(--t-xs)/1 var(--texto); letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde); background: var(--verde-claro);
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Tarjeta */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-6);
  transition-property: transform, box-shadow, border-color; transition-duration: var(--medio); transition-timing-function: var(--curva-salida);
}
.tarjeta-interactiva:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--verde) 35%, var(--linea)); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; padding: 7px 10px; border-radius: var(--radio-pildora);
  font: 500 var(--t-xs)/1 var(--texto); background: var(--papel); border: 1px solid var(--linea); color: var(--tinta-2);
}

/* Icono en caja */
.icono-caja { width: 48px; height: 48px; border-radius: var(--radio-s); display: grid; place-items: center; background: var(--verde-claro); color: var(--verde); }
.icono-caja svg { width: 26px; height: 26px; }

/* Marco de celular */
.telefono { position: relative; aspect-ratio: 9 / 19.5; border-radius: var(--radio-telefono); padding: 10px; background: #111; box-shadow: var(--sombra-alta), inset 0 0 0 1.5px #2b2b2b; }
.telefono::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; translate: -50% 0; border-radius: var(--radio-pildora); background: #000; z-index: 2; }
.telefono img, .telefono video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--radio-telefono) - 9px); display: block; }

/* Marco de escritorio */
.escritorio { position: relative; border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra-alta); border: 1px solid var(--linea); overflow: hidden; }
.escritorio .barra { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.escritorio .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }

/* Hoja de cuaderno (motivo de marca: el "antes") */
.cuaderno-hoja {
  background: repeating-linear-gradient(to bottom, transparent 0 37px, var(--renglon) 37px 38px),
              linear-gradient(to right, transparent 42px, var(--margen) 42px 44px, transparent 44px), var(--cuaderno);
  color: var(--cuaderno-tinta); font: 500 23px/38px var(--mano); border-radius: var(--radio-xs); padding: 26px 22px 22px 60px; box-shadow: var(--sombra);
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton:active, .tarjeta-interactiva:hover { transform: none; }
}