/* =========================================================
   PROFEMADD — MOBILE V2 AUTÓNOMO
   SOLO <= 760px
   Esta hoja contiene sus propios estilos visuales para no
   depender de que Safari reutilice/cargue correctamente
   la hoja de escritorio.
   ========================================================= */

:root{
  --violet:#270184;
  --indigo:#3428A9;
  --blue:#4354D4;
  --electric:#5276EF;
  --sky:#6EA0FA;
  --ink:#111111;
  --muted:#65677A;
  --paper:#FAFAF8;
  --white:#FFFFFF;
  --line:#E6E7EF;
  --shadow:0 18px 44px rgba(39,1,132,.10);
}

*{
  box-sizing:border-box !important;
}

html{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  scroll-behavior:smooth;
}

body{
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height:1.6 !important;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit !important;
  text-decoration:none !important;
}

img{
  display:block !important;
  max-width:100% !important;
  height:auto;
}

button,
input,
textarea,
select{
  font:inherit !important;
}

.container{
  width:calc(100% - 28px) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* HEADER */
.site-header{
  min-height:72px !important;
  position:sticky !important;
  top:0 !important;
  z-index:2000 !important;
  background:rgba(250,250,248,.98) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.site-header .nav{
  min-height:72px !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  position:relative !important;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:0 !important;
}

.site-header .brand img{
  width:150px !important;
  max-width:58vw !important;
  max-height:32px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.menu-btn{
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:var(--white) !important;
  color:var(--ink) !important;
  box-shadow:0 8px 22px rgba(17,17,17,.05) !important;
  font-size:1.25rem !important;
  line-height:1 !important;
}

.site-header .nav-links{
  position:absolute !important;
  top:64px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  display:none !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:2px !important;
  padding:10px !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:var(--paper) !important;
  box-shadow:0 18px 42px rgba(17,17,17,.14) !important;
  z-index:2001 !important;
}

.site-header .nav-links.open{
  display:flex !important;
}

.site-header .nav-links a{
  display:block !important;
  width:100% !important;
  padding:11px 12px !important;
  border-radius:10px !important;
  color:#333541 !important;
  font-size:.94rem !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}

.site-header .nav-links a.active{
  color:var(--violet) !important;
  background:#F0EEFF !important;
}

.site-header .nav-links .nav-cta{
  margin-top:4px !important;
  text-align:center !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--violet),var(--blue),var(--sky)) !important;
}

/* GLOBAL TYPOGRAPHY */
h1,h2,h3,h4,p{
  margin-top:0;
}

h1,
.hero-v3 h1{
  margin-bottom:22px !important;
  color:var(--ink) !important;
  font-size:clamp(2.55rem,11.8vw,3.35rem) !important;
  line-height:.98 !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;
}

h2{
  color:var(--ink) !important;
  font-size:clamp(1.9rem,8vw,2.45rem) !important;
  line-height:1.06 !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
}

h3{
  color:var(--ink) !important;
  font-size:1.18rem !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

p,
.lead{
  color:#4d5060 !important;
  font-size:1rem !important;
  line-height:1.72 !important;
}

.lead{
  font-size:1.05rem !important;
}

.gradient-text,
.hero-v3 h1 span{
  color:transparent !important;
  background:linear-gradient(90deg,var(--violet),var(--blue),var(--sky)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

.kicker-v3,
.card-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-bottom:14px !important;
  color:var(--violet) !important;
  font-size:.76rem !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

.kicker-v3::before{
  content:"" !important;
  width:28px !important;
  height:2px !important;
  background:linear-gradient(90deg,var(--violet),var(--electric)) !important;
}

/* BUTTONS */
.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:50px !important;
  padding:13px 20px !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--ink) !important;
  font-size:.96rem !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.btn-primary{
  border-color:transparent !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--violet),var(--blue),var(--electric)) !important;
  box-shadow:0 12px 28px rgba(52,40,169,.18) !important;
}

.btn-secondary{
  color:var(--ink) !important;
  background:#fff !important;
}

.article-inline-link{
  display:inline-block !important;
  margin-top:10px !important;
  color:var(--violet) !important;
  font-weight:800 !important;
}

/* HOME HERO */
.hero-v3{
  padding:40px 0 48px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(110,160,250,.18), transparent 30%),
    linear-gradient(180deg,#fff 0%,var(--paper) 100%) !important;
}

.hero-v3 .container.hero-v3-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:30px !important;
}

.hero-v3-copy,
.hero-v3-visual{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.hero-v3-copy > p:first-of-type{
  color:var(--violet) !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

.hero-v3-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin-top:24px !important;
}

.hero-v3-actions .btn{
  width:100% !important;
}

.proof-v3{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin-top:26px !important;
}

.proof-v3 > div{
  padding:14px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 8px 22px rgba(17,17,17,.04) !important;
}

.proof-v3 strong{
  display:block !important;
  color:var(--violet) !important;
  font-size:1.05rem !important;
}

.proof-v3 span{
  display:block !important;
  margin-top:2px !important;
  color:var(--muted) !important;
  font-size:.82rem !important;
}

.hero-v3-visual{
  position:relative !important;
  height:390px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:linear-gradient(145deg,#F1EFFF,#EAF2FF) !important;
  border:1px solid #E3E4F4 !important;
}

.portrait-v3{
  position:relative !important;
  z-index:2 !important;
  width:auto !important;
  height:372px !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

.portrait-v3-bg{
  position:absolute !important;
  z-index:1 !important;
  width:285px !important;
  height:340px !important;
  right:50% !important;
  bottom:0 !important;
  transform:translateX(50%) !important;
  border:1px solid rgba(67,84,212,.22) !important;
  border-radius:44% 44% 24px 24px !important;
  background:linear-gradient(160deg,#F1EEFF,#DCE8FF) !important;
}

.portrait-v3-note{
  position:absolute !important;
  z-index:3 !important;
  left:12px !important;
  right:auto !important;
  bottom:14px !important;
  width:min(245px,76vw) !important;
  padding:14px 16px !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.portrait-v3-note strong{
  color:var(--violet) !important;
  font-size:.93rem !important;
}

.portrait-v3-note span{
  color:#65677A !important;
  font-size:.87rem !important;
}

/* SECTIONS */
.section,
.paths-v3,
.manifesto-v3,
.editorial-v3,
.podcast-v3{
  padding:58px 0 !important;
}

.section-alt{
  background:#F4F5FB !important;
}

.paths-grid-v3,
.manifesto-v3-grid,
.editorial-v3-grid,
.podcast-v3-grid,
.grid-2,
.grid-3,
.feature,
.footer-grid,
.social-home-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}

.card,
.path-v3,
.social-card{
  min-width:0 !important;
  padding:22px !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(17,17,17,.04) !important;
}

.icon-badge{
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  margin-bottom:16px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,var(--violet),var(--blue),var(--sky)) !important;
  color:#fff !important;
  font-weight:850 !important;
}

.path-v3{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  gap:14px !important;
  align-items:start !important;
}

.path-v3-num{
  color:var(--violet) !important;
  font-weight:850 !important;
}

.feature{
  gap:28px !important;
  align-items:start !important;
}

.cta-v3{
  padding:56px 0 !important;
}

.cta-v3-box,
.social-home-wrap{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:22px !important;
  padding:24px !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,#fff,#F4F5FF) !important;
  box-shadow:var(--shadow) !important;
}

/* INNER PAGE HERO */
.page-hero{
  padding:48px 0 34px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(110,160,250,.16), transparent 32%),
    linear-gradient(180deg,#fff,var(--paper)) !important;
}

.page-hero h1{
  margin-bottom:18px !important;
}

/* PODCAST / EMBEDS */
.podmadd-player-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}

.podmadd-player-card{
  padding:18px !important;
  border:1px solid var(--line) !important;
  border-radius:20px !important;
  background:#fff !important;
}

iframe,
video{
  width:100% !important;
  max-width:100% !important;
  border:0 !important;
  border-radius:16px !important;
}

/* FOOTER */
.site-footer{
  margin-top:42px !important;
  padding:42px 0 28px !important;
  background:#111 !important;
  color:#fff !important;
}

.site-footer p,
.site-footer a,
.site-footer small,
.site-footer span{
  color:rgba(255,255,255,.74) !important;
}

.footer-brand img{
  width:165px !important;
  max-width:55vw !important;
}

/* VERY SMALL PHONES */
@media (max-width:420px){
  .container{
    width:calc(100% - 22px) !important;
  }

  .site-header .brand img{
    width:140px !important;
  }

  h1,
  .hero-v3 h1{
    font-size:clamp(2.25rem,11.4vw,2.9rem) !important;
  }

  .hero-v3-visual{
    height:350px !important;
  }

  .portrait-v3{
    height:335px !important;
  }

  .portrait-v3-bg{
    width:260px !important;
    height:310px !important;
  }
}