/* =============================================
   HOME PAGE — Hero + Sobre mí
   assets/css/home.css
   ============================================= */

/* ---- Hero ---- */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden; text-align:center;
  background:
    linear-gradient(160deg,rgba(13,27,42,.92) 0%,rgba(28,47,74,.85) 60%,rgba(74,55,40,.7) 100%),
    url('../img/gonzalo-elcano-12.jpg') center/cover no-repeat;
}
.hero-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center bottom,rgba(201,168,76,.09) 0%,transparent 70%);
  pointer-events:none;
}
.hero-content {
  position:relative; z-index:2;
  padding:2rem; max-width:800px;
  animation:heroIn 1.2s ease both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-eyebrow {
  font-size:.8rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--c-gold); margin-bottom:1.25rem; display:block;
}
.hero-title {
  font-family:var(--ff-serif);
  font-size:clamp(3rem,8vw,6.5rem); font-weight:700;
  color:var(--c-white); line-height:1; margin-bottom:1.5rem;
}
.hero-subtitle {
  font-size:clamp(1rem,2vw,1.25rem);
  color:rgba(255,255,255,.7); font-weight:300;
  letter-spacing:.05em; margin-bottom:2.5rem;
}
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.scroll-hint {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%); z-index:2;
  opacity:.55; animation:bounce 2s infinite;
}
.scroll-arrow {
  width:22px; height:22px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* ---- Sobre mí ---- */
.section-sobre-mi { background:var(--c-bg); }

.sobre-mi-grid {
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:5rem; align-items:center;
}

/* Photos */
.sobre-mi-fotos {
  position:relative;
  padding:1.5rem 1.5rem 60px 0;
}
.sobre-mi-fotos::before {
  content:''; position:absolute;
  top:-12px; left:-12px; right:52px; bottom:52px;
  border:2px solid rgba(201,168,76,.35); border-radius:var(--radius); z-index:1;
}
.foto-frame {
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); position:relative;
}
.foto-frame img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.foto-frame:hover img { transform:scale(1.03); }

.foto-main {
  width:100%; aspect-ratio:4/5;
  z-index:2; border:5px solid var(--c-white);
}
.foto-secondary {
  position:absolute; bottom:-40px; right:-20px;
  width:55%; aspect-ratio:1/1;
  z-index:3; border:4px solid var(--c-white);
  box-shadow:var(--shadow-lg);
}

/* Text */
.sobre-mi-texto p {
  color:var(--c-text-soft); margin-bottom:1.2rem; font-size:1.03rem;
}
.sobre-mi-texto strong { color:var(--c-text); font-weight:700; }

.media-badges {
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem;
}
.media-badge {
  font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.45rem .9rem;
  border:1.5px solid var(--c-border);
  border-radius:100px; color:var(--c-text-soft);
  transition:all var(--t);
}
.media-badge:hover {
  border-color:var(--c-gold); color:var(--c-gold);
  background:rgba(201,168,76,.06);
}

/* ---- Quick links section — Cascada asimétrica dinámica ---- */
.quick-links-section {
  background: var(--c-bg-alt);
  padding: 64px 0;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 50px;
  /* Padding para que las sombras y transforms no se recorten */
  padding: 30px 8px 50px;
  /* align-items: start permite que cada tarjeta tenga su propio eje Y
     y que los translateY de la cascada sean visualmente efectivos */
  align-items: start;
}

.quick-link-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 2rem 1.75rem;
  background: var(--c-card); border: 1.5px solid var(--c-border);
  border-radius: 10px; text-decoration: none; color: var(--c-text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  /* Transición fluida para todo: posición, escala, sombra */
  transition: all 0.4s ease-out;
  position: relative;
}

/* ---- Cascada: tarjetas impares bajan y rotan levemente ---- */
.quick-link-card:nth-child(odd) {
  transform: translateY(20px) rotate(-0.5deg);
}

/* ---- Cascada: tarjetas pares suben y rotan en sentido opuesto ---- */
.quick-link-card:nth-child(even) {
  transform: translateY(-20px) rotate(0.5deg);
}

/* ---- Primera tarjeta: más prominente por defecto ---- */
.quick-link-card:first-child {
  transform: translateY(0) rotate(0deg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(201, 168, 76, 0.45);
}
.quick-link-card:first-child strong {
  font-size: 1.28rem;
}

/* ---- Hover: se endereza, sube y se superpone ---- */
.quick-link-card:hover {
  transform: scale(1.03) translateY(-10px) rotate(0deg) !important;
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--c-gold);
}

/* ---- Sobrescribe data-reveal visible para respetar la cascada ---- */
/* [data-reveal].visible resetea transform a translateY(0) en main.css;
   estas reglas más específicas preservan las posiciones de cascada */
.quick-link-card[data-reveal].visible:nth-child(odd) {
  transform: translateY(20px) rotate(-0.5deg);
}
.quick-link-card[data-reveal].visible:nth-child(even) {
  transform: translateY(-20px) rotate(0.5deg);
}
.quick-link-card[data-reveal].visible:first-child {
  transform: translateY(0) rotate(0deg);
}

.ql-icon { font-size: 1.6rem; }
.quick-link-card strong {
  font-family: var(--ff-serif); font-size: 1.15rem; color: var(--c-navy);
}
.quick-link-card span { font-size: .85rem; color: var(--c-text-soft); }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .sobre-mi-grid { gap:3rem; }
}
@media (max-width:768px) {
  .hero-cta { flex-direction:column; align-items:center; }

  .sobre-mi-grid { grid-template-columns:1fr; gap:4rem; }

  .sobre-mi-fotos {
    max-width:380px; margin:0 auto;
    padding-bottom:60px;
  }
  .foto-secondary { right:-10px; bottom:-30px; width:50%; }

  /* En móvil la cascada se aplana para máxima legibilidad */
  .quick-links-grid {
    gap: 1.5rem;
    padding: 10px 4px 20px;
  }
  .quick-link-card:nth-child(odd),
  .quick-link-card:nth-child(even),
  .quick-link-card:first-child,
  .quick-link-card[data-reveal].visible:nth-child(odd),
  .quick-link-card[data-reveal].visible:nth-child(even),
  .quick-link-card[data-reveal].visible:first-child {
    transform: translateY(0) rotate(0deg);
  }
  .quick-link-card:hover {
    transform: translateY(-4px) scale(1.01) rotate(0deg) !important;
  }
}