/* ==========================================
   1. Variables de color
   ========================================== */
:root{
  --blanco-roto:#FAF8F4;
  --beige-claro:#EDE6DA;
  --beige-medio:#D9CDBB;
  --verde-oscuro:#1F3D2B;
  --verde-hover:#2E5A3E;
  --texto:#1A1F1C;
  --texto-suave:#6B6B63;
  --salvia:#7A9A7E;
}

/* ==========================================
   2. Estilos base
   ========================================== */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--blanco-roto);color:var(--texto);font-family:'Inter',system-ui,sans-serif;line-height:1.65;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;color:var(--verde-oscuro);font-weight:600;letter-spacing:.2px;line-height:1.2;}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1rem} h3{font-size:1.3rem;margin-bottom:.6rem}
p{margin-bottom:1rem} a{color:var(--verde-oscuro);text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 1.25rem}
section{padding:4.5rem 0} .section-alt{background:var(--beige-claro)} .center{text-align:center}

/* ==========================================
   3. Header y Navegación (Escritorio)
   ========================================== */
header{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--beige-medio);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;max-width:1140px;margin:0 auto;}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--verde-oscuro);font-weight:600;white-space:nowrap;}
.logo span{color:var(--salvia)}
nav ul{display:flex;gap:1.8rem;list-style:none;}
nav a{font-size:.95rem;color:var(--texto);transition:color .2s;}
nav a:hover{color:var(--verde-oscuro);}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--verde-oscuro);cursor:pointer;}

/* Banderas */
.lang-switcher {display: flex;gap: 0.8rem;align-items: center;margin-left: 1.5rem;}
.lang-switcher a {display: inline-flex;align-items: center;justify-content: center;opacity: 0.4;transition: 0.2s;border-bottom: 2px solid transparent;padding-bottom: 2px;}
.lang-switcher a img {width: 22px;height: auto;border-radius: 2px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.lang-switcher a:hover, .lang-switcher a.active {opacity: 1;transform: scale(1.1);}
.lang-switcher a.active {border-bottom: 2px solid var(--verde-oscuro);}

/* Botones */
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:6px;font-weight:500;transition:.2s;cursor:pointer;border:1.5px solid transparent}
.btn-primary{background:var(--verde-oscuro);color:#fff} .btn-primary:hover{background:var(--verde-hover)}
.btn-secondary{background:transparent;color:var(--verde-oscuro);border-color:var(--verde-oscuro)} .btn-secondary:hover{background:var(--verde-oscuro);color:#fff}

/* Hero, Grids y Sliders */
.hero{background:var(--beige-claro);padding:6rem 0 5rem;text-align:center}
.hero p{max-width:640px;margin:1.2rem auto 2rem;color:var(--texto-suave);font-size:1.1rem}
.hero .btn{margin:0 .4rem}
.grid{display:grid;gap:2rem} .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border:1px solid var(--beige-medio);border-radius:10px;padding:2rem;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,61,43,.08)}
.card .icon{font-size:1.6rem;color:var(--salvia);margin-bottom:.8rem}

.compare{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16 / 9;overflow:hidden;border-radius:10px;border:1px solid var(--beige-medio);user-select:none;isolation:isolate;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.compare img.after{clip-path:inset(0 0 0 50%);z-index:2;}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--verde-oscuro);cursor:ew-resize;transform:translateX(-50%);z-index:3;}
.compare .handle::after{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--verde-oscuro);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1rem;}
.compare .label{position:absolute;bottom:12px;background:rgba(31,61,43,.9);color:#fff;font-size:.8rem;line-height:1;padding:.4rem .7rem;border-radius:4px;white-space:nowrap;pointer-events:none;clip-path:none;z-index:10;}
.compare .label.before{ left:12px; right:auto; } .compare .label.after{ right:12px; left:auto; }
.case-meta{text-align:center;margin-top:1rem;font-size:.9rem;color:var(--texto-suave);font-weight:500;}

/* Formulario y Footer */
form{max-width:560px;margin:0 auto}
label{display:block;font-size:.9rem;margin-bottom:.3rem;color:var(--texto)}
input,textarea,select{width:100%;padding:.8rem;border:1px solid var(--beige-medio);border-radius:6px;background:#fff;font-family:inherit;font-size:1rem;margin-bottom:1.1rem;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--verde-oscuro);box-shadow:0 0 0 3px rgba(31,61,43,.1)}
footer{background:var(--verde-oscuro);color:var(--beige-claro);padding:3rem 0 1.5rem}
footer h4{color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.2rem;margin-bottom:.8rem} footer a{color:var(--beige-claro)} footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer-bottom{border-top:1px solid rgba(237,230,218,.2);padding-top:1.2rem;font-size:.85rem;text-align:center;opacity:.8}

/* ==========================================
   11. DISEÑO SOLO PARA MÓVIL (Sin tocar el HTML)
   ========================================== */
@media(max-width:768px){
  
  /* 1. El header se convierte en una columna */
  .nav {
    flex-direction: column;
    padding: 1rem;
    gap: 0.8rem;
    position: relative;
  }

  /* 2. El logo (Sarah Natera...) sube arriba y se centra. 
        Al tener "order: 1", siempre será lo primero. */
  .logo {
    order: 1;
    font-size: 1.4rem;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  /* 3. El contenedor que tiene las banderas y el menú hamburguesa.
        Al no tener clase, seleccionamos el div que está justo debajo del logo. */
  .nav > div {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Banderas a la izquierda, menú a la derecha */
    align-items: center;
    position: static !important; /* Forzamos a que no flote */
  }

  /* 4. Las banderas van a la izquierda */
  .lang-switcher {
    margin-left: 0;
    gap: 0.6rem;
  }

  /* 5. El botón hamburguesa va a la derecha (usando flex) */
  .menu-toggle {
    display: block;
    order: 2; /* Lo enviamos al final de la fila */
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
  }
  
  /* 6. El menú de navegación (Inicio, Resultados...) se esconde por defecto */
  nav {
    order: 3;
    width: 100%;
  }
  
  nav ul {
    display: none;
  }
  
  /* Cuando el JS añade la clase "open", se despliega */
  nav ul.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco-roto);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--beige-medio);
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    gap: 1rem;
    z-index: 100;
  }

  /* 7. Ajustes visuales para móvil */
  .compare { aspect-ratio: 4 / 3 !important; }
  .compare .label { font-size: 0.7rem; padding: 0.3rem 0.5rem; bottom: 8px; }
  #galeria-resultados, .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 2rem !important; }
  h1 { font-size: 2rem; } h2 { font-size: 1.5rem; }
  .hero { padding: 3rem 0 2.5rem; }
}