*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e8f7ff;color:#26455c;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit}.wrap{max-width:850px;margin:auto;background:#fffdf7;min-height:100vh;box-shadow:0 8px 35px #235c7b20}.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px #153a5719}.logo{text-decoration:none;font-size:clamp(17px,4.5vw,22px);font-weight:900;color:#e45b31}.logo b{color:#087bc2}.logo small{display:block;font-size:11px;font-weight:500;color:#507a92}.whats{background:#14864f;color:white;border-radius:13px;padding:11px 13px;text-decoration:none;font-weight:800;font-size:12px;white-space:nowrap}.hero{background:linear-gradient(150deg,#b8eaff 0%,#f5fbff 54%,#fff0bd 100%);padding:26px 18px 21px;position:relative;overflow:hidden;text-align:center}.hero:before{content:'🌴';position:absolute;top:-12px;left:-17px;font-size:80px}.hero:after{content:'🌺';position:absolute;bottom:0;right:10px;font-size:52px}.hero-text{position:relative;z-index:1}.hero h1{font-size:clamp(38px,8vw,65px);color:#0964a4;text-shadow:2px 3px white;margin:5px 0;line-height:1.1}.hero p{color:#d75c35;font-size:18px;font-weight:800;margin:6px 0 20px}.eyebrow{font-weight:800;color:#e5673a;font-size:13px}.hero-cast{display:flex;justify-content:center;gap:clamp(8px,4vw,28px);margin:16px auto}.hero-cast div{display:flex;flex-direction:column;align-items:center;font-size:clamp(32px,8vw,52px);filter:drop-shadow(1px 3px 0 #fff)}.hero-cast strong{font-size:12px;background:#fff;border-radius:25px;padding:4px 10px;color:#0c6ca5}.place{display:inline-block;background:#fff9;padding:7px 13px;border-radius:30px;font-size:12px;font-weight:800}.container{padding:10px 13px 20px}.section{background:white;border:1px solid #d8e9f2;box-shadow:0 3px 14px #23617a12;border-radius:21px;margin:14px 0;padding:20px;overflow:hidden}.section h2{color:#0872b4;font-size:clamp(23px,5vw,29px);line-height:1.16;margin:6px 0 14px}.section p{font-size:15px;line-height:1.7;margin:10px 0}.story{background:#fff9e9}.founder{background:#eaf7ff}.fun{background:#fffdf0}.characters{background:#f4f9ff}.van{background:#e9f9ff}.annie{background:#fff1f5}.principles{background:#f9f7ed}.philosophy{background:#f6efff}.photo-line{position:relative;margin-top:15px;border-radius:16px;overflow:hidden}.photo-line img{display:block;width:100%;max-height:230px;object-fit:cover;object-position:center 60%}.photo-line span{position:absolute;bottom:10px;left:10px;background:#ffffffea;padding:8px 12px;border-radius:13px;color:#08689d;font-weight:800;font-size:13px}.founder-layout{display:grid;grid-template-columns:1fr minmax(125px,38%);align-items:end;gap:10px}.credentials{display:flex;flex-direction:column;gap:9px;margin-top:14px}.credentials span{background:#ffffffc9;border-radius:12px;padding:8px 10px;font-size:13px;font-weight:650}.portrait{background:radial-gradient(circle at 50% 50%,#fff 10%,#b9e9fa 100%);border-radius:90px 90px 17px 17px;overflow:hidden;align-self:stretch;display:flex;align-items:flex-end}.portrait img{width:100%;height:auto;max-height:350px;object-fit:contain;object-position:bottom}blockquote{margin:15px 0 0;background:#fff;border-left:5px solid #f19b50;border-radius:9px;padding:13px;font-style:italic;color:#215c83}.techniques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:15px 0}.techniques span{background:#fff;border:1px solid #f2e7d7;border-radius:13px;padding:10px;font-size:13px;font-weight:750}.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character{padding:11px 7px;background:#fff3e8;border-radius:14px;text-align:center}.character:nth-child(2){background:#eaf6ff}.character:nth-child(3){background:#e8f7e8}.character img{width:min(100%,90px);height:90px;object-fit:contain;image-rendering:pixelated}.character h3{color:#086ba4;margin:4px 0;font-size:17px}.character p{font-size:12px;line-height:1.4}.quote{font-weight:800;text-align:center;color:#076b9f}.van-visual{margin-top:12px;position:relative}.van-visual img{width:100%;max-height:270px;object-fit:cover;object-position:center 66%;border-radius:15px}.van-visual span{display:block;background:#0b7bb6;color:#fff;text-align:center;border-radius:12px;padding:9px;font-weight:800}.annie h2{color:#c33b77}.annie-layout{display:grid;grid-template-columns:1fr 145px;gap:12px;align-items:center}.annie-layout img{width:100%;border-radius:15px;max-height:230px;object-fit:cover}.cta{display:inline-block;background:#ca3576;color:white;text-decoration:none;font-weight:800;padding:12px 14px;border-radius:13px;font-size:14px;margin:9px 0}.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.values article{border-radius:14px;background:#e9f7ff;padding:13px}.values article:nth-child(2){background:#eaf9e9}.values article:nth-child(3){background:#fff1e6}.values h3{font-size:16px;color:#0871a9;margin:0}.values p{font-size:13px}.philosophy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.philosophy-grid div{background:#fff;padding:10px 5px;border-radius:12px;text-align:center;font-size:23px}.philosophy-grid strong,.philosophy-grid small{display:block;font-size:12px}.philosophy-grid small{font-size:10px;color:#52718a}.back{text-align:center;padding:15px}.back a{display:inline-block;background:#087bc2;color:#fff;padding:13px 21px;border-radius:13px;text-decoration:none;font-weight:800}.footer{background:#087bc2;color:white;text-align:center;padding:22px 12px;line-height:1.8;font-size:13px}.footer small{font-size:11px}@media(max-width:520px){.section{padding:15px}.founder-layout{grid-template-columns:1fr 38%}.founder-info>p{font-size:13px}.credentials span{font-size:11px;padding:7px}.values{grid-template-columns:1fr}.annie-layout{grid-template-columns:1fr 115px}.annie-layout p{font-size:13px}.cast .character img{height:64px}.character p{font-size:11px}.philosophy-grid strong{font-size:11px}}
/* Etapa 3: ajustes reales para pantallas de celular */
html,body{max-width:100%;overflow-x:hidden} .wrap,.container,.section{min-width:0;max-width:100%} .section *{min-width:0} .section p{overflow-wrap:break-word} .founder-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:16px} .portrait{align-self:center;min-height:0;height:250px;max-width:190px;border-radius:26px;background:linear-gradient(#e0f5ff,#fff);display:flex;align-items:flex-end;justify-content:center;overflow:hidden} .portrait img{display:block;width:auto;max-width:100%;height:230px;max-height:none;object-fit:contain;object-position:center bottom} .character img{image-rendering:pixelated;max-width:100%;width:94px;height:94px} .story-date{background:#fff;border-left:5px solid #e99035;padding:12px;border-radius:10px;margin:12px 0} @media(max-width:600px){.founder-layout{grid-template-columns:1fr;gap:10px}.portrait{width:190px;height:235px;max-width:75%;margin:0 auto;grid-row:1}.portrait img{height:220px}.founder-info{grid-row:2}.section{margin:12px 0;padding:16px}.container{padding:8px 12px}.cast{gap:6px}.character{padding:10px 4px}.character img{width:76px;height:76px}.character h3{font-size:15px}.character p{font-size:11px}}

/* Etapa 4: tarjetas compactas y arte de personajes */
.hero-cast img{display:block;width:clamp(72px,20vw,125px);height:clamp(80px,22vw,132px);object-fit:contain;mix-blend-mode:multiply;border-radius:15px}
.hero-cast div{font-size:inherit}.founder-layout{grid-template-columns:minmax(0,1fr) minmax(112px,35%);align-items:start}.founder-info{min-width:0}.founder-info h4{font-size:14px;color:#086fa6;margin:16px 0 6px}.portrait{align-self:start;border-radius:20px;background:#f1fbff;padding:4px;overflow:hidden}.portrait img{width:100%;height:auto;max-height:none;object-fit:contain;display:block;border-radius:16px}.character img{width:100%;height:165px;object-fit:contain;mix-blend-mode:multiply}.club-note{margin-top:16px;padding:16px;border-radius:15px;background:#fff5db}.club-note strong{color:#086fa6;font-size:19px}.club-note .cta{display:inline-block;margin-top:5px}.section{overflow-wrap:break-word}.wrap,.container,.section{min-width:0}body{overflow-x:hidden}
@media(max-width:540px){.founder-layout{grid-template-columns:minmax(0,1fr) 34%;gap:10px}.founder-info h3{font-size:17px}.founder-info p{font-size:13px}.credentials span{font-size:12px;padding:7px}.portrait{border-radius:14px}.character img{height:115px}.hero-cast{gap:8px}.hero{padding-top:24px}.section{padding:16px}}
@media(max-width:370px){.founder-layout{grid-template-columns:1fr}.portrait{max-width:230px;margin:auto}.character img{height:90px}}