/* =========================
   Variables básicas
   ========================= */
:root {
    --color-primary: #27c78f;   /* Verde basado en tu logo */
    --color-primary-dark: #16a06d;
    --color-bg: #f5f7fa;
    --color-text: #222222;
    --color-muted: #6b7280;
    --color-white: #ffffff;
    --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.08);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
}

/* Reset sencillo */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

/* Contenedor ancho */
.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-width: 0;
}

.container > * {
    min-width: 0;
}

/* =========================
   Header y navegación
   ========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #0f172a; /* mismo color que el footer */
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.8);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    min-width: 0;
}

.logo img {
    height: 58px;
    max-width: 250px;
    width: auto;
    display: block;
}

/* Botón menú móvil */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #e5e7eb;
}

/* Navegación */
.main-nav {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    padding: 0.75rem 1rem 1rem;
    box-shadow: var(--shadow-soft);
    border-radius: 0 0 0 1rem;
    max-width: min(100vw - 1rem, 360px);
}

.main-nav a {
    text-decoration: none;
    color: #e5e7eb;
    font-size: 0.95rem;
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* Clase activada con JS para mostrar menú en móvil */
.main-nav.nav-open {
    display: flex;
}

/* =========================
   Hero
   ========================= */
.hero {
    padding: 4.5rem 0 3.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #42d6a0 45%, #f5f7fa 100%);
    color: var(--color-white);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 2rem;
    margin: 0 0 0.75rem;
}

.hero-text p {
    font-size: 1rem;
    max-width: 34rem;
}

.hero-actions {
    margin: 1.5rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-highlights {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.hero-highlights li::before {
    content: "• ";
}

/* Imagen hero */
.hero-image {
    display: flex;
    justify-content: center;
}

.hero-photo {
    width: 80%;           /* Reduce visiblemente la imagen */
    max-width: 350px;     /* Tamaño máximo controlado */
    height: auto;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* =========================
   Botones
   ========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary {
    background: var(--color-white);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-small {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
}

/* =========================
   Secciones generales
   ========================= */
.section {
    padding: 3rem 0;
}

.section-alt {
    background: var(--color-white);
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.section-subtitle {
    margin: 0 0 1.75rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* =========================
   Categorías
   ========================= */
.grid-categorias {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.card-categoria {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-soft);
}

.card-categoria h3 {
    margin-top: 0;
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}

.card-categoria p {
    margin: 0 0 0.6rem;
    font-size: 0.93rem;
    color: var(--color-muted);
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(39, 199, 143, 0.1);
    color: var(--color-primary-dark);
    font-size: 0.8rem;
}

/* =========================
   Servicios
   ========================= */
.grid-servicios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.card-servicio {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.15rem;
}

/* =========================
   Marcas
   ========================= */
.grid-marcas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.marca-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.marca-item img {
    max-width: 180px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(40%);
    opacity: 0.9;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.marca-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
    background: #ffffff;
}

.marca-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.marcas-note {
    font-size: 0.85rem;
    color: var(--color-muted);
}


/* =========================
   Promociones
   ========================= */
.grid-promos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.card-promo {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 1.15rem;
}

.promo-detail {
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* =========================
   Nosotros
   ========================= */
.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.nosotros-panel {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-soft);
    font-size: 0.9rem;
}

.list-check {
    list-style: none;
    padding-left: 0;
    margin-top: 0.75rem;
}

.list-check li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.3rem;
}

.list-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary-dark);
}

/* =========================
   Contacto
   ========================= */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.contact-form {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-soft);
}

.form-row {
    margin-bottom: 0.8rem;
}

.form-row label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 0.92rem;
    font-family: inherit;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(39, 199, 143, 0.2);
}

.form-note {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.contact-extra {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Mapa */
.map-wrapper iframe {
    width: 100%;
    min-height: 260px;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

/* =========================
   Footer
   ========================= */
.site-footer {
    padding: 1rem 0 1.5rem;
    background: #0f172a;
    color: rgba(241, 245, 249, 0.9);
    font-size: 0.87rem;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
}

.footer-links a {
    color: rgba(241, 245, 249, 0.9);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* =========================
   RESPONSIVE (>= 768px)
   ========================= */
@media (min-width: 768px) {

    .header-inner {
        padding: 0.9rem 0;
    }

    .nav-toggle {
        display: none;
    }

    .main-nav {
        position: static;
        display: flex !important;
        flex-direction: row;
        gap: 1.5rem;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .hero {
        padding: 5rem 0 4rem;
    }

    .hero-inner {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .hero-text h1 {
        font-size: 2.4rem;
    }

    .grid-categorias {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-servicios {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-marcas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-promos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nosotros-grid {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }

    .contacto-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: start;
    }

    .map-wrapper iframe {
        min-height: 320px;
    }

    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* =========================
   NAV + LOGIN (DERECHA)
========================= */
.nav-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}

.nav-login{
  position:relative;
  display:flex;
  align-items:center;
}

.btn-login{
  cursor:pointer;
}

/* Dropdown */
.login-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:260px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  display:none;
  z-index:999;
}

.login-dropdown.open{
  display:block;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.login-title{
  font-weight:700;
  margin-bottom:4px;
}

.login-label{
  font-size:.9rem;
  opacity:.85;
}

.login-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  outline:none;
}

.login-input:focus{
  border-color: rgba(0,0,0,.35);
}

.login-submit{
  width:100%;
  margin-top:6px;
}

.login-msg{
  font-size:.9rem;
  margin-top:6px;
  min-height:18px;
}

/* Mobile: que no se rompa el header */
@media (max-width: 820px){
  .logo img{
    height: 48px;
    max-width: 200px;
  }
  .nav-wrap{
    width:100%;
    justify-content:space-between;
  }
  .login-dropdown{
    right:0;
    width:260px;
  }
}

/* =========================
   LOGIN UI (MEJORADO)
========================= */
.login-dropdown{
  width: 320px;               /* más cómodo */
  padding: 14px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.login-title{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.login-label{
  font-size: .85rem;
  font-weight: 700;
  opacity: .9;
}

.login-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
}

.login-icon{
  font-size: 1rem;
  opacity: .75;
  width: 20px;
  text-align: center;
}

.login-input{
  border: none;
  outline: none;
  padding: 0;
  width: 100%;
  background: transparent;
  font-size: .95rem;
}

.login-input::placeholder{
  opacity: .55;
}

.login-input-wrap:focus-within{
  border-color: rgba(0,0,0,.38);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.toggle-pass{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  opacity: .8;
  padding: 4px 6px;
  border-radius: 10px;
}

.toggle-pass:hover{
  background: rgba(0,0,0,.06);
}

.login-submit{
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
}

.login-msg{
  font-size: .88rem;
  min-height: 18px;
}

/* Mobile tweaks */
@media (max-width: 820px){
  .login-dropdown{ width: 300px; }
}

.nav-login { margin-left: 6px; }

/* =========================
   FIX LOGIN DROPDOWN EN MÓVIL
========================= */
@media (max-width: 520px) {
  /* El header normalmente queda arriba; esto hace que el dropdown
     se posicione respecto a la pantalla y no se corte */
  .login-dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    top: 74px; /* ajusta si tu header es más alto/bajo */
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 360px;
    z-index: 2000;
  }

  /* Asegura que el botón ojo no achique el input */
  .login-input-wrap {
    gap: 10px;
  }

  .toggle-pass {
    flex: 0 0 auto;
  }
}