/** * Theme Name: Theme * Theme URI: - * Description: Tema premium exclusivo. * Version: 1.0 * Author: pablorgz.net * Requires at least: 6.0 */ * { margin: 0; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding: 0; padding-block-start: 0; padding-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; box-sizing: border-box; } html {overflow-x: hidden;} html, body { font-family: var(--font-p-family); text-size-adjust: 100%; /* desactiva el escalado automático */ -webkit-text-size-adjust: 100%; /* Desactiva el escalado automático */ } .hidden {display: none !important;} /* ################################################################# BRANDING ################################################################# */ /* ········································ BGS ········································ */ .surface-light-1 {background-color: var(--surface-light-color-1);} .surface-light-2 {background-color: var(--surface-light-color-2);} .surface-dark-1 {background-color: var(--surface-dark-color-1);} .surface-dark-2 {background-color: var(--surface-dark-color-2);} /* ········································ TEXTS, LOGOS E ICONOS ········································ */ /* Generales */ :where(h1) {font-weight: normal; font-family: var(--font-h1-family); font-size: var(--font-h1-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(h2) {font-weight: normal; font-family: var(--font-h2-family); font-size: var(--font-h2-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(h3) {font-weight: normal; font-family: var(--font-h3-family); font-size: var(--font-h3-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(h4) {font-weight: normal; font-family: var(--font-h4-family); font-size: var(--font-h4-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(a, abbr) {color: inherit; text-decoration: none;} :where( p:not(.note):not(.note-brand):not(.note *):not(.note-brand *), a:not(.note):not(.note-brand):not(.note *):not(.note-brand *), abbr:not(.note):not(.note-brand):not(.note *):not(.note-brand *), span:not(.note):not(.note-brand):not(.note *):not(.note-brand *), label:not(.note):not(.note-brand):not(.note *):not(.note-brand *) ) {font-family: var(--font-p-family); font-size: var(--font-text-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(.note, .note-brand) {font-family: var(--font-p-family); font-size: var(--font-note-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;} :where(b, strong) {font-family: var(--font-p-bold-family);} :where(i, em) {font-family: var(--font-p-italic-family);} :where(b i, i b, b em, em b, strong i, i strong, strong em, em strong) {font-family: var(--font-p-bolditalic-family);} :where(.required) {font-family: var(--font-p-bold-family); font-size: var(--font-text-size);} :where(.hover-underline:hover) {text-decoration: underline;} :where(svg) {overflow: visible; transition: width var(--transition-resize) ease, height var(--transition-resize) ease, min-width var(--transition-resize) ease, min-height var(--transition-resize) ease,fill var(--transition-interactive) ease;} :where(.ico) {width: var(--font-ico-size); min-width: var(--font-ico-size); height: var(--font-ico-size); min-height: var(--font-ico-size);} /* Colores sobre blanco */ :where(.light-section h1) {color: var(--font-h1-color-surface-light);} :where(.light-section h2) {color: var(--font-h2-color-surface-light);} :where(.light-section h3) {color: var(--font-h3-color-surface-light);} :where(.light-section h4) {color: var(--font-h4-color-surface-light);} :where( .light-section p:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .light-section a:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .light-section abbr:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .light-section span:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .light-section label:not(.note):not(.note-brand):not(.note *):not(.note-brand *) ) {color: var(--font-text-color-surface-light);} :where(.light-section p:not(.note):not(.note-brand) b, .light-section p:not(.note):not(.note-brand) strong) {color: var(--font-textbold-color-surface-light);} :where(.light-section .note) {color: var(--font-note-color-surface-light);} :where(.light-section .note b, .light-section .note strong) {color: var(--font-notebold-color-surface-light);} :where(.light-section .required) {color: var(--form-required-surface-light);} :where(.light-section h1 .logo, .light-section h1 .ico) {fill: var(--font-h1-color-surface-light);} :where(.light-section .logo:not(h1 *), .light-section .ico:not(h1 *)) {fill: var(--font-ico-color-surface-light);} :where(.light-section svg.ico-text) {fill: var(--font-text-color-surface-light);} :where(.light-section .hoverable:hover p:not(.note):not(.note-brand), .light-section .hoverable:hover a, .light-section .hoverable:hover abbr, .light-section .hoverable:hover span, .light-section .hoverable:hover label) {color: var(--font-textbold-color-surface-light);} :where(.light-section .hoverable:hover svg) {fill: var(--font-textbold-color-surface-light);} /* Colores sobre negro */ :where(.dark-section h1) {color: var(--font-h1-color-surface-dark);} :where(.dark-section h2) {color: var(--font-h2-color-surface-dark);} :where(.dark-section h3) {color: var(--font-h3-color-surface-dark);} :where(.dark-section h4) {color: var(--font-h4-color-surface-dark);} :where( .dark-section p:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .dark-section a:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .dark-section abbr:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .dark-section span:not(.note):not(.note-brand):not(.note *):not(.note-brand *), .dark-section label:not(.note):not(.note-brand):not(.note *):not(.note-brand *) ) {color: var(--font-text-color-surface-dark);} :where(.dark-section p:not(.note):not(.note-brand) b, .dark-section p:not(.note):not(.note-brand) strong) {color: var(--font-textbold-color-surface-dark);} :where(.dark-section .note) {color: var(--font-note-color-surface-dark);} :where(.dark-section .note b, .dark-section .note strong) {color: var(--font-notebold-color-surface-dark);} :where(.dark-section .required) {color: var(--form-required-surface-dark)} :where(.dark-section h1 .logo, .dark-section h1 .ico) {fill: var(--font-h1-color-surface-dark);} :where(.dark-section .logo:not(h1 *), .dark-section .ico:not(h1 *)) {fill: var(--font-ico-color-surface-dark);} :where(.dark-section svg.ico-text) {fill: var(--font-text-color-surface-dark);} :where(.dark-section .hoverable:hover p:not(.note):not(.note-brand), .dark-section .hoverable:hover a, .dark-section .hoverable:hover abbr, .dark-section .hoverable:hover span, .dark-section .hoverable:hover label) {color: var(--font-textbold-color-surface-dark);} :where(.dark-section .hoverable:hover svg) {fill: var(--font-textbold-color-surface-dark);} /* Branding */ :where(.note-brand) {color: var(--brand-color-low-contrast);} :where(.note-brand b, .note-brand strong) {color: var(--brand-color);} :where(.punto-brand) {fill: var(--brand-color); width: 6px; min-width: 6px; height: 6px; min-height: 6px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;} :where(.check-brand) {fill: var(--brand-color); width: 12px; min-width: 12px; height: 12px; min-height: 12px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;} /* ········································ A HREF | FORM BUTTON TYPE: SUMBIT ········································ */ .btn { display: flex; align-items: center; justify-content: center; text-align: center; height: var(--form-field-height); min-width: 140px; padding: 0px var(--form-field-padding); border-radius: var(--form-field-border-radius); font-family: var(--font-p-family); font-size: var(--font-h4-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, background-color var(--transition-interactive) ease; cursor: pointer; box-sizing: border-box; border: none; -webkit-appearance: none; appearance: none; } .light-section .btn {box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / min(1, calc(4 * var(--form-shadow-opacity))));} .dark-section .btn {box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / min(1, calc(4 * var(--form-shadow-opacity))));} .btn.btn-secondary {color: var(--btn-secondary-text-color); background-color: var(--btn-secondary-surface-color);} .btn.btn-secondary:not(.unselectable):hover {background-color: var(--btn-secondary-surface-color-hover);} .btn.btn-primary {color: var(--btn-primary-text-color); background-color: var(--btn-primary-surface-color);} .btn.btn-primary:not(.unselectable):hover {background-color: var(--btn-primary-surface-color-hover);} .light-section .btn.control {color: var(--font-textbold-color-surface-light); background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--form-border-size) var(--form-border-color-surface-light), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .light-section .btn.control:not(.unselectable):hover {background-color: var(--btn-control-surface-color-hover-surface-light);} .dark-section .btn.control {color: var(--font-textbold-color-surface-dark); background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--form-border-size) var(--form-border-color-surface-dark), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} .dark-section .btn.control:not(.unselectable):hover {background-color: var(--btn-control-surface-color-hover-surface-dark);} .btn.unselectable {cursor: not-allowed; opacity: 0.5;} /* ········································ FORM SELECT ········································ */ select { min-width: 150px; height: var(--form-field-height); padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size)) 0px var(--form-field-padding); border-radius: var(--form-field-border-radius); font-family: var(--font-p-family); font-size: var(--font-text-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease, background-image var(--transition-interactive) ease; background-repeat: no-repeat; background-position: right var(--form-field-padding) top 0px; background-size: var(--form-ico-size) var(--form-field-height); cursor: pointer; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .light-section select {color: var(--form-text-color-surface-light); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%237C7C7C'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--select-border-size, var(--form-border-size)) var(--select-border-color, var(--form-border-color-surface-light)), 0px 0px var(--select-shadow-size, 0px) 0px var(--select-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .light-section select option {color: var(--form-text-color-surface-light);} .dark-section select {color: var(--form-text-color-surface-dark); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%237C7C7C'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--select-border-size, var(--form-border-size)) var(--select-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--select-shadow-size, 0px) 0px var(--select-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} .dark-section select option {color: var(--form-text-color-surface-dark);} select:hover { --select-border-size: var(--form-border-size-hover); --select-border-color: var(--form-border-color-hover); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF908D'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente. */ } select:focus { --select-border-size: var(--form-border-size-focus); --select-border-color: var(--form-border-color-focus); --select-shadow-size: var(--form-shadow-size-focus); --select-shadow-color: var(--form-shadow-color-focus); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF4739'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente. */ } /* ········································ FORM TEXTAREA ········································ */ /* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */ /* textarea::placeholder {color: ;} */ textarea { padding: 7px var(--form-field-padding); border-radius: var(--form-field-border-radius); font-family: var(--font-p-family); font-size: var(--font-text-size); transition: padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease; cursor: text; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .light-section textarea {color: var(--form-text-color-surface-light); background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--textarea-border-size, var(--form-border-size)) var(--textarea-border-color, var(--form-border-color-surface-light)), 0px 0px var(--textarea-shadow-size, 0px) 0px var(--textarea-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section textarea {color: var(--form-text-color-surface-dark); background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--textarea-border-size, var(--form-border-size)) var(--textarea-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--textarea-shadow-size, 0px) 0px var(--textarea-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} textarea:hover { --textarea-border-size: var(--form-border-size-hover); --textarea-border-color: var(--form-border-color-hover); } textarea:focus { --textarea-border-size: var(--form-border-size-focus); --textarea-border-color: var(--form-border-color-focus); --textarea-shadow-size: var(--form-shadow-size-focus); --textarea-shadow-color: var(--form-shadow-color-focus); } /* ········································ FORM INPUT TYPE: TEXT, PASSWORD, EMAIL, SEARCH, TEL, URL ········································ */ /* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */ /* input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url]::placeholder {color: ;} */ input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url] { height: var(--form-field-height); padding: 0px var(--form-field-padding); border-radius: var(--form-field-border-radius); font-family: var(--font-p-family); font-size: var(--font-text-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease; cursor: text; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .light-section input[type=text], .light-section input[type=password], .light-section input[type=email], .light-section input[type=search], .light-section input[type=tel], .light-section input[type=url] {color: var(--form-text-color-surface-light); background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-surface-light)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section input[type=text], .dark-section input[type=password], .dark-section input[type=email], .dark-section input[type=search], .dark-section input[type=tel], .dark-section input[type=url] {color: var(--form-text-color-surface-dark); background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=url]:hover { --input-border-size: var(--form-border-size-hover); --input-border-color: var(--form-border-color-hover); } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=url]:focus { --input-border-size: var(--form-border-size-focus); --input-border-color: var(--form-border-color-focus); --input-shadow-size: var(--form-shadow-size-focus); --input-shadow-color: var(--form-shadow-color-focus); } /* ········································ FORM INPUT TYPE: DATE ········································ */ input[type=date] { position: relative; height: var(--form-field-height); padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size) - 22px) 0px var(--form-field-padding); border-radius: var(--form-field-border-radius); font-family: var(--font-p-family); font-size: var(--font-text-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease, background-image var(--transition-interactive) ease; background-repeat: no-repeat; background-position: right var(--form-field-padding) top 0px; background-size: var(--form-ico-size) var(--form-field-height); cursor: pointer; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .light-section input[type=date] {color: var(--form-text-color-surface-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%237C7C7C'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-surface-light)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section input[type=date] {color: var(--form-text-color-surface-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%237C7C7C'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} input[type=date]:hover { --input-border-size: var(--form-border-size-hover); --input-border-color: var(--form-border-color-hover); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23FF908D'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); } input[type=date]:focus { --input-border-size: var(--form-border-size-focus); --input-border-color: var(--form-border-color-focus); --input-shadow-size: var(--form-shadow-size-focus); --input-shadow-color: var(--form-shadow-color-focus); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23FF4739'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); } input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; right: var(--form-field-padding); cursor: pointer; opacity: 0; } /* ········································ FORM INPUT TYPE: NUMBER ········································ */ .number { display: inline-flex; justify-content: space-between; height: var(--form-field-height); border-radius: var(--form-field-border-radius); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease; } .light-section .number {background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--number-border-size, var(--form-border-size)) var(--number-border-color, var(--form-border-color-surface-light)), 0px 0px var(--number-shadow-size, 0px) 0px var(--number-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section .number {background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--number-border-size, var(--form-border-size)) var(--number-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--number-shadow-size, 0px) 0px var(--number-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} .number:hover { --number-border-size: var(--form-border-size-hover); --number-border-color: var(--form-border-color-hover); } .number:focus-within { --number-border-size: var(--form-border-size-focus); --number-border-color: var(--form-border-color-focus); --number-shadow-size: var(--form-shadow-size-focus); --number-shadow-color: var(--form-shadow-color-focus); } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; -moz-appearance: none appearance: none; margin: 0;} input[type=number] { text-align: center; background-color: transparent; width: 45px; font-family: var(--font-p-family); font-size: var(--font-text-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease; cursor: text; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .light-section input[type=number] {color: var(--form-text-color-surface-light);} .dark-section input[type=number] {color: var(--form-text-color-surface-dark);} .number button { background-color: transparent; padding: 0px var(--form-field-padding); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease; cursor: pointer; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .number button svg { width: var(--form-ico-size); height: var(--form-field-height); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, fill var(--transition-interactive) ease; } .light-section .number button svg {fill: var(--form-ico-color-surface-light);} .dark-section .number button svg {fill: var(--form-ico-color-surface-dark);} .number button:hover svg {fill: var(--form-border-color-focus);} /* ········································ FORM SM ········································ */ .btn.sm, input.sm, select.sm, .number.sm { height: var(--form-field-height-sm); font-size: var(--font-note-size); min-width: unset; } .btn.sm, input.sm, select.sm { padding: 0px var(--form-field-padding-sm); } select.sm, input[type=date].sm {background-size: var(--form-ico-size) var(--form-field-height-sm); background-position: right var(--form-field-padding-sm) top 0px;} select.sm {padding: 0px calc(var(--form-field-padding-sm) * 2 + var(--form-ico-size)) 0px var(--form-field-padding-sm);} input[type=date].sm {padding: 0px calc(var(--form-field-padding-sm) * 2 + var(--form-ico-size) - 22px) 0px var(--form-field-padding-sm);} .number.sm button:first-child {padding: 0px 0px 0px var(--form-field-padding-sm);} .number.sm button:last-child {padding: 0px var(--form-field-padding-sm) 0px 0px;} .number.sm button svg {height: var(--form-field-height-sm);} /* ········································ FORM INPUT TYPE: CHECKBOX ········································ */ .container-checkbox, label.checkbox { display: flex; align-items: center; gap: 7px; } label.checkbox {cursor: pointer;} label.checkbox input[type=checkbox], label.checkbox input[type=checkbox] + svg { width: var(--form-control-height); min-width: var(--form-control-height); height: var(--form-control-height); min-height: var(--form-control-height); } label.checkbox input[type=checkbox] { border-radius: var(--form-field-border-radius); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, box-shadow var(--transition-interactive) ease; cursor: pointer; box-sizing: border-box; border: none; -webkit-appearance: none; appearance: none; } .light-section label.checkbox input[type=checkbox] {background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--checkbox-border-size, var(--form-border-size)) var(--checkbox-border-color, var(--form-border-color-surface-light)), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section label.checkbox input[type=checkbox] {background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--checkbox-border-size, var(--form-border-size)) var(--checkbox-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} label.checkbox:hover { --checkbox-border-size: var(--form-border-size-hover); --checkbox-border-color: var(--form-border-color-hover); } label.checkbox input[type=checkbox]:checked { --checkbox-border-size: var(--form-border-size-focus); --checkbox-border-color: var(--form-border-color-focus); } label.checkbox input[type=checkbox] + svg { position: absolute; fill: none; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke: var(--form-border-color-focus); stroke-dasharray: var(--svg-array, 86.12); stroke-dashoffset: var(--svg-offset, 86.12); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, stroke-dasharray var(--transition-interactive) ease, stroke-dashoffset var(--transition-interactive) ease; } label.checkbox input[type=checkbox]:checked + svg { --svg-array: 16.1 86.12; --svg-offset: 102.22; } /* ········································ FORM INPUT TYPE: CHECKBOX TOGGLE ········································ */ .container-checkbox-toggle, label.checkbox-toggle { display: flex; align-items: center; gap: 7px; } label.checkbox-toggle {cursor: pointer;} /* Contenedor */ label.checkbox-toggle input[type=checkbox] { position: relative; width: calc(var(--form-control-height) * 2); height: var(--form-control-height); border-radius: 50px; transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, background-color var(--transition-interactive) ease; cursor: pointer; box-sizing: border-box; border: none; -webkit-appearance: none; appearance: none; } .light-section label.checkbox-toggle input[type=checkbox] {background-color: var(--form-border-color-surface-light); box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section label.checkbox-toggle input[type=checkbox] {background-color: var(--form-border-color-surface-dark); box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} label.checkbox-toggle:hover input[type=checkbox] { background-color: var(--form-border-color-hover); } /* Bola */ label.checkbox-toggle input[type=checkbox]:before { content: ""; position: absolute; width: calc(var(--form-control-height) - 6px); height: calc(var(--form-control-height) - 6px); top: calc(6px / 2); left: 4px; border-radius: 50%; transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, left var(--transition-interactive) linear; } .light-section label.checkbox-toggle input[type=checkbox]:before {background-color: var(--form-surface-color-surface-light);} .dark-section label.checkbox-toggle input[type=checkbox]:before {background-color: var(--form-surface-color-surface-dark);} label.checkbox-toggle input[type=checkbox]:checked { background-color: var(--form-border-color-focus); } label.checkbox-toggle input[type=checkbox]:checked:before { left: calc((var(--form-control-height) * 2) - (var(--form-control-height) - 6px) - 4px); } /* ········································ FORM INPUT TYPE: RADIO ········································ */ .container-radio, label.radio { display: flex; align-items: center; gap: 7px; } label.radio {cursor: pointer;} label.radio input[type=radio] {display: none;} label.radio input[type=radio] + div { width: var(--form-control-height); min-width: var(--form-control-height); height: var(--form-control-height); min-height: var(--form-control-height); border-radius: 50%; transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, background-color var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease; } .light-section label.radio input[type=radio] + div {background-color: var(--form-surface-color-surface-light); box-shadow: inset 0px 0px 0px var(--radio-border-size, var(--form-border-size)) var(--radio-border-color, var(--form-border-color-surface-light)), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity));} .dark-section label.radio input[type=radio] + div {background-color: var(--form-surface-color-surface-dark); box-shadow: inset 0px 0px 0px var(--radio-border-size, var(--form-border-size)) var(--radio-border-color, var(--form-border-color-surface-dark)), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity));} label.radio:hover { --radio-border-size: var(--form-border-size-hover); --radio-border-color: var(--form-border-color-hover); } label.radio input[type=radio]:checked + div { background-color: var(--form-border-color-focus); } .light-section label.radio input[type=radio]:checked + div { box-shadow: inset 0px 0px 0px var(--form-border-size-focus) var(--form-border-color-focus), inset 0px 0px 0px calc(var(--form-border-size-focus) + 3px) var(--form-surface-color-surface-light), 0px 0px var(--form-shadow-size) 0px rgb(0 0 0 / var(--form-shadow-opacity)); } .dark-section label.radio input[type=radio]:checked + div { box-shadow: inset 0px 0px 0px var(--form-border-size-focus) var(--form-border-color-focus), inset 0px 0px 0px calc(var(--form-border-size-focus) + 3px) var(--form-surface-color-surface-dark), 0px 0px var(--form-shadow-size) 0px rgb(255 255 255 / var(--form-shadow-opacity)); } /* ········································ BADGE ········································ */ .badge { height: 24px; width: fit-content; display: flex; align-items: center; padding: 0px 10px; border-radius: 50px; font-family: var(--font-p-bold-family); font-size: var(--font-note-size); transition: width var(--transition-resize) ease, min-width var(--transition-resize) ease, height var(--transition-resize) ease, min-height var(--transition-resize) ease, padding var(--transition-resize) ease, font-size var(--transition-resize) ease, background-color var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease; box-sizing: border-box; border: none; outline: none; -webkit-appearance: none; appearance: none; } .badge.selectable { cursor: pointer; } .badge.on { background-color: #DCFCE7; color: #166534; box-shadow: inset 0px 0px 0px 1px #86EFAC; } .badge.on.selectable:hover { background-color: #86EFAC; } .badge.off { background-color: #FFF0EF; color: #FF4739; box-shadow: inset 0px 0px 0px 1px #FFC9C4; } .badge.off.selectable:hover { background-color: #FFC9C4; } /* ········································ RESPONSIVE ········································ */ @media (min-width: 600px) { .punto-brand {width: 8px; min-width: 8px; height: 8px; min-height: 8px;} .check-brand {width: 15px; min-width: 15px; height: 15px; min-height: 15px;} } /* ###################################################################### THEME ###################################################################### */ /* ········································ DYNAMIC BG ········································ */ body:has(.dynamic-surface) {min-height: 100dvh !important; background-color: var(--dynamic-surface-soft) !important;} body:has(.dynamic-surface) section {background-color: unset !important;} .dynamic-surface { position: fixed; width: 100%; height: 98dvh; /* 98dvh centrado porque en safari iPhone: si toca la barra de arriba o abajo, las bloquea */ inset: 0; margin: auto; background: linear-gradient(-45deg, var(--dynamic-surface-strong), var(--dynamic-surface-soft), var(--dynamic-surface-muted), var(--dynamic-surface-soft), var(--dynamic-surface-strong)); background-size: 300% 300%; animation: Gradient 10s ease infinite; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; } .dynamic-surface::before { content: ""; position: fixed; width: 100%; height: 98.5dvh; /* 98.5dvh centrado porque en safari iPhone: si toca la barra de arriba o abajo, las bloquea */ inset: 0; margin: auto; background: linear-gradient(to bottom, var(--dynamic-surface-soft) 0px, rgba(255,255,255,0) 125px) top, linear-gradient(to top, var(--dynamic-surface-soft) 0px, rgba(255,255,255,0) 125px) bottom; } @keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} } @-webkit-keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} } @-moz-keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} } /* ········································ HEADER ········································ */ header { font-size: var(--font-size-menu); color: var(--color-text-menu); fill: var(--color-text-menu); user-select: none; } header p, header a, header span {color: inherit; font-size: inherit;} header svg {fill: inherit;} /* menu-fixed-part */ #menu-fixed-part { width: 100%; position: fixed; top: 0px; display: flex; justify-content: center; background-color: color-mix(in srgb, var(--color-menu) 85%, transparent); backdrop-filter: blur(15px); box-shadow: 0px 0px 0px 0px var(--color-menu-separators); transition: background-color var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease; z-index: 10000; } #menu-fixed-part.menu-fixed-part-border {box-shadow: 0px 1px 0px 0px var(--color-menu-separators);} /* Borde al desplegar menu-dropdown-part */ #menu-fixed-part > div { width: var(--menu-width); max-width: var(--menu-max-width); height: var(--menu-height); display: flex; justify-content: space-between; align-items: center; transition: width var(--transition-resize) ease, height var(--transition-resize) ease; } #menu-fixed-part.menu-fixed-part-animate > div {height: var(--menu-height-animation);} /* Animación menu-fixed-part al hacer scroll */ /* menu-dropdown-part display */ #menu-fixed-part-display-menu-dropdown-part {width: var(--menu-ico-size); height: var(--menu-ico-size); display: flex; justify-content: center; align-items: center; cursor: pointer;} #menu-fixed-part-display-menu-dropdown-part > div:first-child {transform: translateY(calc(var(--menu-ico-size) / -5));} #menu-fixed-part-display-menu-dropdown-part > div:last-child {transform: translateY(calc(var(--menu-ico-size) / 5));} #menu-fixed-part-display-menu-dropdown-part.x-1 > div {transform: translateY(0px);} /* 1ª fase de animación display x */ #menu-fixed-part-display-menu-dropdown-part.x-2 > div:first-child {transform: translateY(0px) rotate(45deg);} /* 2ª fase de animación display x */ #menu-fixed-part-display-menu-dropdown-part.x-2 > div:last-child {transform: translateY(0px) rotate(-45deg);} /* 2ª fase de animación display x */ #menu-fixed-part-display-menu-dropdown-part:hover > div {background-color: var(--color-hover-text-menu);} #menu-fixed-part-display-menu-dropdown-part > div { position: absolute; width: var(--menu-ico-size); height: 1px; border-radius: 0.5px; background-color: var(--color-text-menu); transition: width var(--transition-resize) ease, background-color var(--transition-interactive) ease, transform calc(var(--transition-interactive) / 2) linear; } /* menu-fixed-part-logo */ #menu-fixed-part-logo {display: flex;} #menu-fixed-part-logo:hover > svg {fill: var(--color-hover-text-menu);} #menu-fixed-part-logo > svg {width: var(--logo-width); max-width: var(--logo-width); height: var(--logo-height); max-height: var(--logo-height); fill: var(--color-logo-menu);} /* menu-fixed-part-minav */ #menu-fixed-part-minav {display: none; overflow: auto;} #menu-fixed-part-minav > ul {width: 100%; display: flex; justify-content: space-evenly;} #menu-fixed-part-minav > ul > li {display: flex;} #menu-fixed-part-minav > ul > li > a {padding: 8px 0px; min-width: max-content;} #menu-fixed-part-minav > ul > li > a:hover {color: var(--color-hover-text-menu);} /* display-menu-bag or contact-option */ #menu-fixed-part-right {position: relative;} #display-menu-bag, #contact-option {display: flex; cursor: pointer;} #display-menu-bag:hover > svg, #contact-option:hover > svg {fill: var(--color-hover-text-menu);} #display-menu-bag > svg, #contact-option > svg { width: var(--menu-ico-size); min-width: var(--menu-ico-size); height: var(--menu-ico-size); min-height: var(--menu-ico-size); } #display-menu-bag-globe {background: var(--color-globe-menu-bag); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: -10px; right: -10px; display: flex; justify-content: center; align-items: center; color: var(--color-text-globe-menu-bag); font-size: 0.8rem;} /* menu-bag (debajo de la bolsa) */ #menu-bag { display: none; width: max-content; position: absolute; top: calc(var(--menu-ico-size) + 18px); right: -10px; color: var(--color-text-menu-bag); fill: var(--color-text-menu-bag); font-size: var(--font-size-menu-bag); transition: top var(--transition-resize) ease, right var(--transition-resize) ease; } #menu-bag p, #menu-bag a, #menu-bag span {color: inherit; font-size: inherit;} #menu-bag svg {fill: inherit;} /* .menu-fixed-part-animate #menu-bag {top: calc(var(--menu-ico-size) + 18px);} */ #menu-bag > div { width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--color-menu_bag); position: absolute; top: -9px; right: calc((var(--menu-ico-size) / 2) - 10px + 10px); transition: right var(--transition-resize) ease; } #menu-bag-minav { background-color: var(--color-menu_bag); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); padding: 20px; border-radius: var(--form-field-border-radius); transition: padding var(--transition-resize) ease; } #menu-bag-minav > ul > li {display: flex;} #menu-bag-minav > ul > li > a { display: flex; align-items: center; gap: 8px; padding: 8px 0px; } #menu-bag-minav > ul > li > a:hover > p, #menu-bag-minav > ul > li > a:hover > span {color: var(--color-hover-text-menu-bag);} #menu-bag-minav > ul > li > a:hover > svg {fill: var(--color-hover-text-menu-bag);} #menu-bag-minav > ul > li > a > svg { width: var(--menu-bag-ico-size); min-width: var(--menu-bag-ico-size); height: var(--menu-bag-ico-size); min-height: var(--menu-bag-ico-size); } /* Animacion menu-bag */ @media (min-width: 600px) { #menu-bag {right: -25px;} #menu-bag > div {right: calc((var(--menu-ico-size) / 2) - 10px + 25px);} #menu-bag-minav {padding: 25px;} } @media (min-width: 950px) { #menu-bag {right: -60px;} #menu-bag > div {right: calc((var(--menu-ico-size) / 2) - 10px + 60px);} } @media (min-width: 1450px) { #menu-bag {right: calc(-1 * ((185px / 2) - (var(--menu-ico-size) / 2)));} #menu-bag > div {right: calc((var(--menu-ico-size) / 2) - 10px + ((185px / 2) - (var(--menu-ico-size) / 2)));} } /* menu-dropdown-part-viewport */ #menu-dropdown-part-viewport {position: fixed; top: 0px; bottom: 0px; width: 100%; display: none; overflow: auto; z-index: 9999;} /* Simula un viewport con su propio scroll */ #menu-dropdown-part-viewport.menu-dropdown-part-bg, #menu-fixed-part.menu-dropdown-part-bg {background-color: var(--color-menu);} /* El color de fondo se le da al viewport, porque esta fijo */ .stop-scroll {overflow: hidden !important;} /* Bloquea el scroll del body */ /* menu-dropdown-part */ #menu-dropdown-part {width: 100%; min-height: 100%; display: flex; justify-content: center; padding-top: var(--menu-height); padding-bottom: 20px; transition: padding-top var(--transition-resize) ease;} #menu-dropdown-part.menu-dropdown-part-animate {padding-top: var(--menu-height-animation);} /* Animación posicion del menu-dropdown-part-viewport */ #menu-dropdown-part > div { width: var(--menu-width); max-width: var(--menu-max-width); display: flex; flex-direction: column; justify-content: space-between; gap: 100px; transition: width var(--transition-resize) ease; } /* menu-dropdown-part-minav */ #menu-dropdown-part-minav > ul {list-style: none;} #menu-dropdown-part-minav > ul > li {box-shadow: 0px 0px 0px 0px var(--color-menu-separators); transition: box-shadow var(--transition-interactive) ease;} #menu-dropdown-part-minav .menu-dropdown-part-minav-border {box-shadow: 0px 1px 0px 0px var(--color-menu-separators);} #menu-dropdown-part-minav > ul > li > a { display: flex; padding: 15px 0px; } #menu-dropdown-part-minav > ul > li > a:hover {color: var(--color-hover-text-menu) !important;} /* menu-dropdown-part-footer */ #menu-dropdown-part-footer {display: flex; flex-direction: column; gap: 15px;} #menu-dropdown-part-footer > ul {list-style: none;} #menu-dropdown-part-footer > ul > li {display: flex;} #menu-dropdown-part-footer > ul > li > a { display: flex; align-items: center; gap: 8px; padding: 2px 0px; } #menu-dropdown-part-footer > ul > li > a:hover {color: var(--color-hover-text-menu) !important;} #menu-dropdown-part-footer > ul > li > a:hover > svg {fill: var(--color-hover-text-menu) !important;} #menu-dropdown-part-footer > ul > li > a > svg { width: var(--menu-ico-size); min-width: var(--menu-ico-size); height: var(--menu-ico-size); min-height: var(--menu-ico-size); } /* Animacion menu */ @media (min-width: 950px) { #menu-fixed-part-display-menu-dropdown-part {display: none;} #menu-fixed-part-minav {display: flex; width: 100%;} } /* ········································ FOOTER ········································ */ footer { font-size: var(--font-note-size); color: var(--color-text-footer); fill: var(--color-text-footer); user-select: none; position: relative; display: flex; justify-content: center; padding-top: var(--footer-padding-top); background-color: var(--color-footer); } footer p, footer a, footer span {color: inherit !important; font-size: inherit !important;} footer svg {fill: inherit !important;} footer > div { width: var(--footer-width); max-width: var(--footer-max-width); height: var(--footer-height); display: flex; flex-direction: column; justify-content: center; gap: 30px; transition: width var(--transition-resize) ease; } footer > div > div { display: flex; flex-direction: column; gap: 30px; } #footer-logo {display: flex; justify-content: center;} #footer-logo > svg {width: var(--logo-width); min-width: var(--logo-width); height: var(--logo-height); min-height: var(--logo-height); fill: var(--color-logo-footer) !important;} #footer-logo > svg:hover {fill: var(--color-hover-text-footer) !important;} #footer-nav > ul {list-style: none; display: flex; justify-content: space-between; gap: 25px;} #footer-nav > ul > li > a {display: flex; text-align: center;} #footer-nav > ul > li > a:hover {color: var(--color-hover-text-footer) !important;} @media (min-width: 950px) { footer > div > div {flex-direction: row; justify-content: space-between; align-items: center; gap: 40px;} #footer-nav > ul {gap: 40px;} } /* ········································ ACTION BAR BOTTOM ········································ */ #action-bar-bottom {width: 100%; position: fixed; bottom: 0px; background-color: var(--surface-light-color-1); border-top: 1px solid var(--form-border-color-surface-light); z-index: 100;} #action-bar-bottom > div {padding: 10px 0px;} #action-bar-bottom button {width: 100%;} @media (min-width: 950px) { #action-bar-bottom {display: none;} } /* ········································ MAIN ········································ */ /* Para que, aunque el contenido este vacio, el footer este siempre abajo de la pantalla */ body {display: flex; flex-direction: column; min-height: 100dvh;} main {flex: 1;} /* ········································ SECTIONS THEME ········································ */ /* Estandar */ .container-full-width-centered {position: relative; width: 100%; display: flex; justify-content: center;} .container-inner {width: var(--container-width); max-width: var(--container-max-width); transition: width var(--transition-resize) ease;} /* Full width */ .container-full-width {position: relative; width: 100%; display: flex;} /* Centrado (con footer) */ .page-centered {min-height: calc(100dvh - var(--footer-height) - var(--footer-padding-top)); position: relative; display: flex; justify-content: center; align-items: center;} /* Centrado pantalla completa (sin footer) */ .page-centered-full-screen {min-height: 100dvh; position: relative; display: flex; justify-content: center; align-items: center;} body:has(.page-centered-full-screen) main {flex: unset !important;} /* Interior para centrados */ .page-centered-inner {width: var(--container-width); max-width: 500px; transition: width var(--transition-resize) ease;} /* section-padding */ .section-padding-bottom, .section-padding-bottom-onlymobile {padding-bottom: var(--container-padding);} .section-padding-top, .section-padding-top-onlymobile {padding-top: var(--container-padding);} .section-padding-top-menu {padding-top: calc(var(--container-padding) + var(--menu-height));} .section-padding-bottom, .section-padding-bottom-onlymobile, .section-padding-top, .section-padding-top-onlymobile, .section-padding-top-menu {transition: padding var(--transition-resize) ease;} @media (min-width: 950px) { .section-padding-bottom-onlymobile {padding-bottom: 0px;} .section-padding-top-onlymobile {padding-top: 0px;} .section-padding-bottom-onlypc {padding-bottom: var(--container-padding)} .section-padding-top-onlypc {padding-top: var(--container-padding);} } /* spacing-flow */ .spacing-flow > h1 + *, .spacing-flow > h2 + *, .spacing-flow > a + *, .spacing-flow > ul + *, .spacing-flow > ol + *, .spacing-flow > div + * {margin-top: var(--space-md);} .spacing-flow > * + form {margin-top: var(--space-md);} .spacing-flow > * + * {margin-top: var(--space-sm);} @media (min-width: 950px) { .spacing-flow > h1 + *, .spacing-flow > h2 + *, .spacing-flow > a + *, .spacing-flow > ul + *, .spacing-flow > ol + *, .spacing-flow > div + *{margin-top: var(--space-lg);} .spacing-flow > * + form {margin-top: var(--space-lg);} .spacing-flow > * + * {margin-top: var(--space-md);} } /* form display */ .container-form, .container-form .form_1-2 {display: flex; flex-direction: column; gap: var(--space-sm);} .container-form input:not([type="radio"]):not([type="checkbox"]), .container-form select, .container-form textarea, .container-form button, .container-form > div, .container-form .form_1-2 > div {width: 100%;} /* form-row helpers (WC) — width-wide/first/last. En mobile todos al 100%; en >= 950px first/last comparten fila. */ .form-row {width: 100%;} @media (min-width: 700px) { .container-form .form_1-2 {flex-direction: row; justify-content: space-between; gap: var(--space-sm);} .container-form > .form-row-first, .container-form > .form-row-last {width: calc(50% - var(--space-sm) / 2);} } @media (min-width: 950px) { .container-form {flex-direction: row; flex-wrap: wrap;} .container-form, .container-form .form_1-2 {gap: var(--space-md);} .container-form > .form-row-first, .container-form > .form-row-last {width: calc(50% - var(--space-md) / 2);} } /* Cover */ .container-full-cover-centered {position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;} .container-partial-cover-centered {position: relative; width: 100%; height: var(--img-mobile); display: flex; justify-content: center; align-items: center;} .container-cover-bg-img {width: 100%; height: 100%; object-fit: cover; position: absolute;} .container-cover-info {max-width: min(var(--container-width), 700px); position: relative; text-align: center; z-index: 5;} .container-full-cover-centered-pc {position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding-top: calc(var(--container-padding) + var(--menu-height));} section:has(.container-cover-right-img) {overflow: hidden;} .container-cover-right-img {display: none;} @media (min-width: 950px) { .container-partial-cover-centered {height: 600px;} .container-full-cover-centered-pc {height: 100vh; padding-top: 0px;} .container-cover-right-img {display: unset; position: absolute; height: 90%; width: auto; top: 0px; left: 80%;} } @media (min-width: 2100px) { .container-partial-cover-centered {height: 750px;} } /* Panel */ .panel { border-radius: 10px; padding: 20px; transition: padding var(--transition-interactive) ease, transform var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease; } .light-section .panel {background-color: var(--surface-light-color-1); box-shadow: inset 0px 0px 0px 1px var(--form-border-color-surface-light), 0px 0px 10px 0px rgba(0, 0, 0, 0.15);} .dark-section .panel {background-color: var(--surface-dark-color-2); box-shadow: inset 0px 0px 0px 1px var(--form-border-color-surface-dark), 0px 0px 10px 0px rgba(255,255,255,0.15);} .light-section .panel.hoverable:hover { transform: translateY(-2px);; box-shadow: inset 0px 0px 0px 1px var(--form-border-color-surface-light), 0px 0px 20px 0px rgba(0, 0, 0, 0.15); } .dark-section .panel.hoverable:hover { transform: translateY(-2px);; box-shadow: inset 0px 0px 0px 1px var(--form-border-color-surface-dark), 0px 0px 20px 0px rgba(255, 255, 255, 0.15); } @media (min-width: 600px) { .panel {padding: 30px;} } /* Message */ .light-section .container-message h4 {border-bottom: 1px solid var(--form-border-color-surface-light);} .dark-section .container-message h4 {border-bottom: 1px solid var(--form-border-color-surface-dark);} .container-message h4::after {content: ""; display: block; width: 60%; min-width: fit-content;} .light-section .container-message h4::after {border-bottom: 1px solid var(--font-h1-color-surface-light);} .dark-section .container-message h4::after {border-bottom: 1px solid var(--font-h1-color-surface-dark);} .container-message.error h4 {color: var(--brand-color);} .container-message.error a {display: flex; align-items: center; justify-content: center; gap: 7px;} .maintenance-header {text-align: center;} .maintenance-header > svg {height: 100px; width: 100%; max-width: 250px;} .container-auth-form h2 {text-align: center;} .check-forget {display: flex; justify-content: space-between;} /* ········································ TEMPLATE LEGAL ········································ */ /* Menu legales */ #legal-menu {display: none;} #legal-menu > ul > li {display: flex;} #legal-menu > ul > li > a { display: flex; color: var(--font-h4-color-surface-light); border-left: 2px solid transparent; padding: 7px 0px; transition: padding-left var(--transition-interactive) ease, color var(--transition-interactive) ease, top var(--transition-interactive) ease, border-left var(--transition-interactive) ease; } #legal-menu > ul > li > a:hover {padding-left: 16px; color: var(--font-h1-color-surface-light); font-family: var(--font-h4-family); border-left: 2px solid var(--font-h1-color-surface-light);} /* Info legales */ @media (min-width: 800px) { #legal-menu {display: block; position: fixed; top: calc(var(--container-padding) + var(--menu-height));} .container-legal > div {width: calc(100% - 250px); margin-left: 250px;} } @media (min-width: 950px) { .container-legal > div {width: calc(100% - 300px); margin-left: 300px;} } /* ········································ DROPDOWN ········································ */ .dropdown {width: 100%; text-align: left;} .dropdown .active .dropdown-more {display: none;} .dropdown .active .dropdown-less {display: flex;} .dropdown .dropdown-more {display: flex;} .dropdown .dropdown-less {display: none;} .dropdown-item {display: flex; flex-direction: column; padding: 12px 0px; border-bottom: 1px solid var(--form-border-color-surface-light); cursor: pointer;} .dropdown-item-header {display: flex; justify-content: space-between; gap: 15px; align-items: center;} .dropdown-item-header > div {padding-right: 7px;} .dropdown-item-content {display: none; margin-top: 7px;} @media (min-width: 950px) { .dropdown {display: none;} } /* ········································ SOCIAL ········································ */ .social-container {width: 100%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;} .social-container > a {width: calc(var(--font-ico-size-1) + 20px); height: calc(var(--font-ico-size-1) + 20px); border-radius: 50%; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; transition: width var(--transition-resize) ease;} .surface-light-1 .social-container > a {background-color: var(--surface-light-color-2);} .surface-light-2 .social-container > a {background-color: var(--surface-light-color-1);} .surface-dark-1 .social-container > a {background-color: var(--surface-dark-color-2);} .surface-dark-2 .social-container > a {background-color: var(--surface-dark-color-1);} .light-section .social-container > a:hover > svg {fill: var(--font-textbold-color-surface-light);} .dark-section .social-container > a:hover > svg {fill: var(--font-textbold-color-surface-dark);} .social-container > a > svg {width: 20px; min-width: 20px; height: 20px; min-height: 20px;} .light-section .social-container > a > svg {fill: var(--font-text-color-surface-light);} .dark-section .social-container > a > svg {fill: var(--font-text-color-surface-dark);} @media (min-width: 600px) { .social-container > a {width: calc(var(--font-ico-size-2) + 20px); height: calc(var(--font-ico-size-2) + 20px);} } /* ###################################################################### CONTAINERS WEB ###################################################################### */ /* ········································ Comunes ········································ */ /* general-info-containers */ .container-general-info-center-center, .container-general-info-centermax-center, .container-general-info-center-left, .container-general-info-centermax-left {display: flex; flex-direction: column; align-items: center;} .container-general-info-centermax-center > *, .container-general-info-centermax-left > * {max-width: 500px;} @media (min-width: 950px) { .container-general-info-centermax-center > *, .container-general-info-centermax-left > * {max-width: unset;} .container-general-info-center-left, .container-general-info-centermax-left {align-items: unset;} } /* general-list */ .list-colum {display: flex; flex-direction: column; gap: var(--space-sm);} .list-inline {width: 100%; display: flex; justify-content: space-between;} .list-colum > li, .list-inline > li {display: flex; align-items: center; gap: 7px;} @media (min-width: 2100px) { .list-colum-left, .list-colum-center {gap: var(--space-lg);} } /* banner-info */ .banner-info > * {display: flex; justify-content: center; align-items: center; transition: margin var(--transition-resize) ease;} /* titulo */ .banner-info > div:first-child {font-size: min(var(--font-h1-size-1), 8vw) !important; gap: min(15px, 3.5vw);} .banner-info > div:first-child h1 {white-space: nowrap; font-size: inherit !important;} .banner-info > div:first-child svg {width: 4.8em;} /* texto */ .banner-info > p {font-size: min(var(--font-text-size-1), 3.5vw) !important; margin-bottom: min(5dvh, 40px);} /* items */ .banner-info > ul li {list-style: none; display: flex; align-items: center; font-size: min(var(--font-text-size-1), 3.5vw) !important;} .banner-info > ul li svg {margin: 0px 7px; transition: margin var(--transition-resize) ease;} /* botones */ .banner-info > div:last-child {gap: min(25px, 3.5vw);} .banner-info > div:last-child > * {margin-top: min(5dvh, 40px);} @media (min-width: 600px) { .banner-info > div:first-child {font-size: var(--font-h1-size-2) !important;} .banner-info > p {font-size: var(--font-text-size-2) !important;} .banner-info > ul li {font-size: var(--font-text-size-2) !important;} .banner-info > ul li svg {margin: 0px 25px;} } /* ········································ 404 ········································ */ .container-404 h2 {color: var(--font-note-color-surface-light);} .container-404 h4 {font-size: min(200px, 40vw); margin: -10% 0px;} .container-404 p {text-align: center;} /* ········································ Home ········································ */ /* container-us */ .container-us {display: flex; flex-direction: column-reverse; gap: var(--container-padding);} .container-us-img {position: relative; display: flex; justify-content: start; left: 50%; transform: translateX(-50%); width: 100vw;} .container-us-img > img {width: calc(100% - ((100% - var(--container-width)) / 2)); height: auto; z-index: 1;} .container-us-info > h2 {border-bottom: 1px solid var(--form-border-color-surface-dark);} .container-us-info > h2::after {content: ""; display: block; width: 60%; min-width: fit-content; border-bottom: 1px solid var(--font-h1-color-surface-dark);} @media (min-width: 950px) { .container-us {flex-direction: row;} .container-us-img {width: 40%; justify-content: unset; left: unset; transform: unset;} .container-us-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); position: absolute; right: 0px; top: 0px; min-height: 100%; object-fit: cover; object-position: right;} .container-us-info {width: 60%;} } @media (min-width: 2100px) { .container-us-img > img {margin-top: -100px;} } /* container-characteristics */ body:has(.container-characteristics) main {isolation: isolate;} .container-characteristics {display: flex; flex-direction: column; gap: var(--container-padding);} .container-characteristics-img {position: relative; display: flex; justify-content: center;} .container-characteristics-img > img {width: 50%; height: auto; margin-top: -80%; transition: margin var(--transition-resize) ease;} @media (min-width: 950px) { .container-characteristics {flex-direction: row;} .container-characteristics-img {width: fit-content;} .container-characteristics-img > img {width: auto; height: 800px; margin-top: calc(0px - var(--container-padding));} } @media (min-width: 2100px) { .container-characteristics-img > img {height: 1000px;} } /* container-testimonials */ .container-testimonials-items {width: 100%;} .container-testimonials-items > div {border-bottom: 1px solid var(--form-border-color-surface-light); padding: 30px 0px; text-align: left; display: flex; flex-direction: column; gap: 20px;} .container-testimonials-items-info {display: flex; align-items: center; flex-wrap: wrap; width: 100%;} .container-testimonials-items-info > div {width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--form-border-color-surface-light);} .container-testimonials-items-info > div svg {min-width: 20px; width: 20px; fill: var(--font-textbold-color-surface-light);} .container-testimonials-items-info p:first-of-type {padding-left: 7px;} .container-testimonials-items-info p:last-child {width: 100%; margin-top: 15px;} .container-testimonials-items-stars {display: flex; gap: 7px;} .container-testimonials-items-stars > svg {width: 40px; height: 40px; min-width: 40px; min-height: 40px;} .estrella-activa {fill: var(--brand-color);} .light-section .container-testimonials-items .estrella-inactiva {fill: var(--form-border-color-surface-light);} .dark-section .container-testimonials-items .estrella-inactiva {fill: var(--form-border-color-surface-dark);} @media (min-width: 950px) { .container-testimonials-items > div {flex-direction: row; justify-content: space-between; gap: 60px;} } /* ········································ Camera ········································ */ /* container-summary */ .container-summary {display: flex; flex-direction: column; gap: var(--container-padding);} .container-summary-img {position: relative; display: flex; justify-content: start; left: 50%; transform: translateX(-50%); width: 100vw;} .container-summary-img > img {width: calc(100% - ((100% - var(--container-width)) / 2)); height: auto; z-index: 1;} @media (min-width: 950px) { .container-summary {flex-direction: row;} .container-summary-img {width: 40%; justify-content: unset; left: unset; transform: unset;} .container-summary-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); position: absolute; right: 0px; top: 0px; min-height: 100%; object-fit: cover; object-position: right;} .container-summary-info {width: 60%;} } /* container-lens */ .container-lens {display: flex; flex-direction: column-reverse; gap: var(--container-padding);} .container-lens-img {position: relative; display: flex; justify-content: center;} .container-lens-img > img {height: auto; width: min(70%, 290px);} .container-lens-info > p {text-align: left;} @media (min-width: 950px) { .container-lens {flex-direction: row;} .container-lens-img {position: relative; width: 40%;} .container-lens-img > img {height: 450px; width: auto; position: absolute; bottom: calc(0px - var(--container-padding)); right: 0;} .container-lens-info {width: 60%;} } @media (min-width: 2100px) { .container-lens-img > img {height: 600px;} } /* container-measures */ section:has(.container-measures) {overflow: hidden;} .container-measures {display: flex; flex-direction: column; gap: var(--container-padding);} .container-measures-img {position: relative; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); width: 100vw;} .container-measures-img > img {width: 160vw; height: unset;} @media (min-width: 500px) { .container-measures-img > img {width: 130vw;} } @media (min-width: 950px) { .container-measures-img > img {width: 100vw;} } /* container-datasheet */ .container-datasheet {display: flex; flex-direction: column; gap: var(--container-padding);} .container-datasheet-info {} .container-datasheet-info-items {display: none;} .container-datasheet-info-items > div {display: flex; gap: 30px; border-bottom: 1px solid var(--form-border-color-surface-light); padding: 25px 0px;} .container-datasheet-info-items > div p:nth-child(n){width: 300px;} .container-datasheet-info-items > div p:nth-child(2n){width: 100%} .container-datasheet-img {position: relative; display: flex; justify-content: center;} .container-datasheet-img > img {width: 50%; height: auto;} @media (min-width: 950px) { .container-datasheet-info-items {display: unset; text-align: left;} .container-datasheet-img > img {width: auto; height: 400px;} } @media (min-width: 1500px) { .container-datasheet-img > img {height: 500px;} } @media (min-width: 2100px) { .container-datasheet-img > img {height: 600px;} } /* container-placement */ .container-placement > div {width: 100%; display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr);} .container-placement > div > img {width: 100%;} @media (min-width: 950px) { .container-placement > div {grid-template-columns: repeat(4, 1fr);} } /* action-bar-bottom */ @media (max-width: 949px) { body:has(#action-bar-bottom) .banner-info > div > form, body:has(#action-bar-bottom) .container-summary-info > form, body:has(#action-bar-bottom) .container-lens-info > form, body:has(#action-bar-bottom) .container-datasheet-info > form, body:has(#action-bar-bottom) .container-placement > form {display: none;} } /* ········································ Enterprise ········································ */ /* container-company */ .container-company {display: flex; flex-direction: column; gap: var(--container-padding);} .container-company-info > h1 {border-bottom: 1px solid var(--form-border-color-surface-light);} .container-company-info > h1::after {content: ""; display: block; width: 60%; min-width: fit-content; border-bottom: 1px solid var(--font-h1-color-surface-light);} .container-company-img {position: relative; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); width: 100vw;} .container-company-img > img {height: var(--img-mobile); width: 100%; object-fit: cover;} @media (min-width: 950px) { .container-company {flex-direction: row-reverse;} .container-company-info {width: 60%;} .container-company-img {width: 40%; justify-content: unset; left: unset; transform: unset;} .section-padding-top-menu .container-company-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); height: calc(100% + var(--container-padding) * 2 + var(--menu-height)); position: absolute; top: calc(-1 * var(--container-padding) - var(--menu-height)); right: 0px;} .container-company-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); height: calc(100% + var(--container-padding) * 2); position: absolute; top: calc(-1 * var(--container-padding)); right: 0px;} } @media (min-width: 2100px) { .container-company-info {width: 70%;} .container-company-img {width: 30%;} .container-company-img > img {width: calc(100% + ((100vw - (100% / 0.30)) / 2));} } /* Taller */ .container-workshop-info-absolute {display: none;} .container-workshop-info > h1 {border-bottom: 1px solid var(--form-border-color-surface-light);} .container-workshop-info > h1::after {content: ""; display: block; width: 60%; min-width: fit-content; border-bottom: 1px solid var(--font-h1-color-surface-light);} @media (min-width: 950px) { .container-workshop {display: flex; justify-content: flex-end; position: relative;} .container-workshop-info-absolute {display: block; width: min(75%, 700px); position: absolute; padding-top: 20px;} .container-workshop-info > h1::after {width: max(25%, calc(100% - 700px));} .container-workshop-info > p:first-of-type {display: none;} } /* Tecnologia */ .container-technology {display: flex; flex-direction: column-reverse; gap: var(--container-padding);} .container-technology-info > h1 {border-bottom: 1px solid var(--form-border-color-surface-light);} .container-technology-info > h1::after {content: ""; display: block; width: 60%; min-width: fit-content; border-bottom: 1px solid var(--font-h1-color-surface-light);} .container-technology-img {position: relative; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); width: 100vw;} .container-technology-img > img {height: var(--img-mobile); width: 100%; object-fit: cover;} @media (min-width: 950px) { .container-technology {flex-direction: row;} .container-technology-info {width: 60%;} .container-technology-img {width: 40%; justify-content: unset; left: unset; transform: unset;} .container-technology-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); height: calc(100% + var(--container-padding) * 2); position: absolute; top: calc(-1 * var(--container-padding)); left: 0px;} } @media (min-width: 2100px) { .container-technology-info {width: 70%;} .container-technology-img {width: 30%;} .container-technology-img > img {width: calc(100% + ((100vw - (100% / 0.30)) / 2));} } /* ············································ Faq ············································ */ .container-faq-a, .container-faq-b {display: flex; flex-direction: column; gap: var(--container-padding);} .container-faq-a-img, .container-faq-b-img {position: relative; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); width: 100vw;} .container-faq-a-img > img, .container-faq-b-img > img {height: var(--img-mobile); width: 100%; object-fit: cover;} .faq-info {display: none; padding-left: 100px; border-top: 1px solid var(--form-border-color-surface-light);} .faq-info > div {padding: 30px 0px; border-bottom: 1px solid var(--form-border-color-surface-light);} @media (min-width: 950px) { .container-faq-a {flex-direction: row;} .container-faq-b {flex-direction: row-reverse;} .container-faq-a-info, .container-faq-b-info {width: 60%;} .faq-info {display: block;} .container-faq-a-img, .container-faq-b-img {width: 40%; justify-content: unset; left: unset; transform: unset;} .container-faq-a-img > img, .container-faq-b-img > img {width: calc(100% + ((100vw - (100% / 0.40) - var(--container-padding)) / 2)); height: calc(100% + var(--container-padding) * 2); position: absolute; top: calc(-1 * var(--container-padding));} .section-padding-top-menu .container-faq-a-img > img {height: calc(100% + var(--container-padding) * 2 + var(--menu-height)); top: calc(-1 * var(--container-padding) - var(--menu-height));} .container-faq-a-img > img {left: 0px;} .container-faq-b-img > img {right: 0px;} } @media (min-width: 2100px) { .container-faq-a-info, .container-faq-b-info {width: 100%;} .container-faq-a-img, .container-faq-b-img {width: 0%;} .container-faq-a-img > img, .container-faq-b-img > img {width: calc((100vw - var(--container-max-width)) / 2);} } /* ············································ Contact ············································ */ /* Formulario de contacto */ .container-contact-form > h1 {border-bottom: 1px solid var(--form-border-color-surface-light);} .container-contact-form > h1::after {content: ""; display: block; width: 60%; min-width: fit-content; border-bottom: 1px solid var(--font-h1-color-surface-light);} /* Datos de contacto */ .container-contact-data {text-align: center; max-width: 1000px;} .container-contact-data-items {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;} .container-contact-data-items > div > a {display: flex; align-items: center; gap: 7px; padding: 8px 0px; cursor: pointer;} /* ###################################################################### WOOCOMMERCE ###################################################################### */ main:has(.woocommerce) {background-color: var(--surface-light-color-2);} wc-order-attribution-inputs {display: none;} /* ············································ NOTICES Y GENERAL SHOP ············································ */ /* notices-wrapper: bloque estandar de noticias woocommerce. */ /* NoticeGroup: bloque AJAX que el JS de WC inyecta dentro de
. */ .woocommerce-notices-wrapper, .woocommerce-NoticeGroup, .woocommerce-NoticeGroup > [role="alert"] { width: 100%; display: flex; flex-direction: column; gap: 10px; } .woocommerce-notices-wrapper:empty, .woocommerce-notices-wrapper:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)), .woocommerce-NoticeGroup:empty, .woocommerce-NoticeGroup:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)) { display: none; } /* Clases estándar de WooCommerce. */ /* Añadir display:none a los mensajes que no se quieran mostrar */ .woocommerce-error, .woocommerce-message, .woocommerce-info { padding: 12px 16px; border-radius: var(--form-field-border-radius); background-color: var(--notice-surface); border: 1px solid var(--notice-border); list-style: none; margin: 0; } .woocommerce-error { --notice-surface: #FEF2F2; --notice-border: #FECACA; --notice-accent: #B91C1C; --notice-strong: #7F1D1D; } .woocommerce-message { --notice-surface: #ECFDF5; --notice-border: #A7F3D0; --notice-accent: #047857; --notice-strong: #064E3B; } .woocommerce-info { --notice-surface: #EFF6FF; --notice-border: #BFDBFE; --notice-accent: #1D4ED8; --notice-strong: #1E3A8A; } .woocommerce-error > li, .woocommerce-error > p, .woocommerce-message > p, .woocommerce-info > p { color: var(--notice-accent); } .woocommerce-error strong, .woocommerce-message strong, .woocommerce-info strong { color: var(--notice-strong); } .woocommerce-error > li + li { margin-top: 6px; } /* WC añade tabindex="-1" + .focus() al notice tras inyectarlo (lectores de pantalla anuncian el mensaje). El outline del navegador aparece como borde negro y, segun la heuristica del browser, a veces :focus-visible matchea tambien para focos programaticos. Quitamos el outline de raiz en todos los elementos que WC focusea en este flujo: el wrapper, los NoticeGroup, los notices estandar y cualquier elemento con role="alert" dentro del wrapper. */ .woocommerce-notices-wrapper:focus, .woocommerce-notices-wrapper [role="alert"]:focus, .woocommerce-NoticeGroup:focus, .woocommerce-NoticeGroup [role="alert"]:focus, .woocommerce-error:focus, .woocommerce-message:focus, .woocommerce-info:focus { outline: none; } /* ──────── BlockUI: feedback de loading durante AJAX de WooCommerce ──────── WC usa el plugin jQuery.blockUI ($.block()) para overlay sobre form.checkout, form.checkout_coupon, form.woocommerce-cart-form, .woocommerce-checkout-review-order, .finish-shipping-methods, .woocommerce-checkout-payment, etc. durante cada AJAX (update_order_review, apply_coupon, place_order…). WC pasa `message: null`, asi que sin CSS propio el overlay queda transparente y no hay feedback visual. Estilo: overlay frosted (blur + tinte) y spinner SVG-friendly centrado en brand. */ .blockUI.blockOverlay { position: absolute !important; inset: 0; z-index: 10; background-color: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: inherit; cursor: wait; opacity: 1 !important; transition: opacity var(--transition-resize, 0.2s) ease; } .blockUI.blockOverlay::before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 5px solid #D9D9D9; border-top-color: transparent; border-radius: 50%; animation: wpro-block-spin 0.7s linear infinite; } @keyframes wpro-block-spin { to { transform: rotate(360deg); } } /* Mensaje de blockUI: aunque WC pasa message:null, algun plugin podria activarlo. Lo neutralizamos para que no muestre el spinner GIF nativo encima del nuestro. */ .blockUI.blockMsg {display: none !important;} /* Badge de estado del producto compartido entre finish y cart (ej: backorder) */ .shop-status {display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-note-size); color: var(--font-note-color-surface-light); width: fit-content;} .shop-status::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor;} .shop-status-backorder {color: #D08700;} /* ············································ FINISH ············································ */ /* El h4 "Additional information" del panel hace de cabecera del textarea order_comments — ocultamos su