/* =========================================================================
   Luz Nature — hoja de estilos común a todas las páginas.
   Antes vivía incrustada en index.html; al pasar a varias páginas se separa
   para no duplicarla (y para que el navegador la cachee una sola vez).
   ========================================================================= */

:root{
  --bg: #F7F4ED;          /* blanco cálido, fondo general */
  --bg-soft: #EFE9DC;     /* arena, para alternar secciones */
  --card: #FFFFFF;
  --ink: #2A2822;         /* texto principal */
  --ink-soft: #55503F;    /* texto secundario (contraste 7:1 sobre --bg) */
  --sage: #8A9A7B;        /* verde salvia, decorativo */
  --sage-dark: #5F7050;   /* verde salvia legible sobre claro */
  --olive: #5B6B3F;
  --terracotta: #B8703F;  /* acento, usado con moderación */
  --terracotta-dark: #96562D;
  --sun: #E8B463;
  --borde: rgba(42,40,34,.12);
  --sombra: 0 18px 40px -24px rgba(42,40,34,.45);
  --radio: 8px;
}

*{margin:0; padding:0; box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
}

body{
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.7; font-weight:300;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Fraunces', Georgia, serif; font-weight:600; line-height:1.2;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}

/* Foco visible: imprescindible para navegar con teclado */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--terracotta-dark); outline-offset:3px; border-radius:3px;
}

/* Salto al contenido, primer elemento tabulable de cada página */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 4px 0;
}
.saltar:focus{left:0;}

.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
section{padding:96px 0; position:relative;}
.section-head{max-width:660px; margin-bottom:52px;}
.section-head h2{font-size:clamp(27px,3.3vw,39px);}
.section-head p{color:var(--ink-soft); font-size:16.5px; margin-top:14px;}
.eyebrow{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-dark); font-weight:600; margin-bottom:14px; display:block;
}
.centrado{text-align:center; margin-left:auto; margin-right:auto;}

/* -------- Botones -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:4px; font-size:15px; font-weight:500;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent; cursor:pointer; text-align:center;
}
/* El terracota de marca (#B8703F) con texto blanco se queda en 3,87:1, por
   debajo del mínimo legible. Este tono mantiene el color y llega a 4,68:1. */
.btn-primary{background:#A96234; color:#fff;}
.btn-primary:hover{background:var(--terracotta-dark);}
.btn-outline{border-color:rgba(42,40,34,.28); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink); background:rgba(42,40,34,.04);}
.btn-sage{background:var(--olive); color:#fff;}
.btn-sage:hover{background:#4A5732;}

/* -------- Cabecera -------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,237,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 32px; max-width:1400px; margin:0 auto;}
.logo-img img{height:46px; width:auto;}
.nav-links{display:flex; gap:26px; font-size:14.5px;}
.nav-links a{padding:6px 0; position:relative;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--terracotta-dark);}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--terracotta);
}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-phone{font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap;}

.burger{display:none; background:none; border:0; cursor:pointer; width:34px; height:30px; padding:5px;}
.burger span{display:block; height:1.8px; background:var(--ink); margin:5px 0; transition:transform .25s ease, opacity .25s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; flex-direction:column; gap:2px; padding:8px 32px 22px;
  border-top:1px solid var(--borde); background:var(--bg);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 0; border-bottom:1px solid rgba(42,40,34,.07); font-size:16px;}
.mobile-menu .btn{margin-top:14px;}

@media (max-width:980px){
  .nav-links, .nav-phone{display:none;}
  .burger{display:block;}
}

/* -------- Hero de portada -------- */
.hero{padding:72px 0 84px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(32px,4.4vw,52px); margin-bottom:20px;}
.hero h1 em{font-style:italic; color:var(--terracotta-dark);}
.hero .subtitulo{font-family:'Fraunces', Georgia, serif; font-size:clamp(19px,2.2vw,24px); color:var(--olive); margin-bottom:18px;}
.hero .lead{font-size:17px; color:var(--ink-soft); margin-bottom:30px; max-width:56ch;}
.hero-actions{display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:30px; align-items:center; flex-wrap:wrap;}
.stat-block .num{font-family:'Fraunces', Georgia, serif; font-size:23px; font-weight:600; color:var(--terracotta);}
.stat-block .lbl{font-size:13px; color:var(--ink-soft);}
.stars{color:var(--sun); font-size:15px; letter-spacing:2px;}

/* 5:4, la proporción de la foto de recepción: así se ve el mostrador entero
   en vez de recortarlo para meterlo en un hueco vertical. */
.hero-visual{
  position:relative; aspect-ratio:5/4; border-radius:var(--radio); overflow:hidden;
  background:radial-gradient(circle at 32% 22%, #fff 0%, var(--bg-soft) 46%, var(--sage) 135%);
  box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center;
}
.hero-visual img{width:100%; height:100%; object-fit:cover;}

/* -------- Cabecera de páginas interiores -------- */
.page-hero{background:var(--bg-soft); padding:56px 0 60px; border-bottom:1px solid var(--borde);}
.page-hero h1{font-size:clamp(29px,3.9vw,44px); max-width:20ch;}
.page-hero p{color:var(--ink-soft); font-size:17px; margin-top:16px; max-width:62ch;}
.miga{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
.miga a:hover{color:var(--terracotta-dark); text-decoration:underline;}

/* -------- Prosa -------- */
.prosa{max-width:74ch;}
.prosa p{color:var(--ink-soft); margin-bottom:18px; font-size:16.5px;}
.prosa p strong{color:var(--ink); font-weight:500;}
.prosa h3{font-size:21px; margin:34px 0 14px;}

/* -------- Tarjetas de servicio -------- */
.servicios-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.servicio-card{
  background:var(--card); border:1px solid var(--borde); border-radius:var(--radio);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.servicio-card:hover{transform:translateY(-3px); box-shadow:var(--sombra); border-color:rgba(138,154,123,.6);}
.servicio-card .icon{width:38px; height:38px; margin-bottom:18px; color:var(--olive);}
.servicio-card h3{font-size:19px; margin-bottom:11px;}
.servicio-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px; flex:1;}
.card-cta{font-size:13.5px; font-weight:600; color:var(--terracotta-dark); align-self:flex-start;}
.card-cta:hover{text-decoration:underline;}

/* -------- Listas de técnicas y beneficios -------- */
.lista-check{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px; list-style:none;}
.lista-check li{position:relative; padding-left:28px; color:var(--ink-soft); font-size:15.5px;}
.lista-check li::before{
  content:""; position:absolute; left:4px; top:.62em; width:9px; height:5px;
  border-left:1.8px solid var(--olive); border-bottom:1.8px solid var(--olive);
  transform:rotate(-45deg);
}

/* -------- Motivos de consulta -------- */
.motivos-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.motivo{background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); padding:26px 24px;}
.motivo h3{font-size:16.5px; margin-bottom:9px; color:var(--olive);}
.motivo p{font-size:14px; color:var(--ink-soft);}

/* -------- Aviso sanitario -------- */
.aviso{
  border-left:3px solid var(--terracotta); background:rgba(184,112,63,.07);
  padding:22px 26px; border-radius:0 var(--radio) var(--radio) 0;
  font-size:15px; color:var(--ink-soft); margin-top:36px; max-width:80ch;
}
.aviso strong{color:var(--ink); font-weight:600; display:block; margin-bottom:5px;}

/* -------- Nota al pie de sección -------- */
.nota{font-size:14.5px; color:var(--ink-soft); font-style:italic; margin-top:26px; max-width:70ch;}

/* -------- Sobre / trayectoria -------- */
.sobre{background:var(--bg-soft);}
.sobre-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:58px; align-items:center;}
.sobre-visual{
  aspect-ratio:3/4; border-radius:var(--radio); overflow:hidden;
  background:linear-gradient(160deg, var(--sage) 0%, #4A5732 100%);
}
.sobre-visual img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
.sobre-copy h2{font-size:clamp(25px,2.9vw,35px); margin-bottom:18px;}
.sobre-copy .eyebrow{color:var(--sage-dark);}
.sobre-facts{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px;}
.sobre-facts .num{font-family:'Fraunces', Georgia, serif; font-size:29px; color:var(--terracotta);}
.sobre-facts .lbl{font-size:13px; color:var(--ink-soft);}

/* -------- Reseñas -------- */
.testimonios{background:var(--card);}
a.rating-badge{
  display:inline-flex; align-items:center; gap:16px; background:var(--bg-soft);
  padding:20px 26px; border-radius:var(--radio); transition:background .2s ease;
}
a.rating-badge:hover{background:#E5DDCB;}
.rating-badge .big{font-family:'Fraunces', Georgia, serif; font-size:33px; font-weight:600;}
.rating-badge .ver-google{font-size:13px; color:var(--terracotta-dark); font-weight:600; margin-top:5px;}

/* -------- Galería -------- */
.galeria{background:var(--bg-soft);}
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.gal-item{
  aspect-ratio:1/1.1; border-radius:6px; overflow:hidden; position:relative;
  display:flex; align-items:flex-end; padding:12px;
}
.gal-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.gal-item span{
  position:relative; font-size:11px; color:#fff; background:rgba(0,0,0,.42);
  padding:4px 9px; border-radius:3px;
}
.g1{background:linear-gradient(150deg,#C9915E,#8F5A34);}
.g2{background:linear-gradient(150deg,#8A9A7B,#4B5734);}
.g3{background:linear-gradient(150deg,#E8CB94,#B8703F);}
.g4{background:linear-gradient(150deg,#7C8A5C,#3D4A2B);}

/* -------- Primera visita -------- */
.primera{background:var(--card);}
.primera-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.primera-destacado{
  font-family:'Fraunces', Georgia, serif; font-size:clamp(21px,2.4vw,27px);
  color:var(--olive); margin-bottom:20px; line-height:1.35;
}

/* -------- Formulario -------- */
.form-caja{background:var(--bg-soft); border-radius:var(--radio); padding:34px 32px;}
.campo{margin-bottom:18px;}
.campo label{display:block; font-size:13.5px; font-weight:500; margin-bottom:6px;}
.campo .req{color:var(--terracotta-dark);}
.campo input, .campo select, .campo textarea{
  width:100%; padding:11px 14px; border:1px solid rgba(42,40,34,.22); border-radius:4px;
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink);
}
.campo textarea{min-height:110px; resize:vertical;}
.campo input:invalid:not(:placeholder-shown), .campo textarea:invalid:not(:placeholder-shown){border-color:#B4482F;}
.campo .error{display:none; font-size:13px; color:#9E3B24; margin-top:5px;}
.campo.malo .error{display:block;}
.campo.malo input, .campo.malo select, .campo.malo textarea{border-color:#B4482F;}
.campo-check{display:flex; gap:11px; align-items:flex-start; margin-bottom:20px; font-size:13.5px; color:var(--ink-soft);}
.campo-check input{width:auto; margin-top:4px; flex:none;}
.campo-fila{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-aviso{font-size:13px; color:var(--ink-soft); margin-top:16px;}
.form-ok{
  display:none; background:rgba(91,107,63,.1); border-left:3px solid var(--olive);
  padding:16px 20px; border-radius:0 4px 4px 0; font-size:15px; margin-top:18px;
}
.form-ok.visible{display:block;}

/* -------- Preguntas frecuentes -------- */
.faq{background:var(--bg);}
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--borde);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:21px 44px 21px 0; position:relative;
  font-size:17px; font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--terracotta-dark);}
.faq-item summary::after{
  content:""; position:absolute; right:8px; top:50%; width:10px; height:10px;
  border-right:1.5px solid var(--terracotta); border-bottom:1.5px solid var(--terracotta);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.faq-item .answer{padding:0 44px 22px 0; color:var(--ink-soft); font-size:15.5px;}

/* -------- Contacto -------- */
.contacto{background:var(--card);}
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.info-row{display:flex; gap:16px; margin-bottom:24px; align-items:flex-start;}
.info-row .ico{width:20px; height:20px; flex:none; color:var(--terracotta); margin-top:4px;}
.info-row .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:3px;}
.info-row .val{font-size:15.5px; font-weight:500;}
.info-row .val a:hover{color:var(--terracotta-dark); text-decoration:underline;}
.enlace-suave{font-size:13.5px; font-weight:600; color:var(--terracotta-dark);}
.enlace-suave:hover{text-decoration:underline;}
.hours-table{width:100%; border-collapse:collapse; margin-top:8px;}
.hours-table td{padding:7px 0; font-size:14.5px; border-bottom:1px solid rgba(42,40,34,.08);}
.hours-table td:first-child{color:var(--ink-soft);}
.hours-table td:last-child{text-align:right; font-weight:500;}
.map-frame{border-radius:var(--radio); overflow:hidden; border:1px solid var(--borde); aspect-ratio:4/3; position:relative;}
.map-frame iframe{width:100%; height:100%; border:0; display:block;}

/* El mapa de Google instala cookies, así que no se carga hasta que la persona
   lo pide. Mientras tanto se ve esta imagen, servida desde nuestro dominio. */
.map-previa{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.map-aviso{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
  padding:26px; background:rgba(247,244,237,.86); backdrop-filter:blur(2px);
}
.map-aviso p{font-size:14px; color:var(--ink-soft); max-width:34ch;}

/* -------- Pie -------- */
footer{background:var(--ink); color:#EFE8D8; padding:56px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; margin-bottom:36px;}
footer h2{font-family:'Fraunces', Georgia, serif; font-size:20px; color:#fff; margin-bottom:10px;}
footer .lbl{color:#EFE8D877; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:13px;}
footer a{color:#EFE8D8cc; font-size:14px;}
footer a:hover{color:#fff; text-decoration:underline;}
.footer-col{display:flex; flex-direction:column; gap:8px;}
.footer-lema{font-family:'Fraunces', Georgia, serif; font-style:italic; color:#EFE8D8bb; margin-top:14px; font-size:15px;}
.footer-servicios{font-size:12.5px; color:#EFE8D899; border-top:1px solid #ffffff22; padding-top:20px; margin-bottom:18px; line-height:1.9;}
.footer-bottom{
  border-top:1px solid #ffffff22; padding-top:20px; font-size:12.5px; color:#EFE8D899;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-bottom a{font-size:12.5px;}

/* -------- WhatsApp flotante -------- */
.wa-flotante{
  position:fixed; right:18px; bottom:18px; z-index:60; display:none;
  width:54px; height:54px; border-radius:50%; background:var(--olive);
  align-items:center; justify-content:center; color:#fff;
  box-shadow:0 8px 20px -6px rgba(42,40,34,.55);
}
.wa-flotante svg{width:28px; height:28px;}
@media (max-width:980px){ .wa-flotante{display:flex;} }
@media print{ .wa-flotante, header, .burger{display:none;} }

/* -------- Aparición al hacer scroll -------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} }

/* -------- Adaptación a pantallas pequeñas -------- */
@media (max-width:1040px){
  .servicios-grid{grid-template-columns:repeat(2,1fr);}
  .motivos-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  section{padding:60px 0;}
  .wrap{padding:0 20px;}
  .nav{padding:14px 20px;}
  .mobile-menu{padding:8px 20px 22px;}
  .hero{padding:44px 0 52px;}
  .hero-grid, .sobre-grid, .contacto-grid, .primera-grid{grid-template-columns:1fr; gap:38px;}
  .hero-visual{order:-1;}                 /* mantiene su 5:4, sin recortar */
  .hero-actions{width:100%;}
  .hero-actions .btn{flex:1;}
  .sobre-visual{max-width:340px; margin:0 auto;}   /* mantiene su 3:4, sin recortar */
  .lista-check{grid-template-columns:1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .campo-fila{grid-template-columns:1fr; gap:0;}
  .form-caja{padding:26px 22px;}
}
@media (max-width:560px){
  .servicios-grid, .motivos-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .logo-img img{height:38px;}
  .sobre-facts{gap:16px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .aviso{padding:18px 20px;}
}