Gu\u00eda de Tallas de Anillos<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400..900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* --- CAMBIO: Regla '*' encapsulada para no afectar a Elementor --- *\/\r\n #miguel-ring-sizer * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* --- CAMBIO: Regla 'body' eliminada y reemplazada por el ID --- *\/\r\n \/* La regla 'body' anterior afectaba a toda la p\u00e1gina.\r\n Ahora, estos estilos solo aplican a este contenedor. *\/\r\n #miguel-ring-sizer {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #f5f7fa;\r\n padding: 40px 20px;\r\n max-width: 1200px; \/* Estilo del .container original *\/\r\n width: 100%; \/* Estilo del .container original *\/\r\n margin: 0 auto; \/* Centra el bloque en la p\u00e1gina *\/\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* --- CAMBIO: .container eliminado, estilos movidos a #miguel-ring-sizer --- *\/\r\n \/*\r\n .container {\r\n max-width: 1200px;\r\n width: 100%;\r\n }\r\n *\/\r\n\r\n \/* --- CAMBIO: Todos los selectores ahora est\u00e1n prefijados con el ID --- *\/\r\n #miguel-ring-sizer h1 {\r\n text-align: center;\r\n color: #000;\r\n margin-bottom: 20px;\r\n font-size: 2.5em;\r\n \/* --- CAMBIO: Sombra de texto m\u00e1s sutil --- *\/\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.05);\r\n \/* --- NUEVO: Aplicar tipograf\u00eda 'Cinzel' --- *\/\r\n font-family: 'Cinzel', serif;\r\n }\r\n\r\n #miguel-ring-sizer .subtitle {\r\n text-align: center;\r\n color: #7f8c8d;\r\n margin-bottom: 40px;\r\n font-size: 1.1em;\r\n }\r\n\r\n \/* --- NUEVO CSS: Contenedor de la cuadr\u00edcula --- *\/\r\n #miguel-ring-sizer .size-grid-container {\r\n display: grid;\r\n \/* Crea columnas de 90px y ajusta cuantas quepan, centr\u00e1ndolas *\/\r\n grid-template-columns: repeat(auto-fit, 90px);\r\n gap: 20px;\r\n justify-content: center; \/* Centra las tallas *\/\r\n max-width: 800px;\r\n width: 100%;\r\n margin: 40px auto;\r\n }\r\n\r\n \/* --- CSS ELIMINADO: .ring-circle y .ring-circle::before --- *\/\r\n \/* Las siguientes reglas se eliminaron porque pertenec\u00edan \r\n al dise\u00f1o circular anterior y ya no se usan. *\/\r\n \/*\r\n .ring-circle {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 80%; \r\n height: 80%;\r\n border: 15px solid rgba(192, 192, 192, 0.5);\r\n border-radius: 50%;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .ring-circle::before {\r\n display: none;\r\n content: '';\r\n position: absolute;\r\n top: -20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 120px;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(192,192,192,0.4) 100%);\r\n border-radius: 50% 50% 40% 40%;\r\n clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n }\r\n *\/\r\n\r\n #miguel-ring-sizer .size-item {\r\n \/* --- CAMBIO: position: absolute ELIMINADO --- *\/\r\n width: 90px;\r\n height: 90px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n \/* --- CAMBIO: Sombra eliminada --- *\/\r\n border: 2px solid #e0e0e0;\r\n \/* --- CAMBIO: transform y z-index ELIMINADOS --- *\/\r\n }\r\n\r\n #miguel-ring-sizer .size-item:hover {\r\n \/* --- CAMBIO: transform actualizado --- *\/\r\n transform: scale(1.15); \/* Se quit\u00f3 translate() *\/\r\n \/* --- CAMBIO: Nuevo color de hover --- *\/\r\n background: #185747;\r\n color: white;\r\n border-color: #185747;\r\n \/* --- CAMBIO: Sombra de hover gen\u00e9rica --- *\/\r\n box-shadow: 0 6px 18px rgba(0,0,0,0.15);\r\n z-index: 10;\r\n }\r\n\r\n #miguel-ring-sizer .size-item.active {\r\n \/* --- CAMBIO: Color activo actualizado --- *\/\r\n background: #185747;\r\n color: white;\r\n border-color: #185747;\r\n \/* --- CAMBIO: transform actualizado --- *\/\r\n transform: scale(1.2); \/* Se quit\u00f3 translate() *\/\r\n \/* --- CAMBIO: Sombra actualizada al nuevo color --- *\/\r\n box-shadow: 0 8px 25px rgba(24, 87, 71, 0.4);\r\n z-index: 11;\r\n }\r\n\r\n #miguel-ring-sizer .size-label {\r\n font-size: 0.75em;\r\n color: #7f8c8d;\r\n margin-bottom: 2px;\r\n font-weight: 500;\r\n }\r\n\r\n #miguel-ring-sizer .size-item:hover .size-label,\r\n #miguel-ring-sizer .size-item.active .size-label {\r\n color: rgba(255,255,255,0.9);\r\n }\r\n\r\n \/* --- CSS ELIMINADO ---\r\n * Se eliminaron todas las reglas de .size-item:nth-child()\r\n * --- *\/\r\n\r\n #miguel-ring-sizer .info-box {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n margin-top: 40px;\r\n \/* --- CAMBIO: Sombra eliminada por un borde sutil --- *\/\r\n border: 2px solid #e0e0e0;\r\n text-align: center;\r\n min-height: 120px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n #miguel-ring-sizer .info-box h3 {\r\n \/* --- CAMBIO: Color de t\u00edtulo a negro --- *\/\r\n color: #000;\r\n margin-bottom: 10px;\r\n font-size: 1.5em;\r\n \/* --- NUEVO: Aplicar tipograf\u00eda 'Cinzel' --- *\/\r\n font-family: 'Cinzel', serif;\r\n }\r\n\r\n #miguel-ring-sizer .info-box p {\r\n color: #7f8c8d;\r\n line-height: 1.6;\r\n font-size: 1.1em;\r\n }\r\n\r\n #miguel-ring-sizer .selected-size {\r\n font-size: 3em;\r\n font-weight: bold;\r\n \/* --- CAMBIO: Se elimin\u00f3 el gradiente de texto y se puso color negro --- *\/\r\n color: #000;\r\n \/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text; *\/\r\n \/* --- NUEVO: Aplicar tipograf\u00eda 'Cinzel' --- *\/\r\n font-family: 'Cinzel', serif;\r\n margin-bottom: 10px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n \/* --- CAMBIO: Regla 'body' encapsulada --- *\/\r\n #miguel-ring-sizer {\r\n padding: 20px 10px;\r\n }\r\n \r\n #miguel-ring-sizer h1 {\r\n font-size: 1.8em;\r\n }\r\n\r\n \/* .ring-visual ahora es un cuadrado responsivo, \r\n as\u00ed que no necesitamos redefinir su alto\/ancho aqu\u00ed.\r\n Se escalar\u00e1 autom\u00e1ticamente.\r\n *\/\r\n \r\n \/* --- CSS ELIMINADO: .ring-circle --- *\/\r\n\r\n \/* --- NUEVO CSS: Media query para la cuadr\u00edcula --- *\/\r\n #miguel-ring-sizer .size-grid-container {\r\n grid-template-columns: repeat(auto-fit, 70px);\r\n gap: 15px;\r\n }\r\n \r\n #miguel-ring-sizer .size-item {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n #miguel-ring-sizer .size-number {\r\n font-size: 1.2em;\r\n }\r\n\r\n #miguel-ring-sizer .size-mm {\r\n font-size: 0.7em;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"container\" id=\"miguel-ring-sizer\">\r\n \r\n <h1>Gu\u00eda de Tallas de Anillos<\/h1>\r\n <p class=\"subtitle\">Haz clic en cualquier talla para ver m\u00e1s informaci\u00f3n<\/p>\r\n \r\n \r\n <div class=\"size-grid-container\">\r\n \r\n \r\n \r\n <div class=\"size-item\" data-size=\"3\" data-mm=\"14.1\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">3<\/span>\r\n <span class=\"size-mm\">14.1MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"3.5\" data-mm=\"14.5\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">3.5<\/span>\r\n <span class=\"size-mm\">14.5MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"4\" data-mm=\"14.9\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">4<\/span>\r\n <span class=\"size-mm\">14.9MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"4.5\" data-mm=\"15.3\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">4.5<\/span>\r\n <span class=\"size-mm\">15.3MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"5\" data-mm=\"15.7\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">5<\/span>\r\n <span class=\"size-mm\">15.7MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"5.5\" data-mm=\"16.1\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">5.5<\/span>\r\n <span class=\"size-mm\">16.1MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"6\" data-mm=\"16.5\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">6<\/span>\r\n <span class=\"size-mm\">16.5MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"6.5\" data-mm=\"16.9\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">6.5<\/span>\r\n <span class=\"size-mm\">16.9MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"7\" data-mm=\"17.3\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">7<\/span>\r\n <span class=\"size-mm\">17.3MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"7.5\" data-mm=\"17.7\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">7.5<\/span>\r\n <span class=\"size-mm\">17.7MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"8\" data-mm=\"18.1\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">8<\/span>\r\n <span class=\"size-mm\">18.1MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"8.5\" data-mm=\"18.5\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">8.5<\/span>\r\n <span class=\"size-mm\">18.5MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"9\" data-mm=\"18.9\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">9<\/span>\r\n <span class=\"size-mm\">18.9MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"9.5\" data-mm=\"19.4\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">9.5<\/span>\r\n <span class=\"size-mm\">19.4MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"10\" data-mm=\"19.8\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">10<\/span>\r\n <span class=\"size-mm\">19.8MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"10.5\" data-mm=\"20.2\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">10.5<\/span>\r\n <span class=\"size-mm\">20.2MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"11\" data-mm=\"20.6\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">11<\/span>\r\n <span class=\"size-mm\">20.6MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"11.5\" data-mm=\"21.0\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">11.5<\/span>\r\n <span class=\"size-mm\">21.0MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"12\" data-mm=\"21.4\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">12<\/span>\r\n <span class=\"size-mm\">21.4MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"12.5\" data-mm=\"21.8\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">12.5<\/span>\r\n <span class=\"size-mm\">21.8MM<\/span>\r\n <\/div>\r\n \r\n <div class=\"size-item\" data-size=\"13\" data-mm=\"22.2\">\r\n <span class=\"size-label\">TALLA<\/span>\r\n <span class=\"size-number\">13<\/span>\r\n <span class=\"size-mm\">22.2MM<\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n <div class=\"info-box\">\r\n <h3>Selecciona una talla<\/h3>\r\n <p>Haz clic en cualquier talla para ver su di\u00e1metro interior exacto<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const sizeItems = document.querySelectorAll('.size-item');\r\n const infoBox = document.querySelector('.info-box');\r\n\r\n sizeItems.forEach(item => {\r\n item.addEventListener('click', function() {\r\n \/\/ Remover clase active de todos\r\n sizeItems.forEach(i => i.classList.remove('active'));\r\n \r\n \/\/ Agregar clase active al seleccionado\r\n this.classList.add('active');\r\n \r\n \/\/ Obtener datos\r\n const size = this.dataset.size;\r\n const mm = this.dataset.mm;\r\n \r\n \/\/ --- NUEVO: Funci\u00f3n para obtener descripci\u00f3n ---\r\n function getSizeDescription(size) {\r\n const sizeNum = parseFloat(size);\r\n if (sizeNum <= 4.5) {\r\n return \"Talla muy peque\u00f1a, com\u00fan para dedos muy finos o el dedo me\u00f1ique.\";\r\n } else if (sizeNum <= 6.5) {\r\n return \"Una talla peque\u00f1a, frecuente en manos delgadas o para el dedo anular.\";\r\n } else if (sizeNum <= 8.5) {\r\n return \"Esta es una de las tallas m\u00e1s comunes y promedio para mujer.\";\r\n } else if (sizeNum <= 10.5) {\r\n return \"Una talla mediana-grande, habitual en manos promedio o como talla com\u00fan de hombre.\";\r\n } else {\r\n return \"Talla grande, com\u00fan para dedos m\u00e1s anchos o manos grandes.\";\r\n }\r\n }\r\n \r\n const description = getSizeDescription(size);\r\n \r\n \/\/ --- CAMBIO: Actualizar info box con la nueva descripci\u00f3n ---\r\n infoBox.innerHTML = `\r\n <div class=\"selected-size\">Talla ${size}<\/div>\r\n <h3>Di\u00e1metro interior: ${mm}mm<\/h3>\r\n <p>${description} Recuerda que esto es solo una gu\u00eda; el grosor del nudillo tambi\u00e9n influye.<\/p>\r\n `;\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c46302b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"c46302b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/wa.me\/50376049607\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u00bfdudas?<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Momentos que nos dan forma. TAMA\u00d1OS DE ANILLOS Gu\u00eda de Tallas de Anillos Gu\u00eda de Tallas de Anillos Haz clic en cualquier talla para ver m\u00e1s informaci\u00f3n TALLA 3 14.1MM TALLA 3.5 14.5MM TALLA 4 14.9MM TALLA 4.5 15.3MM TALLA 5 15.7MM TALLA 5.5 16.1MM TALLA 6 16.5MM TALLA 6.5 16.9MM TALLA 7 17.3MM TALLA […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_angie_page":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14108","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/pages\/14108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/comments?post=14108"}],"version-history":[{"count":93,"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/pages\/14108\/revisions"}],"predecessor-version":[{"id":26253,"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/pages\/14108\/revisions\/26253"}],"wp:attachment":[{"href":"https:\/\/www.joyerialajoya.com\/en\/wp-json\/wp\/v2\/media?parent=14108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}