:root {
  --color-principal: #339496;
  --color-texto: #58425a;
  --fuente-titulo: 'Poppins', sans-serif;
  --fuente-texto: 'Montserrat', sans-serif;
  --color-fondo-claro: #f4f4f4;
}

/* ===== BASE ===== */
body { font-family: var(--fuente-texto); color: var(--color-texto); margin:0; padding:0; line-height:1.6; }
h1, h2, h3 { font-family: var(--fuente-titulo); color: var(--color-texto); }
a { color: var(--color-principal); text-decoration: none; }

/* ===== NAVBAR + LOGO (limpio) ===== */
.navbar {
  position: fixed; top:0; left:0; width:100%; height:90px; padding:0 20px; z-index:20;
  display:flex; justify-content:flex-start; align-items:center;
  background-color: rgba(51,148,150,0.8); box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.logo{
  background-color: rgba(255,255,255,0.7); padding:2px; border-radius:5px;
  display:flex; align-items:center; justify-content:center; z-index:21;
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
}
.logo img{ height:184px; width:auto; }

/* Inicio con el mismo estilo que los enlaces */
.home-button{
  font-family: var(--fuente-titulo);
  font-weight:700;
  color:#fff;
  text-decoration:none;
  transition: color .3s ease;
}
.home-button:hover{ color:var(--color-texto); }

.nav-links{ list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:20px; }
.nav-links a{ color:#fff; font-weight:700; transition: color .3s ease; }
.nav-links a:hover{ color:var(--color-texto); }

.login-button{
  background:transparent; border:2px solid #fff; padding:8px 15px; border-radius:5px;
  margin-left:20px; margin-right:30px; color:#fff; transition:.3s;
}
.login-button:hover{ background:#fff; color:var(--color-principal); }

/* ===== HERO (por defecto) ===== */
.hero-section{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center; text-align:center;
  background-image:url('images/hero.jpg.png'); background-size:cover; background-position:center top; background-attachment:fixed;
  color:#fff; padding-top:60px;
}
.hero-section::before{ content:''; position:absolute; inset:0; background:rgba(88,66,90,.5); z-index:1; }
.hero-content{ position:relative; z-index:10; padding:20px; }
.hero-content h1{ font-size:4rem; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.5); }
.hero-content p{ font-size:1.5rem; max-width:600px; margin:20px auto; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.5); }

/* ===== BOTONES ===== */
.cta-button{
  display:inline-block; padding:15px 30px; background:var(--color-principal); color:#fff;
  font-weight:700; border-radius:5px; transition:background-color .3s ease;
}
.cta-button:hover{ background:#2a7e80; }

/* ===== CONTENEDOR ===== */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* ===== CÓMO FUNCIONA ===== */
.how-it-works-section{ padding:80px 20px; text-align:center; background:var(--color-fondo-claro); }
.how-it-works-section h2{ font-size:2.5rem; margin-bottom:10px; }
.how-it-works-section p{ max-width:800px; margin:0 auto 20px; font-size:1.1rem; color:#555; }
.how-it-works-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:50px; }
.step-card{
  background:#fff; padding:40px 20px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,.1);
  flex:1 1 250px; transition: transform .3s ease;
}
.step-card:hover{ transform: translateY(-10px); }
.step-icon{ font-size:3rem; color:var(--color-principal); margin-bottom:20px; }
.step-card h3{ font-size:1.5rem; margin-bottom:10px; }
.start-now-text{ margin-top:40px; font-style:italic; font-weight:bold; }

/* Versión 1 Fila compacta (pág. Cómo funciona) */
.how-it-works--one-row{ display:flex; flex-wrap:nowrap; gap:16px; margin-top:30px; }
.how-it-works--one-row .step-card{ flex:1 1 0; min-width:0; padding:18px 12px; }
.how-it-works--one-row .step-icon{ font-size:clamp(18px,2.2vw,28px); margin-bottom:8px; }
.how-it-works--one-row h3{ font-size:clamp(13px,1.6vw,18px); margin-bottom:6px; }
.how-it-works--one-row p{ font-size:clamp(12px,1.5vw,16px); color:#666; }

/* ===== SERVICIOS ===== */
.services-section{ padding:80px 20px; text-align:center; background:#fff; }
.services-section h2{ font-size:2.5rem; margin-bottom:10px; }
.subtitle{ font-size:1.2rem; color:#888; margin-bottom:60px; }
.services-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }
.service-card{
  background:var(--color-fondo-claro); padding:20px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,.1);
  flex:1 1 180px; transition: transform .3s ease;
}
.service-card:hover{ transform: translateY(-10px); }
.service-icon{ font-size:2.5rem; color:var(--color-principal); margin-bottom:15px; }
.service-card h3{ font-size:1.2rem; margin-bottom:10px; }

/* ===== WHY US ===== */
.why-us-section{ padding:80px 20px; text-align:center; background:var(--color-fondo-claro); }
.why-us-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:50px; }
.why-us-item{ background:#fff; padding:40px 20px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,.1); }
.why-us-icon{ font-size:3rem; color:var(--color-principal); margin-bottom:20px; }

/* ===== TESTIMONIOS ===== */
.testimonials-section{ padding:80px 20px; text-align:center; background:#fff; }
.testimonial-card{
  max-width:800px; margin:0 auto; padding:40px; background:var(--color-fondo-claro);
  border-left:5px solid var(--color-principal); border-radius:10px; font-style:italic; font-size:1.1rem;
}
.testimonial-card p{ margin-bottom:20px; }
.client-info{ text-align:right; }
.client-name{ font-weight:700; color:var(--color-texto); }

/* ===== HAZTE CUIDADOR ===== */
.become-sitter-section{ padding:80px 20px; text-align:center; background:var(--color-principal); color:#fff; }
.become-sitter-section h2{ color:#fff; font-size:2.5rem; margin-bottom:10px; }
.become-sitter-section .subtitle{ color:#fff; margin-bottom:40px; }
.become-sitter-section .cta-button{ background:#fff; color:var(--color-principal); border:2px solid #fff; }
.become-sitter-section .cta-button:hover{ background:transparent; color:#fff; }

/* ===== COOKIES MODAL ===== */
.cookie-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; justify-content:center; align-items:center; z-index:999; }
.cookie-modal-content{ background:#fff; max-width:600px; padding:40px; border-radius:10px; box-shadow:0 5px 25px rgba(0,0,0,.2); text-align:center; z-index:1000; }
.cookie-modal-content p{ margin-bottom:20px; }
.cookie-modal-content a{ color: var(--color-principal); text-decoration: underline; }
.cookie-buttons{ display:flex; justify-content:center; gap:15px; }
.cookie-buttons button{ border:none; padding:12px 30px; border-radius:5px; cursor:pointer; font-weight:bold; }
.cookie-buttons .accept-button{ background:var(--color-principal); color:#fff; }
.cookie-buttons .accept-button:hover{ background:#2a7e80; }
.cookie-buttons .deny-button{ background:var(--color-fondo-claro); color:var(--color-texto); border:1px solid #ccc; }
.cookie-buttons .deny-button:hover{ background:#e8e8e8; }

/* ===== HERO ESPECÍFICO (Cómo funciona) ===== */
.hero-section.hero-como{
  background-image:url('images/como.jpg.png.png') !important;
  background-position:center 15%;
}
@media (max-width:768px){
  .hero-section.hero-como{ background-position:center 25%; }
}

/* ===== CTA PANEL / INFO-DUO ===== */
.cta-panel{
  margin:34px auto 24px; max-width:820px; background:#fff; border:1px solid #eee;
  border-radius:14px; padding:22px; box-shadow:0 2px 12px rgba(0,0,0,.05); text-align:center;
}
.cta-panel h3{ margin:0 0 6px; font-size:1.35rem; }
.cta-panel p{ margin:0 0 14px; color:#666; }
.info-duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:10px; }
.info-card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.04); text-align:left; }
.info-card h4{ margin:0 0 8px; }

/* ===== FOOTER ===== */
.site-footer{ background:#fff; color:var(--color-texto); padding:20px 0 0; border-top:1px solid #e9e9e9; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-links-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.footer-links-row .sep{ color:#bbb; }
.footer-links-row a{ color:var(--color-texto); text-decoration:none; white-space:nowrap; font-size:.95rem; }
.footer-links-row a:hover{ color:var(--color-principal); text-decoration:underline; }

/* Alinear “¿Necesitas ayuda?” en línea con los enlaces */
.footer-links-row a,
.footer-links-row .footer-help-inline {
  color: var(--color-texto);
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
}
.footer-help-inline{ margin-left:10px; font-size:.95rem; color:#666; white-space:nowrap; }
.footer-help-inline a{ color:var(--color-principal); text-decoration:underline; }

.footer-right.socials{
  display:flex; gap:10px; margin-left:auto;
  position:relative; top:-16px; right:24px;
}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #ddd; border-radius:50%;
  font-size:1.2rem; color:var(--color-texto); transition:all .3s ease;
}
.socials a:hover{ border-color:var(--color-principal); color:var(--color-principal); }

.footer-bottom{ border-top:1px solid #eee; padding:10px 20px; font-size:.9rem; color:#777; }
.footer-bottom--inline{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.legal-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.legal-links .sep{ color:#bbb; }
.legal-links a{ color:#777; text-decoration:none; white-space:nowrap; }
.legal-links a:hover{ color:var(--color-principal); text-decoration:underline; }

/* ===== ESCRITORIO: posicionar INICIO respecto al logo ===== */
@media (min-width:901px){
  /* Coloca INICIO  a la derecha del logo. Ajusta el valor para más/menos separación */
  .navbar .home-button{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left: 244px; /* 20px (margen) + 184px (ancho bloque logo) + 40px separador */
    z-index:22;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  /* NAVBAR en columna */
  .navbar{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    padding:10px 15px;
  }
  .logo{
    position:static;
    transform:none;
    padding:5px;
  }
  .logo img{ height:50px; }

  /* INICIO fluye normal en móvil */
  .home-button{
    position: static;
    left: auto;
    transform: none;
    margin-top: 10px;
    color:#fff;
  }

  .nav-links{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin-top:10px;
    gap:5px;
  }
  .login-button{
    margin-left:0;
    margin-top:10px;
    align-self:flex-end;
    margin-right:0;
  }

  /* Secciones */
  .hero-content h1{ font-size:2.5rem; }
  .hero-content p{ font-size:1.2rem; }
  .cta-button{ padding:12px 25px; }

  .services-section,
  .why-us-section,
  .testimonials-section,
  .how-it-works-section,
  .become-sitter-section{
    padding:60px 15px;
  }
  .services-section h2,
  .why-us-section h2,
  .testimonials-section h2,
  .how-it-works-section h2,
  .become-sitter-section h2{
    font-size:2rem;
  }
  .subtitle{ font-size:1rem; margin-bottom:40px; }
  .how-it-works-grid{ flex-direction:column; }
  .why-us-grid{ grid-template-columns:1fr; }

  /* Footer en móvil */
  .footer-right.socials{
    position:static;
    top:0; right:0;
    justify-content:center;
  }
}

/* ===== ACCESIBILIDAD / UTILIDADES ===== */
:focus-visible { outline:2px dashed var(--color-principal); outline-offset:2px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }

/* ===== ESCRITORIO: posicionar INICIO respecto al logo ===== */
@media (min-width:901px){
  /* Coloca INICIO a la derecha del logo, pegado al recuadro blanco */
  .navbar .home-button{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left: 200px; /* más cerca del recuadro blanco */
    z-index:22;
    font-family: var(--fuente-titulo);
    font-weight:700;
    color:#fff;
    text-decoration:none;
    transition: color .3s ease;
  }
  .navbar .home-button:hover{
    color: var(--color-texto);
  }
}
/* TPL: INICIO BLOQUE NUEVO [anti-flicker auth] */
html.tpl-auth-boot [data-auth-visible="signed-in"],
html.tpl-auth-boot [data-auth-visible="signed-out"]{
  visibility: hidden;
}
/* TPL: FIN BLOQUE NUEVO */
/* TPL: INICIO BLOQUE NUEVO [Overlay envío de formularios] */
.tpl-form-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.tpl-form-overlay.show { display: flex; }
.tpl-form-card {
  background:#fff; border-radius:14px; padding:18px 16px; max-width: 480px; width: calc(100% - 32px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15); text-align:center; font-family: inherit;
}
.tpl-form-card h3 { margin: 0 0 6px; color: #339496; }
.tpl-form-card p { margin: 0; color:#58425a; }
.tpl-form-spinner {
  width:22px; height:22px; border:3px solid #e8f4f4; border-top-color:#339496; border-radius:50%;
  margin: 0 auto 10px; animation: tplspin 0.9s linear infinite;
}
@keyframes tplspin { to { transform: rotate(360deg); } }
/* TPL: FIN BLOQUE NUEVO */
/* TPL: INICIO BLOQUE NUEVO [Antibloqueo global — corregido] */
.tpl-auth-boot, .tpl-auth-boot * {
  pointer-events: auto !important;
  cursor: auto !important;
}
/* El overlay está oculto por defecto, pero permitimos que .show lo active */
#tpl-form-overlay { display: none; }
#tpl-form-overlay.tpl-form-overlay.show { display: flex !important; }
/* TPL: FIN BLOQUE NUEVO */