/* =========================================================
   HOME — Estilos específicos de index.html
   ========================================================= */

/* --- HERO --- */
.hero { position: relative; background-color: var(--color-navy); min-height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__bg svg { width: 100%; height: 100%; object-fit: cover; opacity: .06; }
.hero::after { content: ''; position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: radial-gradient(ellipse at 70% 50%, rgba(201,169,109,.06) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; padding-block: var(--space-20); }
.hero__content { max-width: 580px; }
.hero__title { font-size: var(--text-5xl); font-weight: 700; color: var(--color-white); line-height: 1.1; margin-bottom: var(--space-6); letter-spacing: -.02em; }
.hero__subtitle { font-size: var(--text-lg); color: rgba(255,255,255,.70); line-height: 1.8; margin-bottom: var(--space-10); max-width: 480px; }
.hero__image { position: relative; height: 560px; border-radius: var(--radius-xl); overflow: hidden; }
.hero__image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-navy-dark) 0%, rgba(201,169,109,.08) 100%); border: 1px solid rgba(201,169,109,.15); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: rgba(255,255,255,.30); font-size: var(--text-sm); text-align: center; }
.hero__image-placeholder svg { width: 56px; height: 56px; opacity: .3; }
.hero__image::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border: 1px solid rgba(201,169,109,.25); border-radius: var(--radius-xl); pointer-events: none; z-index: 1; }
.hero__scroll { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: rgba(255,255,255,.4); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; z-index: 1; animation: scrollBounce 2s ease-in-out infinite; }
.hero__scroll svg { width: 18px; height: 18px; }
@keyframes scrollBounce { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(6px); } }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.hero__microcopy { font-size: var(--text-xs); color: rgba(255,255,255,.45); letter-spacing: .04em; }
.hero__inner--centered { grid-template-columns: 1fr; text-align: center; }
.hero__inner--centered .hero__content { max-width: 780px; margin: 0 auto; }
.hero__inner--centered .hero__subtitle { margin-inline: auto; }
.hero__inner--centered .pill { margin-inline: auto; }
.hero__inner--centered .btn-group { justify-content: center; }
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__content { max-width: 100%; } .hero__subtitle, .hero .pill { margin-inline: auto; } .hero .btn-group { justify-content: center; } .hero__image { height: 340px; order: -1; } }
@media (max-width: 480px) { .hero__image { height: 260px; } }

/* --- SOBRE NOSOTROS --- */
.about__image-col { position: relative; }
.about__image-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-border) 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); color: var(--color-text-light); font-size: var(--text-sm); text-align: center; }
.about__image-wrap::after { content: ''; position: absolute; bottom: -16px; right: -16px; width: 80%; height: 80%; border: 2px solid rgba(201,169,109,.3); border-radius: var(--radius-xl); z-index: -1; }
.about__badge { position: absolute; bottom: var(--space-6); left: calc(-1 * var(--space-6)); background: var(--color-navy); border: 1px solid rgba(201,169,109,.3); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-xl); }
.about__badge-number { font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: 700; color: var(--color-gold); line-height: 1; }
.about__badge-label { font-size: var(--text-xs); color: rgba(255,255,255,.60); letter-spacing: .05em; }
.about__content { padding-left: var(--space-8); }
.about__title { font-size: var(--text-4xl); line-height: 1.2; margin-bottom: var(--space-5); }
.about__text { font-size: var(--text-base); color: var(--color-text-light); line-height: 1.8; margin-bottom: var(--space-6); }
.about__credentials { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-10); }
.about__credential { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-light); }
.about__credential-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--color-gold); }
.about__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.about__stat-number { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 700; color: var(--color-navy); line-height: 1; margin-bottom: var(--space-1); }
.about__stat-label { font-size: var(--text-xs); color: var(--color-text-light); }
@media (max-width: 768px) { .about__badge { display: none; } .about__content { padding-left: 0; } }

/* --- SERVICIOS --- */
.services__header { text-align: center; margin-bottom: var(--space-12); }
.services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .services__grid { grid-template-columns: 1fr; } }

/* --- ¿POR QUÉ ELEGIRNOS? --- */
.why-us__header { text-align: center; margin-bottom: var(--space-12); }
.why-us__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-8); }
.why-us__item { text-align: center; padding: var(--space-6); }
.why-us__icon { width: 64px; height: 64px; background: rgba(201,169,109,.12); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); color: var(--color-gold); transition: background var(--transition-base), transform var(--transition-base); }
.why-us__item:hover .why-us__icon { background: rgba(201,169,109,.22); transform: scale(1.08); }
.why-us__icon svg { width: 30px; height: 30px; }
.why-us__title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 600; color: var(--color-white); margin-bottom: var(--space-3); }
.why-us__text  { font-size: var(--text-sm); color: rgba(255,255,255,.60); line-height: 1.7; }
@media (max-width: 1024px) { .why-us__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .why-us__grid { grid-template-columns: 1fr; } }

/* --- PROCESO TIMELINE --- */
.process__header { text-align: center; margin-bottom: var(--space-12); }
.process__timeline { display: flex; align-items: flex-start; gap: 0; position: relative; }
.process__timeline::before { content: ''; position: absolute; top: 28px; left: calc(10% + 16px); right: calc(10% + 16px); height: 2px; background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 100%); opacity: .3; }
.process__step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-4); position: relative; }
.process__number { width: 56px; height: 56px; background: var(--color-cream); border: 2px solid var(--color-gold); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; color: var(--color-gold); margin-bottom: var(--space-5); position: relative; z-index: 1; transition: background var(--transition-base), color var(--transition-base); }
.process__step:hover .process__number { background: var(--color-gold); color: var(--color-navy); }
.process__step-title { font-family: var(--font-serif); font-size: var(--text-base); font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-2); }
.process__step-text { font-size: var(--text-xs); color: var(--color-text-light); line-height: 1.6; }
.process__note { text-align: center; margin-top: var(--space-10); font-size: var(--text-sm); color: var(--color-text-light); font-style: italic; }
@media (max-width: 768px) { .process__timeline { flex-direction: column; gap: var(--space-6); } .process__timeline::before { display: none; } .process__step { flex-direction: row; text-align: left; gap: var(--space-5); align-items: flex-start; } .process__number { flex-shrink: 0; margin-bottom: 0; } }

/* --- BLOG PREVIEW --- */
.blog-preview__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-10); flex-wrap: wrap; gap: var(--space-4); }
.blog-preview__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-gold); display: inline-flex; align-items: center; gap: var(--space-1); transition: gap var(--transition-fast); }
.blog-preview__link:hover { gap: var(--space-3); }
.blog-preview__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
@media (max-width: 900px) { .blog-preview__grid { grid-template-columns: 1fr; } }

/* --- CONTACTO --- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-16); align-items: start; }
.contact__info-title { font-size: var(--text-3xl); color: var(--color-white); margin-bottom: var(--space-4); }
.contact__info-subtitle { font-size: var(--text-base); color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: var(--space-10); }
.contact__info-item { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.contact__info-icon { width: 44px; height: 44px; background: rgba(201,169,109,.12); border: 1px solid rgba(201,169,109,.25); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-gold); }
.contact__info-icon svg { width: 20px; height: 20px; }
.contact__info-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-1); }
.contact__info-value { font-size: var(--text-sm); color: rgba(255,255,255,.75); line-height: 1.6; }
.contact__form-wrap { background: rgba(255,255,255,.05); border: 1px solid rgba(201,169,109,.15); border-radius: var(--radius-xl); padding: var(--space-10); }
.contact__form-title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--color-white); margin-bottom: var(--space-8); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .contact__form-wrap { padding: var(--space-8) var(--space-6); } }


/* --- FOTOS REALES (about__photo) --- */
.about__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* Grid invertido — imagen a la derecha (Dr. Funes) */
@media (min-width: 769px) {
  .grid-2--reversed .about__image-col { order: 2; }
  .grid-2--reversed .about__content   { order: 1; padding-left: 0; padding-right: var(--space-8); }
}

/* --- SECCIÓN INSTITUCIONAL --- */
.institutional__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.institutional__image { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.institutional__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.institutional__image::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(201,169,109,.25); border-radius: inherit; pointer-events: none; z-index: 1; }
.institutional__text { font-size: var(--text-base); color: rgba(255,255,255,.72); line-height: 1.8; margin-block: var(--space-6) var(--space-8); max-width: 520px; }
@media (max-width: 900px) { .institutional__inner { grid-template-columns: 1fr; gap: var(--space-10); } .institutional__image { aspect-ratio: 3/2; } }