/*
  styles.css — I Choose to Reconnect
  Paleta suave, tipografías armónicas y animaciones ligeras.
*/

/* ===== VARIABLES ===== */
:root{
  --bg: #f5efe4;
  --primary: #aec8d9;
  --secondary: #e7d9c7;
  --accent: #c7a167;
  --text-dark: #364c5a;
  --text-light: #ffffff;
  --header-height: 70px;

  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
}

/* ===== RESET / BASE ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg);
  overflow-x: hidden;
}

/* ===== HEADER / NAV ===== */
header{
  position: fixed; top:0; left:0; width:100%; height:var(--header-height);
  background: rgba(245,239,228,0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: box-shadow .3s ease;
}
header.scrolled{ box-shadow: 0 4px 22px rgba(0,0,0,.08); }

nav{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto; padding:0 2rem; height:100%;
}

/* Logo más grande con cápsula */
.logo{ display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.logo-mark{
  background: transparent;      /* antes: rgba(255,255,255,0.92) */
  box-shadow: none;             /* sin sombra para respetar transparente */
  border-radius: 0;             /* sin cápsula */
  width: auto; height: auto;    /* que no recorte el SVG */
  padding: 0;
}
.logo-icon{
  width: 48px;                  /* sube/baja según prefieras (36–48) */
  height: 48px;
  display: block;
  object-fit: contain;
}
.logo-title{ color:var(--text-dark); font-weight:600; font-size:1.2rem; }

.nav-links{ display:flex; list-style:none; gap:3rem; }
.nav-links a{
  text-decoration:none; color:var(--text-dark); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; position:relative; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--accent); transition:width .3s;
}
.nav-links a:hover{ color:var(--accent); }
.nav-links a:hover::after{ width:100%; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.menu-toggle span{ width:25px; height:2px; background:var(--text-dark); transition:all .3s; }

@media (max-width: 768px){
  nav{ padding:0 1rem; }
  .menu-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:var(--header-height); left:0; right:0; background:rgba(247,245,240,.98);
    flex-direction:column; padding:2rem 0; transform:translateY(-100%); opacity:0; pointer-events:none; transition:all .3s;
  }
  .nav-links.active{ transform:translateY(0); opacity:1; pointer-events:all; }
  .nav-links li{ text-align:center; padding:1rem 0; }
  /* Logo un poquito más chico en móvil */
  .logo-mark{ width:52px; height:52px; }
  .logo-icon{ width:30px; height:30px; }
}

/* ===== HERO ===== */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; padding: calc(var(--header-height) + 2rem) 2rem 2rem;
  overflow:hidden;
  background-image: url('../assets/img/hero-bg.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  animation: backgroundShift 40s linear infinite alternate;
}
.hero::before{
  content:''; position:absolute; inset:0; background:rgba(245,239,228,.55); z-index:0;
}
.hero-content{
  max-width: 900px; text-align:center; z-index:2; position:relative; animation: fadeInUp 1s ease-out;
}
@keyframes backgroundShift{ 0%{background-position:0% 50%;} 100%{background-position:5% 50%;} }
@media (prefers-reduced-motion: reduce){ .hero{ animation:none; } }

@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

.hero h1{
  font-size: clamp(3rem, 6vw, 5rem);
  font-family: var(--font-heading);
  font-weight: 700; margin-bottom: 1rem; color: var(--text-dark);
}
.hero p{
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom:2.5rem; color:var(--text-dark); opacity:.85; font-style:italic;
}
.hero-subtitle{
  font-size:1.15rem; font-family:var(--font-heading); color:var(--text-dark); opacity:.85; font-style:italic;
  display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:2rem;
}
.hero-subtitle .flourish-left, .hero-subtitle .flourish-right{ display:inline-block; width:50px; height:1px; background:var(--accent); }

/* ===== FEATURES / CTA ===== */
.hero-features, .intro-features{
  margin-top:3rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items:center; gap:2.5rem 3rem; width:90%; max-width:1100px; margin-inline:auto;
}
.feature-item{ text-align:center; max-width:240px; }
/* Quitar círculo azul de todos los iconos de features/services */
.feature-icon,
.service-icon{
  background: transparent;   /* antes: var(--primary) */
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  display: block;
  padding: 0;
  margin: 0 auto 1rem;       /* ¡centra el contenedor! */
}

/* Imagen del icono: tamaño y centrado */
.icon-img{
  display: block;
  margin: 0 auto;            /* centra la imagen */
  width: 200px;               /* sube a 80–96 si quieres más grande */
  height: 200px;
  object-fit: contain;
  filter: none;              /* quita ajustes de color */
}



.feature-item:hover .feature-icon, .service-card:hover .service-icon{ transform: translateY(-2px); }

.cta-buttons{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
.btn{
  padding:1rem 2.5rem; border-radius:50px; border:2px solid var(--primary);
  font-weight:500; font-size:1rem; text-decoration:none; transition:all .3s; cursor:pointer;
}
.btn-primary{ background:var(--primary); color:var(--text-dark); box-shadow:0 4px 15px rgba(168,197,217,.3); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--text-light); transform:translateY(-2px); }
.btn-secondary{ background:transparent; color:var(--text-dark); }
.btn-secondary:hover{ background:var(--primary); color:var(--text-light); }

/* ===== SECCIONES ===== */
.section{ padding:5rem 2rem; max-width:1200px; margin:0 auto; }
.section-header{ text-align:center; margin-bottom:4rem; }
.section-header h2{ font-family:var(--font-heading); font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom:.75rem; color:var(--text-dark); }
.section-header p{ font-size:1.1rem; opacity:.75; max-width:650px; margin:0 auto; }

/* ===== SERVICES ===== */
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; }
.service-card{
  background: var(--bg); border-radius:30px; padding:3rem 2rem; text-align:center;
  transition: all .4s ease; position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transition: transform .4s ease;
}
.service-card:hover{ transform: translateY(-8px); box-shadow:0 12px 30px rgba(0,0,0,.1); }
.service-card:hover::before{ transform: scaleX(1); }
.service-card h3{ font-family:var(--font-heading); font-size:1.6rem; font-weight:600; margin-top:1rem; color:var(--text-dark); }
.service-card p{ opacity:.8; }

/* ===== EVENTS ===== */
.events-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:2rem; }
.event-card{
  background: linear-gradient(135deg, var(--bg), var(--secondary));
  border-radius:24px; padding:2.5rem; transition:all .3s ease; border-left:5px solid var(--primary);
}
.event-card:hover{ transform: translateX(5px); box-shadow: -5px 8px 20px rgba(0,0,0,.1); }
.event-date{ font-weight:600; color:var(--accent); margin-bottom:.5rem; font-size:1rem; text-transform:uppercase; letter-spacing:1.5px; }
.event-title{ font-family:var(--font-heading); font-size:1.5rem; font-weight:600; margin-bottom:.5rem; color:var(--text-dark); }
.event-desc{ opacity:.8; }

/* ===== CONTACT ===== */
.contact-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-form{
  background:white; border-radius:20px; padding:3rem; box-shadow:0 10px 40px rgba(0,0,0,.08);
}
.form-group{ margin-bottom:1.5rem; }
.form-group label{ display:block; margin-bottom:.5rem; font-weight:500; }
.form-group input, .form-group textarea{
  width:100%; padding:.9rem 1.2rem; border:2px solid #e0e0e0; border-radius:12px; font:inherit; transition:all .3s ease;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(181,199,178,.1); }
.form-group textarea{ resize:vertical; min-height:120px; }
.contact-info{ display:flex; flex-direction:column; gap:2rem; }
.info-item{ display:flex; align-items:start; gap:1rem; }
.info-icon{
  width:64px; height:64px; background:var(--primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-light); font-size:1.75rem; flex-shrink:0;
}
@media (max-width: 768px){
  .contact-wrapper{ grid-template-columns:1fr; }
  .contact-form{ padding:2rem; }
}

/* ===== FOOTER ===== */
footer{ background:var(--text-dark); color:var(--text-light); padding:3rem 2rem 2rem; text-align:center; }
.footer-logo{
  font-size:1.6rem; font-weight:600; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.footer-text{ opacity:.8; margin-bottom:2rem; }
.social-links{ display:flex; justify-content:center; gap:1.5rem; margin-bottom:2rem; }
.social-links a{
  width:40px; height:40px; background:rgba(255,255,255,.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-light); text-decoration:none; transition:all .3s;
}
.social-links a:hover{ background:var(--primary); transform:translateY(-3px); }
.footer-bottom{ padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); opacity:.6; font-size:.9rem; }

/* ===== SCROLL TOP ===== */
.scroll-top{
  position:fixed; bottom:2rem; right:2rem; width:50px; height:50px; background:var(--primary);
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; cursor:pointer;
  opacity:0; pointer-events:none; transition:all .3s ease; z-index:999;
}
.scroll-top.visible{ opacity:1; pointer-events:all; }
.scroll-top:hover{ background:var(--accent); transform:translateY(-5px); }

/* ===== FADE-IN CLASSES ===== */
.fade-in{ opacity:1; transform:translateY(0); }
.fade-in.visible{ opacity:1; transform:translateY(0); }