.guia-guantes { overflow: clip; }
.guia-guantes__section { padding-block: var(--space-10); }
.guia-guantes__hero { padding-block: var(--space-6); }
.guia-guantes__hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; min-height: 32.5rem; }
.guia-guantes__hero-copy, .guia-guantes__hero-media, .guia-guantes__section-head, .guia-guantes__decision, .guia-guantes__measure-step > *, .guia-guantes__fit-card, .guia-guantes__cut-card, .guia-guantes__palm-top > *, .guia-guantes__use-card, .guia-guantes__routine-card, .guia-guantes__care-grid > * { min-width: 0; }
.guia-guantes__hero-copy { width: 100%; max-width: 35.625rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.guia-guantes__hero-copy > * { margin: 0; }
.guia-guantes__breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-ivory); font-size: var(--font-size-sm); }
.guia-guantes__hero h1 { color: var(--color-white); font-size: clamp(2.5rem, 5.4vw, 4rem); }
.guia-guantes__hero-lead { color: var(--color-ivory); font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.guia-guantes__hero-note { color: var(--color-ivory); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.guia-guantes__hero-media { width: 100%; margin: 0; border-radius: var(--radius-panel); overflow: hidden; }
.guia-guantes__hero-media img { width: 100%; height: 28rem; object-fit: cover; object-position: 70% center; }
.guia-guantes__section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.guia-guantes__section-head > * { margin: 0; }
.guia-guantes__section-head p:last-child { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.guia-guantes__decisions-head { width: 58.333%; max-width: 40.625rem; margin-bottom: var(--space-7); }
.guia-guantes__decision-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); padding: 0; margin: 0; list-style: none; }
.guia-guantes__decision { display: grid; grid-template-columns: 100%; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-default); }
.guia-guantes__decision > span, .guia-guantes__step-number, .guia-guantes__care-card > span { color: var(--color-pitch); font-family: var(--font-heading); font-size: 2.25rem; font-weight: var(--font-weight-bold); line-height: 1; }
.guia-guantes__decision h3 { font-size: var(--font-size-xl); }
.guia-guantes__decision h3, .guia-guantes__decision p { margin: 0; }
.guia-guantes__decision div { display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__measure-head { width: 58.333%; max-width: 42.5rem; margin-bottom: var(--space-7); }
.guia-guantes__measure-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.guia-guantes__measure-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 16.666%; align-items: center; }
.guia-guantes__measure-step--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
.guia-guantes__step-copy { width: 100%; max-width: 22.5rem; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.guia-guantes__step-copy h3, .guia-guantes__step-copy p { margin: 0; }
.guia-guantes__step-copy div { display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__measure-media { width: 100%; margin: 0; border-radius: var(--radius-card); overflow: hidden; }
.guia-guantes__measure-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guia-guantes__measure-callout { width: 100%; max-width: 32.5rem; padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-night); color: var(--color-white); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.guia-guantes__measure-callout p { margin: 0; }
.guia-guantes__measure-callout a { color: var(--color-lime); font-weight: var(--font-weight-bold); }
.guia-guantes__fit-head { width: 58.333%; max-width: 40.625rem; margin-bottom: var(--space-7); }
.guia-guantes__fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.guia-guantes__fit-card { width: 100%; padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__fit-card > * { margin: 0; }
.guia-guantes__fit-card--balanced { border-top: 4px solid var(--color-lime); background: var(--color-ivory); }
.guia-guantes__check { width: 100%; max-width: 40.625rem; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.guia-guantes__check > * { margin: 0; }
.guia-guantes__check ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: 0; list-style-position: inside; }
.guia-guantes__cuts-head { width: 58.333%; max-width: 40.625rem; margin-bottom: var(--space-7); }
.guia-guantes__cuts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.guia-guantes__cut-card { width: 100%; padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__cut-card > * { margin: 0; }
.guia-guantes__cut-card--negative { border-color: var(--color-night); background: var(--color-night); color: var(--color-ivory); }
.guia-guantes__cut-card--negative h3 { color: var(--color-white); }
.guia-guantes__palm-mark { width: 3.25rem; height: 2.5rem; border: 2px solid currentColor; border-radius: 40% 40% 35% 35%; opacity: .65; }
.guia-guantes__cut-close { width: 58.333%; max-width: 38.75rem; margin: var(--space-6) auto 0; padding: var(--space-5); background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__cut-close > * { margin: 0; }
.guia-guantes__palm-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: center; }
.guia-guantes__palm-copy { width: 100%; max-width: 33.75rem; display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__palm-copy > * { margin: 0; }
.guia-guantes__palm-copy > p:last-child { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.guia-guantes__palm-media { width: 100%; margin: 0; border-radius: var(--radius-panel); overflow: hidden; }
.guia-guantes__palm-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guia-guantes__use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.guia-guantes__use-card { width: 100%; padding: var(--space-5); background: var(--color-ivory); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__use-card > * { margin: 0; }
.guia-guantes__use-card--match { background: var(--color-night); color: var(--color-ivory); }
.guia-guantes__use-card--match h3 { color: var(--color-white); }
.guia-guantes__model-note { width: 100%; max-width: 22.5rem; margin-top: var(--space-6); padding-left: var(--space-4); border-left: 3px solid var(--color-lime); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__model-note > * { margin: 0; }
.guia-guantes__model-note a { font-weight: var(--font-weight-bold); }
.guia-guantes__routine-head { width: 58.333%; max-width: 40.625rem; margin-inline: auto; text-align: center; align-items: center; margin-bottom: var(--space-7); }
.guia-guantes__routine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.guia-guantes__routine-card { width: 100%; padding: var(--space-5); border: var(--border-default); background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__routine-card > * { margin: 0; }
.guia-guantes__routine-card ul { padding-left: 1.25rem; }
.guia-guantes__routine-card--match { border-color: var(--color-night); background: var(--color-night); color: var(--color-ivory); }
.guia-guantes__routine-card--match h3 { color: var(--color-white); }
.guia-guantes__routine-close { width: 50%; max-width: 37.5rem; margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 3px solid var(--color-lime); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__routine-close > * { margin: 0; }
.guia-guantes__care-head { width: 58.333%; max-width: 40.625rem; margin-bottom: var(--space-7); }
.guia-guantes__care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.guia-guantes__care-card { width: 100%; padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.guia-guantes__care-card > * { margin: 0; }
.guia-guantes__care-card--warning { background: var(--color-ivory); }
.guia-guantes__care-card--warning > span { color: var(--color-red); }
.guia-guantes__care-card--dark { border-color: var(--color-night); background: var(--color-night); color: var(--color-ivory); }
.guia-guantes__care-card--dark h3, .guia-guantes__care-card--dark > span { color: var(--color-white); }
.guia-guantes__care-card--dark ul { padding-left: 1.25rem; }
.guia-guantes__care-media { width: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-card); }
.guia-guantes__care-media img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }
.guia-guantes__care-close { width: 58.333%; max-width: 38.75rem; margin: var(--space-6) auto 0; padding-top: var(--space-5); border-top: var(--border-default); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__care-close > * { margin: 0; }
.guia-guantes__faq-head { width: 58.333%; max-width: 40.625rem; margin-inline: auto; text-align: center; align-items: center; margin-bottom: var(--space-6); }
.guia-guantes__faq-list { width: 66.666%; max-width: 45rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.guia-guantes__faq-item { border: var(--border-default); background: var(--color-white); }
.guia-guantes__faq-item h3 { margin: 0; }
.guia-guantes__faq-item button { width: 100%; min-height: 3.5rem; padding: var(--space-4); border-radius: 0; background: var(--color-white); color: var(--color-charcoal); justify-content: space-between; text-align: left; font-size: var(--font-size-base); }
.guia-guantes__faq-item button:hover { background: var(--color-ivory); }
.guia-guantes__faq-item button span { font-size: 1.5rem; line-height: 1; transition: transform var(--transition-fast); }
.guia-guantes__faq-item button[aria-expanded="true"] span { transform: rotate(45deg); }
.guia-guantes__faq-item div { padding: 0 var(--space-4) var(--space-4); }
.guia-guantes__faq-item div p { margin: 0; }
.guia-guantes__closing { padding-block: var(--space-9); }
.guia-guantes__closing-inner { width: 58.333%; max-width: 38.75rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.guia-guantes__closing-inner > * { margin: 0; }
.guia-guantes__closing-inner h2 { color: var(--color-white); }
.guia-guantes__closing-inner > p { color: var(--color-ivory); font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.guia-guantes__closing-list { width: 100%; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); text-align: left; }
.guia-guantes__closing-list li { min-width: 0; color: var(--color-ivory); }
.guia-guantes__closing-list span { display: inline-block; margin-right: var(--space-2); color: var(--color-lime); font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--font-weight-bold); }
.guia-guantes__closing-cta { min-width: 13.75rem; }
.guia-guantes__closing-note { font-size: var(--font-size-sm) !important; }
@media (max-width: 61.1875rem) { .guia-guantes__hero-grid { grid-template-columns: 1fr; min-height: 0; gap: var(--space-6); } .guia-guantes__hero-copy { max-width: 35.625rem; } .guia-guantes__hero-media { max-width: 47.5rem; } .guia-guantes__hero-media img { height: clamp(18.75rem, 48vw, 25rem); } .guia-guantes__decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guia-guantes__decision-grid > :nth-child(4), .guia-guantes__decision-grid > :nth-child(5) { grid-column: span 1; } .guia-guantes__measure-step, .guia-guantes__measure-step--reverse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .guia-guantes__measure-step--reverse .guia-guantes__measure-media { order: 2; } .guia-guantes__measure-step--reverse .guia-guantes__step-copy { order: 1; } }
@media (max-width: 56.1875rem) { .guia-guantes__section { padding-block: var(--space-8); } .guia-guantes__decisions-head, .guia-guantes__measure-head, .guia-guantes__fit-head, .guia-guantes__cuts-head, .guia-guantes__care-head, .guia-guantes__faq-head, .guia-guantes__routine-head { width: 100%; } .guia-guantes__decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guia-guantes__measure-step, .guia-guantes__measure-step--reverse { grid-template-columns: 1fr; gap: var(--space-4); } .guia-guantes__measure-step--reverse .guia-guantes__measure-media, .guia-guantes__measure-step--reverse .guia-guantes__step-copy { order: initial; } .guia-guantes__step-copy, .guia-guantes__measure-callout { max-width: none; } .guia-guantes__fit-grid, .guia-guantes__cuts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guia-guantes__cuts-grid > :last-child { grid-column: span 2; } .guia-guantes__palm-top { grid-template-columns: 1fr; } .guia-guantes__palm-copy { max-width: none; } .guia-guantes__routine-close, .guia-guantes__cut-close, .guia-guantes__care-close { width: 100%; } .guia-guantes__faq-list { width: 83.333%; } .guia-guantes__closing-inner { width: 75%; } }
@media (max-width: 42.4375rem) { .guia-guantes__hero { padding-block: var(--space-5); } .guia-guantes__hero-grid { gap: var(--space-5); } .guia-guantes__hero h1 { font-size: 2.5rem; line-height: 1.1; } .guia-guantes__hero-lead { font-size: var(--font-size-base); line-height: var(--line-height-base); } .guia-guantes__hero-cta { width: 100%; } .guia-guantes__hero-media img { height: 20rem; } .guia-guantes__section { padding-block: var(--space-7); } .guia-guantes__section-head p:last-child, .guia-guantes__palm-copy > p:last-child { font-size: var(--font-size-base); line-height: var(--line-height-base); } .guia-guantes__decision-grid, .guia-guantes__fit-grid, .guia-guantes__cuts-grid, .guia-guantes__palm-top, .guia-guantes__use-grid, .guia-guantes__routine-grid, .guia-guantes__care-grid { grid-template-columns: 1fr; } .guia-guantes__decision { grid-template-columns: 2.5rem minmax(0, 1fr); } .guia-guantes__decision-grid > :nth-child(4), .guia-guantes__decision-grid > :nth-child(5), .guia-guantes__cuts-grid > :last-child { grid-column: auto; } .guia-guantes__fit-card, .guia-guantes__cut-card, .guia-guantes__use-card, .guia-guantes__routine-card, .guia-guantes__care-card { padding: var(--space-5); } .guia-guantes__check ol { grid-template-columns: 1fr; } .guia-guantes__measure-steps { gap: var(--space-6); } .guia-guantes__care-media { order: 3; } .guia-guantes__faq-list, .guia-guantes__closing-inner { width: 100%; } .guia-guantes__closing-list { grid-template-columns: 1fr; } .guia-guantes__closing-cta { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .guia-guantes__faq-item button span { transition: none; } }