/* Yosé local landing: visual pass, loaded after styles.css. */
:root {
  --forest: #123f35;
  --deep: #0b3028;
  --lime: #d6ed91;
  --paper: #f0f3ee;
  --surface: #e3eae3;
  --ink: #153d33;
  --muted: #526159;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --control-radius: 999px;
}

html { scroll-padding-top: 32px; }
body { background: var(--forest); font-kerning: normal; }
.section-pad { padding-block: clamp(76px, 9vw, 132px); }

/* Quiet, consistent navigation; the action stays easy to find. */
.header {
  height: 88px;
  gap: clamp(22px, 3vw, 48px);
}
.header nav { gap: clamp(20px, 2.5vw, 36px); }
.header nav a,
.header-cta { font-size: 15px; }
.header nav a { transition: color .18s ease; }
.header-cta {
  min-height: 46px;
  padding: 0 18px;
  gap: 12px;
  border-radius: var(--control-radius);
  background: rgba(240, 243, 238, .09);
  transition: background .18s ease, color .18s ease;
}
.header-cta:hover { background: rgba(240, 243, 238, .16); }

/* Buttons share a pill shape; the guided play action leads the story. */
.button {
  min-height: 50px;
  padding: 13px 22px;
  border-radius: var(--control-radius);
  gap: 13px;
  font-size: 15px;
  transition: transform .2s var(--ease), background .18s ease, color .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: scale(.985); }
.button-lime { background: var(--lime); color: #173c31; }
.button-lime:hover { background: #e4f3b6; }
.button-green { background: var(--forest); color: var(--paper); }
.button-green:hover { background: #205448; }

/* More breathing room for copy beside the existing story visual. */

/* The timeline stays readable and marks progress without competing with the phone. */

/* A measured change of surface keeps the same type and spacing system. */

.faq-section h2,
.contact-intro h2 { letter-spacing: -.045em; }

.faq-section { gap: clamp(52px, 8vw, 110px); }
.faq-list details {
  margin-bottom: 8px;
  padding: 10px 22px;
  border-radius: 18px;
  background: #e7ede7;
  transition: background .18s ease;
}
.faq-list details[open] { background: #e1e9e2; }
.faq-list summary { min-height: 48px; font-size: 16px; line-height: 1.4; }
.faq-list summary>span { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #d7e2d8; font-size: 21px; }
.faq-list details p { max-width: 60ch; padding: 0 38px 13px 0; font-size: 15px; line-height: 1.65; }

.contact-section { padding-top: clamp(78px, 8vw, 112px); padding-bottom: clamp(76px, 8vw, 108px); }
.contact-intro { margin-bottom: 48px; }
.contact-intro p { font-size: 17px; line-height: 1.6; }
label { gap: 10px; font-size: 14px; font-weight: 500; }
input {
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 15px;
  background: #e5f0c9;
  transition: background .18s ease;
}
input:focus-visible { background: #f1f7e3; }
.form-bottom { margin-top: 30px; }
.form-bottom>p { font-size: 13px; line-height: 1.55; }
.form-bottom>.button { min-height: 52px; }
#form-result { border-radius: 18px; }
#form-result a { border-radius: var(--control-radius); }
.footer { padding-top: 48px; }
.footer>div>p { font-size: 15px; }
.footer>div>a:last-child { font-size: 14px; }
.footer-note { font-size: 12px; }
.transcript { font-size: 14px; }
.transcript>summary { min-height: 46px; }

@media (max-width: 767px) {
  .section-pad { padding-block: 74px; }
  .header { height: 72px; gap: 12px; }
  .header-cta { min-height: 44px; padding-inline: 14px; font-size: 14px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .faq-section h2 { margin-bottom: 24px; font-size: 34px; }
  .faq-list details { margin-bottom: 7px; padding: 8px 15px; border-radius: 16px; }
  .faq-list summary { min-height: 48px; gap: 12px; font-size: 15px; }
  .faq-list summary>span { width: 30px; height: 30px; flex-basis: 30px; }
  .faq-list details p { padding: 0 5px 12px 0; font-size: 14px; }
  .contact-intro { margin-bottom: 28px; }
  .contact-intro h2 { font-size: 44px; }
  .contact-intro p { margin-top: 16px; font-size: 15px; }
  .form-fields { gap: 18px; }
  label { gap: 8px; font-size: 13px; }
  input { min-height: 50px; padding-inline: 15px; }
  .form-bottom { gap: 18px; margin-top: 22px; }
  .form-bottom>p { font-size: 12px; }
  .form-bottom>.button { min-height: 50px; }
  .footer>div>p { font-size: 14px; }
  .footer>div>a:last-child { font-size: 13px; }
  .footer-note { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
  
}

/* Hero del logo interactivo */
.logo-hero{position:relative;min-height:100svh;display:grid;place-items:center;background:var(--paper);color:var(--forest);padding:110px var(--gutter) 90px;overflow:hidden;touch-action:pan-y}
.logo-hero ~ * .header,body:has(.logo-hero) .header{color:var(--forest)}
.logo-stage{position:absolute;inset:0;pointer-events:none}
.logo-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
.logo-ready .logo-stage canvas{opacity:1}
.logo-fallback{position:absolute;inset:0;display:grid;place-items:center}
.logo-fallback img{width:min(1240px,95%,calc((100svh - 200px)*2));height:auto;object-fit:contain}
.wordmark .brand-logo{width:112px;height:56px;object-fit:contain}
.footer .brand-logo,.funnel-mark .brand-logo,.visits-mark .brand-logo{filter:brightness(0) invert(1)}
.funnel-mark .brand-logo{width:96px;height:48px}
@media(max-width:767px){.wordmark .brand-logo{width:92px;height:46px}.funnel-mark .brand-logo{width:80px;height:40px}}
.logo-ready .logo-fallback{visibility:hidden}
.logo-hero-intro{position:absolute;bottom:68px;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.logo-hero-copy{margin:0;max-width:38ch;font-size:clamp(18px,1.7vw,24px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--forest);text-wrap:balance}
.logo-hero-summary{margin:0;max-width:38ch;font-size:clamp(14px,1.2vw,17px);line-height:1.4;color:var(--muted);text-wrap:balance}
.logo-motion-toggle{min-height:44px;margin-top:12px;padding:10px 0;background:transparent;color:var(--paper);border:0;border-radius:4px;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:12px;cursor:pointer}
.logo-motion-toggle[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.logo-motion-toggle{display:none}}
.logo-hero-down{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center}
.logo-hero-down svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Escena desborde */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.flood{position:relative;background:var(--paper);color:var(--forest)}
.js .flood{height:420svh;min-height:2400px}
.flood-pin{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper);color:var(--forest)}
.js .flood-pin{position:sticky;top:0}
.flood-head{position:relative;z-index:6;display:flex;align-items:flex-start;gap:14px;padding:104px var(--gutter) 0}
.flood-step{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--forest);display:grid;place-items:center;font-size:14px;font-weight:600;margin-top:4px;opacity:0;transition:opacity .3s var(--ease)}
.flood-step:not(:empty){opacity:1}
.flood-caption{margin:0;font-size:clamp(22px,2.6vw,38px);line-height:1.12;letter-spacing:-.03em;font-weight:500;max-width:22ch}
.flood-stage{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:12px}
.flood-worker{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:max(36%,200px);aspect-ratio:240/200;z-index:1}
.flood-worker svg{display:block;width:100%;height:100%}
.flood-reply{position:absolute;left:calc(50% + 34px);bottom:calc(max(36%,200px) + 24px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
/* Typing bubble inspired by the Reply riff, adapted to the scene's scale. */
.flood-reply-bubble,.flood-typing{opacity:0;transform:translateY(12px) scale(.78);transform-origin:10px 100%;transition:opacity .24s var(--ease),transform .32s var(--ease);background:#eef1f5;color:#111418;border-radius:26px 26px 26px 7px;box-shadow:0 6px 18px rgba(16,63,53,.08)}
.flood-reply.show .flood-reply-bubble,.flood-reply.typing .flood-typing{opacity:1;transform:none}
.flood-reply-bubble{position:relative;margin:0;width:88px;height:52px;transition:width .32s var(--ease),opacity .24s var(--ease),transform .32s var(--ease)}
.reply-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .18s ease}
.reply-text{position:absolute;left:18px;top:50%;margin:0;font-size:15px;line-height:20px;white-space:nowrap;opacity:0;transform:translateY(-50%) scale(.92);transform-origin:left center;transition:opacity .2s ease .12s,transform .24s var(--ease) .08s}
.flood-reply.reply-ready .flood-reply-bubble{width:232px}
.flood-reply.reply-ready .reply-dots{opacity:0}
.flood-reply.reply-ready .reply-text{opacity:1;transform:translateY(-50%)}
.flood-typing{display:flex;width:88px;height:52px;gap:8px;align-items:center;justify-content:center}
.reply-dots>span,.flood-typing>span{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:#8e96a3;opacity:.5;animation:flood-dot 1.05s ease-in-out infinite;animation-play-state:paused}
.flood-reply.show:not(.reply-ready) .reply-dots>span,.flood-reply.typing .flood-typing>span{animation-play-state:running}
.reply-dots>span:nth-child(2),.flood-typing>span:nth-child(2){animation-delay:.14s}
.reply-dots>span:nth-child(3),.flood-typing>span:nth-child(3){animation-delay:.28s}
@keyframes flood-dot{0%,60%,100%{opacity:.5;transform:none}30%{opacity:1;transform:translateY(-5px)}}
.flood-bubbles{position:absolute;inset:0;z-index:3;pointer-events:none}
.flood-bubble{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(16,63,53,.12);box-shadow:0 6px 16px rgba(16,63,53,.1);border-radius:18px 18px 18px 6px;padding:7px 14px 7px 8px;white-space:nowrap;font-size:15px;color:var(--forest);will-change:transform}
.flood-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--forest)}
.flood-bubble.is-typing>span:last-child{letter-spacing:.2em}
@media(max-width:767px){.js .flood{height:380svh;min-height:2000px}.flood-head{padding-top:88px;gap:10px}.flood-caption{font-size:21px}.flood-bubble{font-size:13px;padding:6px 12px 6px 7px}.flood-reply{left:auto;right:var(--gutter)}.flood-reply.reply-ready .flood-reply-bubble{width:210px}.reply-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){.js .flood{height:auto;min-height:0}.js .flood-pin{position:relative}.flood-reply-bubble,.flood-typing,.flood-step{transition:none;transform:none}.reply-dots>span,.flood-typing>span{animation:none;opacity:.7}.reply-dots,.reply-text{transition:none}}

/* Pasos 5 a 8 */
.sol-head{display:flex;align-items:flex-start;gap:14px}
.sol-head .flood-step{margin-top:8px}
.sol-head h2{font-size:clamp(30px,3.6vw,56px);line-height:1.06;max-width:16ch}

/* Tarjeta de contacto (embudo, chat y resumen) */
.contact-card{background:var(--paper);color:var(--forest);border-radius:22px;padding:18px 20px;min-width:0;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.cc-head{display:flex;align-items:center;gap:12px}
.cc-head strong{font-size:20px;font-weight:600;letter-spacing:-.02em}
.cc-avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--forest);display:grid;place-items:center;font-size:20px;font-weight:600}
.cc-rows{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.cc-rows li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.3}
.cc-rows li>svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--forest)}
.cc-rows small{display:block;font-size:12px;line-height:1.3;color:var(--muted)}
.contact-card-main{border:2px solid var(--lime);box-shadow:0 0 0 6px rgba(214,237,145,.14),0 18px 40px rgba(0,0,0,.28)}
.contact-card-mini{padding:14px 16px}
.contact-card-mini .cc-avatar{width:36px;height:36px;font-size:16px}
.contact-card-mini .cc-head strong{font-size:17px}
.contact-card-mini .cc-rows{margin-top:12px;gap:8px}
.contact-card-mini .cc-rows li{font-size:14px}
.contact-card-dim{opacity:.62}
.cc-note{margin:12px 0 0;font-size:13px;line-height:1.3;color:var(--muted)}
@media (min-width:768px){
  .funnel-cards .contact-card.contact-card-main{flex-basis:430px}
  .funnel-cards .contact-card-main .cc-rows{grid-template-columns:1fr 1fr;gap:12px 18px}
}

/* Paso 5: embudo */
.funnel{position:relative;background:var(--forest);color:var(--paper)}
.funnel-pin{position:relative;display:flex;flex-direction:column;padding-bottom:clamp(56px,8vw,96px)}
.funnel-head{position:relative;z-index:6;display:flex;align-items:flex-start;gap:14px;padding:clamp(88px,10vw,112px) var(--gutter) 0}
.funnel-head .flood-step{margin-top:8px}
.funnel-head h2{font-size:clamp(32px,4vw,60px);line-height:1.05}
.funnel-head p{margin-top:10px;font-size:clamp(16px,1.5vw,20px);color:#cfdfd4;max-width:34ch}
.funnel-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:28px var(--gutter) 0}
.funnel-bubbles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.funnel-bubble{will-change:transform,opacity;transform-origin:0 0}
.sol-anim .funnel-bubbles{position:fixed;inset:0;overflow:hidden}
.sol-anim .funnel-head{padding-bottom:12px}
.sol-anim .funnel-head h2,.sol-anim .funnel-head p{width:fit-content;background:var(--forest);box-shadow:8px 0 0 var(--forest),-8px 0 0 var(--forest)}
@media(max-width:767px){.sol-anim .funnel-head p{max-width:calc(100vw - 180px)}}
.funnel-mouth{position:relative;z-index:2;width:min(600px,86vw);flex:none}
.funnel-mouth>svg{display:block;width:100%;height:auto;overflow:visible;fill:rgba(214,237,145,.1);stroke:var(--lime);stroke-width:3;stroke-linejoin:round}
.funnel-mark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);color:var(--lime);font-size:28px;letter-spacing:-.07em;white-space:nowrap}
.funnel-mark svg{width:24px;height:24px}
.funnel-cards{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;gap:20px;width:100%;margin-top:18px}
.funnel-cards .contact-card{flex:0 1 300px;transform-origin:50% 0}
.funnel-cards .contact-card-mini{flex-basis:240px}

.sol-anim .funnel{height:300svh;min-height:1900px}
.sol-anim .funnel-pin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;padding-bottom:0}
.sol-anim .funnel-head{padding-top:36px}
.sol-anim .funnel-stage{flex:1;min-height:0;padding-top:12px}
.sol-anim .funnel-zone{flex:0 0 18%}
.sol-anim .contact-card{will-change:transform,opacity}

/* Paso 6: chat de Pepe */
.pepe-chat{background:var(--paper);color:var(--forest)}
.pepe-pin{position:relative}
.pepe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:1280px;margin:0 auto;padding:clamp(88px,10vw,128px) var(--gutter)}
.pepe-side{margin-top:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pepe-side .contact-card{width:min(100%,320px);box-shadow:0 10px 26px rgba(16,63,53,.12)}
.contact-card-sm{padding:14px 16px}
.contact-card-sm .cc-avatar{width:38px;height:38px;font-size:17px}
.contact-card-sm .cc-head strong{font-size:18px}
.contact-card-sm .cc-rows{margin-top:12px;gap:9px}
.contact-card-sm .cc-rows li{font-size:14px}
.pc-pill{margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:99px;background:var(--lime);color:var(--forest);font-size:14px;font-weight:600}
.pc-pill svg{width:18px;height:18px;stroke-width:2.2}
.pepe-visual{display:flex;justify-content:center}
.pepe-chat .pepe-phone{position:relative;left:auto;top:auto;transform:none;rotate:none;height:min(78svh,720px);width:auto;aspect-ratio:874/1800;min-width:0;min-height:0;max-height:none;border:0;border-radius:0;background:transparent;overflow:visible;flex:none;z-index:auto}
.pepe-phone .device-display{display:flex;flex-direction:column;container-type:inline-size;background:#fff;color:#15221b;font-family:var(--sans)}
.pc-status{flex:none;display:flex;justify-content:space-between;align-items:center;height:11cqw;padding:1.5cqw 8cqw 0;font-size:max(8px,3.5cqw);font-weight:600}
.pc-top{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:1cqw 3.5cqw 3cqw;border-bottom:1px solid #e6ebe6}
.pc-top svg{width:5.4cqw;height:5.4cqw}
.pc-top>div{flex:1;min-width:0}
.pc-top strong{display:block;font-size:max(11px,4.2cqw);font-weight:600;line-height:1.2}
.pc-top span{display:block;font-size:max(8px,2.9cqw);color:#68736a;line-height:1.3}
.pc-top .pc-avatar{flex:none;width:9cqw;height:9cqw;border-radius:50%;background:var(--lime);color:var(--forest);display:grid;place-items:center;font-size:max(10px,4.4cqw);font-weight:600}
.pc-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqw;padding:3cqw 3.5cqw;overflow:hidden}
.pc-msg{max-width:82%;padding:.62em .8em;border-radius:1.05em;font-size:max(11px,4.7cqw);line-height:1.35}
.pc-from-pepe{align-self:flex-start;background:#eceff0;border-bottom-left-radius:.28em}
.pc-from-yose{align-self:flex-end;background:var(--forest);color:#fff;border-bottom-right-radius:.28em}
.pc-photos{display:grid;grid-template-columns:1fr 1fr;gap:1cqw;width:64%;max-width:none;padding:1cqw;background:#e3eae3}
.pc-photos img{width:100%;height:auto;aspect-ratio:4/3;border-radius:3cqw}
.pc-typing{display:none;align-self:flex-end;align-items:center;gap:1.4cqw;padding:3cqw 4cqw;border-radius:4.4cqw;border-bottom-right-radius:1.2cqw;background:var(--lime)}
.pc-typing span{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--forest);opacity:.35;animation:flood-dot 1.2s ease-in-out infinite}
.pc-typing span:nth-child(2){animation-delay:.2s}
.pc-typing span:nth-child(3){animation-delay:.4s}
.pc-typing.is-on{display:flex}
.pc-composer{flex:none;margin:2cqw 3.5cqw 6cqw;padding:2.4cqw 3.6cqw;border:1px solid #dde4dd;border-radius:99px;font-size:max(10px,3.6cqw);color:#8a938c}
@keyframes pc-pop{from{opacity:0;transform:translateY(2.4cqw) scale(.96)}to{opacity:1;transform:none}}
.sol-anim .pepe-chat{height:360svh;min-height:2300px}
.sol-anim .pepe-pin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:center}
.sol-anim .pepe-grid{width:100%;padding-block:0}
.pc-anim .pc-msg{display:none}
.pc-anim .pc-msg.is-on{display:block;animation:pc-pop .38s var(--ease) both}
.pc-anim .pc-photos.is-on{display:grid}
.pc-anim .pc-pill{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pc-anim .pc-pill.is-on{opacity:1;transform:none}

/* Paso 7: resumen */
.handoff{background:var(--surface);color:var(--forest)}
.handoff-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.handoff-copy>p{margin-top:20px;max-width:30ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--muted)}
.summary-card{background:#fff;border-radius:28px;padding:clamp(24px,3vw,40px);box-shadow:0 22px 54px rgba(16,63,53,.12)}
.sc-title{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid #e4eae4}
.sc-title h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.sc-rows{margin-top:22px;gap:18px}
.sc-rows li{font-size:clamp(16px,1.4vw,18px);align-items:center;gap:14px}
.sc-rows li>svg{width:26px;height:26px;margin-top:0;padding:4px;box-sizing:content-box;border-radius:50%;background:#e8f1d2}
.sc-rows small{font-size:13px}
.sol-reveal .summary-card{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sol-reveal .sc-rows li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sol-reveal.sol-in .summary-card,.sol-reveal.sol-in .sc-rows li{opacity:1;transform:none}
.sol-reveal.sol-in .sc-rows li:nth-child(1){transition-delay:.25s}
.sol-reveal.sol-in .sc-rows li:nth-child(2){transition-delay:.35s}
.sol-reveal.sol-in .sc-rows li:nth-child(3){transition-delay:.45s}
.sol-reveal.sol-in .sc-rows li:nth-child(4){transition-delay:.55s}
.sol-reveal.sol-in .sc-rows li:nth-child(5){transition-delay:.65s}

/* Paso 8: visitas */
.visits{background:var(--forest);color:var(--paper)}
.visits-pin{position:relative}
.visits-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"copy visual" "close visual";grid-template-rows:auto auto;align-content:center;column-gap:clamp(32px,6vw,96px);row-gap:clamp(24px,3vw,44px);align-items:center;max-width:1280px;margin:0 auto;padding:clamp(88px,10vw,128px) var(--gutter)}
.visits-copy{grid-area:copy;align-self:end}
.visits-close{grid-area:close;align-self:start}
.visits-visual{grid-area:visual;position:relative;min-width:0}
.visits-photo{border-radius:clamp(24px,3vw,40px);overflow:hidden;aspect-ratio:4/3}
.visits-photo img{object-position:50% 60%}
.advisor-tag{position:absolute;left:16px;top:16px;margin:0;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:99px;background:var(--paper);color:var(--forest);font-size:15px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.advisor-tag .cc-avatar{width:34px;height:34px;font-size:16px}
.visit-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.visit-item{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:20px;background:var(--paper);color:var(--forest);font-size:clamp(16px,1.4vw,19px);box-shadow:0 14px 34px rgba(0,0,0,.2)}
.visit-item svg{width:24px;height:24px}
.visit-item strong{font-weight:600}
.visits-phrase{font-size:clamp(28px,3.2vw,50px);line-height:1.08;letter-spacing:-.04em;font-weight:500;max-width:15ch;text-wrap:balance}
.visits-close .button{margin-top:26px}
.visits-mark{margin-top:22px;font-size:26px;letter-spacing:-.07em;color:var(--lime)}
.visits-mark svg{width:18px;height:18px}
.sol-anim .visits{height:260svh;min-height:1700px}
.sol-anim .visits-pin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:center}
.sol-anim .visits-grid{width:100%;padding-block:0}
.sol-anim .visit-list{position:absolute;right:16px;bottom:16px;left:16px;margin:0;display:grid}
.sol-anim .visit-item{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sol-anim .visit-item.is-active{opacity:1;transform:none}
.sol-anim .visits-close{opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sol-anim .visits.is-closing .visits-close{opacity:1;pointer-events:auto;transform:none}

@media (max-width:767px){
  .sol-head{gap:10px}
  .sol-head .flood-step{margin-top:5px}
  .sol-head h2{font-size:27px;max-width:none}
  .funnel-head{padding-top:88px;gap:10px}
  .funnel-head h2{font-size:30px}
  .funnel-head p{font-size:15px;margin-top:6px}
  .funnel-stage{padding-top:16px}
  .funnel-mouth{width:min(520px,90vw)}
  .funnel-mark{font-size:25px}
  .funnel-mark svg{width:18px;height:18px}
  .funnel-cards{flex-direction:column;align-items:center;gap:10px;margin-top:12px}
  .funnel-cards .contact-card{flex:none;width:min(100%,330px)}
  .funnel-cards .contact-card-main{padding:14px 16px}
  .funnel-cards .contact-card-main .cc-avatar{width:38px;height:38px;font-size:17px}
  .funnel-cards .contact-card-main .cc-rows{margin-top:10px;gap:6px}
  .cc-note{margin-top:8px}
  .funnel-cards .contact-card-main .cc-rows li{font-size:14px}
  .funnel-cards .contact-card-main .cc-rows small{font-size:11px}
  .contact-card-mini{padding:10px 14px}
  .contact-card-mini .cc-head{display:contents}
  .contact-card-mini{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .contact-card-mini .cc-avatar{grid-row:1/3;width:34px;height:34px}
  .contact-card-mini .cc-head strong{font-size:15px;grid-column:2}
  .contact-card-mini .cc-rows{grid-column:2;margin-top:2px;gap:0}
  .contact-card-mini .cc-rows li{font-size:13px}
  .contact-card-mini .cc-rows li>svg{display:none}
  .contact-card-mini .cc-rows li:nth-child(2){display:none}
  .sol-anim .funnel-zone{flex-basis:20%}
  .pepe-grid{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:88px;padding-bottom:56px}
  .sol-anim .pepe-grid{padding-top:24px;padding-bottom:12px;gap:10px;align-content:start;height:100%}
  .pepe-side{margin-top:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .pepe-side .contact-card{display:none}
  .pc-pill{font-size:13px;padding:8px 14px 8px 10px}
  .pepe-chat .pepe-phone{height:600px}
  .sol-anim .pepe-chat .pepe-phone{height:clamp(360px,calc(100svh - 150px),660px)}
  .handoff-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .handoff-copy>p{margin-top:12px;font-size:16px}
  .summary-card{border-radius:22px}
  .sc-rows{gap:14px}
  .visits-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "close";row-gap:18px;padding-top:84px;padding-bottom:56px}
  .sol-anim .visits-grid{padding-top:24px;padding-bottom:20px}
  .visits-photo{aspect-ratio:4/3.3}
  .advisor-tag{left:10px;top:10px;font-size:13px;padding-right:14px}
  .advisor-tag .cc-avatar{width:28px;height:28px;font-size:14px}
  .visit-item{padding:11px 14px;font-size:15px;border-radius:16px}
  .sol-anim .visit-list{right:10px;bottom:10px;left:10px}
  .visits-phrase{font-size:25px;max-width:none}
  .visits-close .button{margin-top:16px}
}
@media (max-width:767px) and (max-height:720px){
  .funnel-head p{display:none}
  .sol-anim .funnel-zone{flex-basis:15%}
  .funnel-stage{padding-top:8px}
  .funnel-mouth{width:min(360px,84vw)}
  .funnel-cards{gap:8px;margin-top:8px}
  .contact-card-mini{padding:8px 12px}
}
@media (min-width:768px) and (max-width:1000px){
  .pepe-chat .pepe-phone{height:min(68svh,620px)}
}
@media (prefers-reduced-motion:reduce){
  .pc-typing span{animation:none;opacity:.7}
}

/* Pantallas bajas: los pines no pueden ser más altos que la pantalla */
@media(max-height:700px){
.flood-pin,.sol-anim .funnel-pin,.sol-anim .pepe-pin,.sol-anim .visits-pin{min-height:0}
.flood-head{padding-top:72px}
.flood-caption{font-size:clamp(18px,2.2vw,26px)}
.flood-worker{height:max(30%,130px)}
.flood-reply{bottom:calc(max(30%,130px) + 16px)}
.logo-hero{padding-top:84px;padding-bottom:104px}
.sol-anim .funnel-cards .contact-card-mini{display:block}.funnel-cards .cc-note{display:none}
.sol-anim .funnel-zone{flex-basis:10%}
.sol-anim .funnel-mouth{width:min(440px,84vw)}
}
/* Celular apaisado: el contenido de los pines tiene que entrar en el alto */
@media(max-height:500px){
.sol-head h2{font-size:22px}
.sol-anim .pepe-chat .pepe-phone{height:calc(100svh - 128px)}
.sol-anim .pepe-grid{padding-top:8px}
.sol-anim .visits-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy visual" "close visual";column-gap:24px;row-gap:10px;padding-top:12px;padding-bottom:12px}
.visits-phrase{font-size:22px;max-width:none}
.visits-close .button{margin-top:8px;min-height:44px}
.visits-mark{display:none}
.visits-photo{aspect-ratio:auto;height:calc(100svh - 24px)}
.visits-photo img{height:100%;object-fit:cover}
.sol-anim .funnel-head{padding-top:14px}
.sol-anim .funnel-head p{display:none}
.sol-anim .funnel-zone{flex-basis:0}
.sol-anim .funnel-stage{padding-top:0}
.sol-anim .funnel-mouth{width:150px}
.sol-anim .funnel-mark{font-size:20px}
.sol-anim .funnel-cards{margin-top:8px}
.sol-anim .funnel-cards .contact-card-main{flex:0 0 auto;width:min(540px,92vw);padding:12px 16px}
.sol-anim .funnel-cards .cc-note{display:none}
.sol-anim .funnel-cards .contact-card-main .cc-rows{grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:8px}
.sol-anim .funnel-cards .cc-avatar{width:34px;height:34px;font-size:16px}
}

@media(max-width:767px){
  .sol-anim .funnel-zone{flex-basis:10%}
  .funnel-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
  .funnel-cards .contact-card{width:100%;min-width:0}
  .funnel-cards .contact-card-main{grid-column:1/-1;grid-row:1}
  .funnel-cards .contact-card-main .cc-rows{display:grid;grid-template-columns:1fr 1fr}
  .funnel-cards .contact-card-mini{padding:10px}
  .funnel-cards .contact-card-mini .cc-head{gap:7px}
  .funnel-cards .contact-card-mini .cc-head strong{font-size:15px}
  .funnel-cards .contact-card-mini .cc-rows{gap:6px;margin-top:8px}
  .funnel-cards .contact-card-mini .cc-rows li{font-size:12px;gap:6px}
}
@media(max-height:700px){.sol-anim .funnel-zone{flex-basis:6%}.funnel-cards{margin-top:8px}.funnel-cards .contact-card-main{padding:10px 14px}.funnel-cards .contact-card-main .cc-rows{gap:6px;margin-top:8px}}

/* El embudo recibe toda la pila y ocupa el centro de la escena. */
.funnel-mouth{width:min(820px,92vw)}
@media(max-width:767px){.funnel-mouth{width:min(520px,90vw)}}
@media(max-height:500px){.sol-anim .funnel-mouth{width:min(700px,86vw,calc(100svh * 1.2))}.sol-anim .funnel-cards .contact-card-main{width:min(540px,92vw)}}
@media(max-width:767px) and (max-height:500px){
  .sol-anim .funnel-cards .contact-card-main{width:100%;min-width:0}
}
@media(max-width:767px) and (max-height:400px){
  .sol-anim .funnel-head{padding-top:8px;padding-bottom:0}
  .sol-anim .funnel-mouth{width:min(520px,80vw,calc(100svh * .82))}
  .sol-anim .funnel-cards{gap:5px;margin-top:0}
  .sol-anim .funnel-cards .contact-card-main{padding:7px 9px}
  .sol-anim .funnel-cards .contact-card-main .cc-head{gap:7px}
  .sol-anim .funnel-cards .contact-card-main .cc-avatar{width:26px;height:26px;font-size:13px}
  .sol-anim .funnel-cards .contact-card-main .cc-head strong{font-size:14px}
  .sol-anim .funnel-cards .contact-card-main .cc-rows{gap:4px 8px;margin-top:5px}
  .sol-anim .funnel-cards .contact-card-main .cc-rows li{font-size:10px;gap:4px}
  .sol-anim .funnel-cards .contact-card-main .cc-rows li>svg{width:15px;height:15px}
  .sol-anim .funnel-cards .contact-card-main .cc-rows small{font-size:9px}
  .sol-anim .funnel-cards .contact-card-mini{padding:5px 7px}
  .sol-anim .funnel-cards .contact-card-mini .cc-avatar{width:23px;height:23px;font-size:11px}
  .sol-anim .funnel-cards .contact-card-mini .cc-head strong{font-size:12px}
  .sol-anim .funnel-cards .contact-card-mini .cc-rows{gap:4px;margin-top:4px}
  .sol-anim .funnel-cards .contact-card-mini .cc-rows li{font-size:9px;gap:4px}
  .sol-anim .funnel-cards .contact-card-mini .cc-rows li>svg{width:13px;height:13px}
}