/* Alta en la comunidad de Plantes Bada.
 *
 * Quien abre esto ya es cliente: no hay que venderle la marca, hay que decirle en dos
 * lineas que hace y que toque un boton. El criterio de diseno es que lo entienda una
 * persona de 80 anos en un movil, a la primera.
 *
 * Por eso: nada de fotos, tipografia grande, mucho aire, un solo color de acento y una
 * sola accion por pantalla.
 */

/* Autoalojadas a proposito: cargarlas de Google mandaria la IP del cliente a un tercero,
   justo en la pagina donde se recoge su consentimiento. */
@font-face{
  font-family:'Fraunces';src:url('/tipos/fraunces.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Sans';src:url('/tipos/dmsans.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
}

:root{
  --verde:#123524;
  --verde-claro:#1d5138;
  --lima:#c3e956;
  --crema:#f6f3ea;
  --papel:#fff;
  --tinta:#16241c;
  --gris:#61705f;
  --borde:#e2e0d5;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--crema);color:var(--tinta);
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

.wrap{max-width:520px;margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- cabecera */
.barra{background:var(--verde);color:#fff;padding:15px 0}
.marca{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;text-align:center;
}

/* ---------------------------------------------------------------- portada */
.portada{background:var(--verde);color:#fff;padding:16px 0 62px;text-align:center}
.portada h1{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(33px,8.5vw,46px);line-height:1.1;letter-spacing:-.01em;
  margin-bottom:18px;
}
.portada h1 em{font-style:normal;color:var(--lima)}
.portada p{font-size:17.5px;line-height:1.5;color:#cfdcd0;max-width:340px;margin:0 auto}

/* Corte curvo entre la portada y el papel: da sensacion de pagina cuidada sin adornos. */
.curva{background:var(--verde);height:34px;margin-bottom:-1px}
.curva div{background:var(--crema);height:34px;border-radius:34px 34px 0 0}

/* ---------------------------------------------------------------- pasos */
.pasos{padding:40px 0 8px}
.paso{display:flex;gap:17px;align-items:baseline;margin-bottom:22px}
.paso .n{
  font-family:'Fraunces',Georgia,serif;font-size:30px;line-height:1;
  color:var(--lima);-webkit-text-stroke:.6px var(--verde-claro);
  flex:none;width:30px;
}
.paso b{display:block;font-size:18px;font-weight:700;margin-bottom:1px}
.paso span{color:var(--gris);font-size:16px}

/* ---------------------------------------------------------------- formulario */
.ficha{
  background:var(--papel);border:1px solid var(--borde);border-radius:20px;
  padding:26px 22px;margin:12px 0 26px;
}
.rotulo{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin:0 0 9px;
}
.campo{
  width:100%;font-family:inherit;font-size:17px;color:var(--tinta);
  background:var(--crema);border:1.5px solid transparent;border-radius:12px;
  padding:16px 15px;margin-bottom:13px;transition:border-color .15s,background .15s;
}
.campo::placeholder{color:#9aa79a}
.campo:focus{outline:none;background:var(--papel);border-color:var(--verde)}

.separa{height:1px;background:var(--borde);margin:24px 0}

/* Filas de categoria: area de toque grande y estado muy evidente, que es lo que
   necesita alguien que no tiene practica con moviles. */
.opcion{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1.5px solid var(--borde);border-radius:13px;
  padding:15px 16px;margin-bottom:9px;transition:.14s;
}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion .caja{
  width:25px;height:25px;border-radius:7px;border:2px solid #c8ccc0;
  flex:none;display:flex;align-items:center;justify-content:center;
  transition:.14s;
}
.opcion .caja::after{
  content:'';width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.14s;margin-top:-3px;
}
.opcion .tx{font-size:17px;font-weight:500}
.opcion:has(input:checked){border-color:var(--verde);background:#f2f7f2}
.opcion:has(input:checked) .caja{background:var(--verde);border-color:var(--verde)}
.opcion:has(input:checked) .caja::after{opacity:1;transform:rotate(-45deg) scale(1)}
.opcion input:focus-visible ~ .caja{box-shadow:0 0 0 3px rgba(18,53,36,.25)}

/* ---------------------------------------------------------------- aceptar y legal */
.acepta{display:flex;gap:13px;align-items:flex-start;cursor:pointer;margin-top:4px}
.acepta input{position:absolute;opacity:0;pointer-events:none}
.acepta .caja{
  width:25px;height:25px;border-radius:7px;border:2px solid #c8ccc0;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;transition:.14s;
}
.acepta .caja::after{
  content:'';width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.14s;margin-top:-3px;
}
.acepta:has(input:checked) .caja{background:var(--verde);border-color:var(--verde)}
.acepta:has(input:checked) .caja::after{opacity:1;transform:rotate(-45deg) scale(1)}
.acepta span{font-size:15.5px;line-height:1.45;color:var(--gris)}

details{margin-top:16px}
summary{
  font-size:14.5px;color:var(--gris);cursor:pointer;list-style:none;
  text-decoration:underline;text-underline-offset:3px;
}
summary::-webkit-details-marker{display:none}
.letra-pequena{
  margin-top:14px;padding-top:16px;border-top:1px solid var(--borde);
  font-size:13.5px;line-height:1.6;color:var(--gris);
}
.letra-pequena p{margin-bottom:11px}
.letra-pequena b{color:var(--tinta)}

/* ---------------------------------------------------------------- boton */
.boton{
  display:block;width:100%;font-family:inherit;font-size:18px;font-weight:700;
  background:var(--verde);color:#fff;border:0;border-radius:14px;
  padding:19px;cursor:pointer;transition:.15s;text-align:center;
}
.boton:hover{background:var(--verde-claro)}
.boton:disabled{background:#a9b5a9;cursor:default}

.aviso{
  background:#fff3e0;border:1.5px solid #e8c88d;color:#8a5b12;
  border-radius:13px;padding:14px 16px;font-size:15.5px;font-weight:500;margin-bottom:18px;
}

/* ---------------------------------------------------------------- pantalla final */
.hecho{text-align:center;padding:52px 0 12px}
.tic{
  width:64px;height:64px;border-radius:50%;background:var(--lima);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
}
.tic::after{
  content:'';width:20px;height:11px;border-left:3px solid var(--verde);
  border-bottom:3px solid var(--verde);transform:rotate(-45deg);margin-top:-5px;
}
.hecho h1{
  font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:34px;
  line-height:1.15;margin-bottom:12px;
}
.hecho p{color:var(--gris);font-size:17px;max-width:360px;margin:0 auto}

.lista-grupos{margin:26px 0 0;text-align:left}
.grupo-ok{
  display:flex;align-items:center;gap:13px;background:var(--papel);
  border:1px solid var(--borde);border-radius:13px;padding:16px;margin-bottom:9px;
}
.grupo-ok .marca-ok{
  width:23px;height:23px;border-radius:50%;background:var(--verde);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.grupo-ok .marca-ok::after{
  content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);margin-top:-2px;
}
.grupo-ok .n{font-size:16.5px;font-weight:500;flex:1}
.grupo-ok.pendiente .marca-ok{background:#d8d5c8}
.grupo-ok .accion{font-size:15px;font-weight:700;color:var(--verde);white-space:nowrap}

/* ---------------------------------------------------------------- pie */
.pie{
  background:var(--verde);color:#a9bdac;text-align:center;
  padding:30px 22px 34px;margin-top:46px;font-size:13px;line-height:1.6;
}
.pie b{color:#fff;display:block;font-size:14px;margin-bottom:5px;letter-spacing:.02em}

/* ---------------------------------------------------------------- pantalla final: unirse */
.pie-boton{
  font-size:14px;color:var(--gris);text-align:center;margin-top:13px;line-height:1.45;
}
.apunte{
  font-size:14.5px;color:var(--gris);line-height:1.5;margin-top:22px;
  background:var(--papel);border:1px solid var(--borde);border-radius:13px;padding:15px 16px;
}
.apunte b{color:var(--tinta)}

/* Verde de WhatsApp a proposito: el boton lleva a WhatsApp, y que se parezca ayuda a
   entender que va a pasar antes de tocarlo. */
.ir-grupo{
  display:flex;align-items:center;gap:12px;background:#25d366;color:#fff;
  border-radius:14px;padding:17px 18px;margin-bottom:10px;
  box-shadow:0 4px 14px rgba(37,211,102,.28);transition:.14s;
}
.ir-grupo:hover{background:#1fbb59}
.ir-grupo .nombre{flex:1;font-size:17px;font-weight:600}
.ir-grupo .accion{font-size:16px;font-weight:700;white-space:nowrap}
.ir-grupo .accion::after{content:' ›'}
.ir-grupo.sin-enlace{
  background:#e6e3d8;color:var(--gris);box-shadow:none;
}
.ir-grupo.sin-enlace .accion::after{content:''}