/*
Theme Name: Landing Kit — Aquí se estudia
Theme URI: https://aquisestudia.cl
Author: Aquí se estudia
Description: Theme de bloques minimalista, monoespaciado y plano, con modo claro/oscuro. Los tokens de marca viven en theme.json y se editan sin código desde Apariencia → Editor → Estilos. Trae patrones (Hero, Tarjetas, Destacado, 2 columnas, CTA y Landing completa) para montar páginas con el editor nativo de WordPress.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: landing-kit
Tags: full-site-editing, block-patterns, minimal, monospace, dark-mode, one-column, custom-colors, custom-menu
*/

/* ============================================================================
   PUENTE · conecta los tokens del kit (--accent, --ink…) con los presets
   que genera theme.json. Así, cambiar la marca se hace en UN sitio (theme.json
   o el editor visual) y estas clases de componente lo heredan solas.
   ============================================================================ */
:root{
  --font:       var(--wp--preset--font-family--mono);
  --accent:     var(--wp--preset--color--accent);
  --accent-ink: var(--wp--preset--color--accent-ink);
  --bg:         var(--wp--preset--color--bg);
  --ink:        var(--wp--preset--color--ink);
  --muted:      var(--wp--preset--color--muted);
  --dim:        var(--wp--preset--color--dim);
  --surface:    var(--wp--preset--color--surface);
  --border:     var(--wp--preset--color--border);
  --line:       var(--wp--preset--color--line);
  --radius:     var(--wp--custom--radius);
  --wrap:       var(--wp--custom--wrap);
  --gap:        var(--wp--preset--spacing--20);
}

/* ============================================================================
   COMPONENTES DEL KIT · las mismas clases de landing.css, disponibles para
   quien quiera escribir HTML a mano o poner una "clase CSS adicional" a un
   bloque. Los patrones normales NO las necesitan: usan bloques nativos.
   ============================================================================ */
*{ box-sizing:border-box }

/* Tipografía de apoyo */
.kick{ font-size:.8rem; font-weight:700; letter-spacing:.04em;
       color:var(--muted); text-transform:lowercase }
.title{ font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.01em;
        margin:10px 0 8px; max-width:28ch; line-height:1.2 }
.sub{ color:var(--muted); max-width:62ch; margin-bottom:32px; line-height:1.6 }
.lead{ font-size:clamp(1rem,2vw,1.2rem); color:var(--muted);
       max-width:56ch; line-height:1.6 }

/* El diseño "constrained" de WordPress centra cualquier bloque más estrecho que
   el ancho de contenido, y lo hace con márgenes automáticos marcados como
   !important. Para dejar estos textos a la IZQUIERDA hay que ganar esa regla:
   el prefijo "body" sube la especificidad y el !important iguala el peso. */
body .title.title, body .sub.sub, body .lead.lead{
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Botones (equivalente a los nativos, por si se usan a mano) */
.btn{ display:inline-block; font-family:var(--font); font-weight:700; font-size:.92rem;
      padding:13px 22px; border:1.5px solid var(--line);
      background:var(--accent); color:var(--accent-ink);
      border-radius:var(--radius); transition:.15s; cursor:pointer }
.btn:hover{ background:var(--bg); color:var(--ink) }
.btn.ghost{ background:transparent; color:var(--ink) }
.btn.ghost:hover{ background:var(--accent); color:var(--accent-ink) }

/* Tarjetas y rejilla */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--gap) }
.grid.two{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) }
.card{ border:1.5px solid var(--border); padding:24px; border-radius:var(--radius); transition:.15s }
.card:hover{ border-color:var(--line) }
.card .num, .is-style-card .num{ font-weight:700; font-size:.82rem; color:var(--ink); display:inline-block;
            margin-bottom:12px; padding-bottom:8px; border-bottom:1.5px solid var(--line) }
.card h3, .is-style-card h3{ font-size:1.08rem; margin-bottom:7px }
.card p, .is-style-card p{ color:var(--muted); font-size:.92rem; line-height:1.5 }

/* Bloque destacado */
.band{ background:var(--surface); border:1.5px solid var(--line);
       padding:34px; border-radius:var(--radius) }
.band h3{ font-size:clamp(1.25rem,2.6vw,1.7rem); letter-spacing:-.01em;
          margin:8px 0 10px; max-width:28ch; line-height:1.2 }
.band p{ color:var(--muted); max-width:66ch; line-height:1.6 }

/* Etiqueta sólida */
.badge{ display:inline-block; font-weight:700; color:var(--accent-ink);
        background:var(--accent); padding:8px 14px; font-size:.8rem;
        letter-spacing:.05em; border-radius:var(--radius) }

/* Prueba / cita corta bajo el hero */
.proof{ font-size:.85rem; color:var(--ink);
        border-left:3px solid var(--line); padding-left:12px }

/* Utilidad de resalte en color de marca */
.hi{ color:var(--accent) }

/* ============================================================================
   AJUSTES NATIVOS · afinar bloques del núcleo para que calcen con el kit.
   ============================================================================ */

/* Botón "fantasma": estilo Contorno del bloque Botón = .btn.ghost */
.wp-block-button.is-style-outline > .wp-block-button__link{
  background:transparent; color:var(--wp--preset--color--ink);
  border:1.5px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:var(--wp--preset--color--accent); color:var(--wp--preset--color--accent-ink);
}

/* Barra de navegación fija (clase .nav en la cabecera) */
.nav{ position:sticky; top:0; z-index:10;
      background:color-mix(in srgb, var(--wp--preset--color--bg) 90%, transparent);
      backdrop-filter:blur(8px); border-bottom:1.5px solid var(--wp--preset--color--line); }

/* Sección con línea superior (clase .section) y variantes */
.section{ border-top:1.5px solid var(--wp--preset--color--line); }
.section.plain{ border-top:0; }
.fill{ background:var(--wp--preset--color--surface); }

/* ---- Estilos de bloque para el bloque Grupo (menú "Estilos") ---- */
/* Estos se aplican con un clic desde el editor, sin escribir clases. */
.wp-block-group.is-style-section{
  border-top:1.5px solid var(--wp--preset--color--line);
  padding-top:var(--wp--preset--spacing--60);
  padding-bottom:var(--wp--preset--spacing--60);
}
/* Titular de sección igual que el modelo: medida ~28 caracteres (se corta en
   varias líneas), alineado a la izquierda y con el tamaño del kit. No afecta a
   los h2 de otras zonas ni al cierre (.fill), que va centrado. */
body .is-style-section:not(.fill) h2.wp-block-heading{
  max-width:28ch;
  margin-left:0 !important;
  margin-right:auto !important;
  font-size:clamp(1.4rem, 3vw, 2rem);
}
.wp-block-group.is-style-band{
  background:var(--wp--preset--color--surface);
  border:1.5px solid var(--wp--preset--color--line);
  padding:34px;
}
.wp-block-group.is-style-card,
.wp-block-column.is-style-card{
  border:1.5px solid var(--wp--preset--color--border);
  padding:24px;
  transition:.15s;
}
.wp-block-group.is-style-card:hover,
.wp-block-column.is-style-card:hover{ border-color:var(--wp--preset--color--line); }

/* ============================================================================
   MODO CLARO/OSCURO POR VISITANTE
   El modo claro es el de por defecto. El interruptor (icono sol/luna) pone el
   atributo data-theme="dark" en <html> y aquí redefinimos los tokens sobre
   <body>, de modo que TODO cambie: bloques nativos (que usan los presets) y las
   clases del kit (que apuntan a esos mismos presets a través del puente).
   ============================================================================ */
body{ transition:background-color .2s, color .2s; }

html[data-theme="dark"] body{
  --wp--preset--color--accent:     #f2f2f2;
  --wp--preset--color--accent-ink: #0b0b0d;
  --wp--preset--color--bg:         #0b0b0d;
  --wp--preset--color--ink:        #f2f2f2;
  --wp--preset--color--muted:      #a3a3a3;
  --wp--preset--color--dim:        #6e6e6e;
  --wp--preset--color--surface:    #151518;
  --wp--preset--color--border:     #282830;
  --wp--preset--color--line:       #f2f2f2;
  background-color:var(--wp--preset--color--bg);
  color:var(--wp--preset--color--ink);
}

/* Interruptor sol/luna */
.tgl{ background:none; border:0; padding:6px; cursor:pointer; line-height:0; color:inherit; }
.tgl svg{ width:18px; height:18px; fill:none; stroke:var(--wp--preset--color--ink);
          stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.tgl:hover svg{ opacity:.6; }
#theme-toggle .ic-sun{ display:none; }                       /* en claro se ve la luna */
html[data-theme="dark"] #theme-toggle .ic-moon{ display:none; }
html[data-theme="dark"] #theme-toggle .ic-sun{ display:block; } /* en oscuro se ve el sol */