/* Ready4phones — hoja de estilos global (tokens + componentes) */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Baloo+2:wght@400;500;600;700&display=swap');

:root{
  /* colores */
  --mint-100:#E4F6EC;--mint-200:#B9E9CE;--mint-300:#7FD3A6;--mint-400:#4CB88B;--mint-500:#3AA478;--mint-600:#2C8462;--mint-700:#1F6349;
  --coral-100:#FDE7DC;--coral-200:#F9C3A6;--coral-300:#F49A6B;--coral-400:#EE7B45;--coral-500:#E4632D;--coral-600:#C24E21;
  --cream-050:#FBF9F1;--cream-100:#F5F1E3;--cream-200:#EFEADA;--cream-300:#E4DCC6;
  --ink-900:#1C1B17;--ink-700:#3A382F;--ink-500:#635F52;--ink-300:#948F7D;--ink-100:#C9C4B2;
  --white:#FFFFFF;--black:#161512;
  --blue-family:#4E6EF2;
  --red-alert:#E4472E;
  --bg-app:var(--cream-050);
  --surface-card:var(--white);
  --surface-sunken:var(--cream-100);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-on-brand:var(--white);
  --brand-primary:var(--mint-400);
  --brand-primary-hover:var(--mint-500);
  --brand-primary-active:var(--mint-600);
  --accent-coral:var(--coral-400);
  --accent-coral-hover:var(--coral-500);
  --border-strong:var(--black);
  --border-subtle:var(--ink-100);
  --focus-ring:var(--blue-family);
  --success:var(--mint-500);
  --alert:var(--red-alert);

  /* tipografía */
  --font-display:'Fredoka',ui-rounded,'Baloo 2',sans-serif;
  --font-body:'Nunito','Segoe UI',sans-serif;
  --fs-display-lg:34px;--fs-display-md:26px;--fs-display-sm:21px;
  --fs-body-lg:18px;--fs-body-md:16px;--fs-body-sm:14px;--fs-caption:12px;
  --lh-display:1.2;--lh-body:1.5;
  --fw-regular:400;--fw-semibold:600;--fw-bold:700;

  /* espaciado */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:56px;--space-10:72px;
  --radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;
  --border-w:2.5px;--border-w-thick:3px;
  --shadow-card:0 4px 0 rgba(28,27,23,0.06),0 2px 8px rgba(28,27,23,0.06);
  --shadow-button:0 4px 0 rgba(28,27,23,0.18);
  --shadow-button-active:0 1px 0 rgba(28,27,23,0.18);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-standard:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--cream-050);font-family:var(--font-body);}
img{max-width:100%;}
a{color:var(--brand-primary-active);}
a:hover{color:var(--brand-primary-hover);}

/* ---------- Header ---------- */
.r4p-header{position:fixed;top:0;left:0;right:0;height:76px;background:var(--cream-050);border-bottom:var(--border-w) solid var(--border-strong);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:100;box-sizing:border-box;gap:12px;}
.r4p-header-spacer{height:76px;}
.r4p-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none;}
.r4p-logo-icon{height:42px;width:auto;display:block;}
.r4p-logo-text{font-family:'Baloo 2',var(--font-display);font-weight:700;font-size:26px;color:var(--text-primary);white-space:nowrap;}
.r4p-desktop-nav{display:flex;align-items:center;gap:26px;min-width:0;}
.r4p-desktop-nav a.r4p-nav-link{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-md);text-decoration:none;color:var(--text-primary);transition:color .18s var(--ease-standard);}
.r4p-desktop-nav a.r4p-nav-link:hover{color:var(--brand-primary-active) !important;}
.r4p-desktop-nav a.r4p-nav-link.is-active{color:var(--brand-primary-active);}
.r4p-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;cursor:pointer;flex-shrink:0;padding:0;}
.r4p-mobile-panel{display:none;position:fixed;top:76px;left:0;right:0;z-index:99;background:var(--cream-050);border-bottom:var(--border-w) solid var(--border-strong);flex-direction:column;padding:8px 20px 20px;gap:4px;box-sizing:border-box;}
.r4p-mobile-panel.is-open{display:flex;}
.r4p-mobile-panel a.r4p-nav-link{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-lg);text-decoration:none;color:var(--text-primary);padding:12px 4px;}
.r4p-mobile-panel a.r4p-nav-link.is-active{color:var(--brand-primary-active);}
@media (max-width:768px){
  .r4p-header{padding:0 20px !important;}
  .r4p-desktop-nav{display:none !important;}
  .r4p-hamburger{display:flex !important;}
  .r4p-header .r4p-logo-icon{height:26px !important;}
  .r4p-header .r4p-logo-text{font-size:16px !important;}
}

/* ---------- Footer ---------- */
.r4p-footer{background:var(--cream-100);border-top:var(--border-w) solid var(--border-strong);padding:40px 40px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.r4p-footer-logo{height:56px;display:block;}
.r4p-footer-url{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-secondary);text-decoration:none;margin-top:-8px;}
.r4p-footer-nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}
.r4p-footer-nav a{font-family:var(--font-body);font-weight:600;font-size:var(--fs-body-sm);color:var(--text-secondary);text-decoration:none;}
.r4p-footer p{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-secondary);margin:0;text-align:center;}

/* ---------- Botones (equivalentes al componente Button) ---------- */
.r4p-btn{font-family:var(--font-display);font-weight:600;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s var(--ease-standard), box-shadow .12s var(--ease-standard);text-decoration:none;}
.r4p-btn:active{transform:translateY(3px);}
.r4p-btn-sm{padding:8px 18px;font-size:var(--fs-body-sm);}
.r4p-btn-md{padding:14px 28px;font-size:var(--fs-body-lg);}
.r4p-btn-lg{padding:18px 36px;font-size:var(--fs-display-sm);}
.r4p-btn-primary{background:var(--brand-primary);color:var(--white);box-shadow:var(--shadow-button);}
.r4p-btn-coral{background:var(--accent-coral);color:var(--white);box-shadow:var(--shadow-button);}
.r4p-btn-secondary{background:var(--white);color:var(--text-primary);box-shadow:var(--shadow-button);}
.r4p-btn-primary:hover,.r4p-btn-coral:hover,.r4p-btn-secondary:hover{color:inherit;}
.r4p-btn[disabled]{cursor:not-allowed;opacity:.5;}

/* ---------- Cards / StatCard ---------- */
.r4p-statcard{background:var(--surface-card);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-md);padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px;min-width:100px;}
.r4p-statcard-value{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display-sm);}
.r4p-statcard-value.tone-mint{color:var(--brand-primary-active);}
.r4p-statcard-value.tone-coral{color:var(--accent-coral);}
.r4p-statcard-value.tone-ink{color:var(--text-primary);}
.r4p-statcard-label{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-secondary);line-height:1.25;}

/* ---------- CTA hover (home / que-incluye) ---------- */
.r4p-cta{display:inline-block;border-radius:var(--radius-pill);transition:transform .18s var(--ease-standard);}
.r4p-cta:hover{transform:translateY(-3px) scale(1.04);}
.r4p-cta-mint:hover .r4p-btn{background:var(--mint-200) !important;}
.r4p-cta-coral:hover .r4p-btn{background:var(--coral-200) !important;}
.r4p-cta-blue:hover .r4p-btn{background:#E1E7FB !important;}

.r4p-card:hover{transform:translateY(-4px);background:var(--mint-100) !important;}
.r4p-card.r4p-card-coral:hover{background:var(--coral-100) !important;}

.r4p-statcard-wrap{height:100% !important;}
.r4p-statcard-wrap > *{height:100% !important;}
.r4p-statcard-wrap .r4p-statcard{padding:28px 18px !important;height:100% !important;min-height:190px !important;box-sizing:border-box !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;text-align:center !important;}
.r4p-statcard-wrap .r4p-statcard-value{font-size:40px !important;}
.r4p-statcard-wrap .r4p-statcard-label{font-size:13px !important;line-height:1.35 !important;}
@media (max-width:640px){
  .r4p-statcard-wrap .r4p-statcard{padding:16px 10px !important;min-height:150px !important;}
  .r4p-statcard-wrap .r4p-statcard-value{font-size:26px !important;}
  .r4p-statcard-wrap .r4p-statcard-label{font-size:11px !important;}
}

/* ---------- Contacto: iconos sociales ---------- */
.r4p-social{transition:transform .18s var(--ease-standard);}
.r4p-social:hover{transform:translateY(-3px) scale(1.08);}
.r4p-social-mint:hover{background:var(--mint-200) !important;}
.r4p-social-coral:hover{background:var(--coral-200) !important;}
.r4p-social-blue:hover{background:#E1E7FB !important;}

/* ---------- Que incluye: acordeón móvil ---------- */
.r4p-accordion-btn{display:none;}
@media (max-width:768px){
  .r4p-accordion-grid > *:nth-child(n+4){display:none;}
  .r4p-accordion-grid.is-expanded > *:nth-child(n+4){display:flex;animation:r4pFadeIn .35s ease;}
  .r4p-accordion-btn{display:inline-block;}
}
@keyframes r4pFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Formularios (Te interesa) ---------- */
input,textarea{font-family:var(--font-body);}