{"id":11711,"date":"2026-07-27T13:20:45","date_gmt":"2026-07-27T11:20:45","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=11711"},"modified":"2026-07-27T13:20:46","modified_gmt":"2026-07-27T11:20:46","slug":"banner-de-cookies-como-debe-ser-para-cumplir-la-legislacion-espanola","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/banner-de-cookies-como-debe-ser-para-cumplir-la-legislacion-espanola\/","title":{"rendered":"Banner de cookies: C\u00f3mo debe ser para cumplir la legislaci\u00f3n espa\u00f1ola"},"content":{"rendered":"\n<p>Un <strong>banner de cookies<\/strong> debe informar con claridad, permitir aceptar o rechazar las cookies no necesarias y respetar la elecci\u00f3n del usuario. No basta con colocar un aviso que solo tenga un bot\u00f3n de \u00abAceptar\u00bb.<\/p>\n\n\n\n<p>Adem\u00e1s, el funcionamiento t\u00e9cnico debe coincidir con el mensaje. Si una persona rechaza las cookies anal\u00edticas o publicitarias, la web no debe cargarlas. Tampoco deber\u00edan activarse antes de que el usuario elija.<\/p>\n\n\n\n<p>En esta gu\u00eda ver\u00e1s <strong>qu\u00e9 texto necesita el aviso, c\u00f3mo presentar sus botones y qu\u00e9 opciones tienes para a\u00f1adirlo a tu web<\/strong>. El ejemplo es orientativo: tendr\u00e1s que adaptarlo a las cookies y servicios que utilice tu p\u00e1gina.<\/p>\n\n\n\n<p><strong><em>Tabla de Contenidos:<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-como-anadir-un-banner-de-cookies-a-una-web\">C\u00f3mo a\u00f1adir un banner de cookies a una web<\/a><ul><li><a href=\"#aioseo-una-salida-rapida-con-lawwwing\">Una salida r\u00e1pida con Lawwwing<\/a><ul><\/ul><\/li><\/ul><\/li><li><a href=\"#aioseo-ejemplo-de-banner-de-cookies-correcto\">Ejemplo de banner de cookies correcto<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-que-debe-incluir-un-banner-de-cookies\">Qu\u00e9 debe incluir un banner de cookies<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-banner-de-cookies-y-politica-de-cookies-es-lo-mismo\">Banner de cookies y pol\u00edtica de cookies \u00bfes lo mismo?<\/a><\/li><li><a href=\"#aioseo-errores-habituales-en-un-banner-de-cookies\">Errores habituales en un banner de cookies<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><li><a href=\"#aioseo-preguntas-frecuentes-sobre-los-documentos-legales-de-la-web\">Preguntas frecuentes sobre el banner de cookies (FAQ)<\/a><\/li><\/ul><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-anadir-un-banner-de-cookies-a-una-web\">C\u00f3mo a\u00f1adir un banner de cookies a una web<\/h2>\n\n\n\n<p>Puedes instalar un banner mediante una <strong>plataforma de gesti\u00f3n del consentimiento<\/strong>, un plugin para tu CMS o un desarrollo a medida. La elecci\u00f3n depende de la tecnolog\u00eda de tu web, de las herramientas externas que uses y del tiempo que puedas dedicar a mantener la configuraci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-una-salida-rapida-con-lawwwing\">Una salida r\u00e1pida con Lawwwing<\/h3>\n\n\n\n<p>Si lo que buscas es solucionar todo el tema del banner de cookies de la forma m\u00e1s r\u00e1pida posible, sin tener que leer todo este post, ni tener que dedicarle mucho tiempo, en <strong>Loading<\/strong> ofrecemos la soluci\u00f3n: <a href=\"https:\/\/www.loading.es\/lawwwing\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"Lawwwing en Loading\"><strong>Lawwwing<\/strong><\/a>.<\/p>\n\n\n\n<p>Lawwwing es una plataforma de <strong>gesti\u00f3n de consentimiento<\/strong> que se encarga de todo los textos legales, pol\u00edtica de privacidad, t\u00e9rminos y condiciones de tu web. Y por su puesto, tambi\u00e9n de <strong>banner de cookies<\/strong>.<\/p>\n\n\n\n<p>Si quieres que todo esto sea un peque\u00f1o tr\u00e1mite, tenerlo todo legal en tu web y no quieres dedicarle tiempo, te recomendamos que le eches un vistazo a la soluci\u00f3n que propone Lawwwing.<\/p>\n\n\n\n<!-- BLOQUE: prefieres-delegar-la-gestion-legal-de-tu-web -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');\n#comp-ld-4932, #comp-ld-4932 * { box-sizing: border-box; }\n#comp-ld-4932 { color: inherit; font-family: 'Plus Jakarta Sans', sans-serif; margin: 24px 0; }\n#comp-ld-4932 .ld-shell { padding: 6px; border-radius: 24px; background: rgba(55,54,61,.10); border: 1px solid rgba(55,54,61,.14); }\n#comp-ld-4932 .ld-core { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 18px; background: #37363d; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 40px rgba(55,54,61,.16); }\n#comp-ld-4932 .ld-route { position: relative; display: grid; grid-template-columns: 45px 1fr; gap: 13px; align-items: center; min-height: 112px; padding: 22px 24px; color: #fff; }\n#comp-ld-4932 .ld-route + .ld-route { border-left: 1px solid rgba(255,255,255,.12); }\n#comp-ld-4932 .ld-route::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: #00bcdf; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.32,.72,0,1); }\n#comp-ld-4932 .ld-route:hover::after { transform: scaleX(1); }\n#comp-ld-4932 .ld-route:first-child::after { background: #db7424; }\n#comp-ld-4932 .ld-icon { width: 45px; height: 45px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: #ffab69; background: rgba(219,116,36,.13); }\n#comp-ld-4932 .ld-route:last-child .ld-icon { color: #58dcf4; background: rgba(0,188,223,.13); }\n#comp-ld-4932 .ld-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }\n#comp-ld-4932 .ld-label { display: block; margin-bottom: 4px; font-size: .95rem; font-weight: 800; line-height: 1.25; }\n#comp-ld-4932 .ld-note { display: block; color: rgba(255,255,255,.68); font-size: .78rem; font-weight: 600; line-height: 1.4; }\n#comp-ld-4932 .ld-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; color: #58dcf4; font-size: .72rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color .3s cubic-bezier(.32,.72,0,1); }\n#comp-ld-4932 .ld-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.32,.72,0,1); }\n#comp-ld-4932 .ld-link:hover { color: #fff; }\n#comp-ld-4932 .ld-link:hover svg { transform: translateX(2px); }\n#comp-ld-4932 .ld-link:focus-visible { outline: 3px solid rgba(0,188,223,.28); outline-offset: 3px; border-radius: 4px; }\n@media (max-width: 600px) {\n  #comp-ld-4932 .ld-core { grid-template-columns: 1fr; }\n  #comp-ld-4932 .ld-route + .ld-route { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }\n  #comp-ld-4932 .ld-route { min-height: 98px; padding: 18px 20px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-4932 * { transition: none !important; animation: none !important; }\n}\n<\/style>\n<div id=\"comp-ld-4932\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-core\">\n      <div class=\"ld-route\">\n        <span class=\"ld-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 6h16M7 3v6M17 3v6M6 11h12v9H6z\"><\/path><path d=\"M9 15h6\"><\/path><\/svg><\/span>\n        <span><span class=\"ld-label\">Gestionarlo por tu cuenta<\/span><span class=\"ld-note\">Revisar, adaptar y actualizar<\/span><\/span>\n      <\/div>\n      <div class=\"ld-route\">\n        <span class=\"ld-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 3 5 6v5c0 4.7 2.8 8.1 7 10 4.2-1.9 7-5.3 7-10V6z\"><\/path><path d=\"m9 12 2 2 4-5\"><\/path><\/svg><\/span>\n        <span><span class=\"ld-label\">Gestionarlo con Lawwwing<\/span><span class=\"ld-note\">Configurar y mantener al d\u00eda<\/span><a class=\"ld-link\" href=\"https:\/\/www.loading.es\/lawwwing\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Ver Lawwwing <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8h9M8.5 4.5 12 8l-3.5 3.5\"><\/path><\/svg><\/a><\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- FIN BLOQUE: prefieres-delegar-la-gestion-legal-de-tu-web -->\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-usar-un-plugin-o-modulo-para-tu-cms\">Usar un plugin o m\u00f3dulo para tu CMS<\/h3>\n\n\n\n<p>En WordPress, PrestaShop y otros gestores de contenidos existen plugins espec\u00edficos para el consentimiento de cookies. Su instalaci\u00f3n suele ser sencilla, pero <strong>activar el plugin no termina el trabajo<\/strong>.<\/p>\n\n\n\n<p>Debes <strong>comprobar si detecta las cookies reales<\/strong>, si bloquea los scripts no necesarios y si permite rechazarlos con la misma facilidad con la que se aceptan. Tambi\u00e9n tendr\u00e1s que revisarlo al instalar nuevas herramientas de anal\u00edtica, publicidad, v\u00eddeo, chat o mapas.<\/p>\n\n\n\n<p>Evita elegir un plugin solo porque muestra un dise\u00f1o atractivo. Lo importante es lo que <strong>ocurre antes y despu\u00e9s<\/strong> de pulsar cada bot\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-desarrollar-una-solucion-propia\">Desarrollar una soluci\u00f3n propia<\/h3>\n\n\n\n<p>Un desarrollo a medida ofrece m\u00e1s control sobre el aspecto y el comportamiento del banner. Puede ser adecuado para una aplicaci\u00f3n con necesidades especiales o una web que ya tenga un equipo t\u00e9cnico.<\/p>\n\n\n\n<p>Esta opci\u00f3n exige mantener la l\u00f3gica de consentimiento, impedir la carga prematura de scripts, guardar la elecci\u00f3n y permitir que el usuario la cambie. Tambi\u00e9n debe adaptarse cuando se a\u00f1aden proveedores o cambian las finalidades.<\/p>\n\n\n\n<p>Si necesitas modificar archivos de una web alojada en Loading, puedes hacerlo desde el <strong>Administrador de archivos de Plesk<\/strong>. Aun as\u00ed, la parte importante no es d\u00f3nde se inserta el c\u00f3digo, sino c\u00f3mo controla las cookies y servicios conectados.<\/p>\n\n\n\n<!-- BLOQUE: como-anadir-un-banner-de-cookies-a-una-web -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-2107,\n#comp-ld-2107 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-2107 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-2107 .ld-shell {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(20px, 3vw, 32px);\n  border: 1px solid rgba(55, 54, 61, 0.1);\n  border-radius: 30px;\n  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\n  box-shadow: 0 24px 60px rgba(55, 54, 61, 0.08);\n}\n\n#comp-ld-2107 .ld-shell::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 32px;\n  width: 132px;\n  height: 4px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, #db7424, #00bcdf);\n}\n\n#comp-ld-2107 .ld-head {\n  display: grid;\n  gap: 8px;\n  max-width: 720px;\n  margin-bottom: 24px;\n}\n\n#comp-ld-2107 .ld-kicker {\n  width: fit-content;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(0, 188, 223, 0.1);\n  color: #087d94;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-2107 .ld-title {\n  color: #37363d;\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-2107 .ld-head p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.72);\n  font-size: 0.95rem;\n  line-height: 1.65;\n}\n\n#comp-ld-2107 .ld-layout {\n  display: grid;\n  grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.35fr);\n  gap: 18px;\n  align-items: stretch;\n}\n\n#comp-ld-2107 .ld-tabs {\n  display: grid;\n  gap: 10px;\n  align-content: start;\n}\n\n#comp-ld-2107 .ld-tab {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 4px 12px;\n  align-items: center;\n  width: 100%;\n  padding: 15px;\n  border: 1px solid rgba(55, 54, 61, 0.1);\n  border-radius: 18px;\n  background: #ffffff;\n  color: #37363d;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  box-shadow: 0 10px 28px rgba(55, 54, 61, 0.04);\n  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-2107 .ld-tab:hover,\n#comp-ld-2107 .ld-tab:focus-visible {\n  transform: translateY(-2px);\n  border-color: rgba(0, 188, 223, 0.45);\n  box-shadow: 0 16px 34px rgba(0, 188, 223, 0.12);\n}\n\n#comp-ld-2107 .ld-tab:focus-visible {\n  outline: 3px solid rgba(0, 188, 223, 0.24);\n  outline-offset: 3px;\n}\n\n#comp-ld-2107 .ld-tab.is-active {\n  border-color: rgba(0, 188, 223, 0.55);\n  background: linear-gradient(135deg, rgba(0, 188, 223, 0.12), rgba(219, 116, 36, 0.08));\n  box-shadow: 0 18px 38px rgba(0, 188, 223, 0.14);\n}\n\n#comp-ld-2107 .ld-tab-index {\n  display: grid;\n  grid-row: span 2;\n  width: 34px;\n  height: 34px;\n  place-items: center;\n  border-radius: 12px;\n  background: rgba(55, 54, 61, 0.07);\n  color: rgba(55, 54, 61, 0.68);\n  font-size: 0.74rem;\n  font-weight: 800;\n}\n\n#comp-ld-2107 .ld-tab.is-active .ld-tab-index {\n  background: #37363d;\n  color: #ffffff;\n}\n\n#comp-ld-2107 .ld-tab-name {\n  font-size: 0.94rem;\n  font-weight: 800;\n  line-height: 1.25;\n}\n\n#comp-ld-2107 .ld-tab-note {\n  color: rgba(55, 54, 61, 0.62);\n  font-size: 0.78rem;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n#comp-ld-2107 .ld-panels {\n  min-width: 0;\n  padding: 10px;\n  border-radius: 24px;\n  background: #f4f4f6;\n  border: 1px solid rgba(55, 54, 61, 0.06);\n}\n\n#comp-ld-2107 .ld-panel {\n  height: 100%;\n  padding: clamp(20px, 3vw, 28px);\n  border: 1px solid rgba(55, 54, 61, 0.08);\n  border-radius: 18px;\n  background: #ffffff;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);\n}\n\n#comp-ld-2107 .ld-panel[hidden] {\n  display: none;\n}\n\n#comp-ld-2107 .ld-panel-label {\n  margin-bottom: 8px;\n  color: #db7424;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n}\n\n#comp-ld-2107 .ld-panel-title {\n  margin-bottom: 10px;\n  color: #37363d;\n  font-size: 1.08rem;\n  font-weight: 800;\n  letter-spacing: -0.015em;\n  line-height: 1.3;\n}\n\n#comp-ld-2107 .ld-panel > p {\n  margin: 0 0 16px;\n  color: rgba(55, 54, 61, 0.72);\n  font-size: 0.91rem;\n  line-height: 1.65;\n}\n\n#comp-ld-2107 .ld-points {\n  display: grid;\n  gap: 10px;\n  margin: 0 0 18px;\n  padding: 0;\n  list-style: none;\n}\n\n#comp-ld-2107 .ld-points li {\n  display: grid;\n  grid-template-columns: 22px 1fr;\n  gap: 9px;\n  align-items: start;\n  color: rgba(55, 54, 61, 0.78);\n  font-size: 0.88rem;\n  line-height: 1.5;\n}\n\n#comp-ld-2107 .ld-points svg {\n  width: 20px;\n  height: 20px;\n  margin-top: 1px;\n  color: #00a8c6;\n}\n\n#comp-ld-2107 .ld-check {\n  display: grid;\n  gap: 4px;\n  padding: 13px 14px;\n  border-left: 3px solid #db7424;\n  border-radius: 12px;\n  background: rgba(219, 116, 36, 0.08);\n}\n\n#comp-ld-2107 .ld-check span {\n  color: rgba(55, 54, 61, 0.58);\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n#comp-ld-2107 .ld-check strong {\n  color: #37363d;\n  font-size: 0.88rem;\n  line-height: 1.45;\n}\n\n#comp-ld-2107 .ld-proof {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  margin-top: 18px;\n  padding: 14px 16px;\n  border: 1px solid rgba(25, 135, 84, 0.14);\n  border-radius: 18px;\n  background: rgba(25, 135, 84, 0.08);\n  color: rgba(55, 54, 61, 0.78);\n  font-size: 0.88rem;\n  font-weight: 700;\n  line-height: 1.45;\n}\n\n#comp-ld-2107 .ld-proof svg {\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  color: #198754;\n}\n\n@media (max-width: 820px) {\n  #comp-ld-2107 .ld-layout {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-2107 .ld-tabs {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 520px) {\n  #comp-ld-2107 .ld-shell {\n    padding: 18px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-2107 .ld-panels {\n    padding: 7px;\n  }\n\n  #comp-ld-2107 .ld-proof {\n    align-items: flex-start;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-2107 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-2107\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-head\">\n      <span class=\"ld-kicker\">Elige el m\u00e9todo<\/span>\n      <div class=\"ld-title\">Tres formas de poner el banner en marcha<\/div>\n    <\/div>\n\n    <div class=\"ld-layout\">\n      <div class=\"ld-tabs\" role=\"tablist\" aria-label=\"Formas de a\u00f1adir un banner de cookies\">\n        <button class=\"ld-tab is-active\" type=\"button\" role=\"tab\" id=\"ld-tab-platform-2107\" aria-selected=\"true\" aria-controls=\"ld-panel-platform-2107\">\n          <span class=\"ld-tab-index\">01<\/span>\n          <span class=\"ld-tab-name\">Plataforma especializada<\/span>\n          <span class=\"ld-tab-note\">Centraliza banner, textos y consentimiento<\/span>\n        <\/button>\n\n        <button class=\"ld-tab\" type=\"button\" role=\"tab\" id=\"ld-tab-plugin-2107\" aria-selected=\"false\" aria-controls=\"ld-panel-plugin-2107\" tabindex=\"-1\">\n          <span class=\"ld-tab-index\">02<\/span>\n          <span class=\"ld-tab-name\">Plugin o m\u00f3dulo<\/span>\n          <span class=\"ld-tab-note\">Encaja bien en WordPress y PrestaShop<\/span>\n        <\/button>\n\n        <button class=\"ld-tab\" type=\"button\" role=\"tab\" id=\"ld-tab-custom-2107\" aria-selected=\"false\" aria-controls=\"ld-panel-custom-2107\" tabindex=\"-1\">\n          <span class=\"ld-tab-index\">03<\/span>\n          <span class=\"ld-tab-name\">Desarrollo propio<\/span>\n          <span class=\"ld-tab-note\">M\u00e1s control y m\u00e1s mantenimiento t\u00e9cnico<\/span>\n        <\/button>\n      <\/div>\n\n      <div class=\"ld-panels\">\n        <article class=\"ld-panel is-active\" role=\"tabpanel\" id=\"ld-panel-platform-2107\" aria-labelledby=\"ld-tab-platform-2107\">\n          <div class=\"ld-panel-label\">Menos gesti\u00f3n manual<\/div>\n          <div class=\"ld-panel-title\">Centraliza el consentimiento y los textos legales<\/div>\n          <p>Es una v\u00eda \u00fatil cuando quieres resolver el banner, la pol\u00edtica de cookies y las actualizaciones desde una misma herramienta.<\/p>\n          <ul class=\"ld-points\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Ayuda a clasificar cookies y a mantener la informaci\u00f3n al d\u00eda.<\/span>\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Suele integrarse con WordPress, PrestaShop y otras plataformas.<\/span>\n            <\/li>\n          <\/ul>\n          <div class=\"ld-check\">\n            <span>Revisi\u00f3n clave<\/span>\n            <strong>Comprueba qu\u00e9 servicios externos sigues cargando aunque uses una plataforma.<\/strong>\n          <\/div>\n        <\/article>\n\n        <article class=\"ld-panel\" role=\"tabpanel\" id=\"ld-panel-plugin-2107\" aria-labelledby=\"ld-tab-plugin-2107\">\n          <div class=\"ld-panel-label\">Instalaci\u00f3n r\u00e1pida<\/div>\n          <div class=\"ld-panel-title\">Aprovecha el ecosistema de tu CMS<\/div>\n          <p>Un plugin puede acelerar la instalaci\u00f3n, pero activarlo no sustituye la configuraci\u00f3n ni las pruebas posteriores.<\/p>\n          <ul class=\"ld-points\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Debe detectar las cookies reales y bloquear los scripts no necesarios.<\/span>\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Necesita una revisi\u00f3n cuando a\u00f1adas anal\u00edtica, publicidad, chats o v\u00eddeos.<\/span>\n            <\/li>\n          <\/ul>\n          <div class=\"ld-check\">\n            <span>Revisi\u00f3n clave<\/span>\n            <strong>No elijas un plugin solo por el dise\u00f1o del banner.<\/strong>\n          <\/div>\n        <\/article>\n\n        <article class=\"ld-panel\" role=\"tabpanel\" id=\"ld-panel-custom-2107\" aria-labelledby=\"ld-tab-custom-2107\">\n          <div class=\"ld-panel-label\">Control t\u00e9cnico<\/div>\n          <div class=\"ld-panel-title\">Permite adaptar cada detalle del consentimiento<\/div>\n          <p>Es la opci\u00f3n m\u00e1s flexible, aunque exige mantener la l\u00f3gica de bloqueo, las preferencias y los cambios de proveedores.<\/p>\n          <ul class=\"ld-points\">\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Conviene cuando existe equipo t\u00e9cnico o necesidades especiales.<\/span>\n            <\/li>\n            <li>\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n              <span>Debe impedir la carga previa y permitir cambiar la elecci\u00f3n.<\/span>\n            <\/li>\n          <\/ul>\n          <div class=\"ld-check\">\n            <span>Revisi\u00f3n clave<\/span>\n            <strong>La parte cr\u00edtica no es d\u00f3nde insertas el c\u00f3digo, sino qu\u00e9 controla.<\/strong>\n          <\/div>\n        <\/article>\n      <\/div>\n    <\/div>\n\n    <div class=\"ld-proof\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n      <span>Regla com\u00fan: prueba aceptar, rechazar y configurar en una sesi\u00f3n limpia antes de publicar.<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  var root = document.getElementById('comp-ld-2107');\n  if (!root) return;\n\n  var tabs = Array.prototype.slice.call(root.querySelectorAll('[role=\"tab\"]'));\n  var panels = Array.prototype.slice.call(root.querySelectorAll('[role=\"tabpanel\"]'));\n\n  function activateTab(tab) {\n    tabs.forEach(function (item) {\n      var isActive = item === tab;\n      item.classList.toggle('is-active', isActive);\n      item.setAttribute('aria-selected', isActive ? 'true' : 'false');\n      item.setAttribute('tabindex', isActive ? '0' : '-1');\n    });\n\n    panels.forEach(function (panel) {\n      var isActive = panel.id === tab.getAttribute('aria-controls');\n      panel.hidden = !isActive;\n      panel.classList.toggle('is-active', isActive);\n    });\n  }\n\n  tabs.forEach(function (tab, index) {\n    tab.addEventListener('click', function () {\n      activateTab(tab);\n    });\n\n    tab.addEventListener('keydown', function (event) {\n      var direction = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n      if (!direction) return;\n\n      event.preventDefault();\n      var nextIndex = (index + direction + tabs.length) % tabs.length;\n      tabs[nextIndex].focus();\n      activateTab(tabs[nextIndex]);\n    });\n  });\n\n  var initialTab = root.querySelector('.ld-tab.is-active') || tabs[0];\n  if (initialTab) activateTab(initialTab);\n});\n<\/script>\n<!-- FIN BLOQUE: como-anadir-un-banner-de-cookies-a-una-web -->\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-pasos-para-configurar-el-banner\">Pasos para configurar el banner<\/h3>\n\n\n\n<p>El m\u00e9todo de instalaci\u00f3n puede cambiar, pero el proceso de trabajo deber\u00eda seguir este orden:<\/p>\n\n\n\n<ul>\n<li><strong>Revisa qu\u00e9 carga la web.<\/strong> Incluye cookies, almacenamiento local, p\u00edxeles y recursos de terceros.<\/li>\n\n\n\n<li><strong>Clasifica cada servicio.<\/strong> Separa lo necesario de las preferencias, la anal\u00edtica y la publicidad.<\/li>\n\n\n\n<li><strong>Define la informaci\u00f3n.<\/strong> Explica finalidades, responsables, duraci\u00f3n y terceros de forma comprensible.<\/li>\n\n\n\n<li><strong>Configura el bloqueo previo.<\/strong> Las cookies no necesarias deben esperar hasta que exista una elecci\u00f3n v\u00e1lida.<\/li>\n\n\n\n<li><strong>Activa los controles.<\/strong> El usuario debe poder aceptar, rechazar o configurar por categor\u00edas.<\/li>\n\n\n\n<li><strong>Haz pruebas reales.<\/strong> Comprueba el resultado en una ventana privada y borra antes las cookies del navegador.<\/li>\n\n\n\n<li><strong>Facilita el cambio de elecci\u00f3n.<\/strong> A\u00f1ade un enlace o control visible para reabrir la configuraci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p>Haz al menos tres pruebas separadas: aceptar todo, rechazar lo no necesario y permitir solo una categor\u00eda. Revisa en cada caso qu\u00e9 cookies aparecen y qu\u00e9 solicitudes externas realiza el navegador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplo-de-banner-de-cookies-correcto\">Ejemplo de banner de cookies correcto<\/h2>\n\n\n\n<p>Un aviso correcto utiliza palabras sencillas y presenta una decisi\u00f3n real. No necesita incluir toda la pol\u00edtica de cookies en la primera capa, pero s\u00ed debe ofrecer la informaci\u00f3n esencial y un enlace claro para ampliarla.<\/p>\n\n\n\n<!-- BLOQUE: simulador-banner-cookies -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-4762,\n#comp-ld-4762 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-4762,\n#comp-ld-4762 *::before,\n#comp-ld-4762 *::after {\n  box-sizing: border-box;\n}\n\n#comp-ld-4762 {\n  --ckb-bg: #f4f4f6;\n  --ckb-card: #ffffff;\n  --ckb-primary: #37363d;\n  --ckb-orange: #db7424;\n  --ckb-cyan: #00bcdf;\n  --ckb-cyan-dark: #087d94;\n  --ckb-green: #198754;\n  --ckb-green-soft: rgba(25, 135, 84, 0.1);\n  --ckb-red: #b42318;\n  --ckb-red-soft: #fee4e2;\n  --ckb-muted: #6b6872;\n  --ckb-line: rgba(55, 54, 61, 0.1);\n  color: inherit;\n  max-width: 760px;\n  margin: 32px auto;\n  padding: 10px;\n  border: 1px solid var(--ckb-line);\n  border-radius: 30px;\n  background: var(--ckb-bg);\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-4762 [hidden] {\n  display: none !important;\n}\n\n#comp-ld-4762 .ckb-card {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(20px, 4vw, 30px);\n  border: 1px solid rgba(55, 54, 61, 0.08);\n  border-radius: 22px;\n  background: var(--ckb-card);\n  box-shadow: 0 22px 52px rgba(55, 54, 61, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);\n}\n\n#comp-ld-4762 .ckb-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 30px;\n  width: 126px;\n  height: 4px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--ckb-orange), var(--ckb-cyan));\n}\n\n#comp-ld-4762 .ckb-eyebrow {\n  width: fit-content;\n  margin: 0 0 8px;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(0, 188, 223, 0.1);\n  color: var(--ckb-cyan-dark);\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-4762 .ckb-heading {\n  margin: 0 0 8px;\n  color: var(--ckb-primary);\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-4762 .ckb-sub {\n  max-width: 58ch;\n  margin: 0 0 22px;\n  color: var(--ckb-muted);\n  font-size: 0.92rem;\n  line-height: 1.65;\n}\n\n#comp-ld-4762 .ckb-segmented {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 5px;\n  width: min(100%, 480px);\n  margin-bottom: 22px;\n  padding: 5px;\n  border: 1px solid var(--ckb-line);\n  border-radius: 18px;\n  background: var(--ckb-bg);\n}\n\n#comp-ld-4762 .ckb-seg {\n  appearance: none;\n  display: inline-flex;\n  gap: 9px;\n  align-items: center;\n  justify-content: center;\n  min-height: 42px;\n  margin: 0;\n  padding: 10px 14px;\n  border: 1px solid transparent;\n  border-radius: 13px;\n  background: transparent;\n  box-shadow: none;\n  color: var(--ckb-muted);\n  font: inherit;\n  font-size: 0.82rem;\n  font-weight: 800;\n  line-height: 1.25;\n  cursor: pointer;\n  text-decoration: none;\n  text-transform: none;\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-4762 .ckb-seg::before {\n  content: '';\n  flex: 0 0 auto;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0.62;\n}\n\n#comp-ld-4762 .ckb-seg:hover {\n  color: var(--ckb-primary);\n  transform: translateY(-1px);\n}\n\n#comp-ld-4762 .ckb-seg:active {\n  transform: translateY(0) scale(0.985);\n}\n\n#comp-ld-4762 .ckb-seg:focus-visible {\n  outline: 3px solid rgba(0, 188, 223, 0.24);\n  outline-offset: 3px;\n}\n\n#comp-ld-4762 .ckb-seg--bad.is-active {\n  border-color: rgba(180, 35, 24, 0.18);\n  background: var(--ckb-red-soft);\n  color: var(--ckb-red);\n  box-shadow: 0 10px 22px rgba(180, 35, 24, 0.08);\n}\n\n#comp-ld-4762 .ckb-seg--good.is-active {\n  border-color: rgba(25, 135, 84, 0.18);\n  background: var(--ckb-green-soft);\n  color: var(--ckb-green);\n  box-shadow: 0 10px 22px rgba(25, 135, 84, 0.08);\n}\n\n#comp-ld-4762 .ckb-mock-wrap {\n  padding: 9px;\n  border: 1px solid rgba(55, 54, 61, 0.06);\n  border-radius: 22px;\n  background: var(--ckb-bg);\n}\n\n#comp-ld-4762 .ckb-mock {\n  position: relative;\n  min-height: 238px;\n  padding: clamp(18px, 3vw, 24px);\n  border: 1px solid var(--ckb-line);\n  border-radius: 16px;\n  background: var(--ckb-card);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);\n}\n\n#comp-ld-4762 .ckb-mock:focus-visible {\n  outline: 3px solid rgba(0, 188, 223, 0.2);\n  outline-offset: 3px;\n}\n\n#comp-ld-4762 .ckb-mock-text {\n  max-width: 600px;\n  margin: 0 0 18px;\n  color: var(--ckb-primary);\n  font-size: 0.9rem;\n  line-height: 1.6;\n}\n\n#comp-ld-4762 .ckb-mock-actions {\n  align-items: center;\n  margin-bottom: 14px;\n}\n\n#comp-ld-4762 .ckb-mock-actions--bad {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n}\n\n#comp-ld-4762 .ckb-mock-actions--equal {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n  max-width: 470px;\n}\n\n#comp-ld-4762 .ckb-mock-btn {\n  display: inline-flex;\n  min-height: 44px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  font-size: 0.84rem;\n  font-weight: 800;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n}\n\n#comp-ld-4762 .ckb-mock-btn--accept-big {\n  padding: 14px 32px;\n  background: var(--ckb-orange);\n  color: #ffffff;\n  box-shadow: 0 12px 26px rgba(219, 116, 36, 0.22);\n  font-size: 0.92rem;\n}\n\n#comp-ld-4762 .ckb-mock-reject-tiny {\n  position: relative;\n  padding: 4px;\n  color: var(--ckb-muted);\n  font-size: 0.68rem;\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n#comp-ld-4762 .ckb-mock-reject-tiny::after {\n  content: '';\n  position: absolute;\n  inset: -7px;\n  border: 2px solid rgba(180, 35, 24, 0.65);\n  border-radius: 9px;\n  pointer-events: none;\n}\n\n#comp-ld-4762 .ckb-mock-btn--equal {\n  width: 100%;\n  padding: 13px 22px;\n}\n\n#comp-ld-4762 .ckb-mock-btn--accept {\n  background: var(--ckb-orange);\n  color: #ffffff;\n  box-shadow: 0 10px 22px rgba(219, 116, 36, 0.18);\n}\n\n#comp-ld-4762 .ckb-mock-btn--reject {\n  background: var(--ckb-primary);\n  color: #ffffff;\n  box-shadow: 0 10px 22px rgba(55, 54, 61, 0.16);\n}\n\n#comp-ld-4762 .ckb-mock-link {\n  display: inline-block;\n  color: var(--ckb-cyan-dark);\n  font-size: 0.78rem;\n  font-weight: 700;\n  line-height: 1.4;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 3px;\n}\n\n#comp-ld-4762 .ckb-callout,\n#comp-ld-4762 .ckb-badge-ok {\n  display: flex;\n  gap: 9px;\n  align-items: flex-start;\n  width: fit-content;\n  max-width: 100%;\n  margin-top: 18px;\n  padding: 11px 14px;\n  border-radius: 12px;\n  font-size: 0.78rem;\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n#comp-ld-4762 .ckb-callout {\n  position: relative;\n  border: 1px solid rgba(180, 35, 24, 0.12);\n  background: var(--ckb-red-soft);\n  color: var(--ckb-red);\n}\n\n#comp-ld-4762 .ckb-callout::before {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: 28px;\n  width: 11px;\n  height: 11px;\n  border-top: 1px solid rgba(180, 35, 24, 0.12);\n  border-left: 1px solid rgba(180, 35, 24, 0.12);\n  background: var(--ckb-red-soft);\n  transform: rotate(45deg);\n}\n\n#comp-ld-4762 .ckb-badge-ok {\n  border: 1px solid rgba(25, 135, 84, 0.14);\n  background: var(--ckb-green-soft);\n  color: var(--ckb-green);\n}\n\n#comp-ld-4762 .ckb-callout svg,\n#comp-ld-4762 .ckb-badge-ok svg {\n  flex: 0 0 auto;\n  width: 19px;\n  height: 19px;\n  margin-top: 1px;\n}\n\n@media (max-width: 560px) {\n  #comp-ld-4762 {\n    padding: 7px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-4762 .ckb-card {\n    padding: 20px 16px;\n    border-radius: 18px;\n  }\n\n  #comp-ld-4762 .ckb-segmented,\n  #comp-ld-4762 .ckb-mock-actions--equal {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-4762 .ckb-seg {\n    justify-content: flex-start;\n  }\n\n  #comp-ld-4762 .ckb-mock-btn--accept-big {\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-4762 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-4762\">\n  <div class=\"ckb-card\">\n    <p class=\"ckb-eyebrow\">Simulador interactivo<\/p>\n    <div class=\"ckb-heading\">\u00bfVes la diferencia?<\/div>\n    <p class=\"ckb-sub\">Activa cada versi\u00f3n y comprueba cu\u00e1l ofrece aceptar y rechazar al mismo nivel y con una visibilidad comparable.<\/p>\n\n    <div class=\"ckb-segmented\" role=\"tablist\" aria-label=\"Elegir versi\u00f3n del banner\">\n      <button\n        type=\"button\"\n        class=\"ckb-seg ckb-seg--bad is-active\"\n        id=\"ckb-tab-bad-4762\"\n        data-mode=\"bad\"\n        role=\"tab\"\n        aria-selected=\"true\"\n        aria-controls=\"ckb-panel-bad-4762\"\n      >\n        Banner incorrecto\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"ckb-seg ckb-seg--good\"\n        id=\"ckb-tab-good-4762\"\n        data-mode=\"good\"\n        role=\"tab\"\n        aria-selected=\"false\"\n        aria-controls=\"ckb-panel-good-4762\"\n        tabindex=\"-1\"\n      >\n        Banner correcto\n      <\/button>\n    <\/div>\n\n    <div class=\"ckb-mock-wrap\" aria-live=\"polite\">\n      <div\n        class=\"ckb-mock\"\n        id=\"ckb-panel-bad-4762\"\n        data-state=\"bad\"\n        role=\"tabpanel\"\n        aria-labelledby=\"ckb-tab-bad-4762\"\n        tabindex=\"0\"\n      >\n        <p class=\"ckb-mock-text\">Utilizamos cookies para mejorar tu experiencia y mostrarte contenido personalizado.<\/p>\n\n        <div class=\"ckb-mock-actions ckb-mock-actions--bad\" role=\"group\" aria-label=\"Botones del ejemplo incorrecto\">\n          <span class=\"ckb-mock-btn ckb-mock-btn--accept-big\">Aceptar todo<\/span>\n          <span class=\"ckb-mock-reject-tiny\">Rechazar<\/span>\n        <\/div>\n\n        <span class=\"ckb-callout\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"\/><\/svg>\n          <span>Distinto tama\u00f1o, contraste y jerarqu\u00eda. No respeta el criterio de visibilidad de la AEPD.<\/span>\n        <\/span>\n      <\/div>\n\n      <div\n        class=\"ckb-mock\"\n        id=\"ckb-panel-good-4762\"\n        data-state=\"good\"\n        role=\"tabpanel\"\n        aria-labelledby=\"ckb-tab-good-4762\"\n        tabindex=\"0\"\n        hidden\n      >\n        <p class=\"ckb-mock-text\">Utilizamos cookies para mejorar tu experiencia y mostrarte contenido personalizado.<\/p>\n\n        <div class=\"ckb-mock-actions ckb-mock-actions--equal\" role=\"group\" aria-label=\"Botones del ejemplo correcto\">\n          <span class=\"ckb-mock-btn ckb-mock-btn--equal ckb-mock-btn--accept\">Aceptar todo<\/span>\n          <span class=\"ckb-mock-btn ckb-mock-btn--equal ckb-mock-btn--reject\">Rechazar<\/span>\n        <\/div>\n\n        <span class=\"ckb-mock-link\">Configurar cookies<\/span>\n\n        <span class=\"ckb-badge-ok\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n          <span>Mismo nivel, tama\u00f1o comparable y la misma visibilidad.<\/span>\n        <\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  var root = document.getElementById('comp-ld-4762');\n  if (!root || root.dataset.ckbInit === '1') return;\n\n  root.dataset.ckbInit = '1';\n\n  var tabs = Array.prototype.slice.call(root.querySelectorAll('[role=\"tab\"]'));\n  var panels = Array.prototype.slice.call(root.querySelectorAll('[role=\"tabpanel\"]'));\n\n  function activateTab(tab, moveFocus) {\n    tabs.forEach(function (item) {\n      var isActive = item === tab;\n      item.classList.toggle('is-active', isActive);\n      item.setAttribute('aria-selected', isActive ? 'true' : 'false');\n      item.setAttribute('tabindex', isActive ? '0' : '-1');\n    });\n\n    panels.forEach(function (panel) {\n      panel.hidden = panel.id !== tab.getAttribute('aria-controls');\n    });\n\n    if (moveFocus) tab.focus();\n  }\n\n  tabs.forEach(function (tab) {\n    tab.addEventListener('click', function () {\n      activateTab(tab, false);\n    });\n\n    tab.addEventListener('keydown', function (event) {\n      var currentIndex = tabs.indexOf(tab);\n      var nextIndex = currentIndex;\n\n      if (event.key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length;\n      if (event.key === 'ArrowLeft') nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      if (event.key === 'Home') nextIndex = 0;\n      if (event.key === 'End') nextIndex = tabs.length - 1;\n      if (nextIndex === currentIndex) return;\n\n      event.preventDefault();\n      activateTab(tabs[nextIndex], true);\n    });\n  });\n\n  var initialTab = root.querySelector('.ckb-seg.is-active') || tabs[0];\n  if (initialTab) activateTab(initialTab, false);\n});\n<\/script>\n<!-- FIN BLOQUE: simulador-banner-cookies -->\n\n\n\n\n<p>Este texto puede servir como punto de partida:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p><em>Utilizamos cookies propias y de terceros para mantener el funcionamiento de la web, analizar su uso y, si lo autorizas, personalizar contenidos o publicidad. Puedes aceptar todas las cookies, rechazar las no necesarias o elegir qu\u00e9 categor\u00edas permites. Consulta la pol\u00edtica de cookies para conocer los proveedores, las finalidades y la duraci\u00f3n de cada cookie.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>Junto al mensaje podr\u00edan aparecer estas opciones:<\/p>\n\n\n\n<ul>\n<li><strong>Aceptar todas<\/strong><\/li>\n\n\n\n<li><strong>Rechazar las no necesarias<\/strong><\/li>\n\n\n\n<li><strong>Configurar cookies<\/strong><\/li>\n\n\n\n<li><strong>Enlace a la pol\u00edtica de cookies<\/strong><\/li>\n<\/ul>\n\n\n\n<p>El texto debe cambiar si la web no utiliza publicidad, no incluye anal\u00edtica o trabaja con finalidades diferentes. <strong>No conviene copiar un ejemplo sin comprobar qu\u00e9 sucede realmente en tu p\u00e1gina.<\/strong><\/p>\n\n\n\n<p>Tambi\u00e9n debes controlar el momento de carga. Si Google Analytics, un p\u00edxel publicitario o un v\u00eddeo externo instala cookies nada m\u00e1s abrir la p\u00e1gina, mostrar el banner despu\u00e9s no corrige esa activaci\u00f3n previa.<\/p>\n\n\n\n<!-- BLOQUE: ejemplo-de-banner-de-cookies-correcto -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-3482,\n#comp-ld-3482 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-3482 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-3482 .ld-shell {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(20px, 3vw, 32px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 30px;\n  background:\n    radial-gradient(circle at 12% 0%, rgba(0, 188, 223, 0.2), transparent 32%),\n    radial-gradient(circle at 100% 100%, rgba(219, 116, 36, 0.18), transparent 36%),\n    #37363d;\n  box-shadow: 0 28px 70px rgba(55, 54, 61, 0.22);\n}\n\n#comp-ld-3482 .ld-shell::before {\n  content: '';\n  position: absolute;\n  inset: 12px;\n  pointer-events: none;\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 22px;\n}\n\n#comp-ld-3482 .ld-head {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: 8px;\n  max-width: 720px;\n  margin-bottom: 24px;\n}\n\n#comp-ld-3482 .ld-kicker {\n  width: fit-content;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(219, 116, 36, 0.16);\n  color: #f5b37d;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-3482 .ld-title {\n  color: #ffffff;\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-3482 .ld-head p {\n  margin: 0;\n  color: rgba(255, 255, 255, 0.72);\n  font-size: 0.95rem;\n  line-height: 1.65;\n}\n\n#comp-ld-3482 .ld-layout {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);\n  gap: 18px;\n  align-items: stretch;\n}\n\n#comp-ld-3482 .ld-stage {\n  min-width: 0;\n  padding: 10px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 26px;\n  background: rgba(255, 255, 255, 0.07);\n}\n\n#comp-ld-3482 .ld-browser {\n  overflow: hidden;\n  min-height: 100%;\n  border-radius: 20px;\n  background: #f8fafc;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);\n}\n\n#comp-ld-3482 .ld-browser-top {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 42px;\n  padding: 0 18px 0 70px;\n  border-bottom: 1px solid rgba(55, 54, 61, 0.08);\n  background: #ffffff;\n  color: rgba(55, 54, 61, 0.54);\n  font-size: 0.74rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n#comp-ld-3482 .ld-browser-top::before {\n  content: '';\n  position: absolute;\n  left: 18px;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #db7424;\n  box-shadow: 16px 0 0 #00bcdf, 32px 0 0 #198754;\n  transform: translateY(-50%);\n}\n\n#comp-ld-3482 .ld-browser-body {\n  display: grid;\n  gap: 18px;\n  padding: clamp(18px, 3vw, 26px);\n}\n\n#comp-ld-3482 .ld-page-context {\n  padding: 18px;\n  border: 1px dashed rgba(55, 54, 61, 0.16);\n  border-radius: 16px;\n  background: #ffffff;\n}\n\n#comp-ld-3482 .ld-context-label {\n  display: block;\n  margin-bottom: 6px;\n  color: rgba(55, 54, 61, 0.5);\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n#comp-ld-3482 .ld-page-context p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.72);\n  font-size: 0.88rem;\n  line-height: 1.55;\n}\n\n#comp-ld-3482 .ld-cookie-card {\n  position: relative;\n  display: grid;\n  gap: 16px;\n  padding: clamp(18px, 3vw, 24px);\n  border: 1px solid rgba(55, 54, 61, 0.1);\n  border-radius: 20px;\n  background: #ffffff;\n  box-shadow: 0 20px 44px rgba(55, 54, 61, 0.12);\n}\n\n#comp-ld-3482 .ld-cookie-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 24px;\n  width: 96px;\n  height: 4px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, #00bcdf, #db7424);\n}\n\n#comp-ld-3482 .ld-cookie-head {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 12px;\n  align-items: start;\n}\n\n#comp-ld-3482 .ld-marker {\n  display: inline-grid;\n  flex: 0 0 auto;\n  width: 26px;\n  height: 26px;\n  place-items: center;\n  border-radius: 50%;\n  background: rgba(0, 188, 223, 0.12);\n  color: #087d94;\n  font-size: 0.72rem;\n  font-weight: 800;\n  line-height: 1;\n}\n\n#comp-ld-3482 .ld-cookie-head p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.8);\n  font-size: 0.91rem;\n  line-height: 1.6;\n}\n\n#comp-ld-3482 .ld-actions-wrap {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 12px;\n  align-items: center;\n}\n\n#comp-ld-3482 .ld-cookie-actions {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n}\n\n#comp-ld-3482 .ld-btn {\n  display: inline-flex;\n  min-height: 42px;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 14px;\n  border-radius: 999px;\n  font-size: 0.84rem;\n  font-weight: 800;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n}\n\n#comp-ld-3482 .ld-btn-accept {\n  background: #db7424;\n  color: #ffffff;\n  box-shadow: 0 10px 22px rgba(219, 116, 36, 0.22);\n}\n\n#comp-ld-3482 .ld-btn-reject {\n  background: #37363d;\n  color: #ffffff;\n  box-shadow: 0 10px 22px rgba(55, 54, 61, 0.18);\n}\n\n#comp-ld-3482 .ld-btn-config {\n  border: 1px solid rgba(55, 54, 61, 0.18);\n  background: #ffffff;\n  color: #37363d;\n}\n\n#comp-ld-3482 .ld-cookie-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 9px 12px;\n  align-items: center;\n  padding-top: 14px;\n  border-top: 1px solid rgba(55, 54, 61, 0.08);\n  color: rgba(55, 54, 61, 0.66);\n  font-size: 0.79rem;\n  font-weight: 700;\n}\n\n#comp-ld-3482 .ld-policy {\n  color: #087d94;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 3px;\n}\n\n#comp-ld-3482 .ld-notes {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#comp-ld-3482 .ld-notes li {\n  position: relative;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 12px;\n  align-items: start;\n  padding: 15px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 18px;\n  background: rgba(255, 255, 255, 0.07);\n  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-3482 .ld-notes li:hover {\n  transform: translateY(-2px);\n  border-color: rgba(0, 188, 223, 0.35);\n  background: rgba(255, 255, 255, 0.1);\n}\n\n#comp-ld-3482 .ld-note-number {\n  display: grid;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  border-radius: 12px;\n  background: rgba(219, 116, 36, 0.18);\n  color: #f5b37d;\n  font-size: 0.74rem;\n  font-weight: 800;\n}\n\n#comp-ld-3482 .ld-note-title {\n  margin-bottom: 4px;\n  color: #ffffff;\n  font-size: 0.9rem;\n  font-weight: 800;\n  line-height: 1.35;\n}\n\n#comp-ld-3482 .ld-note-text {\n  margin: 0;\n  color: rgba(255, 255, 255, 0.68);\n  font-size: 0.8rem;\n  line-height: 1.55;\n}\n\n#comp-ld-3482 .ld-adapt {\n  margin-top: 14px;\n  padding: 13px 14px;\n  border-left: 3px solid #00bcdf;\n  border-radius: 12px;\n  background: rgba(0, 188, 223, 0.1);\n  color: rgba(255, 255, 255, 0.74);\n  font-size: 0.82rem;\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n@media (max-width: 860px) {\n  #comp-ld-3482 .ld-layout {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 560px) {\n  #comp-ld-3482 .ld-shell {\n    padding: 18px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-3482 .ld-stage {\n    padding: 7px;\n  }\n\n  #comp-ld-3482 .ld-cookie-actions {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-3482 .ld-actions-wrap,\n  #comp-ld-3482 .ld-cookie-head {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-3482 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-3482\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-head\">\n      <span class=\"ld-kicker\">Ejemplo orientativo<\/span>\n    <\/div>\n\n    <div class=\"ld-layout\">\n      <div class=\"ld-stage\">\n        <div class=\"ld-browser\" role=\"region\" aria-label=\"Ejemplo visual de banner de cookies correcto\">\n          <div class=\"ld-browser-top\">Vista previa del aviso<\/div>\n\n          <div class=\"ld-browser-body\">\n            <div class=\"ld-page-context\">\n              <span class=\"ld-context-label\">Contenido principal<\/span>\n              <p>La web permanece visible y el aviso aparece sin ocupar toda la pantalla ni impedir la lectura.<\/p>\n            <\/div>\n\n            <div class=\"ld-cookie-card\">\n              <div class=\"ld-cookie-head\">\n                <span class=\"ld-marker\">1<\/span>\n                <p>Utilizamos cookies propias y de terceros para mantener la web, analizar su uso y, si lo autorizas, personalizar contenidos o publicidad.<\/p>\n              <\/div>\n\n              <div class=\"ld-actions-wrap\">\n                <span class=\"ld-marker\">2<\/span>\n                <div class=\"ld-cookie-actions\" role=\"group\" aria-label=\"Opciones del ejemplo de banner\">\n                  <span class=\"ld-btn ld-btn-accept\">Aceptar<\/span>\n                  <span class=\"ld-btn ld-btn-reject\">Rechazar<\/span>\n                  <span class=\"ld-btn ld-btn-config\">Configurar<\/span>\n                <\/div>\n              <\/div>\n\n              <div class=\"ld-cookie-footer\">\n                <span class=\"ld-marker\">3<\/span>\n                <span>Configuraci\u00f3n por categor\u00edas<\/span>\n                <span class=\"ld-marker\">4<\/span>\n                <span class=\"ld-policy\">Pol\u00edtica de cookies<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div>\n        <ol class=\"ld-notes\">\n          <li>\n            <span class=\"ld-note-number\">01<\/span>\n            <div>\n              <div class=\"ld-note-title\">Informaci\u00f3n esencial<\/div>\n              <p class=\"ld-note-text\">Resume qu\u00e9 se usa y para qu\u00e9 sin volcar toda la pol\u00edtica en el aviso inicial.<\/p>\n            <\/div>\n          <\/li>\n          <li>\n            <span class=\"ld-note-number\">02<\/span>\n            <div>\n              <div class=\"ld-note-title\">Decisi\u00f3n equilibrada<\/div>\n              <p class=\"ld-note-text\">Aceptar y rechazar aparecen al mismo tiempo y con una visibilidad comparable.<\/p>\n            <\/div>\n          <\/li>\n          <li>\n            <span class=\"ld-note-number\">03<\/span>\n            <div>\n              <div class=\"ld-note-title\">Control por categor\u00edas<\/div>\n              <p class=\"ld-note-text\">La configuraci\u00f3n permite elegir sin obligar a aceptar todas las cookies.<\/p>\n            <\/div>\n          <\/li>\n          <li>\n            <span class=\"ld-note-number\">04<\/span>\n            <div>\n              <div class=\"ld-note-title\">Acceso al detalle<\/div>\n              <p class=\"ld-note-text\">La pol\u00edtica queda visible para consultar proveedores, finalidades y duraci\u00f3n.<\/p>\n            <\/div>\n          <\/li>\n        <\/ol>\n\n        <div class=\"ld-adapt\">Ejemplo visual orientativo. El texto y las categor\u00edas deben adaptarse a las cookies y servicios reales de cada web.<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- FIN BLOQUE: ejemplo-de-banner-de-cookies-correcto -->\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-como-deben-mostrarse-los-botones-del-banner\">C\u00f3mo deben mostrarse los botones del banner<\/h3>\n\n\n\n<p>Aceptar y rechazar deben ser opciones f\u00e1ciles de encontrar. Evita que \u00abAceptar\u00bb ocupe casi todo el banner mientras \u00abRechazar\u00bb aparece como un enlace peque\u00f1o, con poco contraste o dentro de una segunda pantalla.<\/p>\n\n\n\n<!-- BLOQUE: cita-eeat-aepd -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-5164,\n#comp-ld-5164 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-5164 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-5164 .ld-quote-shell {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(22px, 3vw, 30px) clamp(22px, 4vw, 34px) clamp(20px, 3vw, 28px) clamp(26px, 4vw, 40px);\n  border: 1px solid rgba(55, 54, 61, 0.1);\n  border-radius: 24px;\n  background: #ffffff;\n  box-shadow: 0 20px 50px rgba(0, 188, 223, 0.08), 0 8px 24px rgba(55, 54, 61, 0.05);\n}\n\n#comp-ld-5164 .ld-quote-shell::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 6px;\n  background: linear-gradient(180deg, #00bcdf 0%, #db7424 100%);\n}\n\n#comp-ld-5164 .ld-quote-shell::after {\n  content: '\u201c';\n  position: absolute;\n  top: 14px;\n  right: 24px;\n  color: rgba(0, 188, 223, 0.14);\n  font-size: 5.4rem;\n  font-weight: 800;\n  line-height: 1;\n  pointer-events: none;\n}\n\n#comp-ld-5164 .ld-source-badge {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  margin-bottom: 12px;\n  color: #0891b2;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.14em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-5164 .ld-source-badge::before {\n  content: '';\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #00bcdf;\n  box-shadow: 0 0 0 5px rgba(0, 188, 223, 0.1);\n}\n\n#comp-ld-5164 .ld-source-name {\n  position: relative;\n  z-index: 1;\n  margin-bottom: 12px;\n  color: #37363d;\n  font-size: clamp(1.05rem, 0.8vw + 0.95rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n#comp-ld-5164 .ld-quote-text {\n  position: relative;\n  z-index: 1;\n  max-width: 850px;\n  margin: 0 0 18px;\n  color: rgba(55, 54, 61, 0.78);\n  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.1rem);\n  font-weight: 600;\n  line-height: 1.65;\n}\n\n#comp-ld-5164 .ld-source-link {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  gap: 9px;\n  align-items: center;\n  color: #b85f1d;\n  font-size: 0.86rem;\n  font-weight: 800;\n  line-height: 1.4;\n  text-decoration: none;\n  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-5164 .ld-source-link:hover {\n  color: #8f4a16;\n  transform: translateX(2px);\n}\n\n#comp-ld-5164 .ld-source-link:focus-visible {\n  outline: 3px solid rgba(219, 116, 36, 0.22);\n  outline-offset: 4px;\n  border-radius: 8px;\n}\n\n#comp-ld-5164 .ld-source-link svg {\n  flex: 0 0 auto;\n  width: 19px;\n  height: 19px;\n  color: #db7424;\n}\n\n@media (max-width: 520px) {\n  #comp-ld-5164 .ld-quote-shell {\n    padding: 22px 20px 20px 24px;\n    border-radius: 20px;\n  }\n\n  #comp-ld-5164 .ld-quote-shell::after {\n    right: 16px;\n    font-size: 4.2rem;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-5164 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-5164\">\n  <div class=\"ld-quote-shell\">\n    <div class=\"ld-source-badge\">Fuente oficial<\/div>\n    <div class=\"ld-source-name\">Agencia Espa\u00f1ola de Protecci\u00f3n de Datos<\/div>\n    <p class=\"ld-quote-text\">\u201cTanto la opci\u00f3n de aceptar como la de rechazar las cookies deber\u00e1 ofrecerse al mismo tiempo, al mismo nivel y con la misma visibilidad.\u201d<\/p>\n    <a class=\"ld-source-link\" href=\"https:\/\/www.aepd.es\/guias\/guia-cookies.pdf\" target=\"_blank\" aria-label=\"Consultar la Gu\u00eda sobre el uso de las cookies de la AEPD en PDF\" rel=\"noopener\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 17 17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n      <span>Fuente: Gu\u00eda sobre el uso de las cookies de la AEPD<\/span>\n    <\/a>\n  <\/div>\n<\/div>\n<!-- FIN BLOQUE: cita-eeat-aepd -->\n\n\n\n<p><\/p>\n\n\n\n<p>Esto no obliga a que los botones sean id\u00e9nticos, pero s\u00ed a evitar una diferencia que empuje al usuario hacia la aceptaci\u00f3n. Deben tener <strong>un tama\u00f1o, contraste y posici\u00f3n comparables<\/strong>.<\/p>\n\n\n\n<p>El bot\u00f3n de configuraci\u00f3n debe describir su funci\u00f3n con claridad. Una etiqueta como \u00abOpciones\u00bb puede resultar ambigua; \u00abConfigurar cookies\u00bb explica mejor qu\u00e9 ocurrir\u00e1 al pulsarla.<\/p>\n\n\n\n<p>En el panel de configuraci\u00f3n, las cookies necesarias pueden aparecer activas cuando de verdad sean imprescindibles. Las dem\u00e1s categor\u00edas no deber\u00edan estar premarcadas. El usuario <strong>debe poder guardar su selecci\u00f3n<\/strong> sin verse obligado a aceptar todas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-que-debe-incluir-un-banner-de-cookies\">Qu\u00e9 debe incluir un banner de cookies<\/h2>\n\n\n\n<p>El <strong>banner es la primera capa de informaci\u00f3n<\/strong>. Su funci\u00f3n es ayudar al usuario a entender lo esencial y tomar una decisi\u00f3n sin tener que leer un documento largo.<\/p>\n\n\n\n<p>En Espa\u00f1a, el <a href=\"https:\/\/www.boe.es\/buscar\/act.php?id=BOE-A-2002-13758#a22\" target=\"_blank\" rel=\"noopener\" title=\"\">art\u00edculo 22.2 de la LSSI<\/a> permite utilizar cookies no exentas si el usuario ha dado su consentimiento despu\u00e9s de recibir informaci\u00f3n clara y completa. En la pr\u00e1ctica, <strong>primero debes informar y despu\u00e9s esperar a que el usuario decida<\/strong>.<\/p>\n\n\n\n<p>Como m\u00ednimo, deber\u00eda cubrir estos puntos:<\/p>\n\n\n\n<ul>\n<li><strong>Qui\u00e9n utiliza las cookies.<\/strong> Identifica al responsable de la web y aclara si intervienen terceros.<\/li>\n\n\n\n<li><strong>Para qu\u00e9 se utilizan.<\/strong> Resume las finalidades reales, como mantener la sesi\u00f3n, recordar preferencias, medir visitas o mostrar publicidad.<\/li>\n\n\n\n<li><strong>Qu\u00e9 puede decidir el usuario.<\/strong> Ofrece controles para aceptar, rechazar y configurar cuando existan cookies que requieran consentimiento.<\/li>\n\n\n\n<li><strong>D\u00f3nde est\u00e1 la informaci\u00f3n completa.<\/strong> Incluye un enlace visible a la pol\u00edtica de cookies.<\/li>\n\n\n\n<li><strong>C\u00f3mo cambiar la decisi\u00f3n.<\/strong> Explica o facilita el acceso posterior al panel de preferencias.<\/li>\n<\/ul>\n\n\n\n<p>No es necesario mostrar el nombre t\u00e9cnico de todas las cookies dentro del banner inicial. Esa informaci\u00f3n encaja mejor en la pol\u00edtica o en el panel detallado. En cambio, las categor\u00edas deben entenderse sin conocimientos t\u00e9cnicos.<\/p>\n\n\n\n<!-- BLOQUE: que-debe-incluir-un-banner-de-cookies -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-6291,\n#comp-ld-6291 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-6291 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-6291 .ld-shell {\n  padding: clamp(20px, 3vw, 32px);\n  border: 1px solid rgba(55, 54, 61, 0.08);\n  border-radius: 30px;\n  background:\n    radial-gradient(circle at 100% 0%, rgba(25, 135, 84, 0.1), transparent 28%),\n    #f4f4f6;\n}\n\n#comp-ld-6291 .ld-head {\n  display: grid;\n  gap: 8px;\n  max-width: 720px;\n  margin-bottom: 22px;\n}\n\n#comp-ld-6291 .ld-kicker {\n  width: fit-content;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(25, 135, 84, 0.1);\n  color: #198754;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-6291 .ld-title {\n  color: #37363d;\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-6291 .ld-head p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.7);\n  font-size: 0.94rem;\n  line-height: 1.65;\n}\n\n#comp-ld-6291 .ld-checklist {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: 12px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#comp-ld-6291 .ld-item {\n  position: relative;\n  display: grid;\n  grid-column: span 2;\n  gap: 12px;\n  min-height: 158px;\n  padding: 18px;\n  border: 1px solid rgba(55, 54, 61, 0.09);\n  border-radius: 20px;\n  background: #ffffff;\n  box-shadow: 0 12px 30px rgba(55, 54, 61, 0.04);\n  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-6291 .ld-item:nth-child(4),\n#comp-ld-6291 .ld-item:nth-child(5) {\n  grid-column: span 3;\n}\n\n#comp-ld-6291 .ld-item::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 18px;\n  width: 44px;\n  height: 3px;\n  border-radius: 999px;\n  background: rgba(25, 135, 84, 0.55);\n}\n\n#comp-ld-6291 .ld-item:hover {\n  transform: translateY(-3px);\n  border-color: rgba(25, 135, 84, 0.25);\n  box-shadow: 0 18px 36px rgba(25, 135, 84, 0.08);\n}\n\n#comp-ld-6291 .ld-icon {\n  display: grid;\n  width: 38px;\n  height: 38px;\n  place-items: center;\n  border-radius: 14px;\n  background: rgba(25, 135, 84, 0.1);\n  color: #198754;\n}\n\n#comp-ld-6291 .ld-icon svg {\n  width: 22px;\n  height: 22px;\n}\n\n#comp-ld-6291 .ld-item-title {\n  color: #37363d;\n  font-size: 0.95rem;\n  font-weight: 800;\n  line-height: 1.35;\n}\n\n#comp-ld-6291 .ld-item-text {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.66);\n  font-size: 0.82rem;\n  line-height: 1.55;\n}\n\n#comp-ld-6291 .ld-bottom-note {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-top: 16px;\n  padding: 13px 15px;\n  border-radius: 16px;\n  background: rgba(55, 54, 61, 0.06);\n  color: rgba(55, 54, 61, 0.72);\n  font-size: 0.84rem;\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n#comp-ld-6291 .ld-bottom-note svg {\n  flex: 0 0 auto;\n  width: 21px;\n  height: 21px;\n  color: #db7424;\n}\n\n@media (max-width: 820px) {\n  #comp-ld-6291 .ld-checklist {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-6291 .ld-item,\n  #comp-ld-6291 .ld-item:nth-child(4),\n  #comp-ld-6291 .ld-item:nth-child(5) {\n    grid-column: auto;\n    min-height: auto;\n  }\n}\n\n@media (max-width: 520px) {\n  #comp-ld-6291 .ld-shell {\n    padding: 18px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-6291 .ld-bottom-note {\n    align-items: flex-start;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-6291 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-6291\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-head\">\n      <span class=\"ld-kicker\">Primera capa<\/span>\n      <div class=\"ld-title\">Cinco datos que no deber\u00edan faltar<\/div>\n    <\/div>\n\n    <ul class=\"ld-checklist\">\n      <li class=\"ld-item\">\n        <span class=\"ld-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n        <\/span>\n        <div>\n          <div class=\"ld-item-title\">Qui\u00e9n utiliza las cookies<\/div>\n          <p class=\"ld-item-text\">Identifica al responsable y aclara si intervienen terceros.<\/p>\n        <\/div>\n      <\/li>\n\n      <li class=\"ld-item\">\n        <span class=\"ld-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\n        <\/span>\n        <div>\n          <div class=\"ld-item-title\">Para qu\u00e9 se utilizan<\/div>\n          <p class=\"ld-item-text\">Resume finalidades reales, no f\u00f3rmulas gen\u00e9ricas.<\/p>\n        <\/div>\n      <\/li>\n\n      <li class=\"ld-item\">\n        <span class=\"ld-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 21v-7\"\/><path d=\"M4 10V3\"\/><path d=\"M12 21v-9\"\/><path d=\"M12 8V3\"\/><path d=\"M20 21v-5\"\/><path d=\"M20 12V3\"\/><path d=\"M2 14h4\"\/><path d=\"M10 8h4\"\/><path d=\"M18 16h4\"\/><\/svg>\n        <\/span>\n        <div>\n          <div class=\"ld-item-title\">Qu\u00e9 puede decidir<\/div>\n          <p class=\"ld-item-text\">Aceptar, rechazar y configurar deben verse como opciones reales.<\/p>\n        <\/div>\n      <\/li>\n\n      <li class=\"ld-item\">\n        <span class=\"ld-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>\n        <\/span>\n        <div>\n          <div class=\"ld-item-title\">D\u00f3nde est\u00e1 el detalle<\/div>\n          <p class=\"ld-item-text\">La pol\u00edtica debe estar visible y accesible desde el aviso.<\/p>\n        <\/div>\n      <\/li>\n\n      <li class=\"ld-item\">\n        <span class=\"ld-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 0 1 15.36-6.36L21 8\"\/><path d=\"M21 3v5h-5\"\/><path d=\"M21 12a9 9 0 0 1-15.36 6.36L3 16\"\/><path d=\"M3 21v-5h5\"\/><\/svg>\n        <\/span>\n        <div>\n          <div class=\"ld-item-title\">C\u00f3mo cambiar la elecci\u00f3n<\/div>\n          <p class=\"ld-item-text\">El usuario debe poder volver al panel sin buscarlo por toda la web.<\/p>\n        <\/div>\n      <\/li>\n    <\/ul>\n\n    <div class=\"ld-bottom-note\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>\n      <span>La categor\u00eda \u00abNecesarias\u00bb no debe usarse como un caj\u00f3n para cualquier servicio.<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- FIN BLOQUE: que-debe-incluir-un-banner-de-cookies -->\n\n\n\n<p><br>Las m\u00e1s habituales son las necesarias, de preferencias, anal\u00edticas y publicitarias. Puedes ampliar esta clasificaci\u00f3n en la gu\u00eda sobre los <a href=\"https:\/\/www.loading.es\/blog\/tipos-de-cookies-web\/\" target=\"_blank\" rel=\"noopener\" title=\"\">tipos de cookies que puede utilizar una web<\/a>.<\/p>\n\n\n\n<p>La categor\u00eda \u00abNecesarias\u00bb no debe convertirse en un caj\u00f3n donde incluir cualquier servicio. Una cookie est\u00e1 exenta de consentimiento cuando resulta imprescindible para transmitir una comunicaci\u00f3n o prestar un servicio solicitado expresamente por el usuario.<\/p>\n\n\n\n<p>Que una herramienta <strong>sea \u00fatil para el propietario de la web<\/strong> no significa que <strong>sea necesaria para quien la visita<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-que-debe-aparecer-en-el-panel-de-configuracion\">Qu\u00e9 debe aparecer en el panel de configuraci\u00f3n<\/h3>\n\n\n\n<p>El panel permite ofrecer m\u00e1s detalle sin saturar el aviso inicial. Es recomendable que incluya:<\/p>\n\n\n\n<ul>\n<li>Una explicaci\u00f3n breve de cada categor\u00eda.<\/li>\n\n\n\n<li>El estado de cada grupo de cookies.<\/li>\n\n\n\n<li>La posibilidad de activar o desactivar categor\u00edas por separado.<\/li>\n\n\n\n<li>Informaci\u00f3n sobre proveedores o acceso directo al detalle.<\/li>\n\n\n\n<li>Un control claro para guardar la selecci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p>Si el usuario desactiva una categor\u00eda, esa decisi\u00f3n debe tener un efecto t\u00e9cnico. Un interruptor que cambia de posici\u00f3n pero no bloquea las etiquetas correspondientes crea una falsa sensaci\u00f3n de control.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-banner-de-cookies-y-politica-de-cookies-es-lo-mismo\">Banner de cookies y pol\u00edtica de cookies \u00bfes lo mismo?<\/h2>\n\n\n\n<p>No. El banner y la pol\u00edtica de cookies cumplen funciones distintas, aunque deben trabajar juntos.<\/p>\n\n\n\n<p>El <strong>banner de cookies<\/strong> aparece al entrar en la web cuando hace falta solicitar una elecci\u00f3n. Resume la informaci\u00f3n principal y ofrece los controles de consentimiento.<\/p>\n\n\n\n<p>La <strong>pol\u00edtica de cookies<\/strong> es un documento permanente y m\u00e1s detallado. Debe poder consultarse aunque el banner ya no est\u00e9 visible. En ella se explica qu\u00e9 tecnolog\u00edas se utilizan, qui\u00e9n las gestiona y c\u00f3mo puede actuar el usuario.<\/p>\n\n\n\n<!-- BLOQUE: banner-de-cookies-y-politica-de-cookies-es-lo-mismo -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-7348,\n#comp-ld-7348 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-7348 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-7348 .ld-shell {\n  padding: 10px;\n  border: 1px solid rgba(55, 54, 61, 0.08);\n  border-radius: 30px;\n  background: #f4f4f6;\n}\n\n#comp-ld-7348 .ld-inner {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(22px, 3vw, 30px);\n  border-radius: 22px;\n  background: #ffffff;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);\n}\n\n#comp-ld-7348 .ld-inner::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 180px;\n  height: 4px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, #00bcdf, #db7424);\n  transform: translateX(-50%);\n}\n\n#comp-ld-7348 .ld-head {\n  display: grid;\n  gap: 8px;\n  max-width: 700px;\n  margin: 0 auto 24px;\n  text-align: center;\n}\n\n#comp-ld-7348 .ld-title {\n  color: #37363d;\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-7348 .ld-head p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.68);\n  font-size: 0.94rem;\n  line-height: 1.6;\n}\n\n#comp-ld-7348 .ld-compare {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n  align-items: stretch;\n}\n\n#comp-ld-7348 .ld-card {\n  position: relative;\n  display: grid;\n  gap: 16px;\n  padding: clamp(20px, 3vw, 26px);\n  border: 1px solid rgba(55, 54, 61, 0.09);\n  border-radius: 22px;\n  background: #f8fafc;\n  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-7348 .ld-card:hover {\n  transform: translateY(-3px);\n  border-color: rgba(0, 188, 223, 0.22);\n  box-shadow: 0 18px 38px rgba(55, 54, 61, 0.07);\n}\n\n#comp-ld-7348 .ld-card-policy:hover {\n  border-color: rgba(219, 116, 36, 0.25);\n}\n\n#comp-ld-7348 .ld-card-top {\n  display: flex;\n  gap: 13px;\n  align-items: center;\n}\n\n#comp-ld-7348 .ld-icon {\n  display: grid;\n  flex: 0 0 auto;\n  width: 42px;\n  height: 42px;\n  place-items: center;\n  border-radius: 15px;\n}\n\n#comp-ld-7348 .ld-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n#comp-ld-7348 .ld-card-banner .ld-icon {\n  background: rgba(0, 188, 223, 0.11);\n  color: #0891b2;\n}\n\n#comp-ld-7348 .ld-card-policy .ld-icon {\n  background: rgba(219, 116, 36, 0.11);\n  color: #b85f1d;\n}\n\n#comp-ld-7348 .ld-card-kicker {\n  display: block;\n  margin-bottom: 4px;\n  color: rgba(55, 54, 61, 0.52);\n  font-size: 0.7rem;\n  font-weight: 800;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n}\n\n#comp-ld-7348 .ld-card-title {\n  color: #37363d;\n  font-size: 1.08rem;\n  font-weight: 800;\n  letter-spacing: -0.015em;\n  line-height: 1.25;\n}\n\n#comp-ld-7348 .ld-card > p {\n  margin: 0;\n  color: rgba(55, 54, 61, 0.7);\n  font-size: 0.88rem;\n  line-height: 1.6;\n}\n\n#comp-ld-7348 .ld-mini-list {\n  display: grid;\n  gap: 9px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#comp-ld-7348 .ld-mini-list li {\n  display: grid;\n  grid-template-columns: 8px 1fr;\n  gap: 10px;\n  align-items: start;\n  color: rgba(55, 54, 61, 0.74);\n  font-size: 0.84rem;\n  line-height: 1.5;\n}\n\n#comp-ld-7348 .ld-mini-list li::before {\n  content: '';\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n  border-radius: 50%;\n  background: #00bcdf;\n}\n\n#comp-ld-7348 .ld-card-policy .ld-mini-list li::before {\n  background: #db7424;\n}\n\n#comp-ld-7348 .ld-connector {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 50%;\n  padding: 10px 14px;\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 999px;\n  background: #37363d;\n  color: #ffffff;\n  box-shadow: 0 14px 30px rgba(55, 54, 61, 0.18);\n  font-size: 0.74rem;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  line-height: 1;\n  text-align: center;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  white-space: nowrap;\n}\n\n#comp-ld-7348 .ld-bottom {\n  margin: 20px auto 0;\n  max-width: 620px;\n  padding: 13px 16px;\n  border-radius: 16px;\n  background: rgba(55, 54, 61, 0.06);\n  color: rgba(55, 54, 61, 0.72);\n  font-size: 0.84rem;\n  font-weight: 700;\n  line-height: 1.5;\n  text-align: center;\n}\n\n@media (max-width: 760px) {\n  #comp-ld-7348 .ld-compare {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-7348 .ld-connector {\n    position: static;\n    width: fit-content;\n    margin: -4px auto;\n    transform: none;\n    order: 2;\n  }\n\n  #comp-ld-7348 .ld-card-policy {\n    order: 3;\n  }\n}\n\n@media (max-width: 520px) {\n  #comp-ld-7348 .ld-shell {\n    padding: 7px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-7348 .ld-inner {\n    padding: 20px 16px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-7348 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-7348\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-inner\">\n      <div class=\"ld-head\">\n        <div class=\"ld-title\">El banner decide; la pol\u00edtica documenta<\/div>\n      <\/div>\n\n      <div class=\"ld-compare\">\n        <article class=\"ld-card ld-card-banner\">\n          <div class=\"ld-card-top\">\n            <span class=\"ld-icon\">\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\"\/><path d=\"M8 12h8\"\/><path d=\"M8 16h5\"\/><\/svg>\n            <\/span>\n            <div>\n              <span class=\"ld-card-kicker\">Decisi\u00f3n inmediata<\/span>\n              <div class=\"ld-card-title\">Banner de cookies<\/div>\n            <\/div>\n          <\/div>\n\n          <p>Aparece cuando la web necesita pedir una elecci\u00f3n y resume lo esencial en primera capa.<\/p>\n\n          <ul class=\"ld-mini-list\">\n            <li>Informa de forma breve y visible.<\/li>\n            <li>Permite aceptar, rechazar y configurar.<\/li>\n            <li>Controla qu\u00e9 tecnolog\u00edas pueden activarse.<\/li>\n          <\/ul>\n        <\/article>\n\n        <div class=\"ld-connector\">No se sustituyen<\/div>\n\n        <article class=\"ld-card ld-card-policy\">\n          <div class=\"ld-card-top\">\n            <span class=\"ld-icon\">\n              <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\"\/><path d=\"M14 2v6h6\"\/><path d=\"M8 13h8\"\/><path d=\"M8 17h5\"\/><\/svg>\n            <\/span>\n            <div>\n              <span class=\"ld-card-kicker\">Informaci\u00f3n permanente<\/span>\n              <div class=\"ld-card-title\">Pol\u00edtica de cookies<\/div>\n            <\/div>\n          <\/div>\n\n          <p>Recoge el detalle completo y debe poder consultarse aunque el banner ya no est\u00e9 visible.<\/p>\n\n          <ul class=\"ld-mini-list\">\n            <li>Explica finalidades, terceros y duraci\u00f3n.<\/li>\n            <li>Indica c\u00f3mo retirar el consentimiento.<\/li>\n            <li>Debe coincidir con los servicios reales.<\/li>\n          <\/ul>\n        <\/article>\n      <\/div>\n\n      <div class=\"ld-bottom\">Un documento completo en el pie de p\u00e1gina no permite cargar cookies opcionales antes de obtener la elecci\u00f3n del usuario.<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- FIN BLOQUE: banner-de-cookies-y-politica-de-cookies-es-lo-mismo -->\n\n\n\n<p><\/p>\n\n\n\n<p>La pol\u00edtica deber\u00eda recoger, seg\u00fan el caso:<\/p>\n\n\n\n<ul>\n<li>Qu\u00e9 son las cookies y para qu\u00e9 se usan en esa web.<\/li>\n\n\n\n<li>Qu\u00e9 cookies son propias y cu\u00e1les pertenecen a terceros.<\/li>\n\n\n\n<li>La finalidad de cada cookie o categor\u00eda.<\/li>\n\n\n\n<li>Su duraci\u00f3n o periodo de conservaci\u00f3n.<\/li>\n\n\n\n<li>La identidad de los terceros que tratan informaci\u00f3n.<\/li>\n\n\n\n<li>Si existen transferencias internacionales o elaboraci\u00f3n de perfiles cuando resulte aplicable.<\/li>\n\n\n\n<li>C\u00f3mo retirar el consentimiento y eliminar cookies desde el navegador.<\/li>\n<\/ul>\n\n\n\n<p><strong>El banner no sustituye a la pol\u00edtica y la pol\u00edtica no sustituye al banner.<\/strong> Tener un documento completo en el pie de p\u00e1gina no permite cargar cookies opcionales antes de obtener el consentimiento.<\/p>\n\n\n\n<p>Ambos elementos deben coincidir. Si la pol\u00edtica indica que solo hay anal\u00edtica, pero la web carga tambi\u00e9n publicidad y seguimiento, la informaci\u00f3n est\u00e1 incompleta aunque el texto est\u00e9 bien redactado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-errores-habituales-en-un-banner-de-cookies\">Errores habituales en un banner de cookies<\/h2>\n\n\n\n<p>Los fallos m\u00e1s importantes no siempre se ven en el dise\u00f1o. Muchos aparecen al revisar qu\u00e9 hace la web mientras el usuario todav\u00eda no ha elegido.<\/p>\n\n\n\n<!-- BLOQUE: errores-habituales-en-un-banner-de-cookies -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap');\n\n#comp-ld-8526,\n#comp-ld-8526 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-8526 {\n  color: inherit;\n  margin: 32px 0;\n  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n#comp-ld-8526 .ld-shell {\n  position: relative;\n  overflow: hidden;\n  padding: clamp(20px, 3vw, 32px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 30px;\n  background:\n    radial-gradient(circle at 0% 0%, rgba(0, 188, 223, 0.16), transparent 32%),\n    radial-gradient(circle at 100% 100%, rgba(219, 116, 36, 0.16), transparent 34%),\n    #37363d;\n  box-shadow: 0 28px 70px rgba(55, 54, 61, 0.22);\n}\n\n#comp-ld-8526 .ld-head {\n  display: grid;\n  gap: 8px;\n  max-width: 720px;\n  margin-bottom: 22px;\n}\n\n#comp-ld-8526 .ld-kicker {\n  width: fit-content;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: rgba(0, 188, 223, 0.14);\n  color: #67e8f9;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-8526 .ld-title {\n  color: #ffffff;\n  font-size: clamp(1.08rem, 1vw + 0.9rem, 1.25rem);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n#comp-ld-8526 .ld-head p {\n  margin: 0;\n  color: rgba(255, 255, 255, 0.68);\n  font-size: 0.94rem;\n  line-height: 1.65;\n}\n\n#comp-ld-8526 .ld-progress-card {\n  display: grid;\n  gap: 10px;\n  margin-bottom: 18px;\n  padding: 16px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 20px;\n  background: rgba(255, 255, 255, 0.06);\n}\n\n#comp-ld-8526 .ld-progress-meta {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  justify-content: space-between;\n}\n\n#comp-ld-8526 .ld-count {\n  color: #ffffff;\n  font-size: 1rem;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n}\n\n#comp-ld-8526 .ld-status {\n  padding: 5px 9px;\n  border-radius: 999px;\n  background: rgba(219, 116, 36, 0.14);\n  color: #f5b37d;\n  font-size: 0.72rem;\n  font-weight: 800;\n  letter-spacing: 0.06em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-8526 .ld-progress {\n  overflow: hidden;\n  height: 9px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.12);\n}\n\n#comp-ld-8526 .ld-progress-bar {\n  display: block;\n  width: 0%;\n  height: 100%;\n  border-radius: inherit;\n  background: linear-gradient(90deg, #00bcdf, #198754);\n  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-8526 .ld-checks {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n}\n\n#comp-ld-8526 .ld-check-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 12px;\n  align-items: start;\n  min-height: 82px;\n  padding: 15px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 18px;\n  background: rgba(255, 255, 255, 0.06);\n  cursor: pointer;\n  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-8526 .ld-check-item:hover {\n  transform: translateY(-2px);\n  border-color: rgba(0, 188, 223, 0.32);\n  background: rgba(255, 255, 255, 0.09);\n}\n\n#comp-ld-8526 .ld-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0.01;\n}\n\n#comp-ld-8526 .ld-box {\n  position: relative;\n  display: grid;\n  width: 24px;\n  height: 24px;\n  place-items: center;\n  margin-top: 2px;\n  border: 1px solid rgba(255, 255, 255, 0.28);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.06);\n  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-8526 .ld-box::after {\n  content: '';\n  width: 6px;\n  height: 11px;\n  border-right: 2px solid #37363d;\n  border-bottom: 2px solid #37363d;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.6);\n  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-8526 .ld-input:checked + .ld-box {\n  border-color: #00bcdf;\n  background: #00bcdf;\n  box-shadow: 0 0 0 4px rgba(0, 188, 223, 0.12);\n}\n\n#comp-ld-8526 .ld-input:checked + .ld-box::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n#comp-ld-8526 .ld-input:focus-visible + .ld-box {\n  outline: 3px solid rgba(0, 188, 223, 0.28);\n  outline-offset: 3px;\n}\n\n#comp-ld-8526 .ld-copy strong {\n  display: block;\n  margin-bottom: 4px;\n  color: #ffffff;\n  font-size: 0.9rem;\n  font-weight: 800;\n  line-height: 1.35;\n}\n\n#comp-ld-8526 .ld-copy span {\n  display: block;\n  color: rgba(255, 255, 255, 0.64);\n  font-size: 0.8rem;\n  line-height: 1.5;\n}\n\n#comp-ld-8526 .ld-result {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 12px;\n  align-items: start;\n  margin-top: 18px;\n  padding: 15px;\n  border: 1px solid rgba(219, 116, 36, 0.2);\n  border-radius: 18px;\n  background: rgba(219, 116, 36, 0.09);\n}\n\n#comp-ld-8526 .ld-result-label {\n  padding: 5px 9px;\n  border-radius: 999px;\n  background: rgba(219, 116, 36, 0.16);\n  color: #f5b37d;\n  font-size: 0.7rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n#comp-ld-8526 .ld-result-text {\n  margin: 0;\n  color: rgba(255, 255, 255, 0.72);\n  font-size: 0.84rem;\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n#comp-ld-8526[data-state=\"advanced\"] .ld-status,\n#comp-ld-8526[data-state=\"advanced\"] .ld-result-label {\n  background: rgba(0, 188, 223, 0.14);\n  color: #67e8f9;\n}\n\n#comp-ld-8526[data-state=\"advanced\"] .ld-result {\n  border-color: rgba(0, 188, 223, 0.22);\n  background: rgba(0, 188, 223, 0.09);\n}\n\n#comp-ld-8526[data-state=\"complete\"] .ld-status,\n#comp-ld-8526[data-state=\"complete\"] .ld-result-label {\n  background: rgba(25, 135, 84, 0.16);\n  color: #86efac;\n}\n\n#comp-ld-8526[data-state=\"complete\"] .ld-result {\n  border-color: rgba(25, 135, 84, 0.26);\n  background: rgba(25, 135, 84, 0.1);\n}\n\n@media (max-width: 760px) {\n  #comp-ld-8526 .ld-checks {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 520px) {\n  #comp-ld-8526 .ld-shell {\n    padding: 18px;\n    border-radius: 24px;\n  }\n\n  #comp-ld-8526 .ld-progress-meta,\n  #comp-ld-8526 .ld-result {\n    grid-template-columns: 1fr;\n  }\n\n  #comp-ld-8526 .ld-progress-meta {\n    display: grid;\n    justify-content: start;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-8526 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-8526\" data-state=\"pending\">\n  <div class=\"ld-shell\">\n    <div class=\"ld-head\">\n      <span class=\"ld-kicker\">Diagn\u00f3stico r\u00e1pido<\/span>\n      <div class=\"ld-title\">Comprueba tu banner en cinco puntos<\/div>\n    <\/div>\n\n    <div class=\"ld-progress-card\">\n      <div class=\"ld-progress-meta\">\n        <span class=\"ld-count\" data-diagnostic-count>0\/5<\/span>\n        <span class=\"ld-status\" data-diagnostic-status>Revisi\u00f3n pendiente<\/span>\n      <\/div>\n      <div class=\"ld-progress\" role=\"progressbar\" aria-label=\"Progreso de comprobaciones del banner\" aria-valuemin=\"0\" aria-valuemax=\"5\" aria-valuenow=\"0\" data-diagnostic-progress>\n        <span class=\"ld-progress-bar\" data-diagnostic-bar><\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"ld-checks\" role=\"group\" aria-label=\"Comprobaciones del banner de cookies\">\n      <label class=\"ld-check-item\">\n        <input class=\"ld-input\" type=\"checkbox\" data-diagnostic-check>\n        <span class=\"ld-box\" aria-hidden=\"true\"><\/span>\n        <span class=\"ld-copy\">\n          <strong>No hay carga previa<\/strong>\n          <span>Las cookies opcionales esperan a la elecci\u00f3n del usuario.<\/span>\n        <\/span>\n      <\/label>\n\n      <label class=\"ld-check-item\">\n        <input class=\"ld-input\" type=\"checkbox\" data-diagnostic-check>\n        <span class=\"ld-box\" aria-hidden=\"true\"><\/span>\n        <span class=\"ld-copy\">\n          <strong>Rechazar es tan visible como aceptar<\/strong>\n          <span>Cerrar el aviso o seguir navegando tampoco activa cookies opcionales.<\/span>\n        <\/span>\n      <\/label>\n\n      <label class=\"ld-check-item\">\n        <input class=\"ld-input\" type=\"checkbox\" data-diagnostic-check>\n        <span class=\"ld-box\" aria-hidden=\"true\"><\/span>\n        <span class=\"ld-copy\">\n          <strong>Las opciones no vienen marcadas<\/strong>\n          <span>Las categor\u00edas opcionales se activan solo por elecci\u00f3n del usuario.<\/span>\n        <\/span>\n      <\/label>\n\n      <label class=\"ld-check-item\">\n        <input class=\"ld-input\" type=\"checkbox\" data-diagnostic-check>\n        <span class=\"ld-box\" aria-hidden=\"true\"><\/span>\n        <span class=\"ld-copy\">\n          <strong>El consentimiento se puede retirar<\/strong>\n          <span>Existe un acceso visible para volver al panel de preferencias.<\/span>\n        <\/span>\n      <\/label>\n\n      <label class=\"ld-check-item\">\n        <input class=\"ld-input\" type=\"checkbox\" data-diagnostic-check>\n        <span class=\"ld-box\" aria-hidden=\"true\"><\/span>\n        <span class=\"ld-copy\">\n          <strong>La configuraci\u00f3n se revisa<\/strong>\n          <span>Se comprueba cuando cambian plugins, campa\u00f1as o servicios externos.<\/span>\n        <\/span>\n      <\/label>\n    <\/div>\n\n    <div class=\"ld-result\" role=\"status\" aria-live=\"polite\">\n      <span class=\"ld-result-label\">Estado<\/span>\n      <p class=\"ld-result-text\" data-diagnostic-message>Empieza por revisar qu\u00e9 se carga antes de que el usuario tome una decisi\u00f3n.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  var root = document.getElementById('comp-ld-8526');\n  if (!root) return;\n\n  var checks = Array.prototype.slice.call(root.querySelectorAll('[data-diagnostic-check]'));\n  var count = root.querySelector('[data-diagnostic-count]');\n  var bar = root.querySelector('[data-diagnostic-bar]');\n  var status = root.querySelector('[data-diagnostic-status]');\n  var message = root.querySelector('[data-diagnostic-message]');\n  var progress = root.querySelector('[data-diagnostic-progress]');\n\n  function updateDiagnostic() {\n    var total = checks.length;\n    var done = checks.filter(function (check) { return check.checked; }).length;\n    var state = 'pending';\n    var statusText = 'Revisi\u00f3n pendiente';\n    var messageText = 'Empieza por revisar qu\u00e9 se carga antes de que el usuario tome una decisi\u00f3n.';\n\n    if (done > 0 && done < 3) {\n      state = 'started';\n      statusText = 'Primeros controles';\n      messageText = 'Ya tienes algunos puntos controlados. Sigue por la igualdad entre aceptar y rechazar.';\n    }\n\n    if (done >= 3 && done < total) {\n      state = 'advanced';\n      statusText = 'Configuraci\u00f3n avanzada';\n      messageText = 'La base est\u00e1 bastante cubierta. Revisa tambi\u00e9n la revocaci\u00f3n y el mantenimiento posterior.';\n    }\n\n    if (done === total) {\n      state = 'complete';\n      statusText = 'Banner bajo control';\n      messageText = 'Buen punto de partida. Mant\u00e9n una revisi\u00f3n peri\u00f3dica cuando cambien los servicios de la web.';\n    }\n\n    root.dataset.state = state;\n    count.textContent = done + '\/' + total;\n    status.textContent = statusText;\n    message.textContent = messageText;\n    progress.setAttribute('aria-valuenow', String(done));\n    bar.style.width = total ? ((done \/ total) * 100) + '%' : '0%';\n  }\n\n  checks.forEach(function (check) {\n    check.addEventListener('change', updateDiagnostic);\n  });\n\n  updateDiagnostic();\n});\n<\/script>\n<!-- FIN BLOQUE: errores-habituales-en-un-banner-de-cookies -->\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-cargar-cookies-antes-de-obtener-el-consentimiento\">Cargar cookies antes de obtener el consentimiento<\/h3>\n\n\n\n<p>Es el problema t\u00e9cnico m\u00e1s frecuente. Las etiquetas de anal\u00edtica, publicidad u otros servicios se ejecutan al abrir la p\u00e1gina y el banner se limita a informar despu\u00e9s.<\/p>\n\n\n\n<p>La soluci\u00f3n pasa por <strong>bloquear las tecnolog\u00edas no necesarias hasta que el usuario las autorice<\/strong>. Tambi\u00e9n hay que mantenerlas bloqueadas si las rechaza.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ocultar-la-opcion-de-rechazo\">Ocultar la opci\u00f3n de rechazo<\/h3>\n\n\n\n<p>Enviar \u00abRechazar\u00bb a una segunda pantalla, reducir su contraste o presentarlo como un enlace dif\u00edcil de ver limita la capacidad de elecci\u00f3n. Aceptar y rechazar deben estar disponibles con una visibilidad equivalente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-considerar-que-seguir-navegando-es-aceptar\">Considerar que seguir navegando es aceptar<\/h3>\n\n\n\n<p>Desplazarse por la p\u00e1gina, cerrar el banner o continuar leyendo no demuestra una aceptaci\u00f3n v\u00e1lida. La decisi\u00f3n requiere una acci\u00f3n afirmativa clara sobre las cookies que no est\u00e9n exentas.<\/p>\n\n\n\n<p>El icono de cierre tampoco deber\u00eda equivaler a \u00abAceptar todas\u00bb. Si se incluye, su efecto debe ser claro y no puede utilizarse para activar cookies opcionales de forma silenciosa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-utilizar-casillas-premarcadas\">Utilizar casillas premarcadas<\/h3>\n\n\n\n<p>Las categor\u00edas opcionales no deben aparecer activadas de antemano. El usuario tiene que elegirlas de forma libre. Esto afecta, entre otras, a las cookies anal\u00edticas y publicitarias cuando necesitan consentimiento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-explicar-finalidades-demasiado-amplias\">Explicar finalidades demasiado amplias<\/h3>\n\n\n\n<p>Frases como \u00abusamos cookies para mejorar la experiencia\u00bb dicen muy poco. Conviene indicar si se emplean para medir visitas, recordar preferencias, personalizar contenido o mostrar publicidad.<\/p>\n\n\n\n<p>La informaci\u00f3n puede ser breve, pero debe permitir comprender las consecuencias de cada opci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-no-permitir-retirar-el-consentimiento\">No permitir retirar el consentimiento<\/h3>\n\n\n\n<p>La configuraci\u00f3n no deber\u00eda desaparecer para siempre despu\u00e9s de la primera visita. Incluye un enlace en el pie de p\u00e1gina, un icono accesible o un apartado de privacidad desde el que se pueda reabrir el panel.<\/p>\n\n\n\n<p>Retirar el consentimiento debe ser tan sencillo como prestarlo. Despu\u00e9s de cambiar la elecci\u00f3n, la web debe dejar de utilizar las categor\u00edas desactivadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-no-revisar-el-banner-cuando-cambia-la-web\">No revisar el banner cuando cambia la web<\/h3>\n\n\n\n<p>Instalar un plugin, a\u00f1adir un v\u00eddeo, activar una campa\u00f1a o cambiar de herramienta de anal\u00edtica puede introducir nuevas cookies. Si el banner y la pol\u00edtica no se actualizan, dejar\u00e1n de describir la situaci\u00f3n real.<\/p>\n\n\n\n<p>Revisa la configuraci\u00f3n cuando incorpores servicios externos y realiza comprobaciones peri\u00f3dicas. Una detecci\u00f3n autom\u00e1tica ayuda, pero tambi\u00e9n conviene probar manualmente los recorridos de aceptaci\u00f3n y rechazo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Un banner de cookies correcto combina <strong>informaci\u00f3n clara, una elecci\u00f3n equilibrada y un bloqueo t\u00e9cnico efectivo<\/strong>. Si uno de estos elementos falla, el aviso puede parecer completo sin respetar la decisi\u00f3n del usuario.<\/p>\n\n\n\n<p>Empieza por identificar qu\u00e9 utiliza tu web. Despu\u00e9s clasifica cada servicio, adapta el mensaje y prueba los botones en una sesi\u00f3n limpia. La pol\u00edtica de cookies debe reflejar la misma informaci\u00f3n y la configuraci\u00f3n debe poder modificarse en cualquier momento.<\/p>\n\n\n\n<p>Puedes realizar este proceso con un plugin, mediante un desarrollo propio o con una plataforma especializada. En todos los casos, el resultado debe ajustarse a las cookies reales de la p\u00e1gina, no a una plantilla gen\u00e9rica.<\/p>\n\n\n\n<p>Y recuerda que si quieres una soluci\u00f3n r\u00e1pida y no quieres perder el tiempo con esto, pero s\u00ed cumplir con la legislaci\u00f3n, opciones como <strong><a href=\"https:\/\/www.loading.es\/lawwwing\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"\">Lawwwing<\/a><\/strong> son la forma m\u00e1s practica de hacerlo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-preguntas-frecuentes-sobre-los-documentos-legales-de-la-web\">Preguntas frecuentes sobre el banner de cookies (FAQ)<\/h2>\n\n\n\n<!-- BLOQUE: preguntas-frecuentes-sobre-el-banner-de-cookies -->\n<style>\n#comp-ld-9173,\n#comp-ld-9173 * {\n  box-sizing: border-box;\n}\n\n#comp-ld-9173 {\n  color: inherit;\n  margin: 28px 0;\n  font-family: inherit;\n  background: transparent;\n}\n\n#comp-ld-9173 .ld-faq-item {\n  border-bottom: 1px solid rgba(55, 54, 61, 0.1);\n}\n\n#comp-ld-9173 .ld-faq-item:first-child {\n  border-top: 1px solid rgba(55, 54, 61, 0.1);\n}\n\n#comp-ld-9173 summary {\n  position: relative;\n  display: flex;\n  gap: 18px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 0;\n  color: #37363d;\n  font-weight: 700;\n  line-height: 1.45;\n  list-style: none;\n  cursor: pointer;\n  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-9173 summary::-webkit-details-marker {\n  display: none;\n}\n\n#comp-ld-9173 summary::after {\n  content: '+';\n  display: grid;\n  flex: 0 0 auto;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  border-radius: 50%;\n  background: rgba(219, 116, 36, 0.1);\n  color: #db7424;\n  font-size: 1.1rem;\n  font-weight: 800;\n  line-height: 1;\n  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#comp-ld-9173 details[open] summary::after {\n  content: '\u2013';\n  background: rgba(0, 188, 223, 0.12);\n  color: #0891b2;\n}\n\n#comp-ld-9173 summary:hover {\n  color: #db7424;\n}\n\n#comp-ld-9173 summary:focus-visible {\n  outline: 3px solid rgba(219, 116, 36, 0.22);\n  outline-offset: 4px;\n  border-radius: 10px;\n}\n\n#comp-ld-9173 .ld-answer {\n  max-width: 780px;\n  padding: 0 44px 18px 0;\n  color: rgba(55, 54, 61, 0.76);\n  font-size: 0.95rem;\n  line-height: 1.65;\n}\n\n#comp-ld-9173 .ld-answer p {\n  margin: 0;\n}\n\n@media (max-width: 560px) {\n  #comp-ld-9173 summary {\n    gap: 14px;\n    padding: 17px 0;\n  }\n\n  #comp-ld-9173 .ld-answer {\n    padding-right: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #comp-ld-9173 * {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<div id=\"comp-ld-9173\">\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfTodas las webs necesitan un banner de cookies?<\/summary>\n    <div class=\"ld-answer\">\n      <p>No necesariamente. Si una web solo utiliza cookies t\u00e9cnicas exentas, puede no necesitar solicitar consentimiento. Aun as\u00ed, debe informar cuando corresponda y comprobar que no carga otros servicios.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfLas cookies necesarias requieren consentimiento?<\/summary>\n    <div class=\"ld-answer\">\n      <p>Las cookies estrictamente necesarias para prestar un servicio solicitado suelen estar exentas. No deben mezclarse en esta categor\u00eda cookies de anal\u00edtica, publicidad o servicios que no sean imprescindibles.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfEs obligatorio incluir un bot\u00f3n para rechazar las cookies?<\/summary>\n    <div class=\"ld-answer\">\n      <p>Cuando se solicita consentimiento, la opci\u00f3n de rechazar debe ofrecerse al mismo tiempo, al mismo nivel y con la misma visibilidad que la de aceptar.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfCerrar el banner o seguir navegando significa aceptar?<\/summary>\n    <div class=\"ld-answer\">\n      <p>No. Esas acciones no expresan por s\u00ed mismas una aceptaci\u00f3n clara de las cookies no necesarias.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfGoogle Analytics necesita consentimiento?<\/summary>\n    <div class=\"ld-answer\">\n      <p>Con car\u00e1cter general, las cookies de Google Analytics deben permanecer desactivadas hasta obtener consentimiento cuando no est\u00e9n cubiertas por una excepci\u00f3n aplicable. La configuraci\u00f3n concreta de la herramienta tambi\u00e9n importa.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfC\u00f3mo puede el usuario cambiar su elecci\u00f3n?<\/summary>\n    <div class=\"ld-answer\">\n      <p>La web debe ofrecer un acceso sencillo al panel de configuraci\u00f3n, por ejemplo, mediante un enlace permanente en el pie de p\u00e1gina.<\/p>\n    <\/div>\n  <\/details>\n\n  <details class=\"ld-faq-item\">\n    <summary>\u00bfCada cu\u00e1nto hay que revisar el banner?<\/summary>\n    <div class=\"ld-answer\">\n      <p>Rev\u00edsalo siempre que cambies plugins, etiquetas, campa\u00f1as o servicios externos. Tambi\u00e9n conviene hacer comprobaciones peri\u00f3dicas para detectar cambios no previstos.<\/p>\n    <\/div>\n  <\/details>\n<\/div>\n<!-- FIN BLOQUE: preguntas-frecuentes-sobre-el-banner-de-cookies -->\n\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"oywWQfdmhl\"><a href=\"https:\/\/www.loading.es\/blog\/consejos-para-mejorar-la-experiencia-de-usuario-de-tu-web\/\">Consejos para mejorar la experiencia de usuario de tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abConsejos para mejorar la experiencia de usuario de tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/consejos-para-mejorar-la-experiencia-de-usuario-de-tu-web\/embed\/#?secret=xEP3eCthUL#?secret=oywWQfdmhl\" data-secret=\"oywWQfdmhl\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"HQ96tGFTiw\"><a href=\"https:\/\/www.loading.es\/blog\/crear-pagina-web\/\">C\u00f3mo crear una p\u00e1gina web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo crear una p\u00e1gina web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/crear-pagina-web\/embed\/#?secret=T5em1Obwp0#?secret=HQ96tGFTiw\" data-secret=\"HQ96tGFTiw\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"p4I8C7NDVM\"><a href=\"https:\/\/www.loading.es\/blog\/ayudarte-ia-crear-tu-web\/\">C\u00f3mo puede ayudarte la IA a crear tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo puede ayudarte la IA a crear tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/ayudarte-ia-crear-tu-web\/embed\/#?secret=S0i3WEAQXA#?secret=p4I8C7NDVM\" data-secret=\"p4I8C7NDVM\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfTodas las webs necesitan los mismos documentos legales?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No. Depende de si la web genera ingresos, recoge datos, utiliza cookies no exentas o permite contratar por Internet.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfD\u00f3nde deben aparecer los textos legales?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"En el pie de p\u00e1gina y tambi\u00e9n junto a formularios, banners o procesos de compra cuando corresponda.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfUna web sin tienda online necesita aviso legal?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Puede necesitarlo si est\u00e1 relacionada con una actividad econ\u00f3mica o profesional, aunque no venda directamente.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfNecesito pol\u00edtica de privacidad si solo tengo un formulario de contacto?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"S\u00ed, si recoges datos personales. Tambi\u00e9n debes mostrar la informaci\u00f3n esencial junto al formulario.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfLa pol\u00edtica de cookies y el banner son lo mismo?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No. La pol\u00edtica explica las cookies; el banner permite aceptar, rechazar o configurar las que requieren consentimiento.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfPuedo instalar cookies de anal\u00edtica antes de que el usuario acepte?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Por regla general, no si necesitan consentimiento. Deben permanecer bloqueadas hasta que el usuario decida.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfPuedo copiar los documentos legales de otra web?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No es recomendable. Sus datos, herramientas y condiciones pueden ser muy diferentes a los tuyos.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCu\u00e1ndo debo actualizar los textos legales?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Cuando cambien tus herramientas, proveedores, tratamientos de datos, cookies, productos o condiciones de venta.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfTodas las webs necesitan un banner de cookies?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No necesariamente. Si una web solo utiliza cookies t\u00e9cnicas exentas, puede no necesitar solicitar consentimiento. Aun as\u00ed, debe informar cuando corresponda y comprobar que no carga otros servicios.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfLas cookies necesarias requieren consentimiento?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Las cookies estrictamente necesarias para prestar un servicio solicitado suelen estar exentas. No deben mezclarse en esta categor\u00eda cookies de anal\u00edtica, publicidad o servicios que no sean imprescindibles.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfEs obligatorio incluir un bot\u00f3n para rechazar las cookies?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Cuando se solicita consentimiento, la opci\u00f3n de rechazar debe ofrecerse al mismo tiempo, al mismo nivel y con la misma visibilidad que la de aceptar.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCerrar el banner o seguir navegando significa aceptar?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"No. Esas acciones no expresan por s\u00ed mismas una aceptaci\u00f3n clara de las cookies no necesarias.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfGoogle Analytics necesita consentimiento?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Con car\u00e1cter general, las cookies de Google Analytics deben permanecer desactivadas hasta obtener consentimiento cuando no est\u00e9n cubiertas por una excepci\u00f3n aplicable. La configuraci\u00f3n concreta de la herramienta tambi\u00e9n importa.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo puede el usuario cambiar su elecci\u00f3n?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"La web debe ofrecer un acceso sencillo al panel de configuraci\u00f3n, por ejemplo, mediante un enlace permanente en el pie de p\u00e1gina.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCada cu\u00e1nto hay que revisar el banner?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Rev\u00edsalo siempre que cambies plugins, etiquetas, campa\u00f1as o servicios externos. Tambi\u00e9n conviene hacer comprobaciones peri\u00f3dicas para detectar cambios no previstos.\"\n      }\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Un banner de cookies debe informar con claridad, permitir aceptar o rechazar las cookies no necesarias y respetar la elecci\u00f3n del usuario. No basta con colocar un aviso que solo tenga un bot\u00f3n de \u00abAceptar\u00bb.<\/p>\n<p>Adem\u00e1s, el funcionamiento t\u00e9cnico debe coincidir con el mensaje. Si una persona rechaza las cookies anal\u00edticas o publicitarias, la web no debe cargarlas. Tampoco deber\u00edan activarse antes de que el usuario elija.<\/p>\n<p>En esta gu\u00eda ver\u00e1s qu\u00e9 texto necesita el aviso, c\u00f3mo presentar sus botones y qu\u00e9 opciones tienes para a\u00f1adirlo a tu web.<\/p>\n<p>La realidad es bastante m\u00e1s sencilla. No todas las webs necesitan los mismos textos legales. Todo depende de lo que haces con la tuya.<\/p>\n","protected":false},"author":2,"featured_media":11712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[432],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11711"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=11711"}],"version-history":[{"count":1,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11711\/revisions"}],"predecessor-version":[{"id":11713,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11711\/revisions\/11713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/11712"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=11711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=11711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=11711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}