/* ==============================
   Raíces de Ampudia — styles.css
   Header fijo arriba + diseño 100% responsivo
   ============================== */
:root{
  --green:#5b3e6f;
  --green-2:#20764b;
  --beige:#f5efe4;
  --vino:#7b1e2b;
  --ink:#1c1c1c;
  --card-bg: rgba(245,239,228,0.9);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.15);

  /* Offset común para header fijo (usado en padding-top y anclajes) */
  --header-offset: clamp(100px, 14vw, 140px);
}

*{ box-sizing:border-box; min-width:0 }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background: var(--beige);
  font-size: clamp(14px, 1.9vw, 16px);
}

/* Medios fluidos */
img, video, canvas, svg { max-width:100%; height:auto; display:block; }
iframe{ max-width:100%; border:0 }

/* Fondo */
.bg{
  position:fixed;
  inset:0;
  background: url('fondo.png') center/cover no-repeat fixed;
  z-index:-1;
  filter: saturate(1) contrast(1.05);
}

/* ==============================
   HEADER SUPERIOR FIJO (centrado robusto)
   ============================== */
.sidebar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: clamp(8px, 1.6vw, 14px) clamp(18px, 3vw, 28px);
}

/* Carril interior centrado con ancho máximo */
.bar-inner{
  max-width: 1100px;
  margin: 0 auto;                 /* centra el contenido */
  display: flex;
  flex-direction: column;         /* logo arriba, nav debajo */
  align-items: center;
  gap: clamp(8px, 2vw, 18px);
  text-align: center;
}

/* BRAND / LOGO */
.logo{
  width: clamp(150px, 15vw, 500px);
  height: auto;
    max-width: none;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}
 

/* NAV centrado */
.nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
  gap: clamp(8px, 2vw, 18px);
  margin: 0;
  width: 100%;
  text-align: center;
}

/* ==============================
   NAV LINKS / ICONOS
   ============================== */
.nav-link{
  display: inline-flex;
  align-items: center;
  width: auto;
  white-space: nowrap;
  padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.6vw, 14px);
  border-radius: 10px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 16px);
  background: linear-gradient(135deg, #5b3e6f, #BA55D3); /* normal */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
}

.nav-link:hover,
.nav-link.active{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #BA55D3, #5b3e6f); /* activo */
  box-shadow: 0 0 16px rgba(186,85,211,0.7), 0 8px 20px rgba(0,0,0,0.10);
  outline: 2px solid var(--green);
}

/* Iconos email/whatsapp/instagram */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border-radius: 50%;              /* redondos */
  background: #ebd1be;             /* marrón */
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;                /* evita que la img se salga */
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}

.nav-icon img {
  width: 70%;                      /* se ajusta dentro */
  height: 70%;
  object-fit: contain;              /* mantiene proporción */
  display: block;
}

.nav-icon:hover {
  transform: scale(1.05);
  background: #A0522D;              /* marrón un poco más claro al hover */
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.nav-icon:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 16px rgba(186,85,211,0.35), 0 8px 20px rgba(0,0,0,0.10);
  outline: 2px solid var(--green);
}

/* ==============================
   CONTENIDO
   ============================== */
.content{
  margin: 0;
  padding: var(--header-offset) clamp(18px, 3vw, 28px) 80px; /* hueco para header fijo */
  max-width: 1100px;
  margin-inline: auto;
}

.card{
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 28px) clamp(16px, 2.4vw, 26px);
  margin: 22px auto;
  box-shadow: var(--shadow);
  backdrop-filter: blur(2px);
}

.card-title{
  margin: 0 0 14px 0;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.15;
  color: var(--green-2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  font-family: 'Merriweather', serif;
  text-align: center;
}

.card-text{
  font-size: clamp(15px, 1.95vw, 18px);
  line-height: 1.65;
  margin: 10px 0;
  font-family: 'Playfair Display', serif;
  text-align: center;
}

/* Layout con imagen */
.card-content{
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 18px);
}
.card-image-small{
  width: clamp(160px, 24vw, 220px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
/* Imagen mediana para Servicios */
.card-image-medium {
  width: clamp(220px, 32vw, 300px);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 5px 14px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* Imagen grande */
.card-image{
  width: 100%;
  height: auto;
  margin: 12px 0 18px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Slogan y valores */
.slogan{
  font-family:'Montserrat', sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color:#5b3e6f;
  margin: 20px 0 10px;
  text-align: center;
}
.valores{
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.valores li{
  background: rgba(255,255,255,0.7);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* ==============================
   GALERÍAS
   ============================== */
.gallery{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
  gap: 12px;
}
.gallery-item{
  height: 160px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity:.9;
}
.placeholder{ color: #888; }

/* Galería en 2 columnas (sección Galería) */
.gallery-vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery-vertical img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  object-fit: cover;
}

/* Galería de Quiénes Somos (3 en fila) */
.quienes-galeria {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.quienes-galeria img {
  flex: 1;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  object-fit: cover;
}

/* ==============================
   RESALTADOS
   ============================== */
.resaltar-verde { color: #2f6d3a; font-weight: 700; }
.resaltar-morado { color: #800080; font-weight: 700; font-style: var(--shadow);}

/* ==============================
   FORMULARIO y FOOTER
   ============================== */
.form-wrap{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.form-wrap iframe{ width:100%; height:85vh; }
@media (max-width: 900px){ .form-wrap iframe{ height:80vh; } }
@media (max-width: 600px){ .form-wrap iframe{ height:75vh; } }

.footer{
  text-align:center;
  color: #2b2b2b;
  font-size: 14px;
  opacity: .9;
  padding: 18px 6px 0;
}

/* Accesibilidad */
.nav-link:focus-visible{
  outline: 3px solid var(--vino);
  outline-offset:2px;
}

/* Anclaje cómodo bajo header fijo */
section[id]{ scroll-margin-top: var(--header-offset); }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 720px){
  .card-content{ flex-direction: column; }
  .card-image-small{ width: 100%; }
  .card-image-medium{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }
}
/* Botón CTA: Pide tu presupuesto gratis */
.btn-presupuesto {
  display: inline-block;
  margin: 20px auto 0;
  padding: clamp(12px, 1.8vw, 16px) clamp(20px, 2.6vw, 28px);
  border-radius: 12px;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
  text-decoration: none;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #5b3e6f, #BA55D3); /* mismo gradiente que nav-link normal */
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
}

.btn-presupuesto:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #BA55D3, #5b3e6f); /* mismo hover que nav-link.active */
  box-shadow: 0 0 18px rgba(186,85,211,0.6), 0 8px 20px rgba(0,0,0,0.12);
  outline: 2px solid var(--green);
}
/* Botón CTA: Pide tu presupuesto gratis */
.btn-presupuesto {
  display: block;                 /* ocupa ancho propio */
  width: fit-content;             /* solo lo necesario para el texto */
  margin: 20px auto 0;            /* 👈 centra horizontal */
  padding: clamp(12px, 1.8vw, 16px) clamp(20px, 2.6vw, 28px);
  border-radius: 12px;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
  text-decoration: none;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #5b3e6f, #BA55D3);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
}

.btn-presupuesto:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #BA55D3, #5b3e6f);
  box-shadow: 0 0 18px rgba(186,85,211,0.6), 0 8px 20px rgba(0,0,0,0.12);
  outline: 2px solid var(--green);
}
/* ===== Diseño del header en móvil (logo + iconos arriba, botones debajo) ===== */
@media (max-width: 720px) {
  .nav {
    display: grid;
    grid-template-columns: 1fr; /* una sola columna */
    grid-template-rows: auto auto; /* dos filas */
    justify-items: center;
    width: 100%;
    gap: 12px;
  }

  /* Fila 1 → logo + iconos */
  .logo-link, 
  .nav-icon {
    grid-row: 1;                /* primera fila */
  }

  .logo-link {
    display: inline-block;
    margin-right: 12px;
  }

  .nav-icon {
    display: inline-flex;
    margin-left: 6px;
  }

  /* Fila 2 → botones del menú */
  .nav-link {
    grid-row: 2;                /* segunda fila */
  }
}
/* ===== Fila 1 (logo + iconos) y Fila 2 (botones) ===== */
.nav {
  display: flex;
  flex-direction: column;   /* por defecto: dos filas apiladas centradas */
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nav-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;        /* logo e iconos siempre en la misma línea */
}

.nav-icons{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nav-bottom{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  flex-wrap: wrap;          /* los 4 botones pueden partirse si no caben */
}

/* ===== Comportamiento en escritorio (>= 721px) ===== */
/* (opcional) en pantallas grandes podemos poner todo en una sola fila centrada */
@media (min-width: 721px){
  .nav{
    flex-direction: column; /* si prefieres UNA sola fila total, cámbialo a 'row' */
  }
}

/* ===== MÓVIL específico (<= 720px) ===== */
/* Ya queda como pediste: Fila 1 (logo+iconos) / Fila 2 (botones) gracias al flex column */
/* Logo un poco más grande (override) */