@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root{
  --azul-oscuro: #0B2E4F;
  --azul-oscuro-2: #123B63;
  --azul-vivo: #0093FF;       /* azul de marca real, confirmado en su CSS */
  --azul-vivo-hover: #0078CC;
  --azul-enlace: #3876FF;     /* azul de enlaces de texto, confirmado en su CSS */
  --azul-claro: #4FA8E0;
  --azul-claro-2: #E5F3FC;
  --fondo: #F6FAFD;
  --titulo: #0A0A0A;          /* color real de sus títulos: casi negro, no azul */
  --texto: #3E4C56;           /* color real de su texto de cuerpo */
  --texto-suave: #52697C;
  --borde: #DCEAF3;
  --blanco: #FFFFFF;
  --exito: #1E8F63;
  --alerta: #B4791F;
  --peligro: #C0392B;
  --arena: #EFE7D9;           /* tono cálido tomado de la cerámica en las fotos reales */
  --arena-2: #F8F3E9;
  --guante: #E8A93C;          /* acento tomado del guante amarillo del uniforme SAUBER */
  --guante-oscuro: #C7871F;
  --fuente-titulo: 'Fraunces', serif;   /* titulares con carácter propio */
  --fuente-texto: 'Open Sans', sans-serif;
  --radio: 8px;                /* radio real de sus tarjetas (.box) */
  --sombra: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
  --sombra-hover: 0 0px 40px 0 rgba(90,90,90,.12), 0 0px 5px 0 rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--fuente-texto); line-height:1.5; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fuente-titulo); color:var(--titulo); line-height:1.2; font-weight:700; margin:0 0 .5em}
p{margin:0 0 1em}
a{color:var(--azul-enlace)}
img,svg{max-width:100%;display:block}
.contenedor{max-width:1152px; margin:0 auto; padding:0 24px}
section{padding:88px 0}
@media (max-width:720px){ section{padding:56px 0} }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.boton:active{ transform:scale(.98) }
.boton-primario{
  background:var(--azul-vivo);
  color:#fff; box-shadow:none;
}
.boton-primario:hover{ background:var(--azul-vivo-hover) }
.boton-secundario{
  background:#fff; color:var(--azul-oscuro); border:1.5px solid var(--borde);
}
.boton-secundario:hover{ border-color:var(--azul-claro) }
.boton[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none }
.boton-bloque{ width:100%; padding:16px }

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:rgba(246,250,253,.85); border-bottom:1px solid var(--borde);
}
.nav .contenedor{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px }
.marca{ display:flex; align-items:center; line-height:1 }
.marca-logo{ height:78px; width:auto; display:block }
@media (max-width:600px){ .marca-logo{ height:56px } }
.logo-hero{ height:180px; width:auto; margin-bottom:22px; display:block }
@media (max-width:600px){ .logo-hero{ height:130px; margin:0 auto 18px } }
.logo-hero-centrado{ margin:0 auto 18px }
@media (max-width:600px){ .logo-hero-centrado{ height:110px } }
.marca-nombre{ font-family:var(--fuente-titulo); font-weight:800; font-size:1.35rem; color:var(--azul-oscuro); letter-spacing:.03em }
.marca-slogan{ font-size:.68rem; color:var(--texto-suave); margin-top:2px }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position:fixed; right:20px; bottom:20px; z-index:50;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:14px 20px 14px 16px; border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35);
  font-weight:700; font-size:.92rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-flotante:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(0,0,0,.4) }
.whatsapp-flotante svg{ flex-shrink:0 }

/* ---------- Aviso emergente de reserva confirmada ---------- */
.toast-exito{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:10px;
  background:var(--exito); color:#fff; border-radius:12px;
  padding:14px 44px 14px 16px; max-width:min(92vw, 480px);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35);
  animation:toast-entra .35s ease-out;
}
.toast-exito.oculto{ display:none }
.toast-exito .toast-icono{ font-size:1.1rem; flex-shrink:0 }
.toast-exito p{ margin:0; font-size:.88rem; line-height:1.4 }
.toast-exito button{
  position:absolute; top:8px; right:10px; background:none; border:none; color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer; opacity:.85; padding:4px;
}
.toast-exito button:hover{ opacity:1 }
@keyframes toast-entra{
  from{ opacity:0; transform:translate(-50%, -14px) }
  to{ opacity:1; transform:translate(-50%, 0) }
}
@media (max-width:600px){
  .toast-exito{ top:10px; left:12px; right:12px; transform:none; max-width:none }
  @keyframes toast-entra{ from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:none } }
}
@media (max-width:520px){
  .whatsapp-flotante span{ display:none }
  .whatsapp-flotante{ padding:14px; }
}
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0 }
.nav-links a{ color:var(--texto); text-decoration:none; font-weight:500; font-size:.92rem }
.nav-links a:hover{ color:var(--azul-claro) }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px }
@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:16px 24px 22px; border-bottom:1px solid var(--borde);
    display:none; gap:16px;
  }
  .nav-links.abierto{ display:flex }
  .nav-toggle{ display:block }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-top:64px }
.hero-fondo{
  position:absolute; inset:0; overflow:hidden; z-index:-1;
}
.circulo-decorativo{
  position:absolute; border-radius:50%; background:var(--azul-vivo);
  opacity:.10;
}
.circulo-decorativo.c1{ width:520px; height:520px; top:-220px; right:-160px }
.circulo-decorativo.c2{ width:300px; height:300px; bottom:-140px; left:-80px; opacity:.10 }
.circulo-decorativo.c3{ width:180px; height:180px; top:30%; left:6%; opacity:.12; background:var(--guante) }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px } }
.pastilla{
  display:inline-flex; align-items:center; gap:8px; background:var(--arena-2); color:var(--guante-oscuro);
  padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:600; margin-bottom:18px;
  font-family:var(--fuente-texto);
}
.hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem); font-weight:500; letter-spacing:-.01em }
.hero-sub{ color:var(--texto-suave); font-size:1.08rem; max-width:46ch }
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap }

/* Visual del hero: foto real con recorte orgánico + tarjeta de disponibilidad flotando encima */
.hero-visual{ position:relative }
.hero-foto{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:44% 56% 63% 37% / 45% 41% 59% 55%;
  box-shadow:0 40px 70px -30px rgba(11,46,79,.4);
}
.hero-visual .hero-tarjeta{ position:absolute; left:-28px; bottom:-28px; width:75%; min-width:230px }
@media (max-width:900px){
  .hero-foto{ aspect-ratio:16/10; border-radius:32px 32px 32px 90px }
  .hero-visual .hero-tarjeta{ position:static; width:88%; margin:-46px 0 0 auto }
}
@media (max-width:600px){ .hero-visual .hero-tarjeta{ width:100%; margin-top:-30px } }

.hero-tarjeta{
  background:#fff; border:1px solid var(--borde); border-radius:14px; padding:24px;
  box-shadow:0 20px 40px -18px rgba(11,46,79,.28);
}
.hero-tarjeta strong{ font-family:var(--fuente-texto) }
.hero-tarjeta .fila{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--borde); font-size:.9rem }
.hero-tarjeta .fila:last-child{ border-bottom:none }

/* ---------- Cómo funciona ---------- */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
@media (max-width:800px){ .pasos{ grid-template-columns:1fr } }
.paso{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:26px }
.paso-numero{
  width:38px; height:38px; border-radius:50%; background:var(--azul-oscuro); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:14px;
}

/* ---------- Servicios ---------- */
.encabezado-seccion{ max-width:640px; margin:0 auto 48px; text-align:center }
.encabezado-seccion h2{ font-size:clamp(1.7rem,3vw,2.3rem) }
.encabezado-seccion p{ color:var(--texto-suave) }
.tarjetas-servicios{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
@media (max-width:800px){ .tarjetas-servicios{ grid-template-columns:1fr } }
.tarjeta-servicio{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:28px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta-servicio:hover{ transform:translateY(-4px); box-shadow:var(--sombra-hover) }
.icono-servicio{
  width:46px; height:46px; border-radius:14px; background:var(--azul-claro-2); color:var(--azul-oscuro);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.tarjeta-servicio ul{ margin:14px 0 0; padding-left:18px; color:var(--texto-suave); font-size:.92rem }
.tarjeta-servicio li{ margin-bottom:4px }

/* ---------- Formulario de agenda ---------- */
.agenda-grid{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start }
@media (max-width:960px){ .agenda-grid{ grid-template-columns:1fr } }
.tarjeta-form{ background:#fff; border:1px solid var(--borde); border-radius:10px; padding:32px }
@media (max-width:600px){ .tarjeta-form{ padding:22px } }
.grupo-form{ margin-bottom:34px }
.grupo-form h3{ font-size:1.15rem; display:flex; align-items:center; gap:8px }
.campo{ margin-bottom:16px }
.campo label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--texto) }
.campo input[type=text], .campo input[type=tel], .campo input[type=email],
.campo input[type=date], .campo textarea, .campo select{
  width:100%; padding:12px 14px; border:1.5px solid var(--borde); border-radius:12px;
  font-family:var(--fuente-texto); font-size:.95rem; background:#fff; color:var(--texto);
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(79,168,224,.18);
}
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:560px){ .fila-2{ grid-template-columns:1fr } }

.contador{
  display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--borde);
  border-radius:12px; padding:10px 14px; margin-bottom:10px; background:#fff;
}
.contador button{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--azul-claro); background:#fff;
  color:var(--azul-oscuro); font-size:1rem; cursor:pointer; line-height:1;
}
.contador span.valor{ min-width:22px; text-align:center; font-weight:700; color:var(--azul-oscuro) }

.opcion{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--borde); border-radius:12px;
  padding:12px 14px; margin-bottom:10px; cursor:pointer; background:#fff; transition:border-color .15s;
}
.opcion:hover{ border-color:var(--azul-claro) }
.opcion input{ accent-color:var(--azul-oscuro); width:18px; height:18px; flex-shrink:0 }
.opcion.marcada{ border-color:var(--azul-oscuro); background:var(--azul-claro-2) }
.opciones-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
@media (max-width:640px){ .opciones-grid{ grid-template-columns:1fr } }

.oculto{ display:none !important }

.aviso{
  display:flex; gap:10px; background:#FFF6E4; border:1px solid #F1DBA0; color:#7A5719;
  border-radius:12px; padding:14px; font-size:.85rem; margin-top:6px;
}

/* Calendario */
.calendario{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px }
@media (max-width:600px){ .calendario{ grid-template-columns:repeat(3,1fr) } }
.dia-calendario{
  border:2px solid var(--borde); border-radius:12px; padding:10px 4px; text-align:center; cursor:pointer;
  background:#fff; font-size:.78rem;
}
.dia-calendario .numero{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.15rem; color:var(--azul-oscuro) }
.dia-calendario.disponible{ border-color:#BFE3D2; background:#F1FBF6 }
.dia-calendario.casi{ border-color:#F1DBA0; background:#FFF8E9 }
.dia-calendario.lleno{ border-color:#F3C9C9; background:#FDEEEE; color:#B23A3A; cursor:not-allowed; opacity:.85 }
.dia-calendario.seleccionado{ outline:3px solid var(--azul-oscuro); outline-offset:1px }
.leyenda{ display:flex; gap:18px; font-size:.78rem; color:var(--texto-suave); margin-top:12px; flex-wrap:wrap }
.leyenda span{ display:inline-flex; align-items:center; gap:6px }
.punto{ width:10px; height:10px; border-radius:50% }

/* Panel resumen (sticky) */
.panel-resumen{
  background:linear-gradient(160deg, var(--azul-oscuro), var(--azul-oscuro-2));
  color:#fff; border-radius:10px; padding:26px; position:sticky; top:96px;
}
.panel-resumen .etiqueta{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#BFE0F5 }
.panel-resumen .tiempo{ font-family:var(--fuente-titulo); font-size:2.3rem; font-weight:800; margin:6px 0 14px }
.panel-resumen .barra{ height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden }
.panel-resumen .barra-relleno{ height:100%; background:var(--azul-claro); transition:width .4s ease }
.panel-resumen .extras-tiempo{ list-style:none; margin:14px 0 0; padding:0; font-size:.82rem; color:#D8ECF9 }
.panel-resumen .extras-tiempo li{ padding:5px 0; border-top:1px dashed rgba(255,255,255,.15) }
.panel-resumen .extras-tiempo li:first-child{ border-top:none }
.panel-resumen .nota{ font-size:.72rem; color:#AFCFE6; margin-top:14px; border-top:1px solid rgba(255,255,255,.15); padding-top:12px }
.panel-resumen .nota a{ color:#fff; font-weight:600 }

/* Confirmación */
.confirmacion{
  max-width:520px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--borde);
  border-radius:10px; padding:40px 32px;
}
.confirmacion .icono-check{
  width:60px; height:60px; border-radius:50%; background:#E6F7EE; color:var(--exito);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.resumen-lista{ text-align:left; background:var(--fondo); border-radius:12px; padding:18px; margin:20px 0; font-size:.9rem }
.resumen-lista p{ margin:0 0 6px }

.mensaje-error{ color:var(--peligro); font-size:.85rem; margin-top:10px }

/* ---------- Footer ---------- */
footer{ background:var(--azul-oscuro); color:#CFE1F0; padding:48px 0 28px; margin-top:40px }
footer .contenedor{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px }
footer a{ color:#CFE1F0 }
footer small{ display:block; margin-top:24px; color:#8FB3D0 }

/* Animación de aparición al hacer scroll */
.aparece{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.aparece.visible{ opacity:1; transform:none }

/* ---------- Tarjetas de producto (líneas de servicio) ---------- */
.tarjetas-producto{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
@media (max-width:900px){ .tarjetas-producto{ grid-template-columns:1fr } }
.tarjeta-producto{
  background:#fff; border:1px solid var(--borde); border-radius:10px; padding:30px;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta-producto:hover{ transform:translateY(-4px); box-shadow:var(--sombra-hover) }
.tarjeta-producto .icono-servicio{ background:var(--azul-claro-2); color:var(--azul-vivo) }
.tarjeta-producto p{ color:var(--texto-suave); font-size:.93rem; flex-grow:1 }
.tarjeta-producto .conocer-mas{
  display:inline-flex; align-items:center; gap:6px; color:var(--azul-vivo); font-weight:600;
  font-size:.9rem; text-decoration:none; margin-top:6px;
}
.tarjeta-producto .conocer-mas:hover{ gap:10px }

/* ---------- Qué incluye (franja de iconos) ---------- */
.incluye-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
@media (max-width:900px){ .incluye-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .incluye-grid{ grid-template-columns:1fr } }
.incluye-item{ text-align:center }
.incluye-item .icono-servicio{ margin:0 auto 14px; background:var(--azul-claro-2); color:var(--azul-vivo) }
.incluye-item h3{ font-size:1.02rem }
.incluye-item p{ color:var(--texto-suave); font-size:.88rem }

/* ---------- Confianza / misión ---------- */
.confianza{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
@media (max-width:860px){ .confianza{ grid-template-columns:1fr } }
.confianza-lista{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:16px }
.confianza-lista li{ display:flex; gap:12px; font-size:.95rem; color:var(--texto) }
.confianza-lista .marca-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--azul-claro-2); color:var(--azul-vivo);
  display:flex; align-items:center; justify-content:center;
}
.confianza-visual{
  background:linear-gradient(180deg, rgba(11,46,79,.15), rgba(11,46,79,.78)), url('../img/galeria-ambiente.jpg') center/cover;
  border-radius:24px; position:relative; overflow:hidden;
  min-height:320px; display:flex; align-items:flex-end; justify-content:center; padding:34px 28px;
}
.confianza-visual .cifra{ text-align:center; position:relative; z-index:1; flex:1; min-width:90px }
.confianza-visual .cifra strong{ display:block; font-family:var(--fuente-titulo); font-size:2.4rem; color:#fff }
.confianza-visual .cifra span{ font-size:.82rem; color:#DCEAF3 }
.confianza-cifras{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25);
  border-radius:16px; padding:20px 14px;
}

/* ---------- Testimonios ---------- */
.testimonios-nota{
  text-align:center; font-size:.8rem; color:var(--texto-suave); background:var(--azul-claro-2);
  border-radius:999px; padding:6px 16px; display:inline-block; margin:0 auto 28px;
}
.testimonios-wrap{ text-align:center }
.testimonios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:860px){ .testimonios-grid{ grid-template-columns:1fr } }
.tarjeta-testimonio{
  background:#fff; border:1px solid var(--borde); border-radius:18px; padding:24px; text-align:left;
}
.tarjeta-testimonio .estrellas{ color:#F2B807; font-size:.9rem; margin-bottom:10px }
.tarjeta-testimonio p{ color:var(--texto); font-size:.92rem }
.tarjeta-testimonio .autor{ display:flex; justify-content:space-between; margin-top:14px; font-size:.78rem; color:var(--texto-suave) }

/* ---------- Banda CTA final ---------- */
.cta-banda{
  background:var(--azul-claro-2);
  border-radius:16px; padding:56px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-banda .circulo-decorativo{ opacity:.16 }
.cta-banda h2, .cta-banda p{ position:relative; z-index:1 }
.cta-banda p{ color:var(--texto-suave); max-width:46ch; margin:0 auto 26px }

/* ---------- Hero de página interna (agendar) ---------- */
.hero-interno{ padding:56px 0 8px; text-align:center }
.hero-interno h1{ font-size:clamp(1.9rem,3.6vw,2.6rem) }
.hero-interno p{ color:var(--texto-suave); max-width:52ch; margin:0 auto }

/* Encabezado interno con foto real de fondo (agendar.html, precios.html) */
.hero-interno-foto{
  position:relative; text-align:center; overflow:hidden; padding:96px 0 60px;
  background-size:cover; background-position:center; color:#fff;
}
.hero-interno-foto::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,46,79,.5) 0%, rgba(11,46,79,.88) 100%);
}
.hero-interno-foto .contenedor{ position:relative; z-index:1 }
.hero-interno-foto h1{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.6rem) }
.hero-interno-foto p{ color:#DCEAF3; max-width:52ch; margin:0 auto }
@media (max-width:600px){ .hero-interno-foto{ padding:72px 0 44px } }

/* ---------- Página de Precios ---------- */
.franja-precios{ padding:40px 0 8px }
.franja-precios .encabezado-seccion{ margin-bottom:32px }

.tabs-precio{ display:flex; gap:8px; justify-content:center; margin-bottom:28px; flex-wrap:wrap }
.tab-btn{
  padding:10px 22px; border-radius:999px; border:1.5px solid var(--borde); background:#fff;
  color:var(--texto-suave); font-weight:600; font-size:.88rem; cursor:pointer; transition:all .15s ease;
}
.tab-btn.activo{ background:var(--azul-vivo); border-color:var(--azul-vivo); color:#fff }
.tab-btn:not(.activo):hover{ border-color:var(--azul-vivo) }

.tabla-precios{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra) }
.tabla-precios th, .tabla-precios td{ padding:12px 16px; text-align:left; font-size:.88rem; border-bottom:1px solid var(--borde) }
.tabla-precios th{ background:var(--azul-claro-2); color:var(--azul-oscuro); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em }
.tabla-precios td.precio{ font-weight:700; color:var(--azul-oscuro); white-space:nowrap }
.tabla-precios tr:last-child td{ border-bottom:none }
.tabla-scroll-precios{ overflow-x:auto; border-radius:var(--radio) }

.tabla-comparativa{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra) }
.tabla-comparativa th, .tabla-comparativa td{ padding:10px 16px; font-size:.86rem; border-bottom:1px solid var(--borde) }
.tabla-comparativa th{ background:var(--azul-claro-2); color:var(--azul-oscuro); font-size:.75rem; text-transform:uppercase; text-align:center }
.tabla-comparativa th:first-child{ text-align:left }
.tabla-comparativa td:first-child{ color:var(--texto) }
.tabla-comparativa td{ text-align:center }
.tabla-comparativa tr:last-child td{ border-bottom:none }
.marca-check{ color:var(--exito); font-weight:800 }
.marca-no{ color:#C7D2D9; font-weight:800 }
.tabla-comparativa .etiqueta-plan{ display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700 }
.punto-plan{ width:9px; height:9px; border-radius:50% }

.grid-precios{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px }
.tarjeta-precio{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:18px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.tarjeta-precio .nombre{ font-size:.9rem; color:var(--texto) }
.tarjeta-precio .valor{ font-weight:700; color:var(--azul-oscuro); white-space:nowrap; font-size:.92rem }

.paquetes-mudanza{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:860px){ .paquetes-mudanza{ grid-template-columns:1fr } }
.paquete{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:26px }
.paquete.destacado{ border-color:var(--azul-vivo); box-shadow:var(--sombra) }
.paquete h3{ font-size:1.05rem }
.paquete .precio-paquete{ font-family:var(--fuente-titulo); font-size:1.6rem; color:var(--azul-vivo); font-weight:800; margin:6px 0 14px }
.paquete ul{ margin:0; padding-left:18px; color:var(--texto-suave); font-size:.86rem }
.paquete li{ margin-bottom:6px }

.nota-precios{ font-size:.8rem; color:var(--texto-suave); margin-top:14px }
.subtitulo-precio{ font-size:1.05rem; margin-bottom:14px; color:var(--titulo) }

/* Navegación rápida de la página de precios */
.atajos-precio{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:16px 0 8px;
}
.atajos-precio a{
  padding:8px 16px; border-radius:999px; background:var(--azul-claro-2); color:var(--azul-oscuro);
  font-size:.82rem; font-weight:600; text-decoration:none; transition:background .15s ease;
}
.atajos-precio a:hover{ background:#D3ECF9 }

/* Detalle desplegable (precios por prenda) */
.detalle-prendas{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:18px 20px;
}
.detalle-prendas summary{
  cursor:pointer; font-weight:700; color:var(--azul-oscuro); list-style:none; font-size:.95rem;
}
.detalle-prendas summary::-webkit-details-marker{ display:none }
.detalle-prendas summary::before{ content:'+ '; color:var(--azul-vivo) }
.detalle-prendas[open] summary::before{ content:'– ' }

/* ---------- Galería "Así trabajamos" (bento con fotos reales) ---------- */
.bento{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:180px; gap:14px;
}
.bento-item{
  position:relative; overflow:hidden; border-radius:20px; grid-column:span 2; grid-row:span 1;
  background:var(--arena);
}
.bento-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.bento-item:hover img{ transform:scale(1.045) }
.bento-item.grande{ grid-column:span 2; grid-row:span 2 }
.bento-item .bento-etiqueta{
  position:absolute; left:0; right:0; bottom:0; padding:20px 18px 16px;
  background:linear-gradient(0deg, rgba(11,46,79,.82) 0%, rgba(11,46,79,0) 70%);
  color:#fff; font-size:.92rem; font-weight:600;
}
@media (max-width:860px){
  .bento{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px }
  .bento-item{ grid-column:span 1 }
  .bento-item.grande{ grid-column:span 2; grid-row:span 2 }
}
@media (max-width:480px){
  .bento{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px }
}

/* ---------- Barra de navegación inferior (móvil, estilo app) ---------- */
.tabs-movil{ display:none }
@media (max-width:860px){
  .tabs-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--borde); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(11,46,79,.18);
  }
  .tabs-movil a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    text-decoration:none; color:var(--texto-suave); font-size:.68rem; font-weight:600;
    padding:6px 2px; border-radius:12px; transition:color .15s ease;
  }
  .tabs-movil a svg{ width:22px; height:22px }
  .tabs-movil a.activo{ color:var(--azul-vivo) }
  .tabs-movil a.tab-agendar{ color:var(--azul-vivo) }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)) }
  .whatsapp-flotante{ bottom:calc(78px + env(safe-area-inset-bottom)) }
  /* La barra inferior reemplaza la navegación del header en móvil */
  .nav-toggle{ display:none }
  .nav-links{ display:none !important }
}