/*
Theme Name:   Mr. Like Child
Theme URI:    https://mrlikeagency.com
Description:  Tema hijo de Hello Elementor con el sistema de diseño de Mr. Like (colores, tipografía, botones, tarjetas y formularios). Solo CSS.
Author:       Mr. Like Agency
Template:     hello-elementor
Version:      1.0.0
Text Domain:  mrlike-child
*/

/* ===== 1. Fuentes (locales, sin Google Fonts) ===== */
/* Fredoka — display (Google Fonts, OFL). Sustituto del lettering del logo. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree — texto (Google Fonts, OFL) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/Figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/Figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/Figtree-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== 2. Tokens ===== */
/* colors.css */
:root {
  /* Like Red — el rojo exacto del logo (#FF3333) y su escala */
  --red-50: #FFF2F1;
  --red-100: #FFE1DF;
  --red-200: #FFC4C0;
  --red-300: #FF9A94;
  --red-400: #FF6660;
  --red-500: #FF3333; /* logo */
  --red-600: #E5212A; /* CTA con texto blanco (AA 4.6:1) */
  --red-700: #C0161D;
  --red-800: #8E1217;
  --red-900: #5A0C0F;

  /* Neutros cálidos (tinte rojo muy bajo) */
  --neutral-0: #FFFFFF;
  --neutral-50: #FBF7F5;
  --neutral-100: #F4EEEB;
  --neutral-200: #E8DFDB;
  --neutral-300: #D3C8C3;
  --neutral-400: #ABA09B;
  --neutral-500: #827773;
  --neutral-600: #5E5451;
  --neutral-700: #433B38;
  --neutral-800: #2B2422;
  --neutral-900: #1C1514;

  /* Semánticos */
  --green-500: #1E9E5A;
  --green-50: #EAF7EF;
  --amber-500: #E59A12;
  --amber-50: #FDF4E2;

  /* ——— Alias semánticos ——— */
  --brand: var(--red-500);
  --brand-strong: var(--red-600);
  --brand-deep: var(--red-700);
  --brand-tint: var(--red-50);

  --fg-1: var(--neutral-900);      /* texto principal */
  --fg-2: var(--neutral-600);      /* texto secundario */
  --fg-3: var(--neutral-500);      /* placeholder, metadatos */
  --fg-on-brand: var(--neutral-0);
  --fg-brand: var(--red-600);      /* texto rojo sobre claro */

  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-brand: var(--red-500);
  --surface-brand-tint: var(--red-50);

  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-strong: var(--neutral-900);
  --focus-ring: var(--red-400);

  --success: var(--green-500);
  --success-tint: var(--green-50);
  --warning: var(--amber-500);
  --warning-tint: var(--amber-50);
  --danger: var(--red-700);
  --danger-tint: var(--red-50);
}

/* typography.css */
:root {
  --font-display: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Escala (desktop). Display en Fredoka, MAYÚSCULAS. */
  --text-display-xl: 88px;   --lh-display-xl: 0.94;
  --text-display-l: 64px;    --lh-display-l: 0.98;
  --text-h1: 48px;           --lh-h1: 1.04;
  --text-h2: 36px;           --lh-h2: 1.1;
  --text-h3: 26px;           --lh-h3: 1.2;
  --text-h4: 20px;           --lh-h4: 1.3;
  --text-body-l: 19px;       --lh-body-l: 1.55;
  --text-body: 16px;         --lh-body: 1.6;
  --text-small: 14px;        --lh-small: 1.5;
  --text-caption: 12px;      --lh-caption: 1.4;
  --text-eyebrow: 13px;

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.24em;  /* eco del "AGENCIA MARKETING 360" del logo */
  --tracking-button: 0.02em;
}

/* spacing.css */
:root {
  /* Espaciado — base 4px */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container-max: 1200px;
  --container-pad: 24px;
  --section-gap: 112px;

  /* Radios — la "burbuja" del logo: esquinas muy redondeadas */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Bordes */
  --border-width: 1.5px;
  --border-width-strong: 2px;
}

/* effects.css */
:root {
  /* Sombras cálidas (tinte de --neutral-900) */
  --shadow-sm: 0 1px 2px rgba(28, 21, 20, 0.06), 0 1px 1px rgba(28, 21, 20, 0.04);
  --shadow-md: 0 8px 24px -10px rgba(28, 21, 20, 0.18);
  --shadow-lg: 0 24px 56px -20px rgba(28, 21, 20, 0.28);
  --shadow-brand: 0 10px 24px -10px rgba(229, 33, 42, 0.55);
  --shadow-focus: 0 0 0 3px rgba(255, 102, 96, 0.45);

  /* Overlay */
  --overlay-scrim: rgba(28, 21, 20, 0.56);
  --photo-protect: linear-gradient(180deg, rgba(28, 21, 20, 0) 40%, rgba(28, 21, 20, 0.72) 100%);

  /* Movimiento — "pop" del like */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --press-scale: 0.96;
}


/* ===== 3. Puente con Elementor (Sitio > Colores y fuentes globales) =====
   Si dejas los globales de Elementor sin tocar, estos valores mandan. */
:root, .elementor-kit-1, [class*="elementor-kit-"] {
  --e-global-color-primary: var(--brand-strong);
  --e-global-color-secondary: var(--neutral-900);
  --e-global-color-text: var(--fg-1);
  --e-global-color-accent: var(--brand);
  --e-global-typography-primary-font-family: 'Fredoka';
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: 'Fredoka';
  --e-global-typography-secondary-font-weight: 600;
  --e-global-typography-text-font-family: 'Figtree';
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: 'Figtree';
  --e-global-typography-accent-font-weight: 700;
}

/* ===== 4. Base ===== */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg-brand); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover, a:focus { color: var(--brand-deep); }
::selection { background: var(--red-200); color: var(--neutral-900); }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-top: 0;
}
h1 { font-size: var(--text-display-l); line-height: var(--lh-display-l); text-transform: uppercase; }
h2 { font-size: var(--text-h1); line-height: var(--lh-h1); text-transform: uppercase; }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--weight-semibold); }
p { text-wrap: pretty; }

/* ===== 5. Botones (WordPress, Elementor, formularios) ===== */
.elementor-button, .wp-element-button, .wp-block-button__link,
button, input[type="submit"], input[type="button"], .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--brand-strong); color: var(--neutral-0);
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 16px; letter-spacing: var(--tracking-button); line-height: 1;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.elementor-button:hover, .wp-element-button:hover, .wp-block-button__link:hover,
button:hover, input[type="submit"]:hover, .button:hover {
  background: var(--brand-deep); color: var(--neutral-0); transform: translateY(-2px);
}
.elementor-button:active, button:active, input[type="submit"]:active { transform: scale(0.96); }
.elementor-button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
}
.elementor-button.elementor-size-xs, .elementor-button.elementor-size-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.elementor-button.elementor-size-lg, .elementor-button.elementor-size-xl { min-height: 56px; padding: 0 32px; font-size: 18px; }

/* Variantes: añade la clase en Avanzado > Clases CSS del widget Botón */
.ml-btn-secondary .elementor-button { background: var(--neutral-900); box-shadow: none; }
.ml-btn-secondary .elementor-button:hover { background: var(--neutral-800); }
.ml-btn-outline .elementor-button { background: transparent; color: var(--fg-1); box-shadow: inset 0 0 0 2px var(--neutral-900); }
.ml-btn-outline .elementor-button:hover { background: var(--neutral-900); color: var(--neutral-0); }
.ml-btn-inverse .elementor-button { background: var(--neutral-0); color: var(--brand-strong); box-shadow: var(--shadow-md); }
.ml-btn-inverse .elementor-button:hover { background: var(--red-50); color: var(--brand-deep); }
.ml-btn-ghost .elementor-button { background: transparent; color: var(--fg-brand); box-shadow: none; padding: 0 8px; }
.ml-btn-ghost .elementor-button:hover { background: var(--red-50); transform: none; }

/* ===== 6. Formularios (Elementor Form, Contact Form 7, comentarios) ===== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"],
textarea, select,
.elementor-field-group .elementor-field-textual {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--neutral-0); color: var(--fg-1);
  border: 1.5px solid var(--border-1); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height: 120px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--neutral-400); }
input:focus, textarea:focus, select:focus, .elementor-field-group .elementor-field-textual:focus {
  border-color: var(--brand-strong); box-shadow: 0 0 0 3px var(--focus-ring); outline: none;
}
::placeholder { color: var(--fg-3); }
.elementor-field-group > label, label { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 14px; color: var(--fg-1); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-strong); width: 18px; height: 18px; }
.elementor-message-success { color: var(--success); }
.elementor-message-danger, .elementor-error .elementor-field-textual { color: var(--brand-deep); border-color: var(--brand-deep); }

/* ===== 7. Utilidades para Elementor (Avanzado > Clases CSS) ===== */
/* Antetítulo: widget Encabezado o Editor de texto */
.ml-eyebrow, .ml-eyebrow .elementor-heading-title {
  font-family: var(--font-body) !important; font-size: var(--text-eyebrow) !important; font-weight: 700 !important;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-brand);
}
/* Titular gigante del hero */
.ml-display .elementor-heading-title { font-size: clamp(48px, 7vw, var(--text-display-xl)); line-height: var(--lh-display-xl); text-transform: uppercase; }
/* Palabra resaltada en rojo dentro de un titular: <span class="ml-hl">para ti</span> */
.ml-hl { color: var(--brand); }
/* Tarjeta: en un Contenedor/Columna */
.ml-card { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ml-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ml-card img { border-radius: var(--radius-md); }
/* Tarjeta destacada (pack principal) */
.ml-card-featured { background: var(--surface-brand); color: var(--neutral-0); box-shadow: var(--shadow-brand); }
.ml-card-featured .elementor-heading-title, .ml-card-featured p { color: var(--neutral-0); }
/* Fondos de sección */
.ml-bg-page { background: var(--surface-page); }
.ml-bg-white { background: var(--surface-card); }
.ml-bg-dark { background: var(--surface-inverse); color: var(--neutral-0); }
.ml-bg-dark .elementor-heading-title, .ml-bg-dark p { color: var(--neutral-0); }
.ml-bg-red { background: var(--surface-brand); color: var(--neutral-0); }
.ml-bg-red .elementor-heading-title, .ml-bg-red p { color: var(--neutral-0); }
/* Bloque CTA redondeado */
.ml-cta-band { background: var(--surface-brand); border-radius: var(--radius-xl); padding: 64px 56px; overflow: hidden; }
/* Fotos redondeadas */
.ml-rounded img, img.ml-rounded { border-radius: var(--radius-lg); }
.ml-rounded-xl img, img.ml-rounded-xl { border-radius: var(--radius-xl); }
/* Iconos sociales (widget Iconos sociales) */
.elementor-social-icon { background: var(--neutral-900) !important; border-radius: var(--radius-pill) !important; transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast); }
.elementor-social-icon:hover { background: var(--brand-strong) !important; transform: scale(1.08); }

/* ===== 8. Cabecera y pie (Hello Elementor) ===== */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
.site-header .site-navigation ul.menu li a, .elementor-nav-menu a { font-family: var(--font-body); font-weight: 600; color: var(--fg-1); }
.site-header .site-navigation ul.menu li a:hover, .elementor-nav-menu a:hover, .elementor-nav-menu a.elementor-item-active { color: var(--fg-brand); }
.elementor-nav-menu--main .elementor-item.elementor-item-active:after, .elementor-nav-menu--main .elementor-item:hover:after { background-color: var(--brand); }
.site-footer { background: var(--surface-inverse); color: var(--neutral-0); }
.site-footer a { color: var(--neutral-0); }

/* ===== 9. Responsive ===== */
@media (max-width: 1024px) {
  h1 { font-size: 48px; } h2 { font-size: 36px; }
  .ml-cta-band { padding: 48px 32px; }
}
@media (max-width: 767px) {
  h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 22px; }
  .ml-cta-band { padding: 40px 24px; border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}