/* ============================
   CONTACTO — Esencias Gama
   ============================ */

:root{
  --green-900:#124c2b;
  --green-700:#1e7a47;
  --green-600:#228c52;
  --green-500:#2fa968;
  --gray-700:#374151;
  --gray-600:#4b5563;
  --gray-500:#6b7280;
  --gray-200:#e5e7eb;
  --radius-xl:18px;
  --shadow-1:0 10px 24px rgba(17,24,39,.10);
  --shadow-2:0 6px 16px rgba(17,24,39,.08);
}
*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:#1e2b22;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(31,115,70,.25), transparent 70%),
    linear-gradient(180deg,#d7e5db 0%, #c6d9ce 50%, #b7cbbf 100%);
  line-height:1.6;
  overflow-x:hidden;    /* 👈 evita desplazamiento lateral */
}
.container{width:min(1120px,92%);margin:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65));
  box-shadow:0 1px 0 rgba(17,24,39,.06);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:5px 0;}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand__logo{width:80px; height:80px; object-fit:cover; border-radius:8px;}
.brand__name{font-size:1.4rem;font-weight:700;letter-spacing:.2px;color:var(--green-900)}
.nav{display:flex;gap:.5rem}
.pill{padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(55,65,81,.25);text-decoration:none;color:var(--gray-700);}
.pill:hover{border-color:rgba(34,140,82,.45);transform:translateY(-1px);}
.pill--current{background:linear-gradient(180deg,rgba(47,169,104,.18),rgba(34,140,82,.12));color:var(--green-900);}

/* Hero */
.hero{
  padding:90px 0 60px;
  background:
    linear-gradient(180deg, rgba(39,126,80,.15), rgba(39,126,80,.05)),
    linear-gradient(180deg,#c9dace,#dbe8e0);
}
.hero__grid {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;}
.hero__title{margin:0 0 10px;font-size:clamp(28px,4vw,42px);color:var(--green-900)}
.hero__desc{color:var(--gray-600)}

/* Tarjetas */
.section{padding:70px 0;}
.grid{display:grid;gap:24px;grid-template-columns:1.2fr .8fr;}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.75));
  border:1px solid rgba(17,24,39,.06);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  padding:24px;
}

/* Contacto */
.contact-list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:12px;}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:12px 14px;
  background:rgba(255,255,255,.6);
  border-radius:12px;
  border:1px solid rgba(17,24,39,.06);
  box-shadow:var(--shadow-2);
  flex-wrap:wrap;
  word-break: break-word;   /* 👈 evita que algo muy largo se salga */
}
.contact-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--green-600),var(--green-700));color:#fff;box-shadow:0 3px 10px rgba(34,140,82,.35);}
.contact-item a{color:var(--green-700);text-decoration:none;font-weight:600;}
.contact-item a:hover{text-decoration:underline;}

.hours{display:grid;gap:8px;background:rgba(255,255,255,.6);border:1px solid rgba(17,24,39,.06);border-radius:12px;padding:14px;box-shadow:var(--shadow-2);}
.hours dt{font-weight:700;color:var(--green-900)}
.hours dd{margin:0;color:var(--gray-600)}

/* Formulario */
.form{display:grid;gap:12px;}
.field{display:grid;gap:6px;}
.label{font-weight:700;color:var(--green-900)}
.input,.textarea{border:1px solid rgba(34,140,82,.35);border-radius:12px;padding:.75rem .9rem;font:inherit;color:var(--gray-700);background:linear-gradient(180deg,#ffffffcc,#ffffffb3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(17,24,39,.08);}
.input:focus,.textarea:focus{border-color:var(--green-600);box-shadow:0 0 0 4px rgba(34,140,82,.18);}
.textarea{min-height:140px;resize:vertical;}
.btn{padding:.75rem 1rem;border-radius:12px;border:0;background:linear-gradient(180deg,var(--green-600),var(--green-700));color:#fff;font-weight:700;box-shadow:0 10px 18px rgba(34,140,82,.28);cursor:pointer;}
.btn:hover{transform:translateY(-1px);}

/* Mapa con degradado verde */
.map-section{
  position:relative;isolation:isolate;
  padding:70px 0;
  color:#0b2b1b;
  background:
    linear-gradient(180deg, rgba(34,140,82,.09), rgba(34,140,82,.12)),
    linear-gradient(8deg, rgba(34,140,82,.10) 0 70%, transparent 70%);
}
.map-section::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(34,140,82,.18)0%,rgba(47,169,104,.20)35%,rgba(34,140,82,.18)70%,rgba(34,140,82,.10)100%);
  transform:skewY(-2deg);
  transform-origin:top left;
  z-index:-1;
}
.map-title{text-align:center;color:var(--green-900);font-size:1.6rem;font-weight:800;margin-bottom:8px;}
.map-desc{text-align:center;color:var(--gray-700);margin-bottom:32px;}
.map-frame{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-1);}
.map-frame iframe{
  width:100%;          /* que nunca sea más ancho que su contenedor */
  max-width:100%;
  display:block;
}
img, iframe{
  max-width:100%;
}

/* Footer */
.site-footer{padding:28px 0;text-align:center;color:var(--gray-600);border-top:1px solid rgba(17,24,39,.06);}

/* --- RESPONSIVO REAL PARA CONTACTO --- */
@media (max-width: 820px){

  /* 1 sola columna, con separación vertical */
  .grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Tarjetas más angostas y centradas en el celular */
  .card{
    max-width: 540px;   /* ancho cómodo en móvil */
    width: 100%;
    margin: 0 auto;     /* centrado */
    padding: 18px;      /* un poco menos gorditas */
  }

  /* Centrar el título y el texto en móvil */
  .hero__grid{
    text-align: center;
    align-items: center;
  }

  /* Centrar los botones del header */
  .nav{
    justify-content: center;
  }
}

@media (max-width: 640px){
  .header__inner{
    padding:12px 0;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
  }

  .brand__logo{ width:72px; height:56px; }
  .brand__name{ font-size:1.2rem; }

  .nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    justify-content:flex-start;
    justify-content:center;     /* 👈 centra los botones */
  }

  .pill{
    padding:.5rem .8rem;
    font-size:.95rem;
  }

  .section{ padding:70px 0 }
  /* Contenedor un poco más estrecho solo para la sección principal */
  .section .container{
  width: min(840px, 92%);   /* 👈 más angosto que el header */
}

  .ticks li{ grid-template-columns:26px 1fr; padding:10px 12px }
}