/* ============================================================================
   DOBLE CHECK — SISTEMA DE DISEÑO (hoja de estilos compartida)
   ============================================================================
   Este archivo controla el DISEÑO de TODO el sitio. Editá acá una sola vez
   y el cambio se aplica a todas las páginas.

   ▸ COLORES y TIPOGRAFÍAS: en el bloque :root de abajo.
   ▸ LOGO: no se toca acá, se cambia el archivo assets/doblecheck-logo.png
     (o el <img> del encabezado en cada página).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) VARIABLES  —  cambiá los colores y medidas acá
   --------------------------------------------------------------------------- */
:root{
  /* Colores de marca */
  --naranja:      #E8722C;   /* color principal (botones, acentos) */
  --naranja-osc:  #C25A17;   /* naranja para texto/hover sobre fondo claro */
  --coral:        #F2704F;   /* secundario */
  --negro:        #17140F;   /* casi negro (títulos, fondos oscuros) */
  --texto:        #2A241E;   /* texto de cuerpo */
  --texto-suave:  #5C5148;   /* texto secundario */
  --crema:        #FBF3EA;   /* fondo claro principal */
  --crema-osc:    #F1E2CE;   /* fondo claro alternativo / bordes */
  --blanco:       #FFFFFF;
  --linea:        #E7DAC8;   /* líneas divisorias */

  /* Medidas */
  --radio:   18px;                        /* redondeo de tarjetas */
  --sombra:  0 10px 30px rgba(23,20,15,.10);
  --ancho:   1120px;                      /* ancho máximo del contenido */
  --nav-h:   72px;                        /* alto de la barra superior */
}

/* ---------------------------------------------------------------------------
   2) BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); }

body{
  font-family:'DM Sans',system-ui,-apple-system,Arial,sans-serif;
  background:var(--crema);
  color:var(--texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:'Poppins',system-ui,Arial,sans-serif; color:var(--negro); line-height:1.15; letter-spacing:-.02em; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.container{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }
.seccion{ padding:clamp(56px,9vw,96px) 0; }
.centrado{ text-align:center; }

/* Motivo "doble check" reutilizable (dos tildes) */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',Arial,sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--naranja-osc); margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:12px; flex:0 0 auto;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6l3.5 3.5L9 4.5' stroke='%23C25A17' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 6l3.5 3.5L17 4.5' stroke='%23E8722C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   3) BOTONES
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Poppins',Arial,sans-serif; font-weight:700;
  font-size:1rem; line-height:1; text-decoration:none; cursor:pointer;
  padding:15px 26px; border-radius:100px; border:2px solid transparent;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn svg{ width:20px; height:20px; }
.btn-primario{ background:var(--naranja); color:var(--blanco); box-shadow:var(--sombra); }
.btn-primario:hover{ background:var(--naranja-osc); transform:translateY(-2px); box-shadow:0 15px 34px rgba(23,20,15,.18); }
.btn-oscuro{ background:var(--negro); color:var(--blanco); }
.btn-oscuro:hover{ background:#000; transform:translateY(-2px); }
.btn-borde{ background:transparent; color:var(--negro); border-color:var(--linea); }
.btn-borde:hover{ border-color:var(--naranja); color:var(--naranja-osc); }
.btn:focus-visible{ outline:3px solid var(--negro); outline-offset:3px; }

/* ---------------------------------------------------------------------------
   4) BARRA SUPERIOR (NAV)  —  igual en todas las páginas
   --------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(251,243,234,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--negro); }
.nav-logo img{ width:38px; height:38px; border-radius:10px; }
.nav-logo .nl-txt{ display:flex; flex-direction:column; line-height:1.05; }
.nav-logo .nl-txt b{ font-family:'Poppins',Arial,sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.nav-logo .nl-txt b span{ color:var(--naranja-osc); }
.nav-logo .nl-txt small{ font-family:'DM Sans',Arial,sans-serif; font-weight:500; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave); margin-top:3px; }
@media(max-width:520px){ .nav-logo .nl-txt small{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a{ text-decoration:none; font-weight:500; font-size:.97rem; color:var(--texto); transition:color .15s ease; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--naranja-osc); }
.nav-links .li-cta{ display:none; }   /* el botón del menú solo se muestra en móvil */
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--negro); margin:5px 0; border-radius:2px; transition:.2s; }

/* Menú móvil */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--crema); border-bottom:1px solid var(--linea);
    padding:8px 24px 20px; transform:translateY(-120%); transition:transform .25s ease;
    box-shadow:var(--sombra);
  }
  .nav-links.abierto{ transform:translateY(0); }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:14px 0; border-bottom:1px solid var(--linea); font-size:1.05rem; }
  .nav-toggle{ display:block; }
  .nav-cta .btn{ display:none; }   /* el CTA queda dentro del menú móvil */
  .nav-links .li-cta{ display:block; }
  .nav-links .li-cta a{ border-bottom:0; margin-top:10px; text-align:center; }
}

/* ---------------------------------------------------------------------------
   5) HERO
   --------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,9vw,110px) 0 clamp(56px,9vw,96px);
  background:
    radial-gradient(circle at 88% -10%, rgba(232,114,44,.20), transparent 50%),
    radial-gradient(circle at -10% 110%, rgba(242,112,79,.16), transparent 46%),
    var(--crema);
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2.3rem,5.4vw,3.7rem); font-weight:800; text-wrap:balance; }
.hero h1 em{ color:var(--naranja-osc); font-style:normal; }
.hero .sub{ margin-top:20px; font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--texto-suave); max-width:560px; text-wrap:pretty; }
.hero .acciones{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.hero .nota{ margin-top:16px; font-size:.9rem; color:var(--texto-suave); }

/* Tarjeta visual "declarado vs verificado" del hero */
.hero-visual{ background:var(--blanco); border:1px solid var(--linea); border-radius:22px; box-shadow:var(--sombra); padding:26px; }
.hero-visual .fila{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px dashed var(--linea); }
.hero-visual .fila:last-child{ border-bottom:0; }
.hero-visual .tick{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; }
.hero-visual .tick.gris{ background:var(--crema-osc); }
.hero-visual .tick.naranja{ background:var(--naranja); }
.hero-visual .tick svg{ width:18px; height:18px; }
.hero-visual .et{ font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); }
.hero-visual .et.ok{ color:var(--naranja-osc); }
.hero-visual .tx{ font-size:1rem; color:var(--texto); margin-top:2px; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-visual{ order:2; }
}

/* ---------------------------------------------------------------------------
   6) SECCIONES GENÉRICAS (títulos)
   --------------------------------------------------------------------------- */
.titulo{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; text-wrap:balance; }
.bajada{ margin-top:14px; color:var(--texto-suave); font-size:1.08rem; max-width:620px; text-wrap:pretty; }
.centrado .bajada{ margin-left:auto; margin-right:auto; }

/* Problema: declarado vs verificado (dos columnas) */
.problema{ background:var(--blanco); }
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; margin-top:44px; }
.vs-col{ border-radius:var(--radio); padding:28px; }
.vs-col.cree{ background:var(--crema); border:1px solid var(--linea); }
.vs-col.real{ background:var(--negro); color:#EFE7DC; }
.vs-col h3{ font-size:1.15rem; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.vs-col.real h3{ color:var(--blanco); }
.vs-col ul{ list-style:none; display:grid; gap:12px; }
.vs-col li{ display:flex; gap:11px; font-size:1rem; }
.vs-col li::before{ content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; background:no-repeat center/contain; }
.vs-col.cree li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23A99', stroke-width='2'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='%23B0A084' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs-col.real li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23E8722C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vs-flecha{ display:grid; place-items:center; font-family:'Poppins',Arial,sans-serif; font-weight:800; color:var(--naranja); font-size:1.4rem; }
@media (max-width:820px){
  .vs{ grid-template-columns:1fr; }
  .vs-flecha{ transform:rotate(90deg); padding:4px 0; }
}

/* ---------------------------------------------------------------------------
   7) SERVICIOS (grilla de áreas)
   --------------------------------------------------------------------------- */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.area{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.area:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--crema-osc); }
.area .ico{ width:48px; height:48px; border-radius:13px; background:var(--crema); display:grid; place-items:center; }
.area .ico svg{ width:24px; height:24px; }
.area h3{ font-size:1.2rem; }
.area p{ color:var(--texto-suave); font-size:.97rem; flex:1; }
.area .mas{ font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:.9rem; color:var(--naranja-osc); text-decoration:none; }
.area .mas:hover{ text-decoration:underline; }
@media (max-width:900px){ .areas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .areas{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   8) CÓMO TRABAJAMOS (pasos)
   --------------------------------------------------------------------------- */
.pasos{ background:var(--crema); }
.pasos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.paso{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:24px; }
.paso .n{ width:40px; height:40px; border-radius:50%; background:var(--naranja); color:#fff; display:grid; place-items:center; font-family:'Poppins',Arial,sans-serif; font-weight:800; margin-bottom:14px; }
.paso h3{ font-size:1.08rem; margin-bottom:6px; }
.paso p{ color:var(--texto-suave); font-size:.94rem; }
@media (max-width:900px){ .pasos-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pasos-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   9) FRANJA CTA (oscura o naranja)
   --------------------------------------------------------------------------- */
.cta{ text-align:center; color:#fff; background:linear-gradient(158deg,var(--naranja),var(--coral)); }
.cta h2{ color:#fff; font-size:clamp(1.8rem,4.6vw,2.7rem); font-weight:800; text-wrap:balance; }
.cta p{ margin:14px auto 0; max-width:520px; font-size:1.1rem; color:rgba(255,255,255,.94); text-wrap:pretty; }
.cta .acciones{ margin-top:28px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ---------------------------------------------------------------------------
   10) FOOTER  —  igual en todas las páginas
   --------------------------------------------------------------------------- */
.footer{ background:var(--negro); color:#B4A99C; padding:56px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer .marca{ display:inline-flex; align-items:center; gap:10px; font-family:'Poppins',Arial,sans-serif; font-weight:800; font-size:1.2rem; color:#fff; }
.footer .marca img{ width:34px; height:34px; border-radius:9px; }
.footer .marca span{ color:var(--naranja); }
.footer .marca-desc{ margin-top:8px; font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--naranja); }
.footer p.lema{ margin-top:12px; max-width:320px; font-size:.95rem; }
.footer h4{ color:#fff; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.footer ul{ list-style:none; display:grid; gap:9px; }
.footer a{ text-decoration:none; color:#B4A99C; font-size:.95rem; transition:color .15s ease; }
.footer a:hover{ color:var(--naranja); }
.footer .abajo{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer .marca-col{ grid-column:1 / -1; } }

/* ---------------------------------------------------------------------------
   11) PÁGINAS INTERNAS: encabezado de página
   --------------------------------------------------------------------------- */
.page-head{ background:var(--crema); padding:clamp(40px,7vw,72px) 0 clamp(30px,5vw,48px); border-bottom:1px solid var(--linea); }
.page-head h1{ font-size:clamp(2rem,4.6vw,3rem); font-weight:800; }
.page-head .bajada{ margin-top:12px; }

/* Lista de servicios dentro de un área (página Servicios) */
.area-bloque{ padding:clamp(40px,6vw,64px) 0; border-bottom:1px solid var(--linea); }
.area-bloque:last-child{ border-bottom:0; }
.area-bloque .cab{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.area-bloque .cab .ico{ width:52px; height:52px; border-radius:14px; background:var(--crema-osc); display:grid; place-items:center; flex:0 0 auto; }
.area-bloque .cab .ico svg{ width:26px; height:26px; }
.servicios-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px; }
.serv{ background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:20px; }
.serv h4{ font-size:1.03rem; margin-bottom:6px; }
.serv p{ color:var(--texto-suave); font-size:.93rem; }
@media (max-width:720px){ .servicios-lista{ grid-template-columns:1fr; } }

/* Accesibilidad: respetar reducción de movimiento */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}