| wk_size_guide_instruction |
<style>/* Animación de flotar para las flechas de los padres (HOMBRES, MUJERES, UNISEX) */.main-accordion-header:hover .main-accordion-icon { animation: floatArrow 1.5s ease-in-out infinite;}/* Asegurar que la flecha abierta no tenga animación de flotar */.main-accordion-header.open .main-accordion-icon { animation: none;}@keyframes floatArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); }}/* Aplicar animación de flotar al hacer hover en sub-acordeón cerrada */.sub-accordion-header:not(.open):hover .sub-accordion-icon { animation: floatArrow 1.5s ease-in-out infinite;}/* Asegurar que la flecha abierta no tenga animación de flotar */.sub-accordion-header.open .sub-accordion-icon { animation: none;} .page-title { color: #333; margin-bottom: 30px; text-align: center; font-size: 28px; font-weight: 700; } /* Estilos para acordeón principal (género) */ .main-accordion-container { width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; }.main-accordion-header { background-color: #4189e626; /* Azul claro con transparencia */ color: #3483fa; /* Azul */ padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 700; font-size: 18px; border-radius: 8px 8px 0 0;}.main-accordion-header:hover { background-color: #4189e633; /* Nuevo color de hover */}.main-accordion-header.open { background-color: #3483fa; /* Azul sólido */ color: #ffffff; /* Blanco */ border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.main-accordion-icon { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); font-size: 20px; color: #3483fa; /* Azul cuando está cerrado */}.main-accordion-header.open .main-accordion-icon { color: #ffffff; /* Blanco cuando está abierto */ transform: rotate(180deg);} .main-accordion-content { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); background-color: #f9f9f9;}.main-accordion-content.open { max-height: 5000px; opacity: 1; transform: translateY(0); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);} /* Estilos para sub-acordeones (prendas) */ .sub-accordion-container { width: 95%; margin: 15px auto; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .sub-accordion-container:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); } .sub-accordion-header { background-color: #ffffff; color: #333; padding: 18px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid #e8e8e8; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; font-size: 16px; } .sub-accordion-header:hover { background-color: #4189e633; }/* Hover para títulos de sub-acordeón cerradas */.sub-accordion-header:not(.open):hover .sub-title,.sub-accordion-header:not(.open):hover .sub-description { color: #3483fa !important; transition: color 0.3s ease;}/* Hover para flecha de sub-acordeón cerrada */.sub-accordion-header:not(.open):hover .sub-accordion-icon { color: #3483fa !important; transition: color 0.3s ease;}/* Asegurar que el hover no afecte cuando ya está abierta */.sub-accordion-header.open .sub-title,.sub-accordion-header.open .sub-description,.sub-accordion-header.open .sub-accordion-icon { color: #3483fa !important;} /* Color azul para sub-acordeón activa */ .sub-accordion-header.open { background-color: #ffffff !important; border-bottom: none; color: #3483fa !important; } .sub-accordion-header.open .sub-accordion-icon { color: #3483fa !important; } .sub-accordion-header.open .sub-title { color: #3483fa !important; } .sub-accordion-header.open .sub-description { color: rgba(52, 131, 250, 0.8) !important; } .sub-accordion-icon { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); font-size: 16px; color: #333; margin-top: 4px; flex-shrink: 0;transform-origin: center; } .sub-accordion-icon.open { transform: rotate(180deg);color: #3483fa; } .sub-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); background-color: #ffffff; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .sub-accordion-content.open { max-height: 5000px; transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1); } /* Estilo para el contenido del header de sub-acordeón */ .sub-header-content { flex: 1; margin-right: 15px; } .sub-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; line-height: 1.3; } .sub-description { font-size: 13px; color: rgba(0, 0, 0, 0.55); line-height: 1.4; font-weight: 400; } /* Estilos específicos para las guías de medidas */ .full-guide-desktop { margin: 32px 0 0; max-width: 100%; } .full-guide-desktop__header { margin-bottom: 24px; max-width: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .full-guide-desktop__title { color: #333; font-size: 18px; font-weight: 700; height: auto; line-height: 1.3; margin: 0 0 8px; } .full-guide-desktop__subtitle { color: rgba(0, 0, 0, .55); font-size: 14px; font-weight: 400; height: auto; line-height: 1.4; margin: 0; } .full-guide-desktop__content { align-items: flex-start; display: flex; flex-direction: row; gap: 32px; height: auto; justify-content: space-between; min-height: 250px; } .full-guide-desktop__attributes-column { flex: 1; height: auto; max-width: 350px; min-height: 250px; width: 350px;margin-left: 7px; } .full-guide-desktop__attribute-item { align-items: flex-start; display: flex; gap: 12px; margin-bottom: 20px; } .full-guide-desktop__attribute-number { color: #333; display: flex; flex-direction: column; flex-shrink: 0; font-size: 14px; font-style: normal; font-weight: 600; height: 20px; justify-content: center; line-height: 1.2; text-align: center; width: 20px; } .full-guide-desktop__image-column { align-items: flex-start; display: flex; flex-shrink: 0; justify-content: flex-start; width: 232px; align-self: center; } .full-guide-desktop__image-column img { margin-top: 30px; padding-right: 30px; width: 100%; } .full-guide-desktop__attribute-name { color: #333; font-size: 14px; font-weight: 600; margin: 0 0 4px; } .full-guide-desktop__attribute-description { color: rgba(0, 0, 0, .55); font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; } /* Estilos para las imágenes dentro del acordeón */ .sub-accordion-content img { max-width: 100%; height: auto; } /* Separador */ .separator { height: 20px; } /* Instrucción para el desarrollador */ .developer-note { background-color: #f0f7ff; border-left: 4px solid #4a90e2; padding: 15px; margin: 20px 0 30px; border-radius: 4px; } .developer-note h3 { color: #2c3e50; margin-bottom: 8px; } .developer-note p { color: #34495e; line-height: 1.5; } .acordeon-id { background-color: #e8f5e9; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 14px; } .gender-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-left: 10px; text-transform: uppercase; }.male-badge { background-color: #4189e640; /* Azul claro */ color: #3483fa; /* Azul */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.female-badge { background-color: #4189e640; /* Azul claro */ color: #3483fa; /* Azul */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.main-accordion-header.open .gender-badge { background-color: rgba(255, 255, 255, 0.2); /* Blanco semitransparente */ color: #ffffff; /* Blanco */}/* Animación fade para el cambio de color */@keyframes fadeInColor { from { background-color: #4189e626; color: #3483fa; } to { background-color: #3483fa; color: #ffffff; }}@keyframes fadeOutColor { from { background-color: #3483fa; color: #ffffff; } to { background-color: #4189e626; color: #3483fa; }}/* Aplicar animaciones suaves */.main-accordion-header { animation: fadeOutColor 0.4s ease-out;}.main-accordion-header.open { animation: fadeInColor 0.4s ease-out;} </style> <h1 class="page-title">Guías de Medidas por Género</h1> <div class="developer-note"> <h3>Instrucciones para el desarrollador</h3> <p>Esta estructura organiza las guías por género (Hombres y Mujeres) con acordeones principales. Dentro de cada acordeón principal hay sub-acordeones para cada tipo de prenda.</p> <p><strong>Acordeones principales:</strong> identificadas con <span class="acordeon-id">main-acordeon-1</span>, <span class="acordeon-id">main-acordeon-2</span> (para Hombres y Mujeres respectivamente).</p> <p><strong>Sub-acordeones:</strong> identificadas con <span class="acordeon-id">sub-acordeon-X</span> dentro de cada acordeón principal.</p> <p>Para reorganizar: mueve los bloques completos de acordeones principales o sub-acordeones según sea necesario.</p> </div> <!-- ACORDEÓN PRINCIPAL 1: HOMBRES --> <div class="main-accordion-container" id="main-acordeon-1"> <div class="main-accordion-header" onclick="toggleMainAccordion(this)"> <span>HOMBRES <span class="gender-badge male-badge">Hombre</span></span> <div class="main-accordion-icon">▼</div> </div> <div class="main-accordion-content"> <!-- SUB-ACORDEÓN 1: Camisa Hombre --> <div class="sub-accordion-container" id="sub-acordeon-1-1"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Camisa</div> <div class="sub-description">Guía completa para medir camisas de hombre. Incluye medidas de hombros, pecho y mangas.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de hombro</h3> <p class="full-guide-desktop__attribute-description"> Mide la distancia entre las costuras de los hombros. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de pecho</h3> <p class="full-guide-desktop__attribute-description"> Mide la distancia entre las costuras de las axilas. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description"> Mide desde el cuello hasta la parte inferior de la prenda. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de la manga</h3> <p class="full-guide-desktop__attribute-description"> Mide desde la costura del hombro hasta el puño de la manga. </p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/SHIRT@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 2: Camiseta Hombre --> <div class="sub-accordion-container" id="sub-acordeon-1-2"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Camiseta</div> <div class="sub-description">Medidas para camisetas casuales y deportivas. Incluye hombros, pecho y largo.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de hombro</h3> <p class="full-guide-desktop__attribute-description">Mide la distancia entre las costuras de los hombros.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de pecho</h3> <p class="full-guide-desktop__attribute-description">Mide la distancia entre las costuras de las axilas.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde el cuello hasta la parte inferior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de la manga</h3> <p class="full-guide-desktop__attribute-description">Mide desde la costura del hombro hasta el puño de la manga.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/T-SHIRT@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 3: Pantalones Hombre --> <div class="sub-accordion-container" id="sub-acordeon-1-3"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Pantalones</div> <div class="sub-description">Guía para medir pantalones formales e informales. Incluye cintura, cadera y largo.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide sobre el borde superior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la parte inferior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Tiro delantero</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la entrepierna.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/PANTS@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 4: Short Hombre --> <div class="sub-accordion-container" id="sub-acordeon-1-4"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Short</div> <div class="sub-description">Medidas para shorts deportivos y casuales. Incluye cintura, cadera y largo.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide sobre el borde superior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de muslo</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura del muslo.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la parte inferior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">5.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Tiro delantero</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la entrepierna.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/SHORTS@2x-1.png"> </div> </div> </div> </div> </div> </div> </div> <div class="separator"></div> <!-- ACORDEÓN PRINCIPAL 2: MUJERES --> <div class="main-accordion-container" id="main-acordeon-2"> <div class="main-accordion-header" onclick="toggleMainAccordion(this)"> <span>MUJERES <span class="gender-badge female-badge">Mujer</span></span> <div class="main-accordion-icon">▼</div> </div> <div class="main-accordion-content"> <!-- SUB-ACORDEÓN 1: Blusa Mujer --> <div class="sub-accordion-container" id="sub-acordeon-2-1"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Blusa/Camisa</div> <div class="sub-description">Guía para medir blusas y camisas de mujer. Incluye hombros, pecho y mangas.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de hombro</h3> <p class="full-guide-desktop__attribute-description"> Mide la distancia entre las costuras de los hombros. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de pecho</h3> <p class="full-guide-desktop__attribute-description"> Mide la distancia entre las costuras de las axilas. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description"> Mide desde el cuello hasta la parte inferior de la prenda. </p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de la manga</h3> <p class="full-guide-desktop__attribute-description"> Mide desde la costura del hombro hasta el puño de la manga. </p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/SHIRT@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 2: Camiseta Mujer --> <div class="sub-accordion-container" id="sub-acordeon-2-2"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Camiseta</div> <div class="sub-description">Medidas corporales para camisetas de mujer. Incluye contorno de pecho, cintura y cadera.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tu cuerpo</h2> <p class="full-guide-desktop__subtitle">Usa una cinta métrica flexible para medir tu cuerpo.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de cuello</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más estrecha alrededor del cuello.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de pecho</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha alrededor del pecho.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más estrecha a la altura de la cintura.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">5.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Altura de la persona</h3> <p class="full-guide-desktop__attribute-description">Mide desde el suelo hasta el punto más alto de la cabeza.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/BODY_TOPS_FEMALE@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 3: Falda/Pollera --> <div class="sub-accordion-container" id="sub-acordeon-2-3"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Falda/Pollera</div> <div class="sub-description">Medidas para faldas y polleras de diferentes largos. Incluye cintura, cadera y largo.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide sobre el borde superior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la parte inferior de la prenda.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/SKIRTS@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 4: Ropa interior --> <div class="sub-accordion-container" id="sub-acordeon-2-4"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Ropa interior (Tanga)</div> <div class="sub-description">Guía para medir ropa interior femenina. Incluye cintura, cadera y largo.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide sobre el borde superior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta la parte inferior de la prenda.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/PANTIES@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 5: Soutien/Corpiño --> <div class="sub-accordion-container" id="sub-acordeon-2-5"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Soutien/Corpiño</div> <div class="sub-description">Medidas para sostenes y corpiños. Incluye largo de prenda y ancho de pecho.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tus prendas</h2> <p class="full-guide-desktop__subtitle">Apoya la prenda sobre una superficie plana.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de prenda</h3> <p class="full-guide-desktop__attribute-description">Mide desde el cuello hasta la parte inferior de la prenda.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Ancho de pecho</h3> <p class="full-guide-desktop__attribute-description">Mide la distancia entre las costuras de las axilas.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/BRAS@2x-1.png"> </div> </div> </div> </div> </div> </div> </div> <div class="separator"></div> <!-- ACORDEÓN PRINCIPAL 3: UNISEX / CALZADO --> <div class="main-accordion-container" id="main-acordeon-3"> <div class="main-accordion-header" onclick="toggleMainAccordion(this)"> <span>UNISEX / CALZADO</span> <div class="main-accordion-icon">▼</div> </div> <div class="main-accordion-content"> <!-- SUB-ACORDEÓN 1: Calzado --> <div class="sub-accordion-container" id="sub-acordeon-3-1"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Calzado</div> <div class="sub-description">Guía para medir el largo del pie y determinar la talla correcta de calzado.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tu cuerpo</h2> <p class="full-guide-desktop__subtitle">Usa una cinta métrica flexible para medir tu cuerpo.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo del pie</h3> <p class="full-guide-desktop__attribute-description">Sobre un papel, dibuja el contorno de los pies descalzos. Mide desde el dedo más largo hasta la altura del talón. Súmale 0,5 cm de holgura.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/FOOT_LENGTH@2x-1.png"> </div> </div> </div> </div> </div> <!-- SUB-ACORDEÓN 2: Cuerpo para pantalones/shorts (sin género) --> <div class="sub-accordion-container" id="sub-acordeon-3-2"> <div class="sub-accordion-header" onclick="toggleSubAccordion(this)"> <div class="sub-header-content"> <div class="sub-title">Medidas corporales (cintura para abajo)</div> <div class="sub-description">Guía completa para medir la parte inferior del cuerpo. Aplica para ambos géneros.</div> </div> <div class="sub-accordion-icon">▼</div> </div> <div class="sub-accordion-content"> <div class="full-guide-desktop"> <div class="full-guide-desktop__header"> <h2 class="full-guide-desktop__title">Cómo medir tu cuerpo</h2> <p class="full-guide-desktop__subtitle">Usa una cinta métrica flexible para medir tu cuerpo.</p> </div> <div class="full-guide-desktop__content"> <div class="full-guide-desktop__attributes-column"> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">1.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de cintura</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más estrecha a la altura de la cintura.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">2.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno de cadera</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha a la altura de la cadera.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">3.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Contorno del muslo</h3> <p class="full-guide-desktop__attribute-description">Mide la parte más ancha alrededor del muslo.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">4.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de la cintura al tobillo</h3> <p class="full-guide-desktop__attribute-description">Mide desde la cintura hasta el tobillo.</p> </div> </div> <div class="full-guide-desktop__attribute-item"> <div class="full-guide-desktop__attribute-number">5.</div> <div class="full-guide-desktop__attribute-text"> <h3 class="full-guide-desktop__attribute-name">Largo de la entrepierna al tobillo</h3> <p class="full-guide-desktop__attribute-description">Mide desde la entrepierna hasta el tobillo.</p> </div> </div> </div> <div class="full-guide-desktop__image-column"> <img class="full-guide-desktop__main-image" alt="Full measurement guide" data-id="_r_0_" decoding="async" loading="eager" src="https://http2.mlstatic.com/storage/charts-middleware/size-chart-middle/BODY_BOTTOMS_SIN_GENERO@2x-1.png"> </div> </div> </div> </div> </div> </div> </div> <script> // Función para alternar acordeones principales (género) function toggleMainAccordion(header) { const accordionContainer = header.parentElement; const content = header.nextElementSibling; const icon = header.querySelector('.main-accordion-icon'); const isOpen = header.classList.contains('open'); if (isOpen) { // Cerrar acordeón principal header.classList.remove('open'); content.classList.remove('open'); icon.classList.remove('open'); } else { // Abrir acordeón principal header.classList.add('open'); content.classList.add('open'); icon.classList.add('open'); } } // Función para alternar sub-acordeones (prendas) function toggleSubAccordion(header) { const accordionContainer = header.parentElement; const content = header.nextElementSibling; const icon = header.querySelector('.sub-accordion-icon'); const isOpen = header.classList.contains('open'); // Cerrar todas las sub-acordeones en el mismo contenedor principal (opcional) const mainContainer = header.closest('.main-accordion-content'); if (mainContainer) { const openSubHeaders = mainContainer.querySelectorAll('.sub-accordion-header.open'); openSubHeaders.forEach(openHeader => { if (openHeader !== header) { openHeader.classList.remove('open'); openHeader.nextElementSibling.classList.remove('open'); openHeader.querySelector('.sub-accordion-icon').classList.remove('open'); } }); } if (isOpen) { // Cerrar sub-acordeón header.classList.remove('open'); content.classList.remove('open'); icon.classList.remove('open'); } else { // Abrir sub-acordeón header.classList.add('open'); content.classList.add('open'); icon.classList.add('open'); } } // Opcional: Abrir el primer acordeón principal al cargar la página document.addEventListener('DOMContentLoaded', function() { // Descomenta la siguiente línea para abrir el primer acordeón automáticamente // document.querySelector('.main-accordion-header').click(); }); </script> |