.ca-tutoriales{--ca-primary: #155dfc;--ca-primary-hover: #0f46c8;--ca-primary-soft: #edf2ff;--ca-fg: #111827;--ca-fg-muted: #6a7282;--ca-border: #e7e7e7;--ca-bg-soft: #f1f5f9;--ca-ease: cubic-bezier(.2, 0, 0, 1);font-family:Figtree,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ca-fg);background:#ffffff}.ca-tutoriales--page{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"heroIntro" "heroMedia" "stepsCopy" "stepsProgress" "stepsGrid";max-width:1120px;margin:0 auto;padding:56px 32px 104px;row-gap:28px;column-gap:24px}.ca-tutoriales--page .ca-tutoriales__hero,.ca-tutoriales--page .ca-tutoriales__steps{display:contents}.ca-tutoriales--page>astro-island,.ca-tutoriales__interactive{display:contents}.ca-tutoriales--page .ca-tutoriales__stepsCopy,.ca-tutoriales--page .ca-tutoriales__stepsProgress{margin-top:28px}.ca-tutoriales--page .ca-tutoriales__stepsGrid{margin-top:-4px}.ca-tutoriales__heroIntro{grid-area:heroIntro}.ca-tutoriales__heroMedia{grid-area:heroMedia}.ca-tutoriales__stepsCopy{grid-area:stepsCopy;align-self:end}.ca-tutoriales__stepsProgress{grid-area:stepsProgress;align-self:end;justify-self:end}.ca-tutoriales__stepsGrid{grid-area:stepsGrid}@media (min-width: 641px){.ca-tutoriales--page{grid-template-areas:"heroIntro heroIntro" "heroMedia heroMedia" "stepsCopy stepsProgress" "stepsGrid stepsGrid";grid-template-columns:minmax(0,1fr) auto;column-gap:24px}}.ca-tutoriales__hero{padding:56px 32px 16px;display:grid;gap:28px}.ca-tutoriales__intro{display:grid;gap:12px;justify-items:center;text-align:center}.ca-tutoriales__title{margin:0;max-width:760px;font-size:clamp(34px,4.6vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.04em;color:var(--ca-fg);text-wrap:pretty}.ca-tutoriales__subtitle{margin:0;max-width:560px;font-size:18px;line-height:1.55;color:var(--ca-fg-muted);text-wrap:pretty}.ca-main{position:relative;display:block;width:100%;aspect-ratio:16 / 9;border-radius:24px;overflow:hidden;background:#111827;box-shadow:0 1px 2px #1118270a,0 32px 64px -32px #11182759;color:#fff;animation:caIn .6s var(--ca-ease) both}.ca-play__icon{color:#fff}.ca-main__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ca-main__poster--in{animation:caIn .4s var(--ca-ease) both}.ca-main__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(17,24,39,.05) 0%,rgba(17,24,39,0) 40%,rgba(17,24,39,.7) 100%)}.ca-main__shade--step{background:linear-gradient(180deg,rgba(17,24,39,.05) 0%,rgba(17,24,39,0) 60%,rgba(17,24,39,.25) 100%)}.ca-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border:1px solid rgba(255,255,255,.4);border-radius:9999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:grid;place-items:center;pointer-events:none;transition:transform .24s var(--ca-ease);animation:caPulse 2.4s var(--ca-ease) infinite}.ca-main:hover .ca-play{transform:translate(-50%,-50%) scale(1.08)}.ca-play svg{margin-left:4px}.ca-main__meta{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}.ca-main__copy{display:grid;gap:6px;min-width:0;text-align:left}.ca-main__eyebrow{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#ffffffbf}.ca-main__heading{font-size:clamp(18px,2.4vw,26px);line-height:1.15;font-weight:600;letter-spacing:-.03em;text-wrap:pretty}.ca-main__duration{flex:none;padding:7px 11px;border-radius:9999px;background:rgba(255,255,255,.92);color:#111827;font-size:12px;font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap}.ca-main__duration--solo{margin-left:auto}.ca-tutoriales__steps{padding:40px 32px 104px;display:grid;gap:24px}.ca-tutoriales__stepsTop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}.ca-tutoriales__stepsTop .ca-tutoriales__progress{flex:none}.ca-tutoriales__stepsCopy{display:grid;gap:6px;min-width:0}.ca-tutoriales__stepsTitle{margin:0;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.035em;color:var(--ca-fg)}.ca-tutoriales__stepsLead{margin:0;font-size:15px;line-height:1.5;color:var(--ca-fg-muted)}.ca-tutoriales__progress{display:flex;align-items:center;gap:12px;flex:none;padding:10px 14px;border:1px solid var(--ca-border);border-radius:9999px}.ca-tutoriales__progressTrack{width:96px;height:5px;border-radius:9999px;background:var(--ca-bg-soft);overflow:hidden}.ca-tutoriales__progressBar{display:block;height:100%;border-radius:9999px;background:var(--ca-primary);transition:width .5s var(--ca-ease)}.ca-tutoriales__progressLabel{font-size:12.5px;font-weight:600;color:var(--ca-fg);font-variant-numeric:tabular-nums;white-space:nowrap}.ca-tutoriales__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.ca-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--ca-border);border-radius:16px;overflow:hidden;padding:0;background:#ffffff;text-align:left;cursor:pointer;box-shadow:0 1px 2px #1118270a;font:inherit;color:inherit;transition:transform .24s var(--ca-ease),box-shadow .24s var(--ca-ease),border-color .24s var(--ca-ease)}.ca-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px #11182740}.ca-card--active{border-color:var(--ca-primary);box-shadow:0 0 0 3px var(--ca-primary-soft)}.ca-card--active:hover{box-shadow:0 16px 32px -20px #11182740,0 0 0 3px var(--ca-primary-soft)}.ca-card__thumb{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;background:var(--ca-bg-soft)}.ca-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ca-thumb-play{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:9999px;background:rgba(255,255,255,.94);display:grid;place-items:center;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .24s ease,transform .24s var(--ca-ease)}.ca-thumb-play svg{margin-left:2px}.ca-thumb-play__icon{color:var(--ca-primary)}.ca-card__pending-icon circle{stroke:var(--ca-border)}.ca-card:hover .ca-thumb-play,.ca-card--active .ca-thumb-play{opacity:1;transform:translate(-50%,-50%) scale(1)}.ca-card__duration{position:absolute;right:10px;bottom:10px;padding:5px 8px;border-radius:9999px;background:rgba(17,24,39,.78);color:#fff;font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.ca-card__body{display:grid;gap:10px;padding:16px 18px 18px}.ca-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.ca-card__step{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--ca-fg-muted);white-space:nowrap}.ca-card__badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:9999px;background:var(--ca-primary-soft);color:var(--ca-primary);font-size:11px;font-weight:600;line-height:1;white-space:nowrap}.ca-card__title{font-size:15.5px;font-weight:600;letter-spacing:-.03em;color:var(--ca-fg);line-height:1.3;text-wrap:pretty}.ca-card__desc{font-size:13px;line-height:1.5;letter-spacing:-.02em;color:var(--ca-fg-muted);text-wrap:pretty}@keyframes caIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes caPulse{0%{box-shadow:0 0 #ffffff8c}to{box-shadow:0 0 0 18px #fff0}}@media (max-width: 1000px){.ca-tutoriales__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.ca-tutoriales__stepsProgress{justify-self:start}}@media (max-width: 560px){.ca-tutoriales--page,.ca-tutoriales__hero,.ca-tutoriales__steps{padding-left:20px;padding-right:20px}.ca-tutoriales__grid{grid-template-columns:1fr}.ca-main__meta{left:16px;right:16px;bottom:16px;flex-wrap:wrap;gap:10px}.ca-main__heading{font-size:16px}.ca-play{width:68px;height:68px}}@media (prefers-reduced-motion: reduce){.ca-tutoriales *,.ca-tutoriales *:before,.ca-tutoriales *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
