/* =============================================================================
   WaterProof WEB — Página "Guía de uso" (/web/guide/).
   Replica la imagen de referencia 03-guia_de_uso_es. Depende de tokens.css +
   base.css + components.css (chrome compartido). Aquí solo secciones propias.
   ========================================================================== */

/* --- Hero claro con montañas (imagen 01-section-results + overlay suave) --- */
.wpg-hero { position:relative; display:flex; align-items:center; min-height:420px;
  padding:96px 0 120px; background-position:center; background-size:cover; background-repeat:no-repeat; }
.wpg-hero__inner { position:relative; max-width:620px; }
.wpg-hero h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.12; color:var(--primary-900); }
.wpg-hero h1 .accent { color:var(--blue); }
.wpg-hero p { margin-top:18px; font-size:var(--fs-xl); color:var(--primary-900); max-width:41ch; }
/* Tablet/móvil: título y párrafo del hero centrados, como en las demás páginas.
   En desktop el texto se mantiene a la izquierda sobre la imagen. */
@media (max-width:899.98px){
  .wpg-hero__inner { margin-inline:auto; text-align:center; }
  .wpg-hero p { margin-inline:auto; }
}

/* --- Tabs ----------------------------------------------------------------- */
.wpg-tabs { margin-top:24px; position:relative; z-index:2; }
.wpg-tabs__bar { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
@media (min-width:760px){ .wpg-tabs__bar { grid-template-columns:repeat(4,1fr); } }
.wpg-tab { display:flex; align-items:center; gap:12px; padding:18px 20px; background:var(--primary-50);
  border:1px solid var(--border-blue); border-radius:var(--rounded-lg); text-align:left; color:var(--primary-900); font-weight:600;
  font-size:var(--fs-lg); line-height:1.25; transition:.15s; }
.wpg-tab__ico { flex:0 0 auto; width:22px; height:22px; color:var(--primary-900); }
.wpg-tab__ico svg { width:22px; height:22px; }
.wpg-tab:hover { background:var(--primary-50); }
.wpg-tab.is-active { background:var(--primary-900); color:#fff; }
.wpg-tab.is-active .wpg-tab__ico { color:#fff; }
.wpg-panels { border:1px solid var(--border-blue); border-radius:var(--rounded-lg);
  background:#fff; box-shadow:var(--shadow-sm); }
.wpg-panel { display:none; padding:34px 32px; }
.wpg-panel.is-active { display:block; }
.wpg-panel h3 { color:var(--blue); font-size:var(--fs-3xl); margin-bottom:16px; }
.wpg-panel p { color:var(--primary-900); font-size:var(--fs-lg); line-height:1.65; max-width:78ch; }
.wpg-panel ul { display:grid; gap:12px; }
.wpg-panel ul li { position:relative; padding-left:22px; color:var(--text-3); font-size:var(--fs-md); line-height:1.6; }
.wpg-panel ul li::before { content:""; position:absolute; left:2px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--blue); }
.wpg-panel ul li b { color:var(--primary-900); }

/* --- Metodología: blob + cabecera + cards --------------------------------- */
.wpg-method { padding:72px 0 20px; }
.wpg-blob { width:min(1152px,100%); margin:0 auto 8px; }
.wpg-blob img { width:100%; aspect-ratio:1233/662; object-fit:cover;
  /* Máscara orgánica "Union" del diseño (Figma WaterProof WEB, nodo 3820:2540),
     embebida como data-URI para que sea auto-contenida y estable entre navegadores. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221233.23%22%20height%3D%22662.29%22%20viewBox%3D%220%200%201233.23%20662.29%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1167.3%20435.32C1207.81%20373.82%201277.81%20430.82%201191.8%20559.82C1105.8%20688.82%20937.305%20684.82%20899.305%20606.82C861.305%20528.82%20905.807%20462.32%20968.805%20490.32C1031.8%20518.32%201126.8%20496.82%201167.3%20435.32Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M360.136%205.96628C451.636%20-15.5335%20586.636%2027.4665%20583.136%20115.966C579.636%20204.466%20514.637%20259.966%20435.137%20267.966C355.636%20275.966%20211.136%20246.966%20195.136%20170.466C179.136%2093.9663%20268.635%2027.4663%20360.136%205.96628Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M1177.77%20284.946C1165.27%2082.0967%20824.905%20-47.0341%20676.964%20122.666C529.023%20292.367%20438.607%20312.653%20251.194%20266.146C63.7799%20219.639%20-23.7085%20394.287%206.27749%20534.302C36.2638%20674.317%20215.647%20664.917%20359.09%20553.102C502.533%20441.287%20702.454%20357.179%20871.887%20432.381C1041.32%20507.584%201190.26%20487.795%201177.77%20284.946Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100% 100%;
          mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221233.23%22%20height%3D%22662.29%22%20viewBox%3D%220%200%201233.23%20662.29%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1167.3%20435.32C1207.81%20373.82%201277.81%20430.82%201191.8%20559.82C1105.8%20688.82%20937.305%20684.82%20899.305%20606.82C861.305%20528.82%20905.807%20462.32%20968.805%20490.32C1031.8%20518.32%201126.8%20496.82%201167.3%20435.32Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M360.136%205.96628C451.636%20-15.5335%20586.636%2027.4665%20583.136%20115.966C579.636%20204.466%20514.637%20259.966%20435.137%20267.966C355.636%20275.966%20211.136%20246.966%20195.136%20170.466C179.136%2093.9663%20268.635%2027.4663%20360.136%205.96628Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M1177.77%20284.946C1165.27%2082.0967%20824.905%20-47.0341%20676.964%20122.666C529.023%20292.367%20438.607%20312.653%20251.194%20266.146C63.7799%20219.639%20-23.7085%20394.287%206.27749%20534.302C36.2638%20674.317%20215.647%20664.917%20359.09%20553.102C502.533%20441.287%20702.454%20357.179%20871.887%20432.381C1041.32%20507.584%201190.26%20487.795%201177.77%20284.946Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
          mask-repeat:no-repeat; mask-position:center; mask-size:100% 100%; }
.wpg-method__grid { display:grid; gap:24px; margin-top:44px; }
@media (min-width:840px){ .wpg-method__grid { grid-template-columns:repeat(3,1fr); } }
.wpg-card { background:#fff; border:1px solid var(--primary-500); border-radius:var(--rounded-xl);
  padding:28px 26px; box-shadow:var(--shadow-sm); }
.wpg-card__ico { width: 60px; height: 60px; border-radius: var(--rounded-full); display: grid; place-items: center;
    background: var(--blue-light); color: var(--blue-dark); margin-bottom: 16px;  margin: auto; margin-bottom: 12px; }
.wpg-card__ico svg { width:24px; height:24px; }
.wpg-card h4 { color:var(--primary-500); font-size:var(--fs-xl); margin-bottom:14px; text-align:center; }
.wpg-card p { color:var(--primary-900); font-size:var(--fs-sm); line-height:1.35; }
.wpg-card p + p { margin-top:12px; }
.wpg-card p b { color:var(--primary-900); }

/* --- Conecta y avanza: acordeón ------------------------------------------ */
.wpg-connect { background:var(--neutral-50); padding:72px 0 80px; }
.wpg-acc { display:grid; gap:16px; margin-top:44px; }
.wpg-acc__item { background:#fff; border:1px solid var(--border); border-radius:var(--rounded-lg); overflow:hidden; }
.wpg-acc__head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; background:#fff; border:0; text-align:left; cursor:pointer;
  font-weight:700; font-size:var(--fs-lg); color:var(--primary-900); }
.wpg-acc__toggle { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--primary-900);
  color:#fff; display:grid; place-items:center; transition:.15s; }
.wpg-acc__toggle svg { width:18px; height:18px; }
.wpg-acc__toggle .ic-x { display:none; }
.wpg-acc__item.is-open .wpg-acc__toggle .ic-x { display:block; }
.wpg-acc__item.is-open .wpg-acc__toggle .ic-plus { display:none; }
.wpg-acc__body { display:none; padding:0 24px 26px; }
.wpg-acc__item.is-open .wpg-acc__body { display:grid; gap:14px; }
/* fila de recurso: tile de logo + texto */
.wpg-res { display:grid; gap:22px; align-items:center; background:var(--primary-50);
  border-radius:var(--rounded-md); padding:20px; }
@media (min-width:680px){ .wpg-res { grid-template-columns:210px 1fr; } }
.wpg-res--text { display:block; }
.wpg-res__logo { border-radius:var(--rounded-md); overflow:hidden; background:#fff;
  aspect-ratio:16/9; display:grid; place-items:center; padding:16px; }
.wpg-res__logo img { max-width:100%; max-height:100%; object-fit:contain; }
.wpg-res__logo--photo { padding:0; }
.wpg-res__logo--photo img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.wpg-res__logo--navy { background:var(--primary-900); }
.wpg-res__text h5 { color:var(--primary-900); font-size:var(--fs-lg); margin-bottom:8px; }
.wpg-res__text p { color:var(--primary-900); font-size:var(--fs-sm); line-height:1.6; }
.wpg-res__text p + p { margin-top:10px; }
.wpg-res__text ul { margin:8px 0; padding-left:20px; display:grid; gap:6px; }
.wpg-res__text ul li { list-style:disc; color:var(--primary-900); font-size:var(--fs-sm); line-height:1.55; }
.wpg-res__text a { display:inline-block; margin-top:10px; color:var(--primary-900); font-size:var(--fs-sm); word-break:break-all; }
.wpg-res--text .wpg-res__text a { word-break:normal; }

/* --- CTA: app + blobs navy ------------------------------------------------ */
.wpg-cta__grid { display:grid; gap:28px; justify-items:center; text-align:center; max-width:760px; margin:0 auto; }
.wpg-cta__media { position:relative; display:flex; justify-content:center; padding:24px; }
.wpg-cta__media img { position:relative; z-index:2; width:100%; border-radius:var(--rounded-lg); box-shadow:var(--shadow-lg); }
/* .wpg-cta__media::before, .wpg-cta__media::after { content:""; position:absolute; z-index:1;
  background:var(--primary-900); border-radius:50%; }
.wpg-cta__media::before { width:120px; height:120px; top:-6px; left:-6px; }
.wpg-cta__media::after { width:150px; height:150px; bottom:-10px; right:-6px; border-radius:50% 50% 50% 0; } */
.wpg-cta__text { padding-bottom: 20px;}
.wpg-cta__text .wpw__title { margin-bottom:14px; }
.wpg-cta__text .wpw__title .accent { color:var(--blue); }
.wpg-cta__text p { color:var(--neutral-400); font-size:var(--fs-lg); line-height:1.7; max-width:52ch; margin:0 auto 26px; }