/*
Theme Name:   Divi Child — Colibrí
Theme URI:    https://bakerycolibri.com
Description:  Tema hijo de Divi para Colibrí. Contiene la tipografía de marca y el sistema de diseño.
Author:       Lemon Lead Marketing
Author URI:   https://lemonleadmarketing.com
Template:     Divi
Version:      1.0.0
Text Domain:  divi-child-colibri
*/

/* =========================================================
   COLIBRÍ — CSS GLOBAL
   Pegar en: Apariencia > Editor de temas > divi-child > style.css
   (o en Divi > Opciones de tema > CSS personalizado si no hay child theme)
   ========================================================= */

/* ---------- 1. TIPOGRAFÍAS ---------- */

/* Child Writing ES — titulares. Subir el .woff2 por FTP a:
   /wp-content/themes/divi-child/fonts/ChildWriting-ES.woff2   */
@font-face {
  font-family: 'Child Writing';
  src: url('/wp-content/themes/divi-child/fonts/ChildWriting-ES.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cifras y símbolos que Child Writing no cubre (0-9 € % & paréntesis).
   El navegador los sustituye solo, sin que se note en titulares. */
@font-face {
  font-family: 'Child Writing';
  src: url('https://fonts.gstatic.com/s/patrickhand/v23/LDI1apSQOAYtSuYWp8ZhfYe8.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+0025, U+0026, U+0028-0029, U+002B, U+002F, U+20AC;
}

/* ---------- 2. VARIABLES DE MARCA ---------- */

:root {
  /* Colores del manual */
  --clb-granate: #641130;
  --clb-crema: #f2eae2;
  --clb-azul: #b1cfe8;
  --clb-rosa: #f2bbe1;

  /* Derivados (no están en el manual, calculados para UI) */
  --clb-granate-osc: #4a0c24;
  --clb-granate-10: rgba(100, 17, 48, .10);
  --clb-granate-20: rgba(100, 17, 48, .20);
  --clb-crema-osc: #e6d9cd;
  --clb-blanco: #fffdfb;
  --clb-texto: #3a2028;
  --clb-texto-suave: #6b5560;

  /* Tipografías */
  --clb-font-titulo: 'Child Writing', 'Comic Sans MS', cursive;
  --clb-font-texto: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --clb-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Ritmo */
  --clb-max: 1240px;
  --clb-pad: clamp(1.25rem, 5vw, 4rem);
  --clb-radio: 22px;
  --clb-radio-sm: 12px;

  /* Sombras suaves, nunca duras: la marca es artesanal */
  --clb-sombra: 0 18px 45px -22px rgba(100, 17, 48, .35);
  --clb-sombra-alt: 0 26px 60px -24px rgba(100, 17, 48, .45);

  --clb-trans: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. RESET SUAVE SOBRE DIVI ---------- */

body,
#page-container {
  font-family: var(--clb-font-texto);
  color: var(--clb-texto);
  background: var(--clb-crema);
  -webkit-font-smoothing: antialiased;
}

/* Titulares: Child Writing SOLO en H1 y H2 (legibilidad) */
h1, h2,
.clb-titulo {
  font-family: var(--clb-font-titulo);
  color: var(--clb-granate);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .005em;
}

h3, h4, h5, h6 {
  font-family: var(--clb-font-texto);
  color: var(--clb-granate);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }

p, li {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--clb-texto);
}

/* Etiquetas, precios y microcopy: monoespaciada (guiño a Input Mono) */
.clb-label {
  font-family: var(--clb-font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clb-texto-suave);
}

.clb-precio {
  font-family: var(--clb-font-mono);
  font-weight: 600;
  color: var(--clb-granate);
}

/* ---------- 4. BOTONES ---------- */

.clb-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--clb-font-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--clb-granate);
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--clb-trans),
              background-color .35s var(--clb-trans),
              color .35s var(--clb-trans),
              box-shadow .35s var(--clb-trans);
}

.clb-btn--solido {
  background: var(--clb-granate);
  color: var(--clb-crema);
}

.clb-btn--solido:hover {
  background: var(--clb-granate-osc);
  color: var(--clb-crema);
  transform: translateY(-3px);
  box-shadow: var(--clb-sombra-alt);
}

.clb-btn--linea {
  background: transparent;
  color: var(--clb-granate);
}

.clb-btn--linea:hover {
  background: var(--clb-granate);
  color: var(--clb-crema);
  transform: translateY(-3px);
}

.clb-btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- 5. UTILIDADES DE SECCIÓN ---------- */

.clb-sec {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 9vw, 7.5rem) var(--clb-pad);
  overflow: hidden;
}

.clb-wrap {
  max-width: var(--clb-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.clb-bg-crema  { background: var(--clb-crema); }
.clb-bg-blanco { background: var(--clb-blanco); }
.clb-bg-granate { background: var(--clb-granate); }
.clb-bg-granate h1,
.clb-bg-granate h2,
.clb-bg-granate h3,
.clb-bg-granate p { color: var(--clb-crema); }

/* ---------- 6. ANIMACIÓN DE ENTRADA (reveal) ---------- */

.clb-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--clb-trans), transform .8s var(--clb-trans);
}

.clb-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Escalonado */
.clb-reveal[data-delay="1"] { transition-delay: .10s; }
.clb-reveal[data-delay="2"] { transition-delay: .20s; }
.clb-reveal[data-delay="3"] { transition-delay: .30s; }
.clb-reveal[data-delay="4"] { transition-delay: .40s; }
.clb-reveal[data-delay="5"] { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  .clb-reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ---------- 7. AJUSTES SOBRE DIVI ---------- */

/* Quitar el padding por defecto de las secciones que llevan módulo Código */
.et_pb_section.clb-seccion {
  padding: 0 !important;
}
.et_pb_section.clb-seccion .et_pb_row {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.et_pb_section.clb-seccion .et_pb_module {
  margin-bottom: 0 !important;
}

/* Selección de texto en color de marca */
::selection {
  background: var(--clb-granate);
  color: var(--clb-crema);
}

/* Scrollbar (solo escritorio) */
@media (min-width: 1025px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--clb-crema); }
  ::-webkit-scrollbar-thumb {
    background: var(--clb-granate-20);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--clb-granate); }
}