/* ===================================================================================================================== * MotorCasión · COMPONENTES del sistema de diseño (03/10/2026, F1). Solo usan tokens --mc-* (assets/css/tokens.css). * Mobile first (min-width). Sin !important. Todo con clase mc-*: no toca el HTML de Woodmart ni de los plugins. * Muestra viva de todo: /sistema-de-diseno/?mc_camino_b=1 (plantillas/sistema-diseno.php). * ===================================================================================================================== */ /* ---- Base de las pantallas del tema ---- */ .mc-pagina { background: var(--mc-fondo); color: var(--mc-texto-2); font-family: var(--mc-letra-texto); font-size: var(--mc-t-m); line-height: var(--mc-lh-texto); padding-block: var(--mc-e-6) var(--mc-seccion); } .mc-pagina *, .mc-pagina *::before, .mc-pagina *::after { box-sizing: border-box; } .mc-contenedor { width: 100%; max-width: var(--mc-ancho); margin-inline: auto; padding-inline: var(--mc-gutter); } .mc-contenedor--estrecho { max-width: 760px; } .mc-pagina :where(h1, h2, h3, h4) { font-family: var(--mc-letra-titulos); color: var(--mc-texto); line-height: var(--mc-lh-titulo); font-weight: var(--mc-peso-titulo); letter-spacing: -0.01em; margin: 0 0 var(--mc-e-3); text-wrap: balance; } .mc-pagina :where(p) { margin: 0 0 var(--mc-e-4); } .mc-pagina :where(a:not([class])) { color: var(--mc-azul); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .mc-pagina :where(a:not([class]):hover) { text-decoration-thickness: 2px; } .mc-h1 { font-size: var(--mc-t-h1); } .mc-h2 { font-size: var(--mc-t-h2); } .mc-h3 { font-size: var(--mc-t-h3); } .mc-h4 { font-size: var(--mc-t-h4); } .mc-entradilla { font-size: var(--mc-t-l); color: var(--mc-texto-2); max-width: 60ch; } .mc-cabeza { margin-block: var(--mc-e-4) var(--mc-e-8); } /* Foco visible en TODO lo que se pulsa (3 px, también sobre fondos de color) */ .mc-pagina :focus-visible, .mc-boton:focus-visible, .mc-tema-boton:focus-visible { outline: none; box-shadow: var(--mc-foco-anillo); border-radius: var(--mc-r-s); } /* Solo para lectores de pantalla (excepción de !important permitida, CLAUDE.md §6.11) */ .mc-solo-lector, .mc-pagina .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mc-pagina [hidden], .mc-campo__error[hidden] { display: none; } /* 03/10: un display propio (flex) pisaba el atributo hidden y se veían los errores vacíos */ .mc-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- LA FIRMA: la caja roja inclinada del logo ---- */ .mc-antetitulo { display: inline-block; position: relative; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-sobre-rojo); padding: 0.3em 0.9em 0.2em; margin: 0 0 var(--mc-e-3); isolation: isolate; } .mc-antetitulo::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo); transform: skewX(var(--mc-inclinacion)); border-radius: 2px; z-index: -1; } .mc-titulo-seccion { position: relative; padding-bottom: var(--mc-e-3); margin-bottom: var(--mc-e-6); } .mc-titulo-seccion::after { content: ""; position: absolute; left: 0.2em; bottom: 0; width: var(--mc-firma-ancho); height: var(--mc-firma-alto); background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); } .mc-titulo-seccion--centro { text-align: center; } .mc-titulo-seccion--centro::after { left: 50%; margin-left: calc(var(--mc-firma-ancho) / -2); } /* ---- Iconos ---- */ .mc-icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; } /* ---- BOTONES: principal (rojo), secundario (borde), de texto, peligro, «muy pronto» ---- */ .mc-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-e-2); min-height: var(--mc-tactil); padding: 0.7rem 1.4rem; border-radius: var(--mc-r-m); border: 2px solid transparent; font-family: var(--mc-letra-titulos); font-size: 1rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color var(--mc-mov-rapido) var(--mc-curva), color var(--mc-mov-rapido), border-color var(--mc-mov-rapido), transform var(--mc-mov-rapido); -webkit-tap-highlight-color: transparent; } .mc-boton:active { transform: translateY(1px); } .mc-boton--primario { background: var(--mc-rojo); color: var(--mc-sobre-rojo); position: relative; overflow: hidden; } .mc-boton--primario:hover { background: var(--mc-rojo-hover); color: var(--mc-sobre-rojo); } .mc-boton--secundario { background: transparent; color: var(--mc-texto); border-color: var(--mc-texto); } .mc-boton--secundario:hover { background: var(--mc-texto); color: var(--mc-fondo); } .mc-boton--azul { background: var(--mc-azul); color: var(--mc-sobre-azul); } .mc-boton--azul:hover { filter: brightness(0.92); } .mc-boton--texto { background: none; border: 0; color: var(--mc-azul); padding-inline: var(--mc-e-2); text-decoration: underline; text-underline-offset: 3px; } .mc-boton--peligro { background: transparent; color: var(--mc-error); border-color: var(--mc-error); } .mc-boton--peligro:hover { background: var(--mc-error); color: var(--mc-fondo); } .mc-boton--ancho { width: 100%; } .mc-boton--peque { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9375rem; } .mc-boton[disabled], .mc-boton[aria-disabled="true"] { cursor: not-allowed; opacity: 1; background: var(--mc-fondo-2); color: var(--mc-texto-3); border-color: var(--mc-borde); transform: none; } .mc-boton--cargando { pointer-events: none; } .mc-boton--cargando::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mc-girar 0.7s linear infinite; } @keyframes mc-girar { to { transform: rotate(360deg); } } /* «Pago disponible muy pronto»: se ve claramente que aún no se puede pagar, sin parecer un error */ .mc-boton--pronto { background: var(--mc-fondo-2); color: var(--mc-texto-2); border: 2px dashed var(--mc-borde-fuerte); cursor: default; } .mc-boton--pronto:hover { background: var(--mc-fondo-2); color: var(--mc-texto-2); } /* ---- SELLOS: plan (Starter · Pro · Pro Plus), Verificado, Destacado, Publicidad ---- */ .mc-sello { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 0.45em 0.7em 0.35em; border-radius: var(--mc-r-s); border: 1px solid var(--mc-borde-fuerte); color: var(--mc-texto-2); background: var(--mc-superficie); white-space: nowrap; } .mc-sello .mc-icono { width: 1.1em; height: 1.1em; } .mc-sello--n1 { border-color: var(--mc-azul); color: var(--mc-azul); background: var(--mc-azul-suave); } .mc-sello--n2 { border-color: var(--mc-texto); color: var(--mc-texto); background: var(--mc-superficie); } .mc-sello--n3, .mc-sello--destacado { position: relative; border: 0; color: var(--mc-sobre-rojo); background: none; isolation: isolate; padding-inline: 0.9em; } .mc-sello--n3::before, .mc-sello--destacado::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo); transform: skewX(var(--mc-inclinacion)); border-radius: 3px; z-index: -1; } .mc-sello--verificado { border-color: var(--mc-exito); color: var(--mc-exito); background: var(--mc-exito-suave); } /* E5 (03/10/2026): «Sin verificar», neutro (ni alarma ni premio): gris de ayudas sobre el fondo (6,23 claro). */ .mc-sello--sin-verificar, .mc-pro__sin-verificar { border-color: var(--mc-borde-fuerte); color: var(--mc-texto-3); background: var(--mc-fondo-2); } .mc-pro__sin-verificar { display: inline-flex; align-items: center; font-size: var(--mc-t-xs); border: 1px solid var(--mc-borde-fuerte); border-radius: var(--mc-r-pildora); padding: 0.1em 0.6em; } /* Encargo 7 (03/10/2026): «En el mapa» = ficha traída de OpenStreetMap que el negocio aún no ha revisado (E5, como VisionLovers). Neutra, sin naranja. */ .mc-pro__osm, .mc-sello--osm { display: inline-flex; align-items: center; font-size: var(--mc-t-xs); border: 1px dashed var(--mc-borde-fuerte); border-radius: var(--mc-r-pildora); padding: 0.1em 0.6em; color: var(--mc-texto-2); background: transparent; } .mc-ficha__osm { margin: var(--mc-e-3) 0 0; font-size: var(--mc-t-s); color: var(--mc-texto-2); } .mc-ficha__osm a { color: var(--mc-enlace); text-decoration: underline; text-underline-offset: 3px; } .mc-sello--publicidad { border-color: var(--mc-aviso); color: var(--mc-aviso); background: var(--mc-aviso-suave); } .mc-sello--fundador { border-color: var(--mc-rojo-texto); color: var(--mc-rojo-texto); background: var(--mc-rojo-suave); } /* P1.1: rojo de texto sobre rojo suave (4,82 medido en tokens.css) */ /* ---- TARJETAS ---- */ .mc-tarjeta { background: var(--mc-superficie); border: 1px solid transparent; border-radius: var(--mc-r-xl); box-shadow: var(--mc-halo); /* encargo 6: el halo de VisionLovers, en naranja */ padding: var(--mc-e-5); transition: box-shadow var(--mc-mov) var(--mc-curva), transform var(--mc-mov) var(--mc-curva), border-color var(--mc-mov); } .mc-tarjeta--enlace:hover { box-shadow: var(--mc-halo-fuerte); transform: translateY(var(--mc-lift)); } .mc-tarjeta__titulo { font-size: var(--mc-t-h4); margin-bottom: var(--mc-e-1); } .mc-tarjeta__titulo a { color: inherit; text-decoration: none; } .mc-tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta se pulsa */ .mc-tarjeta--enlace { position: relative; } .mc-tarjeta__meta { font-size: var(--mc-t-s); color: var(--mc-texto-3); display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-4); } .mc-tarjeta--destacada { border: 2px solid var(--mc-texto); } .mc-rejilla { display: grid; gap: var(--mc-e-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .mc-rejilla--2, .mc-rejilla--3, .mc-rejilla--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mc-rejilla--3 { grid-template-columns: repeat(3, 1fr); } .mc-rejilla--4 { grid-template-columns: repeat(4, 1fr); } .mc-rejilla { gap: var(--mc-e-6); } } /* Tarjeta de servicio: icono en caja inclinada */ .mc-servicio { display: flex; gap: var(--mc-e-4); align-items: flex-start; } .mc-servicio__icono { flex: none; width: 48px; height: 48px; display: grid; place-items: center; position: relative; color: var(--mc-sobre-negro); isolation: isolate; } .mc-servicio__icono::before { content: ""; position: absolute; inset: 0; background: var(--mc-negro); transform: skewX(var(--mc-inclinacion)); border-radius: 6px; z-index: -1; } .mc-servicio__icono .mc-icono { width: 24px; height: 24px; } :root[data-tema="oscuro"] .mc-servicio__icono::before { background: var(--mc-superficie-2); box-shadow: inset 0 0 0 1px var(--mc-borde-fuerte); } /* ---- PLANES ---- */ .mc-planes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-e-4); } @media (min-width: 900px) { .mc-planes__lista { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--mc-e-6); } } .mc-plan { display: flex; flex-direction: column; background: var(--mc-superficie); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); padding: var(--mc-e-6); box-shadow: var(--mc-sombra-1); position: relative; } .mc-plan--destacado { border: 2px solid var(--mc-texto); box-shadow: var(--mc-sombra-3); } .mc-plan__etiqueta { position: absolute; top: -0.9em; left: var(--mc-e-6); margin: 0; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-sobre-rojo); padding: 0.35em 0.9em 0.25em; isolation: isolate; } .mc-plan__etiqueta::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo); transform: skewX(var(--mc-inclinacion)); border-radius: 3px; z-index: -1; } .mc-plan__nombre { font-size: var(--mc-t-h3); margin-bottom: var(--mc-e-2); } .mc-plan__precio { margin: 0; display: flex; align-items: baseline; gap: var(--mc-e-2); } .mc-plan__cifra { font-family: var(--mc-letra-num); font-size: var(--mc-t-cifra); font-weight: 700; color: var(--mc-texto); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .mc-plan__periodo, .mc-plan__iva { color: var(--mc-texto-3); font-size: var(--mc-t-s); } .mc-plan__iva { margin: 0 0 var(--mc-e-4); } .mc-plan__ventajas { list-style: none; margin: 0 0 var(--mc-e-6); padding: 0; display: grid; gap: var(--mc-e-2); flex: 1; } .mc-plan__ventajas li { display: flex; gap: var(--mc-e-2); align-items: flex-start; } .mc-plan__ventajas .mc-icono { color: var(--mc-exito); margin-top: 0.15em; } /* ---- FORMULARIOS: campos de 48 px, etiqueta visible, ayuda y error junto a su campo ---- */ .mc-form { display: grid; gap: var(--mc-e-4); } .mc-form__fila { display: grid; gap: var(--mc-e-4); } @media (min-width: 700px) { .mc-form__fila { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .mc-form__grupo { border: 0; padding: 0; margin: 0; display: grid; gap: var(--mc-e-3); } .mc-campo { display: grid; gap: var(--mc-e-1); } .mc-campo__etiqueta { font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); font-size: var(--mc-t-m); } .mc-campo__opcional { font-weight: 400; color: var(--mc-texto-3); font-size: var(--mc-t-s); } .mc-pagina .mc-campo__control, .mc-pagina .mc-calc__input, .mc-campo__control, .mc-calc__input { box-sizing: border-box; width: 100%; min-height: var(--mc-campo-alto); padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--mc-texto); background: var(--mc-superficie); border: 1.5px solid var(--mc-borde-fuerte); border-radius: var(--mc-r-m); transition: border-color var(--mc-mov-rapido), box-shadow var(--mc-mov-rapido); appearance: none; } /* 03/10: Woodmart pinta input[type=…] y select con más fuerza (elemento + atributo): por eso van con .mc-pagina delante. */ .mc-pagina textarea.mc-campo__control { min-height: 7.5rem; resize: vertical; line-height: 1.5; } .mc-pagina select.mc-campo__control { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .mc-pagina .mc-campo__control:hover, .mc-pagina .mc-calc__input:hover { border-color: var(--mc-texto-2); } .mc-pagina .mc-campo__control:focus, .mc-pagina .mc-calc__input:focus { outline: none; border-color: var(--mc-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-foco) 30%, transparent); } .mc-pagina .mc-campo__control[aria-invalid="true"] { border-color: var(--mc-error); } .mc-campo__ayuda { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-3); } .mc-campo__error { margin: 0; font-size: var(--mc-t-s); color: var(--mc-error); font-weight: var(--mc-peso-fuerte); display: flex; gap: 0.4em; } .mc-campo__error::before { content: "!"; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--mc-error); color: var(--mc-fondo); display: grid; place-items: center; font-size: 0.75em; margin-top: 0.15em; } .mc-campo--casilla { grid-template-columns: auto 1fr; align-items: start; gap: var(--mc-e-3); } .mc-campo--casilla input, .mc-opcion input { width: 22px; height: 22px; margin: 0.15em 0 0; accent-color: var(--mc-rojo); } .mc-campo--casilla .mc-campo__error { grid-column: 1 / -1; } .mc-opciones { display: grid; gap: var(--mc-e-2); } @media (min-width: 640px) { .mc-opciones--fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } .mc-opcion { display: flex; gap: var(--mc-e-3); align-items: center; min-height: var(--mc-tactil); padding: 0.6rem 0.9rem; border: 1.5px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-superficie); cursor: pointer; transition: border-color var(--mc-mov-rapido), background-color var(--mc-mov-rapido); } .mc-opcion:hover { border-color: var(--mc-borde-fuerte); } .mc-opcion:has(input:checked) { border-color: var(--mc-texto); background: var(--mc-superficie-2); box-shadow: inset 4px 0 0 var(--mc-rojo); } /* ---- AVISOS ---- */ .mc-aviso { border-radius: var(--mc-r-m); padding: var(--mc-e-4) var(--mc-e-5); border: 1px solid; border-left-width: 5px; } .mc-aviso p:last-child, .mc-aviso ul:last-child { margin-bottom: 0; } .mc-aviso__titulo { font-weight: var(--mc-peso-fuerte); color: inherit; margin-bottom: var(--mc-e-1); } .mc-aviso--ok { background: var(--mc-exito-suave); border-color: var(--mc-exito); color: var(--mc-exito); } .mc-aviso--error { background: var(--mc-error-suave); border-color: var(--mc-error); color: var(--mc-error); } .mc-aviso--info { background: var(--mc-azul-suave); border-color: var(--mc-azul); color: var(--mc-azul); } .mc-aviso--aviso { background: var(--mc-aviso-suave); border-color: var(--mc-aviso); color: var(--mc-aviso); } .mc-aviso :where(p, li) { color: var(--mc-texto); } /* ---- MIGAS y PAGINACIÓN ---- */ .mc-migas__lista { list-style: none; margin: 0 0 var(--mc-e-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-1); font-size: var(--mc-t-s); color: var(--mc-texto-3); } .mc-migas__item { display: flex; align-items: center; min-height: var(--mc-tactil); margin: 0; } /* margin 0: Woodmart da 10 px abajo a cada li menos al último, y la última miga bajaba 5 px (medido) */ .mc-migas__item + .mc-migas__item::before { content: "/"; margin-right: var(--mc-e-1); color: var(--mc-borde-fuerte); } .mc-migas a { color: var(--mc-texto-2); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--mc-tactil); } .mc-migas a:hover { color: var(--mc-azul); text-decoration: underline; } .mc-paginacion { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); justify-content: center; margin-top: var(--mc-e-8); } .mc-paginacion a, .mc-paginacion span { min-width: var(--mc-tactil); min-height: var(--mc-tactil); display: grid; place-items: center; border-radius: var(--mc-r-m); border: 1px solid var(--mc-borde); text-decoration: none; color: var(--mc-texto); font-weight: var(--mc-peso-fuerte); } .mc-pagina .mc-paginacion ul { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); list-style: none; margin: 0; padding: 0; } .mc-pagina .mc-paginacion li { margin: 0; } .mc-paginacion [aria-current="page"] { background: var(--mc-texto); color: var(--mc-fondo); border-color: var(--mc-texto); } /* ---- TABLAS de los paneles ---- */ .mc-tabla-caja { overflow-x: auto; border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); background: var(--mc-superficie); } .mc-tabla { width: 100%; border-collapse: collapse; font-size: var(--mc-t-s); } .mc-tabla th, .mc-tabla td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--mc-borde); vertical-align: top; } .mc-tabla th { font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); background: var(--mc-fondo-2); white-space: nowrap; } .mc-tabla tr:last-child td { border-bottom: 0; } .mc-tabla .mc-num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- CIFRAS (KPI) ---- */ .mc-cifra { display: grid; gap: var(--mc-e-1); } .mc-cifra__n { font-family: var(--mc-letra-num); font-size: var(--mc-t-cifra); font-weight: 700; color: var(--mc-texto); line-height: 1; font-variant-numeric: tabular-nums; } .mc-cifra__t { font-size: var(--mc-t-s); color: var(--mc-texto-3); } /* ---- ESTADO VACÍO ---- */ .mc-vacio { text-align: center; padding: var(--mc-e-10) var(--mc-e-5); border: 2px dashed var(--mc-borde); border-radius: var(--mc-r-l); display: grid; justify-items: center; gap: var(--mc-e-3); } .mc-vacio__icono { width: 40px; height: 40px; color: var(--mc-texto-3); } .mc-vacio__titulo { font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); font-size: var(--mc-t-h4); margin: 0; } .mc-vacio__texto { max-width: 46ch; margin: 0; } /* ---- PREGUNTAS FRECUENTES ---- */ .mc-faq { border-bottom: 1px solid var(--mc-borde); } .mc-faq__pregunta { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--mc-e-4); align-items: center; min-height: var(--mc-tactil); padding-block: var(--mc-e-3); font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h4); font-weight: 700; color: var(--mc-texto); } .mc-faq__pregunta::-webkit-details-marker { display: none; } .mc-faq__pregunta::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--mc-borde-fuerte); font-size: 1.2rem; transition: transform var(--mc-mov); } .mc-faq[open] .mc-faq__pregunta::after { transform: rotate(45deg); } .mc-faq__respuesta { padding-bottom: var(--mc-e-4); max-width: var(--mc-medida); } /* ---- BLOQUES de sección ---- */ .mc-bloque { margin-top: var(--mc-seccion); } .mc-banda { background: var(--mc-fondo-2); padding-block: var(--mc-seccion); } .mc-banda--negra { background: var(--mc-negro); color: #D9DCE1; } .mc-banda--negra :where(h1, h2, h3) { color: #FFFFFF; } /* ---- CAJA «Pide presupuesto» (al final de artículos, calculadoras, vacíos) ---- */ .mc-caja-cta { margin-top: var(--mc-seccion); display: grid; gap: var(--mc-e-4); align-items: center; padding: var(--mc-e-6); border-radius: var(--mc-r-l); background: var(--mc-negro); color: #D9DCE1; position: relative; overflow: hidden; isolation: isolate; } .mc-caja-cta::before { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 140px; background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); z-index: -1; opacity: 0.95; } .mc-caja-cta__titulo { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h3); font-weight: 700; color: #FFFFFF; margin: 0 0 var(--mc-e-1); } .mc-caja-cta__desc { margin: 0; max-width: 52ch; } .mc-caja-cta .mc-boton--primario { background: #FFFFFF; color: #0B0C0E; } .mc-caja-cta .mc-boton--primario:hover { background: #E8EAEE; color: #0B0C0E; } @media (min-width: 760px) { .mc-caja-cta { grid-template-columns: 1fr auto; padding: var(--mc-e-8) var(--mc-e-10); padding-right: 180px; } } /* 03/10 (revisión visual del iMac, punto 7): por debajo de 760 px la franja diagonal quedaba DEBAJO del texto blanco (≈ 2,4:1). En el móvil, la seña de la marca pasa a una banda fina arriba, fuera del texto. */ @media (max-width: 759px) { .mc-caja-cta::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 6px; transform: none; border-radius: 0; } } /* ---- CALCULADORAS ---- */ .mc-calc { background: var(--mc-superficie); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); box-shadow: var(--mc-sombra-2); padding: var(--mc-e-5); display: grid; gap: var(--mc-e-5); } @media (min-width: 900px) { .mc-calc { grid-template-columns: 1.1fr 1fr; grid-template-areas: "t t" "f r" "f a" "f s"; padding: var(--mc-e-8); column-gap: var(--mc-e-8); } .mc-calc__titulo { grid-area: t; } .mc-calc__form { grid-area: f; } .mc-calc__resultado { grid-area: r; } .mc-calc__aviso { grid-area: a; } .mc-calc__siguiente { grid-area: s; } } .mc-calc__titulo { font-size: var(--mc-t-h3); margin: 0; } .mc-calc__campos { display: grid; gap: var(--mc-e-4); margin-bottom: var(--mc-e-4); } .mc-calc__campo { display: grid; gap: var(--mc-e-1); } .mc-calc__etiqueta { font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); } .mc-calc__entrada { position: relative; display: flex; align-items: center; } .mc-calc__input { padding-right: 4.5rem; font-variant-numeric: tabular-nums; } .mc-calc__sufijo { position: absolute; right: 0.9rem; color: var(--mc-texto-3); font-size: var(--mc-t-s); pointer-events: none; } .mc-calc__ayuda { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-3); } .mc-calc__grupo { margin: var(--mc-e-2) 0 0; font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--mc-t-xs); } .mc-calc__estado { border: 0; padding: 0; margin: 0; display: grid; gap: var(--mc-e-2); } .mc-calc__opcion { display: flex; align-items: center; gap: var(--mc-e-3); min-height: 44px; } .mc-calc__opcion input { width: 22px; height: 22px; accent-color: var(--mc-rojo); } .mc-calc__resultado { background: var(--mc-fondo-2); border-radius: var(--mc-r-l); padding: var(--mc-e-5); align-self: start; } .mc-calc__grande { margin: 0 0 var(--mc-e-3); font-family: var(--mc-letra-titulos); color: var(--mc-texto); font-weight: 700; font-size: var(--mc-t-h3); line-height: 1.2; } .mc-calc__cifra { font-size: var(--mc-t-cifra); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .mc-calc__unidad { color: var(--mc-texto-3); font-size: var(--mc-t-m); font-weight: 400; } .mc-calc__horquilla { margin: 0; } .mc-calc__datos { margin: 0; display: grid; gap: 0; } .mc-calc__datos div { display: flex; justify-content: space-between; gap: var(--mc-e-4); padding: 0.55rem 0; border-top: 1px solid var(--mc-borde); } .mc-calc__datos dt { color: var(--mc-texto-2); } .mc-calc__datos dd { margin: 0; font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); font-variant-numeric: tabular-nums; text-align: right; } .mc-calc__error { color: var(--mc-error); font-weight: var(--mc-peso-fuerte); margin: 0; } .mc-calc__aviso { font-size: var(--mc-t-s); color: var(--mc-texto-3); margin: 0; } .mc-calc__siguiente { margin: 0; } /* ---- PIDE PRESUPUESTO ---- */ .mc-presupuesto { background: var(--mc-superficie); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); box-shadow: var(--mc-sombra-2); padding: var(--mc-e-5); scroll-margin-top: 90px; } @media (min-width: 850px) { .mc-presupuesto { padding: var(--mc-e-8); } } .mc-presupuesto__titulo { font-size: var(--mc-t-h2); } .mc-presupuesto__nota { font-size: var(--mc-t-s); color: var(--mc-texto-3); margin: 0; } /* ---- VENDE TU COCHE: pasos ---- */ .mc-venta { scroll-margin-top: 90px; } .mc-pasos { list-style: none; margin: 0 0 var(--mc-e-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mc-e-2); counter-reset: paso; } .mc-pasos__item { counter-increment: paso; display: grid; gap: var(--mc-e-2); font-size: var(--mc-t-s); color: var(--mc-texto-3); font-weight: var(--mc-peso-fuerte); } .mc-pasos__item::before { content: ""; height: 6px; border-radius: 3px; background: var(--mc-borde); transform: skewX(var(--mc-inclinacion)); } .mc-pasos__item[aria-current="step"], .mc-pasos__item--hecho { color: var(--mc-texto); } .mc-pasos__item[aria-current="step"]::before { background: var(--mc-rojo-logo); } .mc-pasos__item--hecho::before { background: var(--mc-texto); } .mc-paso { border: 0; padding: 0; margin: 0 0 var(--mc-e-6); display: grid; gap: var(--mc-e-4); } .mc-paso__titulo { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h3); font-weight: 700; color: var(--mc-texto); padding: 0; margin-bottom: var(--mc-e-2); } .mc-js .mc-venta .mc-paso[hidden] { display: none; } .mc-paso__botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); justify-content: space-between; } .mc-estimacion { border-radius: var(--mc-r-l); padding: var(--mc-e-5); background: var(--mc-fondo-2); border-left: 5px solid var(--mc-rojo-logo); } .mc-estimacion__cifra { font-family: var(--mc-letra-num); font-size: var(--mc-t-cifra); font-weight: 700; color: var(--mc-texto); margin: 0 0 var(--mc-e-2); font-variant-numeric: tabular-nums; } .mc-legal { font-size: var(--mc-t-s); color: var(--mc-texto-3); display: flex; gap: var(--mc-e-2); align-items: flex-start; } /* ---- BOTÓN ☾/☀ del modo oscuro (inc/modo-oscuro.php) ---- */ .mc-tema-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-e-2); min-width: var(--mc-tactil); min-height: var(--mc-tactil); padding: 0 var(--mc-e-2); background: transparent; border: 0; border-radius: var(--mc-r-m); color: inherit; cursor: pointer; font: inherit; } .mc-tema-boton svg { width: 22px; height: 22px; } .mc-tema-boton:hover { background: color-mix(in srgb, currentColor 10%, transparent); } /* ---- «Elige cómo pagar» (plantillas/elige-como-pagar.php) ---- */ .mc-pagar { padding: var(--mc-e-6); } .mc-pagar__t2 { margin-top: var(--mc-e-8); } .mc-pagar__opciones { display: grid; gap: var(--mc-e-5); margin-bottom: var(--mc-e-5); } @media (min-width: 700px) { .mc-pagar__opciones { grid-template-columns: 1fr 1fr; } } .mc-pagar__opcion { display: grid; gap: var(--mc-e-2); align-content: start; } .mc-pagar__pronto { margin: var(--mc-e-4) 0; color: var(--mc-texto); } .mc-cabeza--centro { text-align: center; } .mc-cabeza--centro .mc-entradilla { margin-inline: auto; } /* 03/10 · revisión en oscuro: Woodmart pone color y márgenes a label, legend y listas dentro del contenido */ .mc-pagina label, .mc-pagina legend { color: inherit; } .mc-pagina legend { padding: 0; float: none; width: auto; } .mc-pagina .mc-campo--casilla label, .mc-pagina .mc-opcion { color: var(--mc-texto-2); } .mc-pagina ul[role="list"], .mc-pagina ol[role="list"] { list-style: none; padding-left: 0; } .mc-pagina ul[role="list"] > li, .mc-pagina ol[role="list"] > li { list-style: none; } :root[data-tema="oscuro"] .mc-caja-cta { background: var(--mc-superficie); border: 1px solid var(--mc-borde); } /* ---- PASTILLAS (chips) de filtro: directorio, blog, ficha. Fila que se desliza en el móvil; en ordenador, varias filas ---- */ .mc-pagina .mc-dir__chips { margin: 0 calc(-1 * var(--mc-gutter)) var(--mc-e-4); overflow-x: auto; scrollbar-width: thin; } .mc-pagina .mc-dir__chips ul { display: flex; gap: var(--mc-e-2); list-style: none; margin: 0; padding: var(--mc-e-1) var(--mc-gutter) var(--mc-e-2); width: max-content; } .mc-pagina .mc-dir__chips li { margin: 0; } .mc-pagina .mc-dir__chip, .mc-pagina .mc-ficha__chip { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0.4em 0.9em; border: 1px solid var(--mc-borde-fuerte); border-radius: var(--mc-r-pildora); color: var(--mc-texto); background: var(--mc-superficie); font-size: var(--mc-t-s); font-weight: var(--mc-peso-fuerte); text-decoration: none; white-space: nowrap; transition: background-color var(--mc-mov-rapido), color var(--mc-mov-rapido); } .mc-pagina .mc-dir__chip .mc-icono, .mc-pagina .mc-ficha__chip .mc-icono { width: 1.15em; height: 1.15em; } .mc-pagina .mc-dir__chip:hover, .mc-pagina .mc-ficha__chip:hover { background: var(--mc-fondo-2); color: var(--mc-texto); } .mc-pagina .mc-dir__chip[aria-current="page"] { background: var(--mc-texto); border-color: var(--mc-texto); color: var(--mc-fondo); } @media (min-width: 1025px) { .mc-pagina .mc-dir__chips { margin-inline: 0; } .mc-pagina .mc-dir__chips ul { flex-wrap: wrap; width: auto; padding-inline: 0; } } /* Fundadores (P1.1, /planes-profesionales/#fundadores): texto y, al lado, las plazas libres en la caja roja inclinada de la marca. */ .mc-fundadores { display: grid; gap: var(--mc-e-6); align-items: center; padding: var(--mc-e-6); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); background: var(--mc-superficie); box-shadow: var(--mc-sombra-1); scroll-margin-top: 6rem; } .mc-fundadores__texto > :last-child { margin-bottom: 0; } .mc-fundadores__plazas { display: flex; flex-direction: column; align-items: center; gap: var(--mc-e-2); margin: 0; text-align: center; font-weight: 700; } .mc-fundadores__cifra { position: relative; isolation: isolate; display: inline-block; padding: 0.1em 0.5em; font-family: var(--mc-letra-titulos); font-size: calc(var(--mc-t-cifra) * 1.5); line-height: 1.1; color: var(--mc-sobre-rojo); } .mc-fundadores__cifra::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo); transform: skewX(var(--mc-inclinacion)); border-radius: 4px; z-index: -1; } @media (min-width: 768px) { .mc-fundadores { grid-template-columns: 1fr auto; padding: var(--mc-e-8); } .mc-fundadores__plazas { min-width: 12rem; } } .mc-pagar__fundador { color: var(--mc-texto-2); font-weight: 400; } /* ===================================================================================================================== * ENCARGO 6 (03/10/2026) · tres piezas que tienen todas las grandes del sector (diseno/COMPETENCIA-ESTRUCTURA.md), a nuestra manera. * ===================================================================================================================== */ /* El buscador de arriba (partes/buscador-profesionales.php): una caja con 2 campos y un botón ancho en el móvil; en fila desde 850 px. */ .mc-buscador { margin: var(--mc-e-6) 0 0; padding: var(--mc-e-5); max-width: 1100px; background: var(--mc-superficie); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); box-shadow: var(--mc-sombra-3); position: relative; } .mc-buscador::before { content: ""; position: absolute; left: var(--mc-e-5); top: -2px; width: var(--mc-firma-ancho); height: var(--mc-firma-alto); background: var(--mc-degradado, var(--mc-acento)); transform: skewX(var(--mc-inclinacion)); } .mc-buscador__t { display: flex; align-items: center; gap: var(--mc-e-2); margin: 0 0 var(--mc-e-3); font-family: var(--mc-letra-titulos); font-weight: var(--mc-peso-titulo); font-size: var(--mc-t-l); color: var(--mc-texto); } .mc-buscador__t .mc-icono { width: 20px; height: 20px; color: var(--mc-texto-marca); } .mc-buscador__campos { display: grid; gap: var(--mc-e-3); } .mc-buscador .mc-campo { margin: 0; } .mc-buscador__boton { width: 100%; } @media (min-width: 850px) { .mc-buscador { padding: var(--mc-e-6); } .mc-buscador__campos { grid-template-columns: 1.3fr 1fr auto; align-items: end; } .mc-buscador__boton { width: auto; min-width: 12rem; } } /* La franja de confianza (partes/franja-confianza.php): una columna en el móvil (a 375, en 2 × 2 cada línea tenía 2 palabras), 2 × 2 desde 600 y 4 en fila desde 850. */ .mc-confianza { list-style: none; margin: 0; padding: var(--mc-e-5) 0; display: grid; gap: var(--mc-e-4); border-bottom: 1px solid var(--mc-borde); } .mc-confianza__item { display: flex; align-items: flex-start; gap: var(--mc-e-3); margin: 0; } .mc-confianza__icono { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--mc-r-m); background: var(--mc-acento-suave); color: var(--mc-texto-marca); } .mc-confianza__icono .mc-icono { width: 22px; height: 22px; } .mc-confianza__texto { display: grid; gap: 2px; font-size: var(--mc-t-s); line-height: 1.4; color: var(--mc-texto-3); } .mc-confianza__texto strong { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-m); color: var(--mc-texto); } .mc-confianza__texto a { color: inherit; text-decoration: underline; text-decoration-color: var(--mc-acento); text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; min-height: 24px; } @media (min-width: 600px) { .mc-confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 850px) { .mc-confianza { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-e-6); padding-block: var(--mc-e-6); } } /* El botón fijo del móvil (inc/barra-movil.php): abajo, a lo ancho, con la zona segura del iPhone. Solo por debajo de 850 px. */ .mc-barra-movil { display: none; } @media (max-width: 849px) { .mc-barra-movil { display: flex; gap: var(--mc-e-2); position: fixed; z-index: 390; left: 0; right: 0; bottom: 0; padding: var(--mc-e-2) var(--mc-gutter) calc(var(--mc-e-2) + env(safe-area-inset-bottom, 0px)); background: var(--mc-superficie); border-top: 1px solid var(--mc-borde); box-shadow: 0 -6px 20px rgba(11, 12, 14, 0.12); } .mc-barra-movil .mc-boton { flex: 1 1 0; min-height: 48px; padding-inline: var(--mc-e-3); } .mc-barra-movil .mc-icono { width: 20px; height: 20px; } body.mc-con-barra { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* El «volver arriba» de Woodmart, por encima de la barra y no detrás. */ body.mc-con-barra .scrollToTop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } @media print { .mc-barra-movil { display: none; } } /* Woodmart pone en MAYÚSCULAS los