/* ===========================================================
   hobunny · hoja de estilo única
   Paleta, tipografía y formas de la marca. No hace falta tocarla
   para cambiar textos o fotos: eso se hace en los .html
   =========================================================== */

:root{
  /* colores de la marca */
  --blanco:#FFFFFF;
  --nieve:#F8F8F7;
  --niebla-clara:#EFEFEE;
  --niebla:#DCDCDA;
  --gris-medio:#8C8C8A;
  --gris-texto:#5A5A58;
  --negro:#1C1C1C;
  --salvia-clara:#DCE3D9;
  --salvia:#7E9179;
  --salvia-profunda:#55684F;
  --arena-clara:#EDE6DC;

  /* curvas: todo en la marca es redondo */
  --r-chico:14px;
  --r-medio:22px;
  --r-grande:32px;
  --r-arco:48% 48% 26px 26px;
  --r-pastilla:999px;

  --ancho:1180px;
  --sombra:0 4px 24px rgba(28,28,28,.07);
  --sombra-alta:0 10px 40px rgba(28,28,28,.12);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- tipografía ---------- */
.q,h1,h2,h3{font-family:'Quicksand',sans-serif;font-weight:300;letter-spacing:.01em;line-height:1.15;margin:0}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,4vw,2.2rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:400}
.script{font-family:'Parisienne',cursive;font-weight:400}
.antetitulo{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-texto)}
.chico{font-size:.82rem;line-height:1.55;color:var(--gris-texto)}
.parrafo{font-size:1rem;line-height:1.7;color:var(--gris-texto);max-width:56ch}
strong{font-weight:700}

/* ---------- estructura ---------- */
.envase{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
section{padding:clamp(40px,7vw,78px) 0}
.cabecera-sec{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;margin-bottom:clamp(18px,3vw,28px)}

/* ---------- barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--niebla);
}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:var(--ancho);margin:0 auto}
.barra .marca img{width:118px}
.menu{display:flex;gap:26px;align-items:center;font-size:.9rem}
.menu a{padding:6px 0;border-bottom:1.5px solid transparent}
.menu a:hover{border-color:var(--negro)}
.hamburguesa{display:none;width:44px;height:44px;border-radius:var(--r-pastilla);align-items:center;justify-content:center}
.hamburguesa span{display:block;width:20px;height:1.6px;background:var(--negro);position:relative}
.hamburguesa span::before,.hamburguesa span::after{content:'';position:absolute;left:0;width:20px;height:1.6px;background:var(--negro)}
.hamburguesa span::before{top:-6px}.hamburguesa span::after{top:6px}

@media (max-width:820px){
  .menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--blanco);border-bottom:1px solid var(--niebla);
    padding:6px 20px 18px;display:none;
  }
  .menu.abierto{display:flex}
  .menu a{width:100%;padding:13px 0;border-bottom:1px solid var(--niebla)}
  .menu a:last-child{border-bottom:none}
  .hamburguesa{display:flex}
  .barra-in{position:relative}
}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--negro);color:var(--blanco);
  border-radius:var(--r-pastilla);
  padding:15px 30px;font-size:.92rem;font-weight:700;letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:48px;
}
.boton:hover{transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.boton.verde{background:var(--salvia-profunda)}
.boton.linea{background:transparent;color:var(--negro);border:1.5px solid var(--negro)}
.boton.bloque{width:100%}
.boton[disabled]{opacity:.4;pointer-events:none}

/* ---------- formas curvas ---------- */
.arco{border-radius:var(--r-arco);overflow:hidden}
.redondo{border-radius:50%;overflow:hidden;aspect-ratio:1}
.tarjeta{border-radius:var(--r-grande);overflow:hidden;background:var(--blanco);border:1px solid var(--niebla)}
.suave{border-radius:var(--r-medio);overflow:hidden}
.marco-foto{background:var(--niebla-clara);position:relative}
.marco-foto img{width:100%;height:100%;object-fit:cover}

/* ---------- portada ---------- */
.portada{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);align-items:center;padding-top:clamp(24px,4vw,44px)}
@media (min-width:900px){ .portada{grid-template-columns:1fr 1.05fr} }
.portada-foto{aspect-ratio:4/3.4}
@media (min-width:900px){ .portada-foto{aspect-ratio:auto;height:min(72vh,560px)} }
.portada .pie-lista{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.84rem;color:var(--gris-texto)}
.portada .pie-lista span{display:inline-flex;align-items:center;gap:7px}
.punto{width:5px;height:5px;border-radius:50%;background:var(--salvia);flex:none}

/* ---------- rejilla de animales ---------- */
.animales{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:clamp(12px,2.4vw,22px)}
@media (min-width:760px){ .animales{grid-template-columns:repeat(5,1fr)} }
.animal{text-align:center}
.animal .redondo{border:1px solid var(--niebla);transition:transform .18s ease}
.animal:hover .redondo{transform:scale(1.03)}
.animal .nom{margin-top:10px;font-size:.92rem}
.animal .desde{font-size:.76rem;color:var(--gris-texto)}

/* ---------- escala ---------- */
.escala{background:var(--nieve);border-radius:var(--r-grande);padding:clamp(20px,4vw,38px)}
.escala-fila{
  /* TODO sale de aquí: 1 cm = --cm px. Cambia este número y se reacomoda solo. */
  --cm:clamp(1.5px,.4vw,3.4px);
  display:flex;gap:clamp(10px,2vw,20px);align-items:flex-end;overflow-x:auto;padding-bottom:6px;
}
.escala-item{flex:0 0 auto;width:calc(var(--cm) * var(--largo));min-width:34px;text-align:center}
.escala-item .marco-foto{border-radius:clamp(8px,calc(var(--cm) * var(--largo) * .16),22px)}
.escala-item .rotulo{margin-top:10px;font-weight:700;font-size:.82rem;line-height:1.3}
/* los rótulos no estiran la caja: se centran y pueden sobresalir */
.escala-item .rotulo,.escala-item .chico{width:max-content;max-width:150px;margin-left:auto;margin-right:auto}
.bebe{height:calc(var(--cm) * 50);width:auto;display:block;margin:0 auto;color:var(--negro)}

/* ---------- paquetes ---------- */
.paquetes{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.4vw,22px)}
@media (min-width:720px){ .paquetes{grid-template-columns:repeat(3,1fr)} }
.paquete{display:flex;flex-direction:column}
.paquete .tiras{display:flex;gap:4px;padding:4px;background:var(--nieve);height:clamp(96px,17vw,136px)}
.paquete .tiras .marco-foto{flex:1;aspect-ratio:auto;height:100%;border-radius:var(--r-chico)}
.paquete .cuerpo{flex:1;display:flex;flex-direction:column}
.paquete .cuerpo .precio-fila{margin-top:auto;padding-top:10px}
.paquete .cuerpo{padding:16px 18px 20px}
.paquete.destacado{border-color:var(--salvia-profunda);border-width:1.5px}
.precio{font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.35rem}
.ahorro{font-size:.8rem;color:var(--salvia-profunda)}

/* ---------- franja verde ---------- */
.franja{background:var(--salvia-profunda);color:var(--blanco);border-radius:var(--r-grande);
        padding:clamp(24px,4vw,44px);display:grid;gap:clamp(20px,3vw,34px);align-items:center}
@media (min-width:860px){ .franja{grid-template-columns:1.1fr 1fr} }
.franja .parrafo{color:var(--blanco);opacity:.92}
.franja .marco-foto{border-radius:var(--r-medio);aspect-ratio:3/2}

/* ---------- prueba social ---------- */
.clientes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.clientes .marco-foto{border-radius:var(--r-medio);aspect-ratio:1}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--niebla);padding:clamp(30px,5vw,52px) 0 34px;margin-top:clamp(30px,5vw,50px)}
.pie-rejilla{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:760px){ .pie-rejilla{grid-template-columns:1.2fr 1fr 1fr 1.3fr} }
.pie h4{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-texto);margin:0 0 12px}
.pie ul{list-style:none;margin:0;padding:0;font-size:.88rem}
.pie li{margin-bottom:8px}
.pie li a:hover{text-decoration:underline}
.redes{display:flex;gap:10px;margin-top:6px}
.red{width:44px;height:44px;border-radius:50%;border:1px solid var(--niebla);display:flex;align-items:center;justify-content:center;transition:all .16s ease}
.red:hover{border-color:var(--negro);transform:translateY(-1px)}
.red svg{width:19px;height:19px}
.pie-abajo{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
           margin-top:34px;padding-top:20px;border-top:1px solid var(--niebla);font-size:.78rem;color:var(--gris-texto)}
/* ---------- marca de agua: el conejo, grande y muy tenue ---------- */
.con-agua{position:relative;overflow:hidden}
.con-agua > *{position:relative;z-index:1}
.con-agua::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  background:url(simbolo.svg) no-repeat center/contain;
  opacity:.06;
}
/* variantes de posición */
.agua-dcha::after{right:-6%;bottom:-14%;width:clamp(180px,34vw,380px);height:clamp(180px,34vw,380px)}
.agua-izda::after{left:-7%;top:-16%;width:clamp(160px,30vw,330px);height:clamp(160px,30vw,330px)}
.agua-centro::after{left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(220px,46vw,520px);height:clamp(220px,46vw,520px)}
/* sobre el verde va el conejo en blanco y un poco más presente */
.franja.con-agua::after{background-image:url(simbolo-blanco.svg);opacity:.13}



/* ---------- botón flotante de WhatsApp ---------- */
.flotante{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:54px;height:54px;border-radius:50%;
  background:var(--salvia-profunda);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-alta);
}
.flotante svg{width:26px;height:26px}
@media (min-width:900px){ .flotante{right:26px;bottom:26px;width:58px;height:58px} }

/* ===========================================================
   CONFIGURADOR
   =========================================================== */
.pasos{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:14px 0;margin-bottom:6px}
.paso-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 13px 7px 7px;border-radius:var(--r-pastilla);
           border:1px solid var(--niebla);font-size:.78rem;color:var(--gris-medio);background:#fff;white-space:nowrap}
@media (max-width:460px){ .paso-chip{font-size:.72rem;padding:6px 11px 6px 6px} .pasos{gap:5px} }
.paso-chip .n{width:22px;height:22px;border-radius:50%;background:var(--niebla);color:var(--gris-texto);
              display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}
.paso-chip.activo{border-color:var(--negro);color:var(--negro)}
.paso-chip.activo .n{background:var(--negro);color:#fff}
.paso-chip.hecho .n{background:var(--salvia-profunda);color:#fff}
.paso-chip.hecho{color:var(--negro)}

.panel{display:none}
.panel.visible{display:block}

.config{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,36px);align-items:start}
@media (min-width:920px){ .config{grid-template-columns:1.05fr 1fr} .config .vista{position:sticky;top:86px} }
/* en celular y tablet la vista previa va arriba: es lo que la gente quiere ver */
@media (max-width:919px){
  .config .vista{order:-1}
  /* la previa ocupa media pantalla: se escribe y se ve al mismo tiempo */
  .vista-marco{max-height:min(44vh,400px)}
  .miniaturas button{max-width:86px}
}

.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.opcion{border:1.5px solid var(--niebla);border-radius:var(--r-medio);padding:10px;background:#fff;text-align:center;
        cursor:pointer;transition:border-color .15s ease,transform .15s ease;min-height:48px}
.opcion:hover{transform:translateY(-1px)}
.opcion.elegida{border-color:var(--negro)}
.opcion.apagada{opacity:.34;pointer-events:none}
.opcion .marco-foto{border-radius:var(--r-chico);aspect-ratio:1;margin-bottom:8px}
.opcion .t{font-size:.88rem;font-weight:600}
.opcion .s{font-size:.74rem;color:var(--gris-texto)}
.opcion .p{font-family:'Quicksand',sans-serif;font-size:1rem;margin-top:4px}

.hilos{display:flex;flex-wrap:wrap;gap:12px}
.hilo{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;position:relative;padding:0}
.hilo.elegida{outline:2px solid var(--negro);outline-offset:3px}
.hilo.apagada{opacity:.25;pointer-events:none}

.campo{width:100%;border:1.5px solid var(--negro);border-radius:var(--r-medio);padding:14px 18px;
       font-family:'Parisienne',cursive;font-size:1.7rem;line-height:1.3;background:#fff;color:var(--negro)}
.campo:focus{outline:none;box-shadow:0 0 0 3px rgba(85,104,79,.18)}
.contador{font-size:.76rem;color:var(--gris-texto);text-align:right;margin-top:6px}
.aviso-ok{font-size:.82rem;color:var(--salvia-profunda);margin-top:8px}
.aviso-no{font-size:.82rem;color:#8C3A3A;margin-top:8px}

.vista-marco{position:relative;border-radius:var(--r-arco);overflow:hidden;background:var(--salvia-clara);aspect-ratio:1;max-height:min(62vh,520px);margin:0 auto;width:100%}
.vista-marco img{width:100%;height:100%;object-fit:cover}
.globo{position:absolute;bottom:16px;right:16px;background:#fff;border-radius:var(--r-pastilla);
       padding:10px 22px;max-width:78%;
       box-shadow:0 8px 26px rgba(28,28,28,.20);border:1px solid rgba(28,28,28,.07)}
.globo .nombre{font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.flechas button{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:#fff;box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.flechas .izq{left:12px}.flechas .der{right:12px}
.miniaturas{display:flex;gap:8px;margin-top:10px}
.miniaturas button{flex:1;border-radius:var(--r-chico);overflow:hidden;padding:0;border:2px solid transparent;aspect-ratio:1}
.miniaturas button.elegida{border-color:var(--negro)}
.miniaturas img{width:100%;height:100%;object-fit:cover}

.resumen{
  position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--niebla);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  margin:26px -20px 0;
}
.resumen-in{max-width:var(--ancho);margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.resumen .que{font-size:.84rem;font-weight:600}
.resumen .cuando{font-size:.78rem;color:var(--salvia-profunda)}
.resumen .der{display:flex;align-items:center;gap:14px;margin-left:auto}

.cuenta{border-radius:var(--r-grande);border:1px solid var(--niebla);padding:20px}
.cuenta .linea{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;margin-bottom:8px}
.cuenta .total{display:flex;justify-content:space-between;align-items:baseline;
                margin-top:14px;padding-top:14px;border-top:1px solid var(--niebla)}

.interruptor{display:flex;gap:10px;flex-wrap:wrap}
.interruptor .opcion{flex:1;min-width:150px}
textarea.nota{width:100%;border:1px solid var(--niebla);border-radius:var(--r-medio);padding:14px;
              font-family:inherit;font-size:.92rem;line-height:1.6;background:var(--nieve);resize:vertical;min-height:96px}

.saltar{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* accesibilidad: foco visible */
:focus-visible{outline:2px solid var(--salvia-profunda);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}