/* ── Contacto Page ── */

.contacto-hero {
  background: var(--gradient-hero);
  padding: calc(var(--nav-height) + var(--sp-16)) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.contacto-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59,130,246,0.2) 0%, transparent 70%);
}

.contacto-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.contacto-hero h1 {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--fw-black);
  color: white;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
}

.contacto-hero p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  line-height: var(--lh-relaxed);
}

/* ── Contacto Grid ── */
.contacto-section {
  padding: var(--sp-24) 0;
  background: var(--bg-light);
}

.contacto-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-12);
  align-items: start;
}

/* ── Contact Info Panel ── */
.contact-info-panel {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--sp-8);
  border: 1px solid var(--bg-subtle);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-4));
}

.contact-info-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--bg-subtle);
}

.contact-info-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-dark);
  margin-bottom: var(--sp-2);
}

.contact-info-header p {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: var(--lh-relaxed);
}

.contact-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--bg-subtle);
  transition: all var(--transition-fast);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-text strong {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}

.contact-text span,
.contact-text a {
  font-size: var(--text-sm);
  color: var(--text-medium);
  line-height: var(--lh-relaxed);
  display: block;
}

.contact-text a:hover {
  color: var(--color-accent);
}

/* Two emails */
.contact-emails {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--bg-subtle);
}

.email-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.email-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.email-detail strong {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-dark);
}

.email-detail a {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
}

.email-detail a:hover {
  text-decoration: underline;
}

/* Social links */
/* ──────────────────────────────
   Redes Sociales Premium
────────────────────────────── */

.social-links{
    display:flex;
    gap:14px;
    padding-top:24px;
}

.social-link{
    position:relative;
    width:52px;
    height:52px;
    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    color:var(--color-primary);

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(248,250,252,.90)
    );

    border:1px solid rgba(59,130,246,.10);

    box-shadow:
        0 10px 25px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.90);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        color .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.social-link::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(59,130,246,.15),
        rgba(14,165,233,.15)
    );

    opacity:0;
    transition:opacity .35s ease;
}

.social-link:hover{
    transform:translateY(-6px);
    color:#fff;
    border-color:transparent;
}

.social-link:hover::before{
    opacity:1;
}

.social-link i{
    position:relative;
    z-index:2;
    font-size:1.35rem;
    transition:transform .35s ease;
}

.social-link:hover i{
    transform:scale(1.12);
}

/* ──────────────────────────────
   Facebook
────────────────────────────── */

.social-link:nth-child(1):hover{
    background:#1877F2;

    box-shadow:
        0 18px 35px rgba(24,119,242,.35),
        0 6px 18px rgba(24,119,242,.25);
}

/* ──────────────────────────────
   Instagram
────────────────────────────── */

.social-link:nth-child(2):hover{
    background:linear-gradient(
        135deg,
        #F58529,
        #DD2A7B,
        #8134AF,
        #515BD4
    );

    box-shadow:
        0 18px 35px rgba(221,42,123,.35),
        0 6px 18px rgba(221,42,123,.25);
}

/* ──────────────────────────────
   X (Twitter)
────────────────────────────── */

.social-link:nth-child(3):hover{
    background:#000000;

    box-shadow:
        0 18px 35px rgba(0,0,0,.35),
        0 6px 18px rgba(0,0,0,.25);
}

/* ──────────────────────────────
   LinkedIn
────────────────────────────── */

.social-link:nth-child(4):hover{
    background:#0A66C2;

    box-shadow:
        0 18px 35px rgba(10,102,194,.35),
        0 6px 18px rgba(10,102,194,.25);
}

/* ── Contact Form ── */
.contact-form-panel {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--sp-10);
  border: 1px solid var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}

.contact-form-panel h2 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-dark);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}

.contact-form-panel > p {
  font-size: var(--text-base);
  color: var(--text-medium);
  margin-bottom: var(--sp-8);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Map Section ── */
/* ── Google Maps ── */

.map-section{
    width:100%;
    height:500px;
    position:relative;
    overflow:hidden;
}

.map-section iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}



/* ── Gracias Page ── */
.gracias-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  padding: var(--sp-12);
}

.gracias-card {
  background: white;
  border-radius: var(--radius-3xl);
  padding: var(--sp-16);
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--bg-subtle);
}

.gracias-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: #F0FDF4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto var(--sp-6);
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.08);
}

.gracias-card h1 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  color: var(--text-dark);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.03em;
}

.gracias-card p {
  font-size: var(--text-base);
  color: var(--text-medium);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-8);
}

.contact-icon .fa-whatsapp{
    color:#25D366;
    font-size:24px;
}