:root{
--color-bg:#f5f1e8;
--color-white:#ffffff;
--color-black:#000000;
--color-primary:#7a0f14;
--color-primary-dark:#4f090c;
--color-gold:#c8a95b;
--color-blue:#0f2742;
--text:#1e1b18;
--text-soft:#5f5851;
--border:rgba(0,0,0,0.08);
--container:1200px;
--container-narrow:820px;
--radius:18px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:var(--color-bg);
color:var(--text);
line-height:1.6;
}

/* ============================================
INDICADOR DE SECCIÓN (DESARROLLO)
============================================ */
.dev-indicator {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
color: white;
text-align: center;
padding: 8px;
font-size: 0.85rem;
font-weight: 700;
z-index: 9999;
letter-spacing: 1px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.dev-label {
opacity: 0.9;
}

.dev-value {
background: rgba(0,0,0,0.3);
padding: 2px 10px;
border-radius: 12px;
margin-left: 8px;
}

/* Ajuste del header para el indicador */
.header {
top: 32px !important;
}

.container{
width:min(92%,var(--container));
margin:auto;
}

.narrow-content{
max-width:var(--container-narrow);
margin:auto;
}

.section{
padding:100px 0;
}

.section-light{
background:#ffffff;
}

.section-soft{
background:#f7f4ed;
}

.section-blue{
background:var(--color-blue);
color:#ffffff;
}

.section-deep{
background:#151212;
color:#ffffff;
}

.section-intro{
max-width:850px;
margin:0 auto 50px auto;
text-align:center;
}

.section-title{
font-size:2.5rem;
margin-bottom:15px;
}

.section-title-light{
color:#ffffff;
}

.section-subtitle{
font-size:1.1rem;
color:var(--text-soft);
}

.section-subtitle-light{
color:rgba(255,255,255,0.8);
}

.centered-text{
text-align:center;
}

.eyebrow{
font-size:.8rem;
letter-spacing:2px;
text-transform:uppercase;
color:var(--color-primary);
font-weight:700;
}

.eyebrow-light{
color:#ffffff;
}

/* ============================================
HEADER - ESCRITORIO
============================================ */
.header{
position:sticky;
top:0;
left:0;
right:0;
background:#000000;
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:1000;
}

.header-inner{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center;
gap:25px;
min-height:85px;
position: relative;
}

.logo{
display:flex;
flex-direction:column;
color:white;
}

.logo-mark{
font-weight:800;
font-size:1.2rem;
}

.logo-text{
font-size:.9rem;
opacity:.8;
}

/* Botón menú - Desktop: activa el menú radial */
.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
background:rgba(10,10,10,0.88);
border:1px solid rgba(255,140,0,0.45);
border-radius:12px;
color:#ffffff;
font-size:1.4rem;
cursor:pointer;
transition: all 0.3s ease;
justify-self: center;
}

.menu-toggle:hover {
background: rgba(255,140,0,0.2);
border-color: rgba(255,140,0,0.8);
}

.menu{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:auto;
}

.menu a{
color:white;
font-weight:600;
text-decoration:none;
}

/* ============================================
MENÚ RADIAL - DESPLEGABLE
============================================ */
.menu-radial{
position:absolute;
top:calc(100% + 14px);
left:50%;
transform:translateX(-50%);
width:600px; /* CAMBIADO: antes 680px */
min-height:360px;
display:none; /* Oculto por defecto */
align-items:center;
justify-content:center;
z-index:1100;
margin-left:-420px; /* AJUSTE FINAL: centrado */
}

/* Clase que activa el menú */
.menu.menu-open .menu-radial{
display:flex;
}

.menu-top{
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
width:160px;
height:46px;
padding:0;
box-sizing:border-box;
text-align:center;
background:rgba(10,10,10,0.95);
border:1px solid rgba(255,140,0,0.45);
border-radius:18px;
color:#ffffff;
text-decoration:none;
font-weight:700;
z-index:3;
transition: all 0.3s ease;
}

.menu-top:hover {
background: rgba(255,140,0,0.2);
transform: translateX(-50%) scale(1.05);
}

.menu-left,
.menu-right{
position:absolute;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:22px;
z-index:3;
}

.menu-left{
left:40px; /* CAMBIADO: antes 80px */
align-items:flex-start;
}

.menu-right{
right:40px; /* CAMBIADO: antes 80px */
align-items:flex-end;
}

.menu-left a,
.menu-right a{
display:flex;
align-items:center;
justify-content:center;
width:140px;
height:42px;
padding:0;
box-sizing:border-box;
background:rgba(10,10,10,0.95);
border:1px solid rgba(255,140,0,0.45);
border-radius:18px;
color:#ffffff;
text-decoration:none;
font-weight:700;
line-height:1;
text-align:center;
transition: all 0.3s ease;
}

.menu-left a:hover,
.menu-right a:hover {
background: rgba(255,140,0,0.2);
transform: scale(1.05);
border-color: rgba(255,140,0,0.8);
}

.menu-logo{
position:absolute;
top:50%;
left:50%;
width:190px;
height:190px;
transform:translate(-50%, -50%);
border-radius:50%;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 30px rgba(255,120,0,0.45);
z-index:2;
background: #000;
}

.menu-logo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:50%;
}

/* Botón inscribirme en header */
.btn-header {
white-space: nowrap;
}

.hero{
padding:140px 0;
background:
linear-gradient(rgba(20,10,10,.7),rgba(20,10,10,.7)),
linear-gradient(135deg,#7a0f14,#4f090c);
color:white;
text-align:center;
}

.hero-badge{
display:inline-block;
padding:8px 16px;
background:rgba(255,255,255,.15);
border-radius:30px;
margin-bottom:20px;
font-size:.9rem;
}

.hero h1{
font-size:4rem;
margin-bottom:10px;
}

.hero-phrase{
font-size:1.8rem;
margin-bottom:20px;
font-weight:700;
}

.hero p{
max-width:700px;
margin:0 auto 30px auto;
}

.hero-actions{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.hero-mini-text{
margin-top:15px;
opacity:.85;
}

.btn-primary{
background:var(--color-primary);
color:white;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:700;
display:inline-block;
transition: all 0.3s ease;
}

.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(122, 15, 20, 0.4);
}

.btn-secondary{
border:2px solid white;
padding:14px 28px;
border-radius:30px;
color:white;
text-decoration:none;
transition: all 0.3s ease;
}

.btn-secondary:hover {
background: white;
color: var(--color-primary);
}

.btn-secondary-dark{
border:2px solid var(--color-primary);
color:var(--color-primary);
}

.btn-secondary-dark:hover {
background: var(--color-primary);
color: white;
}

.card{
background:white;
border-radius:var(--radius);
padding:28px;
border:1px solid var(--border);
}

.identity-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.pillar-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.journey-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.journey-card-wide{
grid-column:span 3;
}

.journey-step{
font-size:2rem;
font-weight:700;
color:var(--color-primary);
display:block;
margin-bottom:10px;
}

.experience-flow{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:30px;
}

.experience-item{
background:white;
padding:12px 18px;
border-radius:30px;
border:1px solid var(--border);
}

.experience-arrow{
font-size:1.5rem;
display:flex;
align-items:center;
}

.two-column-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.info-card{
background:white;
color:black;
}

.fruit-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.resource-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.cta-final{
text-align:center;
}

.centered-actions{
justify-content:center;
}

.footer{
background:#0d0b0b;
color:white;
padding:70px 0 30px 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-bottom:40px;
}

.footer a{
display:block;
color:rgba(255,255,255,.8);
text-decoration:none;
margin-bottom:6px;
transition: color 0.3s;
}

.footer a:hover {
color: var(--color-gold);
}

.footer-brand{
font-weight:700;
margin-bottom:10px;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding-top:20px;
text-align:center;
}

/* ============================================
RESPONSIVE - MÓVIL
============================================ */
@media (max-width:900px){
.identity-grid,
.pillar-grid{
grid-template-columns:1fr;
}

.journey-grid{
grid-template-columns:1fr;
}

.journey-card-wide{
grid-column:span 1;
}

.two-column-layout{
grid-template-columns:1fr;
}

.fruit-grid,
.resource-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:2.6rem;
}

.hero-phrase{
font-size:1.4rem;
}

/* ============================================
HEADER MÓVIL - AJUSTES CRÍTICOS
============================================ */
.header-inner{
position:relative;
grid-template-columns:1fr auto auto;
gap:10px;
min-height:auto;
padding:10px 0;
align-items:center;
}

/* El botón menú en móvil */
.menu-toggle{
display:flex;
justify-self:end;
align-self:center;
order: 2;
}

/* El menú en móvil ocupa todo el ancho */
.menu{
display:block;
position:static;
width:100%;
grid-column: 1 / -1;
order: 3;
}

/* El menú radial en móvil - centrado y más compacto */
.menu-radial{
position:relative;
top:auto;
left:auto;
transform:none;
width:100%;
min-height:380px;
margin-top:10px;
display:none; /* Oculto por defecto */
margin-left:0; /* Anula el -420px de desktop */
}

.menu.menu-open .menu-radial{
display:flex;
}

/* Ajustes de posición para móvil */
.menu-top{
top:0;
width:140px;
height:40px;
font-size:0.95rem;
}

.menu-left{
left:0;
gap:15px;
}

.menu-right{
right:0;
gap:15px;
}

.menu-left a,
.menu-right a{
width:110px;
height:38px;
font-size:0.9rem;
}

.menu-logo{
width:150px;
height:150px;
}

/* Ocultar botón inscribirme en móvil (opcional, o moverlo) */
.btn-header{
display:none;
}

/* Indicador de desarrollo más pequeño en móvil */
.dev-indicator {
font-size: 0.75rem;
padding: 6px;
}

.header {
top: 26px !important;
}
}

/* ============================================
ANIMACIONES
============================================ */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.menu.menu-open .menu-radial {
animation: fadeIn 0.3s ease;
}