/* Cotizador: verde profundo sobre crema.
   Todas las clases van con prefijo c- y la paleta se define en .cotizador,
   asi el bloque no pelea con los estilos de la landing (landing.css). */

.cotizador,
.c-velo{
  --c-verde:#2F5233;
  --c-verde-750:#3B6540;
  --c-verde-suave:#E8EFE6;
  --c-verde-borde:#CFDCC9;
  --c-crema:#F6F3EC;
  --c-papel:#FFFFFF;
  --c-tinta:#243027;
  --c-tinta-2:#5C6B5E;
  --c-tinta-3:#94A296;
  --c-linea:#E4E0D6;
  --c-error:#B4442F;
  --c-radio:14px;
  --c-sombra:0 1px 2px rgba(36,48,39,.05), 0 18px 44px -28px rgba(36,48,39,.35);
}

/* display:grid/flex gana sobre el atributo hidden: hay que forzarlo. */
[hidden]{display:none !important}

.cotizador{
  position:relative;
  overflow:hidden;
  background:var(--c-crema);
  color:var(--c-tinta);
  font-size:15px;
  line-height:1.5;
  padding:70px 0 80px;
}

/* Hojas decorativas de las esquinas */
.c-hojas{position:absolute;z-index:0;pointer-events:none;opacity:.5}
.c-hojas svg{width:100%;height:100%;fill:#C9D8C4;stroke:none}
.c-hojas-arriba{top:-70px;left:-90px;width:340px;height:340px;transform:rotate(-14deg)}
.c-hojas-abajo{bottom:-80px;right:-90px;width:380px;height:380px;transform:rotate(8deg)}
@media (max-width:900px){.c-hojas{opacity:.35;width:220px;height:220px}}

.c-envoltura{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------- intro --- */
.c-intro{text-align:center;padding:0 0 32px}
.c-etiqueta{display:inline-block;background:var(--c-verde-suave);color:var(--c-verde);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px}
.c-intro h2{font-size:clamp(28px,4.4vw,40px);line-height:1.15;margin:16px 0 10px;
  letter-spacing:-.02em;font-weight:800}
.c-intro p{margin:0 auto;max-width:52ch;color:var(--c-tinta-2);font-size:15.5px}

/* ------------------------------------------------------------ tarjeta --- */
.c-tarjeta{background:var(--c-papel);border-radius:22px;box-shadow:var(--c-sombra);
  overflow:hidden}
.c-paso{padding:30px 34px}
.c-paso + .c-paso{border-top:1px solid var(--c-linea)}

.c-paso-cabeza{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.c-icono{flex:none;width:52px;height:52px;border-radius:50%;background:var(--c-verde);
  display:grid;place-items:center}
.c-icono svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.c-paso-cabeza h3{margin:2px 0 3px;font-size:21px;letter-spacing:-.01em;font-weight:700}
.c-paso-cabeza p{margin:0;color:var(--c-tinta-2);font-size:14px}

/* ------------------------------------------------------------- campos --- */
.c-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.c-campo.c-ancho{grid-column:1/-1}
@media (max-width:760px){.c-rejilla{grid-template-columns:1fr}.c-paso{padding:24px 20px}}

.c-campo label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;
  color:var(--c-tinta)}
.c-campo label i{color:var(--c-error);font-style:normal}
.c-campo label em{font-style:normal;font-weight:400;color:var(--c-tinta-3)}

.c-control{position:relative;display:flex;align-items:center;
  background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--c-radio);
  transition:border-color .15s ease, box-shadow .15s ease}
.c-control:focus-within{border-color:var(--c-verde);box-shadow:0 0 0 3px rgba(47,82,51,.1)}
.c-control input,.c-control select,.c-control textarea{
  width:100%;border:0;outline:0;background:transparent;color:var(--c-tinta);
  font-family:inherit;font-size:15px;padding:14px 16px;border-radius:var(--c-radio);
}
.c-control textarea{resize:vertical;min-height:96px;line-height:1.55}
.c-control input::placeholder,.c-control textarea::placeholder{color:var(--c-tinta-3)}
.c-control select{appearance:none;cursor:pointer;color:var(--c-tinta)}
.c-con-icono input,.c-con-icono select{padding-left:46px}
.c-con-icono select{padding-right:44px}
.c-ic{position:absolute;left:16px;width:19px;height:19px;fill:none;
  stroke:var(--c-tinta-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}
.c-flecha{position:absolute;right:15px;width:19px;height:19px;fill:none;
  stroke:var(--c-tinta-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}

.c-control.mal{border-color:var(--c-error);box-shadow:0 0 0 3px rgba(180,68,47,.09)}
.c-error{display:none;color:var(--c-error);font-size:12.5px;margin-top:6px}
.c-error.visible{display:block}

/* Aviso del pedido mínimo */
.c-nota{display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--c-verde-suave);border-radius:12px;padding:12px 15px;
  font-size:13.5px;color:var(--c-tinta)}
.c-nota svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--c-verde);
  stroke-width:1.8;stroke-linecap:round}

/* Opciones de diseño */
.c-opcion{display:flex;align-items:center;gap:12px;border:1px solid var(--c-linea);
  border-radius:var(--c-radio);padding:13px 16px;margin-bottom:10px;cursor:pointer;
  font-weight:400;font-size:15px;transition:border-color .15s ease,background .15s ease}
.c-opcion:hover{border-color:var(--c-verde-borde);background:#FCFDFB}
.c-opcion input{position:absolute;opacity:0;width:0;height:0}
.c-marca-radio{flex:none;width:20px;height:20px;border-radius:50%;
  border:1.6px solid #C9CEC6;display:inline-block;position:relative;
  transition:border-color .15s ease}
.c-opcion input:checked + .c-marca-radio{border-color:var(--c-verde);border-width:6px}
.c-opcion:has(input:checked){border-color:var(--c-verde);background:var(--c-verde-suave)}
.c-opcion input:focus-visible + .c-marca-radio{box-shadow:0 0 0 3px rgba(47,82,51,.18)}

/* -------------------------------------------------------------- pie ----- */
.c-pie-form{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding:26px 34px 32px;background:#FBFAF6;
  border-top:1px solid var(--c-linea)}
.c-lema-pie{display:flex;align-items:center;gap:14px}
.c-lema-pie img{width:52px;height:auto;flex:none}
.c-lema-pie p{margin:0;font-size:15px;line-height:1.35;color:var(--c-tinta)}
.c-lema-pie b{font-weight:700}
.c-zona-boton{text-align:center;flex:1;min-width:280px}
.c-aclaracion{margin:12px 0 0;color:var(--c-tinta-2);font-size:13px;line-height:1.5}

.c-boton{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--c-verde);color:#fff;border:0;border-radius:999px;
  padding:17px 40px;font-family:inherit;font-size:15.5px;font-weight:700;
  letter-spacing:.08em;cursor:pointer;text-decoration:none;
  transition:background .15s ease, transform .12s ease}
.c-boton:hover{background:var(--c-verde-750);transform:translateY(-1px)}
.c-boton:active{transform:translateY(0)}
.c-boton:disabled{opacity:.6;cursor:progress;transform:none}
.c-boton svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ----------------------------------------------------------- dialogo --- */
.c-velo{position:fixed;inset:0;z-index:100;background:rgba(36,48,39,.55);
  display:grid;place-items:center;padding:24px;
  font-family:'Montserrat',system-ui,sans-serif;color:var(--c-tinta)}
.c-dialogo{background:var(--c-papel);border-radius:22px;box-shadow:var(--c-sombra);
  padding:38px 34px 30px;max-width:430px;width:100%;text-align:center}
.c-palomita{width:66px;height:66px;border-radius:50%;background:var(--c-verde-suave);
  display:grid;place-items:center;margin:0 auto 18px}
.c-palomita svg{width:30px;height:30px;fill:none;stroke:var(--c-verde);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.c-dialogo h3{margin:0 0 10px;font-size:21px;letter-spacing:-.01em}
.c-dialogo p{margin:0 0 22px;color:var(--c-tinta-2);font-size:14.5px}
.c-dialogo .c-boton{width:100%}
.c-ic-wa{stroke-width:1.6}
.c-volver{display:block;width:100%;margin-top:12px;background:none;border:0;
  color:var(--c-tinta-2);font-family:inherit;font-size:14px;cursor:pointer;
  padding:8px;text-decoration:underline}
.c-dialogo small{display:block;margin-top:14px;color:var(--c-tinta-3);font-size:12px}

@media (max-width:760px){
  .cotizador{padding:50px 0 60px}
  .c-pie-form{padding:24px 20px 28px}
  .c-zona-boton{min-width:0}
  .c-boton{width:100%;padding:16px 24px}
}