/* ===== Puntada Verde · secciones nuevas y movimiento ===== */

/* Aparición al bajar */
.rev{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--retraso,0ms)}
.rev.visto{opacity:1;transform:none}

/* Portada: entrada y flotación */
.foto-portada{animation:flotar 6s ease-in-out infinite}
.foto-portada img{aspect-ratio:4/3}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.portada h1,.portada .etiqueta,.portada .intro,.portada .acciones{animation:subir .7s cubic-bezier(.2,.8,.2,1) both}
.portada h1{animation-delay:.08s}.portada .intro{animation-delay:.16s}.portada .acciones{animation-delay:.24s}
@keyframes subir{from{opacity:0;transform:translateY(22px)}}

/* Atacama: foto con paralaje y datos que se mueven al bajar */
.atacama{position:relative;margin-top:40px;border:var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:var(--bosque)}
.atacama-foto{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform:translateY(calc((var(--p,.5) - .5) * -16%));will-change:transform}
.atacama::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,41,28,0) 30%,rgba(16,41,28,.72) 100%);z-index:1}
.atacama-lugar{position:absolute;top:18px;left:18px;z-index:2}
.atacama-datos{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dato{background:var(--blanco);border:var(--borde);border-radius:16px;box-shadow:4px 4px 0 var(--bosque);padding:20px 22px;
  opacity:var(--e,1);
  transform:translate(calc(var(--lado,0) * (1 - var(--e,1)) * 90px),calc((1 - var(--e,1)) * 70px + (.5 - var(--p,.5)) * var(--vel,0px)));
  will-change:transform}
.dato.brote{background:var(--brote)}
.dato p{font-size:.98rem}

/* Galería nueva */
.galeria{grid-template-columns:repeat(3,1fr)}
.galeria .marco img{aspect-ratio:auto;height:300px;min-height:0;transition:transform .5s ease}
.galeria .marco:hover img{transform:scale(1.05)}
.galeria .marco{overflow:hidden}
.galeria .ancha{grid-column:span 2}
.galeria .marco figcaption{position:relative;z-index:1}

/* Clientes */
.clientes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.cliente{display:flex;flex-direction:column;gap:12px;min-height:220px;justify-content:space-between}
.cliente h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.cinta-rubros{margin-top:40px;border-block:var(--borde);background:var(--bosque);color:var(--lino);overflow:hidden;white-space:nowrap;padding:14px 0}
.cinta-rubros div{display:inline-block;animation:correr 26s linear infinite;font-family:"Lilita One",sans-serif;text-transform:uppercase;font-size:1.25rem;letter-spacing:.04em}
.cinta-rubros span{margin:0 22px}
.cinta-rubros i{font-style:normal;color:var(--brote)}
@keyframes correr{to{transform:translateX(-50%)}}

/* Respaldo: qué recibe la empresa */
.respaldo{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;background:var(--blanco);border:var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.respaldo div{padding:22px 24px;border-right:2px dashed var(--bosque)}
.respaldo div:last-child{border-right:0}
.respaldo span{display:block;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hoja);margin-bottom:8px}
.respaldo b{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;font-size:1.2rem;line-height:1.1}
.respaldo-nota{margin-top:14px;font-size:.9rem;max-width:80ch}
@media (max-width:900px){.respaldo{grid-template-columns:1fr}.respaldo div{border-right:0;border-bottom:2px dashed var(--bosque)}.respaldo div:last-child{border-bottom:0}}

/* Sello verde */
.sello-zona{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;margin-top:40px;align-items:start}
.sello-caja{text-align:center;position:sticky;top:96px}
.sello{width:min(300px,80%);margin:0 auto 18px;display:block}
.sello .aro{transform-origin:center;transform-box:fill-box;animation:girar 22s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.sellos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nota{margin-top:22px;font-size:.92rem;padding:14px 18px;border:2px dashed var(--bosque);border-radius:14px;background:rgba(255,255,255,.55)}

/* Huella y planeta */
.huella{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.huella-planeta{position:sticky;top:110px;color:var(--brote)}
.planeta svg{display:block;width:100%;height:auto;overflow:visible}
.planeta .tierra{transform:translateX(var(--tx,0px))}
.planeta .orbita{transform:rotate(var(--rot,0deg));transform-origin:0 0}
.palabra{display:block;font-family:"Lilita One",sans-serif;text-transform:uppercase;color:var(--brote);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;margin-top:14px;min-height:1.05em}
.palabra span{display:inline-block;animation:palabra .5s cubic-bezier(.2,.8,.2,1)}
@keyframes palabra{from{opacity:0;transform:translateY(.5em) rotate(-3deg)}}
.medidas{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.medidas li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;background:var(--lino);color:var(--bosque);border:2.5px solid var(--brote);border-radius:14px;padding:13px 16px;font-weight:600}
.medidas li b{display:block;font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;font-size:1.1rem;line-height:1.1}
.medidas li small{font-size:.9rem;font-weight:400}
.medidas svg{width:40px;height:40px}

/* Planeta flotante */
.planeta-flotante{position:fixed;right:16px;bottom:16px;z-index:15;width:74px;height:74px;padding:6px;border-radius:50%;background:var(--lino);border:var(--borde);box-shadow:3px 3px 0 var(--bosque);color:var(--hoja);display:block;transition:transform .15s}
.planeta-flotante:hover{transform:scale(1.08)}

@media (max-width:900px){
  .atacama{min-height:0;padding:16px;padding-top:240px}
  .atacama-datos,.clientes,.sello-zona,.huella{grid-template-columns:1fr}
  .sello-caja,.huella-planeta{position:static}
  .huella-planeta{max-width:300px;margin-inline:auto}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .dato{--lado:0 !important}
}
@media (max-width:560px){
  .galeria,.sellos{grid-template-columns:1fr}
  .galeria .ancha{grid-column:auto}
  .galeria .marco img{height:240px}
  .planeta-flotante{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .foto-portada,.portada h1,.portada .etiqueta,.portada .intro,.portada .acciones,.cinta-rubros div,.sello .aro,.palabra span{animation:none}
  .atacama-foto,.dato{transform:none;opacity:1}
}

/* Fotos en tarjetas */
.con-foto{padding-top:0;overflow:hidden}
.con-foto img{width:calc(100% + 52px);max-width:none;margin:0 -26px 20px;height:170px;object-fit:cover;border-bottom:var(--borde);transition:transform .5s ease}
.con-foto:hover img{transform:scale(1.05)}

/* Fotos de apoyo */
.tira-fotos{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-top:40px}
.tira-fotos img,.impacto-zona .marco img{height:320px;min-height:0;transition:transform .5s ease}
.tira-fotos .marco:hover img,.impacto-zona .marco:hover img{transform:scale(1.05)}
.impacto-zona{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;margin-top:40px;align-items:stretch}
.impacto-zona .marco img{height:100%}
@media (max-width:900px){.tira-fotos,.impacto-zona{grid-template-columns:1fr}.tira-fotos img,.impacto-zona .marco img{height:240px}}

/* Logos de clientes */
.logo-cliente{position:relative;z-index:1;background:#fff;border:var(--borde);border-radius:12px;height:150px;display:grid;place-items:center;padding:12px}
.logo-cliente{overflow:hidden;flex:none}
.logo-cliente img{width:100%;height:122px;object-fit:contain}

/* Aviso de la aplicación */
.app-pronto{margin-top:22px;padding:18px 20px;border:2.5px dashed var(--brote);border-radius:16px;display:grid;gap:10px;justify-items:start;font-size:1.1rem;animation:latir 2.6s ease-in-out infinite}
@keyframes latir{50%{box-shadow:0 0 0 8px rgba(166,227,181,.18)}}
@media (prefers-reduced-motion:reduce){.app-pronto{animation:none}}

/* ===== Naranjo reflectante (acento) ===== */
:root{--naranjo:#F26A1B;--reflectante:#C9CED1}
.btn:not(.sec){background:var(--naranjo);color:var(--bosque)}
.num{color:var(--naranjo) !important;opacity:1 !important}
.cifra{color:var(--naranjo)}
.dato.brote{background:var(--naranjo)}
.chapa{background:var(--naranjo)}
.palabra{color:var(--naranjo)}
.planeta-flotante{color:var(--naranjo)}
.huella-planeta{color:var(--naranjo)}
.canal{box-shadow:5px 5px 0 var(--naranjo)}
.canal:hover{box-shadow:2px 2px 0 var(--naranjo)}
.canal em{color:#B8480A}
.app-pronto{border-color:var(--naranjo)}
.pasos li::before{color:#B8480A}
.respaldo span,.valores b{color:#B8480A}
.nav nav a:not(.btn):hover{color:#B8480A}
/* Franjas tipo cinta reflectante */
.tarjeta.destacado{background-color:var(--naranjo);color:var(--bosque);
  background-image:linear-gradient(var(--reflectante),var(--reflectante)),linear-gradient(var(--reflectante),var(--reflectante));
  background-size:100% 12px;background-repeat:no-repeat;background-position:0 16px,0 calc(100% - 16px);padding:52px 26px}
.destacado.cosida::after{display:none}
.cinta-rubros{background:var(--naranjo);color:var(--bosque);border-block:var(--borde);
  box-shadow:inset 0 9px 0 var(--reflectante),inset 0 -9px 0 var(--reflectante);padding:24px 0}
.cinta-rubros i{color:var(--lino)}
.pildora{background:var(--naranjo)}
footer{border-top:10px solid var(--naranjo)}


/* ===== Secciones: textura de tela ===== */
/* Textura de tela */
body{background-image:repeating-linear-gradient(0deg,rgba(16,41,28,.04) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(16,41,28,.04) 0 1px,transparent 1px 4px)}
.portada,.franja-brote{background-image:repeating-linear-gradient(45deg,rgba(16,41,28,.05) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(16,41,28,.05) 0 1px,transparent 1px 5px)}
.franja-bosque{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)}

.portada,.franja-brote,.franja-bosque{position:relative}
.franja-bosque{z-index:1}
section{padding:104px 0}

/* Tarjetas derechas y de distintos tamaños */
.rejilla>.tarjeta,.galeria>.marco,.clientes>.tarjeta,.sellos>.tarjeta,.pasos>li,.tira-fotos>.marco,.contacto-botones>.canal,.medidas>li{transition:rotate .25s ease,scale .25s ease,opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .12s}
.pasos>li:nth-child(odd){translate:0 -6px}
.pasos>li:nth-child(even){translate:0 8px}
.medidas>li:nth-child(even){margin-left:18px}
.rejilla>.tarjeta:hover,.galeria>.marco:hover,.clientes>.tarjeta:hover,.sellos>.tarjeta:hover,.pasos>li:hover,.tira-fotos>.marco:hover,.contacto-botones>.canal:hover{scale:1.03;z-index:3}
.rejilla>.tarjeta,.galeria>.marco,.clientes>.tarjeta,.sellos>.tarjeta{position:relative}
/* Alturas escalonadas */
.rejilla.c4>.tarjeta:nth-child(even),.clientes>.tarjeta:nth-child(2){margin-top:34px}
.rejilla.c4>.tarjeta:nth-child(odd),.clientes>.tarjeta:nth-child(odd){margin-bottom:34px}
.rejilla.c3>.tarjeta:nth-child(2){margin-top:26px}
.galeria>.marco:nth-child(even){margin-top:22px}
.sellos>.tarjeta:nth-child(even){margin-top:26px}

@media (max-width:900px){
  .rejilla.c4>.tarjeta,.clientes>.tarjeta,.rejilla.c3>.tarjeta,.galeria>.marco,.sellos>.tarjeta{margin-top:0 !important;margin-bottom:0 !important}
  .medidas>li:nth-child(even){margin-left:0}
  .pasos>li{translate:none !important}
}