{"id":1448,"date":"2025-08-07T22:53:03","date_gmt":"2025-08-07T22:53:03","guid":{"rendered":"https:\/\/clasco.mx\/blog\/home\/"},"modified":"2025-12-09T23:55:10","modified_gmt":"2025-12-09T23:55:10","slug":"home","status":"publish","type":"page","link":"https:\/\/clasco.mx\/blog\/","title":{"rendered":"Inicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1448\" class=\"elementor elementor-1448\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6588f3 e-flex e-con-boxed e-con e-parent\" data-id=\"a6588f3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6b15f27 e-con-full e-flex e-con e-child\" data-id=\"6b15f27\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cf5550d e-con-full e-flex e-con e-child\" data-id=\"cf5550d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2df886d elementor-widget elementor-widget-html\" data-id=\"2df886d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"c-about\" aria-label=\"Acerca de nosotros\">\n<style>\n\/* ===== Scope compacto ===== *\/\n.c-about {\n  --blue1: #2d56ad;\n  --blue2: #183766;\n  --text: #314355;\n  --radius: 20px;\n  --max: 1200px;\n  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n  color: var(--text);\n  max-width: var(--max);\n  margin: 0 auto;\n  padding: 24px 12px;\n}\n\n.c-about .badge {\n  background: linear-gradient(135deg, var(--blue1), var(--blue2));\n  border-radius: 24px;\n  color: #fff; \/* Texto blanco *\/\n  text-align: center;\n  padding: 80px 24px; \/* M\u00e1s altura del fondo *\/\n  margin: 12px 0 28px;\n  font-size: 1.8rem;\n  font-weight: bold;\n}\n\n.c-about h2 {\n  font-size: 2rem;\n  color: #2d56ad;\n  text-align: center;\n  margin-bottom: 24px;\n}\n\n.c-about .columns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n}\n\n.c-about .column {\n  flex: 1 1 calc(50% - 24px);\n  min-width: 280px;\n  line-height: 1.6;\n}\n\n@media (max-width: 768px) {\n  .c-about .columns {\n    flex-direction: column;\n  }\n}\n<\/style>\n\n<div class=\"badge\">BLOG OFICIAL DE CLASCO<\/div>\n\n<h2>M\u00e1s de 20 a\u00f1os conectando a las personas con lo que necesitan<\/h2>\n\n<div class=\"columns\">\n  <div class=\"column\">\n    En Clasco, llevamos m\u00e1s de dos d\u00e9cadas siendo parte de la vida cotidiana de miles de personas en Quer\u00e9taro. Nacimos como una revista impresa de clasificados, facilitando la compra y venta entre vecinos, negocios y emprendedores locales.\n  <\/div>\n  <div class=\"column\">\n    Desde el inicio, nuestro objetivo ha sido claro: crear un puente entre quienes buscan algo y quienes lo tienen para ofrecer, de forma cercana, sencilla y confiable.\n  <\/div>\n<\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-558e344 elementor-widget elementor-widget-text-editor\" data-id=\"558e344\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><strong>Lo que dicen los medios sobre nosotros<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c98a4f elementor-widget elementor-widget-html\" data-id=\"8c98a4f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 Carrusel CSS-only con t\u00edtulos (3 desktop \/ 1 m\u00f3vil, 2 filas reales sin estirar im\u00e1genes) -->\n<section id=\"clasco-css-carousel\" aria-label=\"Art\u00edculos destacados\">\n  <style>\n    \/* ===== Scope exclusivo del carrusel ===== *\/\n    #clasco-css-carousel{\n      \/* Ajustes r\u00e1pidos *\/\n      --maxw: 1200px;   \/* ancho m\u00e1ximo del carrusel *\/\n      --gap: 24px;      \/* separaci\u00f3n entre tarjetas *\/\n      --radius: 22px;   \/* radio de borde exterior *\/\n      --shadow: 0 10px 28px rgba(0,0,0,.12);\n\n      \/* Proporci\u00f3n visual para las im\u00e1genes *\/\n      --ratio: 16\/9;           \/* 1\/1, 4\/3, 21\/9, etc. *\/\n\n      \/* columnas visibles (desktop) *\/\n      --cols: 3;\n\n      \/* tipograf\u00eda t\u00edtulo *\/\n      --title-size: 1rem;\n      --title-color: #314355;\n      --title-hover: #2d56ad;\n\n      max-width: var(--maxw);\n      margin: 0 auto;\n      padding: 8px 12px;\n      font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n    }\n    \/* ===== HOTFIX: Forzar 2 filas con Grid aunque el tema ponga flex ===== *\/\nsection#clasco-css-carousel .viewport > .track{\n  display: grid !important;\n  grid-auto-flow: column !important;               \/* columnas que se desplazan en X *\/\n  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;\n  grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols)) !important;\n  column-gap: var(--gap) !important;\n  row-gap: var(--gap) !important;\n  padding-bottom: 4px !important;\n  align-content: start !important;\n  \/* anula restos de flex si el tema los forz\u00f3 *\/\n  flex-wrap: unset !important;\n}\n\n\/* Distribuci\u00f3n: impares fila 1, pares fila 2 *\/\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(odd){ grid-row: 1 !important; }\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(even){ grid-row: 2 !important; }\n\n\/* Tarjeta sin alturas forzadas (evita pixelar im\u00e1genes) *\/\nsection#clasco-css-carousel .viewport > .track > .slide{\n  height: auto !important;\n  width: 100% !important;\n  scroll-snap-align: start;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--radius);\n  overflow: hidden;\n  box-shadow: var(--shadow);\n  background: #fff;\n}\n\n\/* Contenedor de imagen con relaci\u00f3n de aspecto consistente *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media{\n  display: block !important;\n  aspect-ratio: var(--ratio) !important;  \/* fija la altura relativa al ancho de la tarjeta *\/\n  overflow: hidden;\n}\n\n\/* La imagen ocupa el contenedor sin deformarse (no forzar height) *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media img{\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: cover !important;\n  display: block !important;\n}\n\n\/* ===== Responsive ===== *\/\n@media (max-width:1024px){\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; \/* 2 filas en tablet *\/\n  }\n}\n\n@media (max-width:640px){\n  section#clasco-css-carousel{ --gap:16px; --cols:1; }\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: 1fr !important;            \/* 1 fila en m\u00f3vil *\/\n  }\n}\n\n\n    \/* Viewport: scroll horizontal *\/\n    #clasco-css-carousel .viewport{\n      overflow-x: auto !important;\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scroll-behavior: smooth;\n      border-radius: var(--radius);\n    }\n\n    \/* ===== Pista: Grid 2 filas + scroll horizontal ===== *\/\n    #clasco-css-carousel .track{\n      display: grid;\n      grid-auto-flow: column; \/* columnas que se desplazan en X *\/\n      grid-template-rows: repeat(2, auto); \/* 2 filas, altura natural *\/\n      grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols));\n      gap: var(--gap);\n      padding-bottom: 4px;\n      align-content: start;\n    }\n\n    \/* Forzar la distribuci\u00f3n en 2 filas: impar arriba, par abajo *\/\n    #clasco-css-carousel .slide:nth-child(odd){  grid-row: 1; }\n    #clasco-css-carousel .slide:nth-child(even){ grid-row: 2; }\n\n    \/* Tarjeta (sin alturas forzadas) *\/\n    #clasco-css-carousel .slide{\n      width: 100%;\n      scroll-snap-align: start;\n      scroll-margin-left: 12px;  \/* ancla al borde al usar dots *\/\n      border-radius: var(--radius);\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      background: #ffffff;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \/* Contenedor de imagen con relaci\u00f3n de aspecto CONSISTENTE *\/\n    #clasco-css-carousel .media{\n      display:block;\n      aspect-ratio: var(--ratio); \/* \ud83d\udd11 fija la altura relativa a su ancho *\/\n      overflow: hidden;\n    }\n    #clasco-css-carousel .media img{\n      width: 100%;\n      height: 100%;\n      object-fit: cover;  \/* recorte est\u00e9tico, sin pixelar ni deformar *\/\n      display: block;\n    }\n\n    \/* T\u00edtulo \/ caption *\/\n    #clasco-css-carousel .caption{\n      padding: 12px 14px 14px;\n      background: #ffffff;\n    }\n    #clasco-css-carousel .caption .title{\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;   \/* m\u00e1ximo 2 l\u00edneas *\/\n      overflow: hidden;\n      font-weight: 800;\n      font-size: var(--title-size);\n      line-height: 1.35;\n      color: var(--title-color);\n      text-decoration: none;\n    }\n    #clasco-css-carousel .caption .title:hover,\n    #clasco-css-carousel .caption .title:focus{\n      color: var(--title-hover);\n      text-decoration: underline;\n    }\n\n    \/* Dots *\/\n    #clasco-css-carousel .dots{\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 12px;\n    }\n    #clasco-css-carousel .dot{\n      width: 10px; height: 10px; border-radius: 999px;\n      background: #c9d4e4; display: inline-block;\n    }\n    #clasco-css-carousel .dot:hover,\n    #clasco-css-carousel .dot:focus{ background:#2d56ad; }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 1024px){\n      \/* Mant\u00e9n 2 filas, pero puedes mostrar 2 columnas si quieres:\n         descomenta la siguiente l\u00ednea si prefieres 2 columnas en tablet *\/\n      \/* #clasco-css-carousel{ --cols: 2; } *\/\n    }\n    @media (max-width: 640px){\n      \/* En m\u00f3vil: 1 sola fila para no saturar *\/\n      #clasco-css-carousel{ --gap: 16px; --cols: 1; }\n      #clasco-css-carousel .track{\n        grid-template-rows: 1fr;\n      }\n      \/* La imagen mantiene su relaci\u00f3n por aspect-ratio, sin forzar height *\/\n    }\n  <\/style>\n\n  <!-- Viewport + pista -->\n  <div class=\"viewport\">\n    <div class=\"track\">\n      <!-- Slide 1 -->\n      <figure class=\"slide\" id=\"art-1\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/historiadeclasificadoscontacto\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/revista.webp\" alt=\"T\u00edtulo del art\u00edculo 1\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/historiadeclasificadoscontacto\/\" target=\"_self\" rel=\"noopener\">\n            Conoce nuestra historia: Clasificados Contacto, 20 a\u00f1os contigo\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n      \n      <!-- Slide 2 -->\n      <figure class=\"slide\" id=\"art-2\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/clasco-mx-referente-en-tecnologia-y-gadgets-para-el-hogar\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/11\/adult-man-home-shopping-online-260nw-2422263989-e1762979884810.webp\" alt=\"T\u00edtulo del art\u00edculo 2\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/clasco-mx-referente-en-tecnologia-y-gadgets-para-el-hogar\/\" target=\"_self\" rel=\"noopener\">\n            Clasco.mx, referente en tecnolog\u00eda y gadgets para el hogar\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n <!-- Slide 3 -->\n<figure class=\"slide\" id=\"art-4\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/comercio-electronico-en-queretaro\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/11\/foto-_bloque-_web-scaled-1.jpg\" alt=\"T\u00edtulo del art\u00edculo 4\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/comercio-electronico-en-queretaro\/\" target=\"_self\" rel=\"noopener\">\n              Clasco y BLOQUE trabajan en Comercio electronico para Quer\u00e9taro<\/a>\n        <\/figcaption>\n      <\/figure>\n    \n\n  <!-- Dots -->\n  <div class=\"dots\" role=\"tablist\" aria-label=\"Paginaci\u00f3n del carrusel\">\n    <a class=\"dot\" href=\"#art-1\" aria-label=\"Ir al 1\"><\/a>\n    <a class=\"dot\" href=\"#art-2\" aria-label=\"Ir al 2\"><\/a>\n    <a class=\"dot\" href=\"#art-3\" aria-label=\"Ir al 3\"><\/a>\n  <\/div>\n<\/section>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f2ec83 elementor-widget elementor-widget-text-editor\" data-id=\"1f2ec83\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><strong>Art\u00edculos que pueden interesarte sobre Clasco.mx<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa104d6 elementor-widget elementor-widget-html\" data-id=\"fa104d6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 Carrusel CSS-only con t\u00edtulos (3 desktop \/ 1 m\u00f3vil, 2 filas reales sin estirar im\u00e1genes) -->\n<section id=\"clasco-css-carousel\" aria-label=\"Art\u00edculos destacados\">\n  <style>\n    \/* ===== Scope exclusivo del carrusel ===== *\/\n    #clasco-css-carousel{\n      \/* Ajustes r\u00e1pidos *\/\n      --maxw: 1200px;   \/* ancho m\u00e1ximo del carrusel *\/\n      --gap: 24px;      \/* separaci\u00f3n entre tarjetas *\/\n      --radius: 22px;   \/* radio de borde exterior *\/\n      --shadow: 0 10px 28px rgba(0,0,0,.12);\n\n      \/* Proporci\u00f3n visual para las im\u00e1genes *\/\n      --ratio: 16\/9;           \/* 1\/1, 4\/3, 21\/9, etc. *\/\n\n      \/* columnas visibles (desktop) *\/\n      --cols: 3;\n\n      \/* tipograf\u00eda t\u00edtulo *\/\n      --title-size: 1rem;\n      --title-color: #314355;\n      --title-hover: #2d56ad;\n\n      max-width: var(--maxw);\n      margin: 0 auto;\n      padding: 8px 12px;\n      font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n    }\n    \/* ===== HOTFIX: Forzar 2 filas con Grid aunque el tema ponga flex ===== *\/\nsection#clasco-css-carousel .viewport > .track{\n  display: grid !important;\n  grid-auto-flow: column !important;               \/* columnas que se desplazan en X *\/\n  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;\n  grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols)) !important;\n  column-gap: var(--gap) !important;\n  row-gap: var(--gap) !important;\n  padding-bottom: 4px !important;\n  align-content: start !important;\n  \/* anula restos de flex si el tema los forz\u00f3 *\/\n  flex-wrap: unset !important;\n}\n\n\/* Distribuci\u00f3n: impares fila 1, pares fila 2 *\/\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(odd){ grid-row: 1 !important; }\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(even){ grid-row: 2 !important; }\n\n\/* Tarjeta sin alturas forzadas (evita pixelar im\u00e1genes) *\/\nsection#clasco-css-carousel .viewport > .track > .slide{\n  height: auto !important;\n  width: 100% !important;\n  scroll-snap-align: start;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--radius);\n  overflow: hidden;\n  box-shadow: var(--shadow);\n  background: #fff;\n}\n\n\/* Contenedor de imagen con relaci\u00f3n de aspecto consistente *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media{\n  display: block !important;\n  aspect-ratio: var(--ratio) !important;  \/* fija la altura relativa al ancho de la tarjeta *\/\n  overflow: hidden;\n}\n\n\/* La imagen ocupa el contenedor sin deformarse (no forzar height) *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media img{\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: cover !important;\n  display: block !important;\n}\n\n\/* ===== Responsive ===== *\/\n@media (max-width:1024px){\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; \/* 2 filas en tablet *\/\n  }\n}\n\n@media (max-width:640px){\n  section#clasco-css-carousel{ --gap:16px; --cols:1; }\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: 1fr !important;            \/* 1 fila en m\u00f3vil *\/\n  }\n}\n\n\n    \/* Viewport: scroll horizontal *\/\n    #clasco-css-carousel .viewport{\n      overflow-x: auto !important;\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scroll-behavior: smooth;\n      border-radius: var(--radius);\n    }\n\n    \/* ===== Pista: Grid 2 filas + scroll horizontal ===== *\/\n    #clasco-css-carousel .track{\n      display: grid;\n      grid-auto-flow: column; \/* columnas que se desplazan en X *\/\n      grid-template-rows: repeat(2, auto); \/* 2 filas, altura natural *\/\n      grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols));\n      gap: var(--gap);\n      padding-bottom: 4px;\n      align-content: start;\n    }\n\n    \/* Forzar la distribuci\u00f3n en 2 filas: impar arriba, par abajo *\/\n    #clasco-css-carousel .slide:nth-child(odd){  grid-row: 1; }\n    #clasco-css-carousel .slide:nth-child(even){ grid-row: 2; }\n\n    \/* Tarjeta (sin alturas forzadas) *\/\n    #clasco-css-carousel .slide{\n      width: 100%;\n      scroll-snap-align: start;\n      scroll-margin-left: 12px;  \/* ancla al borde al usar dots *\/\n      border-radius: var(--radius);\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      background: #ffffff;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \/* Contenedor de imagen con relaci\u00f3n de aspecto CONSISTENTE *\/\n    #clasco-css-carousel .media{\n      display:block;\n      aspect-ratio: var(--ratio); \/* \ud83d\udd11 fija la altura relativa a su ancho *\/\n      overflow: hidden;\n    }\n    #clasco-css-carousel .media img{\n      width: 100%;\n      height: 100%;\n      object-fit: cover;  \/* recorte est\u00e9tico, sin pixelar ni deformar *\/\n      display: block;\n    }\n\n    \/* T\u00edtulo \/ caption *\/\n    #clasco-css-carousel .caption{\n      padding: 12px 14px 14px;\n      background: #ffffff;\n    }\n    #clasco-css-carousel .caption .title{\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;   \/* m\u00e1ximo 2 l\u00edneas *\/\n      overflow: hidden;\n      font-weight: 800;\n      font-size: var(--title-size);\n      line-height: 1.35;\n      color: var(--title-color);\n      text-decoration: none;\n    }\n    #clasco-css-carousel .caption .title:hover,\n    #clasco-css-carousel .caption .title:focus{\n      color: var(--title-hover);\n      text-decoration: underline;\n    }\n\n    \/* Dots *\/\n    #clasco-css-carousel .dots{\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 12px;\n    }\n    #clasco-css-carousel .dot{\n      width: 10px; height: 10px; border-radius: 999px;\n      background: #c9d4e4; display: inline-block;\n    }\n    #clasco-css-carousel .dot:hover,\n    #clasco-css-carousel .dot:focus{ background:#2d56ad; }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 1024px){\n      \/* Mant\u00e9n 2 filas, pero puedes mostrar 2 columnas si quieres:\n         descomenta la siguiente l\u00ednea si prefieres 2 columnas en tablet *\/\n      \/* #clasco-css-carousel{ --cols: 2; } *\/\n    }\n    @media (max-width: 640px){\n      \/* En m\u00f3vil: 1 sola fila para no saturar *\/\n      #clasco-css-carousel{ --gap: 16px; --cols: 1; }\n      #clasco-css-carousel .track{\n        grid-template-rows: 1fr;\n      }\n      \/* La imagen mantiene su relaci\u00f3n por aspect-ratio, sin forzar height *\/\n    }\n  <\/style>\n\n  <!-- Viewport + pista -->\n  <div class=\"viewport\">\n    <div class=\"track\">\n      <!-- Slide 1 -->\n      <figure class=\"slide\" id=\"art-1\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/historiadeclasificadoscontacto\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/revista.webp\" alt=\"T\u00edtulo del art\u00edculo 1\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/historiadeclasificadoscontacto\/\" target=\"_self\" rel=\"noopener\">\n            Conoce nuestra historia: Clasificados Contacto, 20 a\u00f1os contigo\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 2 -->\n      <figure class=\"slide\" id=\"art-2\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/vender-con-envio-gratis-en-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/repartidorazul.webp\" alt=\"T\u00edtulo del art\u00edculo 2\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/vender-con-envio-gratis-en-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n            \u00bfComo vender con env\u00edo gratis en clasco.mx?\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 3 -->\n      <figure class=\"slide\" id=\"art-3\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/guia-rapida-para-publicar-y-comenzar-a-vender\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/celular.webp\" alt=\"T\u00edtulo del art\u00edculo 3\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/guia-rapida-para-publicar-y-comenzar-a-vender\/\" target=\"_self\" rel=\"noopener\">\n            Gu\u00eda r\u00e1pida para publicar y comenzar a vender\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n      \n      <!-- Slide 4 -->\n      <figure class=\"slide\" id=\"art-4\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/accesorios-y-muebles-para-el-hogar-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/10\/sala.webp\" alt=\"T\u00edtulo del art\u00edculo 4\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/accesorios-y-muebles-para-el-hogar-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n            Los mejores accesorios para hogar en Clasco\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 5 -->\n      <figure class=\"slide\" id=\"art-5\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/liquido-limpiador-para-pisos-multiusos-hdx\/\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-8-dic-2025-02_26_06-p.m.png\" alt=\"T\u00edtulo del art\u00edculo 5\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/liquido-limpiador-para-pisos-multiusos-hdx\/\" target=\"_self\" rel=\"noopener\">\n            Limpiadores de Piso Exclusivos en Clasco\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 6 -->\n      <figure class=\"slide\" id=\"art-6\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/tips-para-mejorar-la-conversion-de-tu-tienda-en-linea\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/mujer-haciendo-compras-en-linea-1.webp\" alt=\"T\u00edtulo del art\u00edculo 6\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/tips-para-mejorar-la-conversion-de-tu-tienda-en-linea\/\" target=\"_self\" rel=\"noopener\">\n            Tips para mejorar la conversi\u00f3n en tu tienda en l\u00ednea\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 7 -->\n      <figure class=\"slide\" id=\"art-7\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/accesorios-decorativos-para-bano\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/10\/bano.png\" alt=\"T\u00edtulo del art\u00edculo 7\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/accesorios-decorativos-para-bano\/\" target=\"_self\" rel=\"noopener\">\n            Accesorios decorativos para ba\u00f1o: estilo, organizaci\u00f3n y dise\u00f1o actual en Clasco.mx\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 8 -->\n      <figure class=\"slide\" id=\"art-8\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/como-elegir-lamparas-para-recamara\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/11\/151251-a1.jpg\" alt=\"T\u00edtulo del art\u00edculo 8\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/como-elegir-lamparas-para-recamara\/\" target=\"_self\" rel=\"noopener\">\n            Como como elegir lamparas para recamara\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 9 -->\n      <figure class=\"slide\" id=\"art-9\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/espejos-decorativos-en-2026\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/11\/c0907038_small.webp\" alt=\"T\u00edtulo del art\u00edculo 9\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/espejos-decorativos-en-2026\/\" target=\"_self\" rel=\"noopener\">\n            Espejos decorativos en 2026\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 10 -->\n      <figure class=\"slide\" id=\"art-10\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/persianas-para-ventanas-tendencias-2026\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/10\/181db3a8_small.webp\" alt=\"T\u00edtulo del art\u00edculo 10\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/persianas-para-ventanas-tendencias-2026\/\" target=\"_self\" rel=\"noopener\">\n            Persianas para ventanas | Tendencias 2026\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 11 -->\n      <figure class=\"slide\" id=\"art-11\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/mochilas-escolares-de-viaje-y-urbanas-en-clasco\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/11\/mujer-feliz-abrazando-mochila-sobre-fondo-amarillo-OSF02457.jpg\" alt=\"T\u00edtulo del art\u00edculo 11\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/mochilas-escolares-de-viaje-y-urbanas-en-clasco\/\" target=\"_self\" rel=\"noopener\">\n            Mochilas: escolares, de viaje y urbanas para 2026 en Clasco\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n    <\/div>\n  <\/div>\n\n  <!-- Dots -->\n  <div class=\"dots\" role=\"tablist\" aria-label=\"Paginaci\u00f3n del carrusel\">\n    <a class=\"dot\" href=\"#art-1\" aria-label=\"Ir al 1\"><\/a>\n    <a class=\"dot\" href=\"#art-2\" aria-label=\"Ir al 2\"><\/a>\n    <a class=\"dot\" href=\"#art-3\" aria-label=\"Ir al 3\"><\/a>\n    <a class=\"dot\" href=\"#art-4\" aria-label=\"Ir al 4\"><\/a>\n    <a class=\"dot\" href=\"#art-5\" aria-label=\"Ir al 5\"><\/a>\n    <a class=\"dot\" href=\"#art-6\" aria-label=\"Ir al 6\"><\/a>\n    <a class=\"dot\" href=\"#art-7\" aria-label=\"Ir al 7\"><\/a>\n  <\/div>\n<\/section>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b3d9157 e-flex e-con-boxed e-con e-parent\" data-id=\"b3d9157\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-22f586a e-con-full e-flex e-con e-child\" data-id=\"22f586a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb3248f elementor-widget elementor-widget-text-editor\" data-id=\"eb3248f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><strong>Celulares y Accesorios para telefon\u00eda<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bc25a2 elementor-widget elementor-widget-html\" data-id=\"8bc25a2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 Carrusel CSS-only con t\u00edtulos (3 desktop \/ 1 m\u00f3vil, 2 filas reales sin estirar im\u00e1genes) -->\n<section id=\"clasco-css-carousel\" aria-label=\"Art\u00edculos destacados\">\n  <style>\n    \/* ===== Scope exclusivo del carrusel ===== *\/\n    #clasco-css-carousel{\n      \/* Ajustes r\u00e1pidos *\/\n      --maxw: 1200px;   \/* ancho m\u00e1ximo del carrusel *\/\n      --gap: 24px;      \/* separaci\u00f3n entre tarjetas *\/\n      --radius: 22px;   \/* radio de borde exterior *\/\n      --shadow: 0 10px 28px rgba(0,0,0,.12);\n\n      \/* Proporci\u00f3n visual para las im\u00e1genes *\/\n      --ratio: 16\/9;           \/* 1\/1, 4\/3, 21\/9, etc. *\/\n\n      \/* columnas visibles (desktop) *\/\n      --cols: 3;\n\n      \/* tipograf\u00eda t\u00edtulo *\/\n      --title-size: 1rem;\n      --title-color: #314355;\n      --title-hover: #2d56ad;\n\n      max-width: var(--maxw);\n      margin: 0 auto;\n      padding: 8px 12px;\n      font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n    }\n    \/* ===== HOTFIX: Forzar 2 filas con Grid aunque el tema ponga flex ===== *\/\nsection#clasco-css-carousel .viewport > .track{\n  display: grid !important;\n  grid-auto-flow: column !important;               \/* columnas que se desplazan en X *\/\n  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;\n  grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols)) !important;\n  column-gap: var(--gap) !important;\n  row-gap: var(--gap) !important;\n  padding-bottom: 4px !important;\n  align-content: start !important;\n  \/* anula restos de flex si el tema los forz\u00f3 *\/\n  flex-wrap: unset !important;\n}\n\n\/* Distribuci\u00f3n: impares fila 1, pares fila 2 *\/\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(odd){ grid-row: 1 !important; }\nsection#clasco-css-carousel .viewport > .track > .slide:nth-child(even){ grid-row: 2 !important; }\n\n\/* Tarjeta sin alturas forzadas (evita pixelar im\u00e1genes) *\/\nsection#clasco-css-carousel .viewport > .track > .slide{\n  height: auto !important;\n  width: 100% !important;\n  scroll-snap-align: start;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--radius);\n  overflow: hidden;\n  box-shadow: var(--shadow);\n  background: #fff;\n}\n\n\/* Contenedor de imagen con relaci\u00f3n de aspecto consistente *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media{\n  display: block !important;\n  aspect-ratio: var(--ratio) !important;  \/* fija la altura relativa al ancho de la tarjeta *\/\n  overflow: hidden;\n}\n\n\/* La imagen ocupa el contenedor sin deformarse (no forzar height) *\/\nsection#clasco-css-carousel .viewport > .track > .slide .media img{\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: cover !important;\n  display: block !important;\n}\n\n\/* ===== Responsive ===== *\/\n@media (max-width:1024px){\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: repeat(2, minmax(0, 1fr)) !important; \/* 2 filas en tablet *\/\n  }\n}\n\n@media (max-width:640px){\n  section#clasco-css-carousel{ --gap:16px; --cols:1; }\n  section#clasco-css-carousel .viewport > .track{\n    grid-template-rows: 1fr !important;            \/* 1 fila en m\u00f3vil *\/\n  }\n}\n\n\n    \/* Viewport: scroll horizontal *\/\n    #clasco-css-carousel .viewport{\n      overflow-x: auto !important;\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scroll-behavior: smooth;\n      border-radius: var(--radius);\n    }\n\n    \/* ===== Pista: Grid 2 filas + scroll horizontal ===== *\/\n    #clasco-css-carousel .track{\n      display: grid;\n      grid-auto-flow: column; \/* columnas que se desplazan en X *\/\n      grid-template-rows: repeat(2, auto); \/* 2 filas, altura natural *\/\n      grid-auto-columns: calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols));\n      gap: var(--gap);\n      padding-bottom: 4px;\n      align-content: start;\n    }\n\n    \/* Forzar la distribuci\u00f3n en 2 filas: impar arriba, par abajo *\/\n    #clasco-css-carousel .slide:nth-child(odd){  grid-row: 1; }\n    #clasco-css-carousel .slide:nth-child(even){ grid-row: 2; }\n\n    \/* Tarjeta (sin alturas forzadas) *\/\n    #clasco-css-carousel .slide{\n      width: 100%;\n      scroll-snap-align: start;\n      scroll-margin-left: 12px;  \/* ancla al borde al usar dots *\/\n      border-radius: var(--radius);\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      background: #ffffff;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \/* Contenedor de imagen con relaci\u00f3n de aspecto CONSISTENTE *\/\n    #clasco-css-carousel .media{\n      display:block;\n      aspect-ratio: var(--ratio); \/* \ud83d\udd11 fija la altura relativa a su ancho *\/\n      overflow: hidden;\n    }\n    #clasco-css-carousel .media img{\n      width: 100%;\n      height: 100%;\n      object-fit: cover;  \/* recorte est\u00e9tico, sin pixelar ni deformar *\/\n      display: block;\n    }\n\n    \/* T\u00edtulo \/ caption *\/\n    #clasco-css-carousel .caption{\n      padding: 12px 14px 14px;\n      background: #ffffff;\n    }\n    #clasco-css-carousel .caption .title{\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;   \/* m\u00e1ximo 2 l\u00edneas *\/\n      overflow: hidden;\n      font-weight: 800;\n      font-size: var(--title-size);\n      line-height: 1.35;\n      color: var(--title-color);\n      text-decoration: none;\n    }\n    #clasco-css-carousel .caption .title:hover,\n    #clasco-css-carousel .caption .title:focus{\n      color: var(--title-hover);\n      text-decoration: underline;\n    }\n\n    \/* Dots *\/\n    #clasco-css-carousel .dots{\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 12px;\n    }\n    #clasco-css-carousel .dot{\n      width: 10px; height: 10px; border-radius: 999px;\n      background: #c9d4e4; display: inline-block;\n    }\n    #clasco-css-carousel .dot:hover,\n    #clasco-css-carousel .dot:focus{ background:#2d56ad; }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 1024px){\n      \/* Mant\u00e9n 2 filas, pero puedes mostrar 2 columnas si quieres:\n         descomenta la siguiente l\u00ednea si prefieres 2 columnas en tablet *\/\n      \/* #clasco-css-carousel{ --cols: 2; } *\/\n    }\n    @media (max-width: 640px){\n      \/* En m\u00f3vil: 1 sola fila para no saturar *\/\n      #clasco-css-carousel{ --gap: 16px; --cols: 1; }\n      #clasco-css-carousel .track{\n        grid-template-rows: 1fr;\n      }\n      \/* La imagen mantiene su relaci\u00f3n por aspect-ratio, sin forzar height *\/\n    }\n  <\/style>\n\n  <!-- Viewport + pista -->\n  <div class=\"viewport\">\n    <div class=\"track\">\n      <!-- Slide 1 -->\n      <figure class=\"slide\" id=\"art-1\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/guia-de-compra-smartphone\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-9-dic-2025-05_29_35-p.m.png\" alt=\"T\u00edtulo del art\u00edculo 1\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/guia-de-compra-smartphone\/\" target=\"_self\" rel=\"noopener\">\n           Guia de compra de celulares Gama media: 2025\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 2 -->\n      <figure class=\"slide\" id=\"art-2\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/fundas-para-celular-en-clasco\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-9-dic-2025-05_34_17-p.m.png\" alt=\"Fundas para celular en Clasco, envio en 24hrs\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/fundas-para-celular-en-clasco\/\" target=\"_self\" rel=\"noopener\">\n            Fundas para celular en Clasco, con env\u00edo en 24hrs\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n      \n      <!-- Slide 3 -->\n      <figure class=\"slide\" id=\"art-3\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/internet-satelital-starlink-y-conectividad-rural-en-mexico\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-8-dic-2025-02_47_40-p.m.png\" alt=\"Internet satelital Starlink en M\u00e9xico\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/internet-satelital-starlink-y-conectividad-rural-en-mexico\/\" target=\"_self\" rel=\"noopener\">\n            Internet satelital Starlink en M\u00e9xico\n          <\/a>\n        <\/figcaption>\n        <\/figure>\n\n      <!-- Slide 4 -->\n      <figure class=\"slide\" id=\"art-4\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/bocinas-klipsch-y-divoom-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-9-dic-2025-05_23_35-p.m.png\" alt=\"bocinas-klipsch-y-divoom-clasco-mx\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/bocinas-klipsch-y-divoom-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n            Bocinas Klipsch y Divoom en Clasco mx\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n<!-- Slide 5 -->\n      <figure class=\"slide\" id=\"art-5\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/guia-de-celulares-gama-baja-2025\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-9-dic-2025-05_18_48-p.m.png\" alt=\"Guia celulares gama baja 2025\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/guia-de-celulares-gama-baja-2025\/\" target=\"_self\" rel=\"noopener\">\n            Guia de Celulares Gama Baja 2025\n     <\/a>\n        <\/figcaption>\n      <\/figure>\n  <!-- Dots -->\n  <div class=\"dots\" role=\"tablist\" aria-label=\"Paginaci\u00f3n del carrusel\">\n    <a class=\"dot\" href=\"#art-1\" aria-label=\"Ir al 1\"><\/a>\n  <\/div>\n<\/section>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93236e3 elementor-widget elementor-widget-html\" data-id=\"93236e3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"c-about-hero\" aria-label=\"Somos un marketplace local\">\n  <style>\n    \/* ===== Scope exclusivo y compacto (ajustado) ===== *\/\n    .c-about-hero{\n      --blue:#2d56ad;\n      --blue-dark:#2f57a7;\n      --text:#314355;\n      --radius:18px;\n      --shadow:0 14px 36px rgba(0,0,0,.10);\n      --shadow-right:22px 0 40px -22px rgba(0,0,0,.22); \/* sombra SOLO hacia la derecha *\/\n      --gif-max: 520px;         \/* ALTURA m\u00e1xima del GIF en desktop *\/\n      --gap: 24px;\n      --max:1200px;\n      font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;\n      color:var(--text);\n      max-width:var(--max);\n      margin:0 auto;\n      padding:18px 12px 28px;   \/* menos padding general *\/\n    }\n    .c-about-hero__grid{\n      display:grid;\n      grid-template-columns: 1fr 1.35fr; \/* img \/ texto *\/\n      gap:var(--gap);\n      align-items:center;  \/* centra verticalmente el lado derecho respecto al GIF *\/\n    }\n\n    \/* Columna izquierda: GIF\/imagen *\/\n    .c-about-hero__media{\n      border-radius:var(--radius);\n      overflow:hidden;\n      background:#f9f9f9;\n      \/* sombra hacia el lado derecho (al bloque de texto) *\/\n      box-shadow: var(--shadow-right);\n      \/* quita m\u00e1rgenes internos visuales; la imagen determinar\u00e1 altura *\/\n    }\n    .c-about-hero__media img{\n      display:block;\n      width:100%;\n      height:auto;\n      max-height:var(--gif-max);   \/* limita altura del GIF para que no \u201ccrezca\u201d la secci\u00f3n *\/\n      object-fit:contain;\n    }\n\n    \/* Columna derecha (centrada verticalmente mediante flex) *\/\n    .c-about-hero__right{\n      display:flex;\n      flex-direction:column;\n      justify-content:center;\n      gap:14px; \/* espacio entre t\u00edtulo y panel *\/\n    }\n\n    .c-about-hero__title{\n      margin:0;\n      color:var(--blue);\n      font-weight:900;\n      line-height:1.15;\n      font-size:clamp(22px,4vw,40px); \/* un poco m\u00e1s compacto *\/\n    }\n    .c-about-hero__panel{\n      background:linear-gradient(180deg,var(--blue),var(--blue-dark));\n      color:#fff;\n      border-radius:var(--radius);\n      padding:22px 24px;     \/* menos padding para que se vea m\u00e1s ligero *\/\n      box-shadow:var(--shadow);\n    }\n    .c-about-hero__panel p{\n      margin:0 0 12px;\n      font-size:clamp(15px,1.05vw,18px);\n      line-height:1.65;\n    }\n    .c-about-hero__panel p:last-child{margin-bottom:0}\n\n    \/* Responsivo *\/\n    @media (max-width: 980px){\n      .c-about-hero{padding:14px 12px 24px}\n      .c-about-hero__grid{ grid-template-columns:1fr; }\n      .c-about-hero__media img{ max-height:none } \/* que use el ancho del m\u00f3vil *\/\n      .c-about-hero__right{ gap:12px }\n    }\n  <\/style>\n\n  <div class=\"c-about-hero__grid\">\n    <!-- Izquierda: tu GIF\/imagen -->\n    <figure class=\"c-about-hero__media\">\n      <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/Diseno-sin-titulo-1.gif\" alt=\"Identidad de Clasco\" title=\"Inicio\">\n    <\/figure>\n\n    <!-- Derecha: t\u00edtulo y panel azul (centrados al GIF) -->\n    <div class=\"c-about-hero__right\">\n      <h2 class=\"c-about-hero__title\">\n        Hoy somos un marketplace mexicano<br>\n        que impulsa lo que est\u00e1 cerca.\n      <\/h2>\n\n      <div class=\"c-about-hero__panel\">\n        <p>\n          Clasco es hoy un marketplace digital que conserva la esencia de lo local, pero con el alcance, rapidez y la simplicidad que permite la tecnolog\u00eda.\n        <\/p>\n        <p>\n          Nos enfocamos en conectar vendedores con sus compradores perfectos dentro de su propia comunidad, fomentando el consumo local, el crecimiento de emprendedores y la econom\u00eda colaborativa.\n        <\/p>\n        <p>\n          Queremos que nuestros usuarios puedan encontrar aquello que necesitan \u2014y a veces, lo que no sab\u00edan que necesitaban\u2014 de forma intuitiva, r\u00e1pida y segura.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-79c45e3 e-flex e-con-boxed e-con e-parent\" data-id=\"79c45e3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-52da0ea e-con-full e-flex e-con e-child\" data-id=\"52da0ea\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa5474b e-flex e-con-boxed e-con e-parent\" data-id=\"fa5474b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae41a4b elementor-widget elementor-widget-heading\" data-id=\"ae41a4b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Nuestra propuesta de valor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b8ffdc e-flex e-con-boxed e-con e-parent\" data-id=\"6b8ffdc\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a081cd3 elementor-widget elementor-widget-html\" data-id=\"a081cd3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* === CLASCO: Cards === *\/\n:root{\n  --clasco-yellow:#F2B200;\n  --clasco-bg:#f4f7fb;\n  --clasco-radius:22px;\n}\n.clasco-cards{ background:var(--clasco-bg); padding:24px 0; }\n.clasco-cards__grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); align-items:stretch; }\n@media (max-width:1024px){ .clasco-cards__grid{ grid-template-columns:repeat(2,1fr); } }\n@media (max-width:640px){ .clasco-cards__grid{ grid-template-columns:1fr; } }\n.clasco-card{ position:relative; background:var(--clasco-yellow); border-radius:var(--clasco-radius);\n  box-shadow:0 8px 20px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s; overflow:hidden; }\n.clasco-card>summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:64px 1fr 28px;\n  align-items:center; gap:16px; padding:28px 28px 36px; color:#fff; font-weight:700; font-size:clamp(18px,2.2vw,28px); line-height:1.15; }\n.clasco-card>summary::-webkit-details-marker{ display:none; }\n.clasco-card__icon{ width:48px; height:48px; display:inline-block; }\n.clasco-card__icon svg{ width:100%; height:100%; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }\n.clasco-card__chev{ position:absolute; right:18px; bottom:14px; width:26px; height:26px; transform-origin:50% 50%;\n  transition:transform .2s, opacity .2s; opacity:.95; }\n.clasco-card__chev svg{ width:100%; height:100%; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; }\n.clasco-card__body{ background:rgba(255,255,255,.08); color:#fff; padding:0 28px 24px; border-top:1px solid rgba(255,255,255,.25); font-weight:500; line-height:1.45; }\n.clasco-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.16); }\n.clasco-card:focus-within{ outline:2px solid rgba(255,255,255,.35); outline-offset:-2px; }\n.clasco-card[open] .clasco-card__chev{ transform:rotate(180deg); }\n<\/style>\n\n<section class=\"clasco-cards\">\n  <div class=\"clasco-cards__grid\">\n\n    <details class=\"clasco-card\">\n      <summary>\n        <span class=\"clasco-card__icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M4 19c2.5 0 4-1.5 4-4s1.5-4 4-4h3a3 3 0 0 0 0-6h-1\"\/><circle cx=\"18\" cy=\"5\" r=\"2\"\/><circle cx=\"6\" cy=\"19\" r=\"2\"\/><\/svg>\n        <\/span>\n        <span>Trayectoria<br>Comprobada<\/span>\n        <span class=\"clasco-card__chev\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\n      <\/summary>\n      <div class=\"clasco-card__body\">\n        <p>Resumen, logros y m\u00e9tricas clave. 2\u20134 l\u00edneas m\u00e1x.<\/p>\n      <\/div>\n    <\/details>\n\n    <details class=\"clasco-card\">\n      <summary>\n        <span class=\"clasco-card__icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M7 14a4 4 0 1 1 4-4\"\/><path d=\"M17 14a4 4 0 1 0-4-4\"\/><path d=\"M3 20c2-3 7-3 9 0M12 20c2-3 7-3 9 0\"\/><\/svg>\n        <\/span>\n        <span>Cercan\u00eda Real<\/span>\n        <span class=\"clasco-card__chev\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\n      <\/summary>\n      <div class=\"clasco-card__body\">\n        <p>Soporte humano, respuesta r\u00e1pida y procesos claros.<\/p>\n      <\/div>\n    <\/details>\n\n    <details class=\"clasco-card\">\n      <summary>\n        <span class=\"clasco-card__icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M8 20h8\"\/><\/svg>\n        <\/span>\n        <span>Tecnolog\u00eda \u00fatil,<br>no complicada<\/span>\n        <span class=\"clasco-card__chev\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\n      <\/summary>\n      <div class=\"clasco-card__body\">\n        <p>Pagos, log\u00edstica y anal\u00edtica integrados, listos para escalar.<\/p>\n      <\/div>\n    <\/details>\n\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5e23425 e-flex e-con-boxed e-con e-parent\" data-id=\"5e23425\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9668e58 elementor-widget elementor-widget-html\" data-id=\"9668e58\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- (Opcional) Carga Roboto; solo se usar\u00e1 en esta secci\u00f3n -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@500;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === CLASCO: Misi\u00f3n\/Visi\u00f3n (scoped) === *\/\n#clasco-mv-1{\n  \/* variables locales, no globales *\/\n  --mv-blue: #2d56ad;\n  --mv-navy: #153151;\n  --mv-radius: 22px;\n  --mv-shadow: 0 10px 28px rgba(0,0,0,.15);\n  --mv-shadow-hover: 0 16px 36px rgba(0,0,0,.18);\n  --mv-bg: #f4f7fb;\n  font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n  background: var(--mv-bg);\n  padding: 28px 0;\n}\n\n#clasco-mv-1 .mv-grid{\n  display: grid;\n  gap: 28px;\n  grid-template-columns: repeat(2, 1fr);\n  align-items: stretch;\n}\n@media (max-width: 900px){\n  #clasco-mv-1 .mv-grid{ grid-template-columns: 1fr; }\n}\n\n#clasco-mv-1 .mv-card{\n  border-radius: var(--mv-radius);\n  box-shadow: var(--mv-shadow);\n  padding: 40px 44px;\n  display: flex; flex-direction: column; justify-content: center; align-items: center;\n  text-align: center; min-height: 270px;\n  transition: transform .18s ease, box-shadow .18s ease;\n  color: #fff; \/* texto blanco en esta secci\u00f3n *\/\n}\n#clasco-mv-1 .mv-card:hover{ transform: translateY(-2px); box-shadow: var(--mv-shadow-hover); }\n\n#clasco-mv-1 .mv-card--mision{ background: var(--mv-blue); }\n#clasco-mv-1 .mv-card--vision{ background: var(--mv-navy); }\n\n#clasco-mv-1 .mv-title{\n  margin: 0 0 14px;\n  text-transform: uppercase;\n  letter-spacing: .5px;\n  font-weight: 800;\n  font-size: clamp(26px, 3vw, 42px);\n  line-height: 1.1;\n  color: #fff;   \/* reforzado localmente *\/\n}\n#clasco-mv-1 .mv-text{\n  margin: 0;\n  max-width: 68ch;\n  font-weight: 500;\n  font-size: clamp(16px, 1.6vw, 22px);\n  line-height: 1.6;\n  color: #fff;   \/* reforzado localmente *\/\n}\n<\/style>\n\n<section id=\"clasco-mv-1\" aria-label=\"Misi\u00f3n y Visi\u00f3n\">\n  <div class=\"mv-grid\">\n\n    <!-- Misi\u00f3n -->\n    <div class=\"mv-card mv-card--mision\" role=\"group\" aria-labelledby=\"mv1-mision\">\n      <h2 id=\"mv1-mision\" class=\"mv-title\">MISI\u00d3N<\/h2>\n      <p class=\"mv-text\">\n        Facilitar el comercio local, creando una experiencia digital simple, directa y segura\n        para compradores y vendedores en su comunidad.\n      <\/p>\n    <\/div>\n\n    <!-- Visi\u00f3n -->\n    <div class=\"mv-card mv-card--vision\" role=\"group\" aria-labelledby=\"mv1-vision\">\n      <h2 id=\"mv1-vision\" class=\"mv-title\">VISI\u00d3N<\/h2>\n      <p class=\"mv-text\">\n        Ser la plataforma l\u00edder en comercio local en M\u00e9xico, impulsando el crecimiento de\n        emprendedores, negocios y consumidores, y posicion\u00e1ndonos como un referente de cercan\u00eda,\n        confianza y tecnolog\u00eda \u00fatil.\n      <\/p>\n    <\/div>\n\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-831fb73 e-flex e-con-boxed e-con e-parent\" data-id=\"831fb73\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b078813 elementor-widget elementor-widget-html\" data-id=\"b078813\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Secci\u00f3n: Env\u00edos en Clasco (listo con URLs ejemplo de WordPress) -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@500;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n#clasco-envios {\n  --brand:#2d56ad;\n  --radius:22px;\n  --shadow:0 10px 24px rgba(0,0,0,.10);\n  --bg: linear-gradient(180deg,#f7fafc 0%, #f0f5fa 100%);\n  font-family:\"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n  background: var(--bg);\n  padding: 28px 20px;\n}\n#clasco-envios .env-container{\n  max-width: 1200px; margin: 0 auto;\n  display: grid; gap: 28px; grid-template-columns: 1.1fr 1fr; align-items: center;\n}\n@media (max-width: 1024px){\n  #clasco-envios .env-container{ grid-template-columns: 1fr; }\n}\n\n\/* Texto *\/\n#clasco-envios .env-left h2{\n  display:flex; align-items:center; gap:20px; margin:0 0 18px;\n  font-weight:800; line-height:1.05; color:var(--brand);\n  font-size: clamp(28px, 5vw, 56px);\n  letter-spacing:.3px;\n}\n#clasco-envios .env-left .icon{\n  width: clamp(48px,6vw,72px); height: clamp(48px,6vw,72px);\n  flex: 0 0 auto;\n}\n#clasco-envios .env-left .icon img{\n  width: 100%; height: 100%; object-fit: contain;\n}\n\n#clasco-envios .env-left h3{\n  margin: 8px 0 8px; font-weight:800; color:#2d56ad;\n  font-size: clamp(18px, 2.2vw, 28px);\n}\n#clasco-envios .env-left p{\n  margin: 0; color:#3a495a; font-weight:500;\n  font-size: clamp(15px, 1.5vw, 18px); line-height:1.7;\n}\n\n\/* Imagen derecha *\/\n#clasco-envios .env-image{\n  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);\n}\n#clasco-envios .env-image img{\n  width:100%; height:100%; display:block; object-fit: cover;\n  aspect-ratio: 16\/10;\n}\n<\/style>\n\n<section id=\"clasco-envios\" aria-label=\"Env\u00edos en Clasco\">\n  <div class=\"env-container\">\n\n    <!-- Columna izquierda -->\n    <div class=\"env-left\">\n      <h2>\n        <span class=\"icon\" aria-hidden=\"true\">\n          <!-- Icono de caja (https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/caja.jpg) -->\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/caja.jpg\" alt=\"Icono de caja\" title=\"Inicio\">\n        <\/span>\n        <span>ENV\u00cdOS EN<br>CLASCO<\/span>\n      <\/h2>\n\n      <h3>R\u00e1pido, seguro y confiable.<\/h3>\n      <p>\n        En Clasco, queremos que recibas tus productos de forma r\u00e1pida,\n        segura y confiable. Contamos con dos modalidades de env\u00edo,\n        dependiendo del tipo de servicio que el vendedor haya contratado.\n      <\/p>\n    <\/div>\n\n    <!-- Columna derecha -->\n    <figure class=\"env-image\">\n      <!-- Imagen principal (URL de ejemplo) -->\n      <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/repartidora-1.webp\" alt=\"Repartidora de Clasco entregando un paquete en domicilio\" title=\"Inicio\">\n    <\/figure>\n\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b563f5a e-flex e-con-boxed e-con e-parent\" data-id=\"b563f5a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17f622e elementor-widget elementor-widget-html\" data-id=\"17f622e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* ===== CLASCO | Modalidades de Env\u00edo ===== *\/\n#clasco-modalidades {\n  --blue: #2d56ad;\n  --gold: #f2b200;\n  --text: #314355;\n  --bg: #ffffff;\n  --radius: 14px;\n  --shadow: 0 10px 30px rgba(0,0,0,0.08);\n  font-family: \"Roboto\", Arial, sans-serif;\n  display: grid;\n  gap: 40px;\n}\n\n\/* === Tarjeta base === *\/\n#clasco-modalidades .card {\n  display: grid;\n  grid-template-columns: 1.2fr 1fr;\n  align-items: center;\n  background: var(--bg);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  overflow: hidden;\n  position: relative;\n  padding: 28px;\n  border: 3px solid transparent;\n}\n\n#clasco-modalidades .card.classic {\n  border-color: var(--blue);\n}\n\n#clasco-modalidades .card.boost {\n  border-color: var(--gold);\n}\n\n\/* === Contenido === *\/\n#clasco-modalidades .content {\n  z-index: 1;\n}\n\n#clasco-modalidades h2 {\n  font-size: 1.6rem;\n  font-weight: 800;\n  margin-bottom: 10px;\n}\n\n#clasco-modalidades .classic h2 {\n  color: var(--blue);\n}\n\n#clasco-modalidades .boost h2 {\n  color: var(--gold);\n}\n\n#clasco-modalidades h3 {\n  font-size: 1.1rem;\n  font-weight: 700;\n  margin-bottom: 8px;\n}\n\n#clasco-modalidades p, \n#clasco-modalidades li {\n  color: var(--text);\n  font-size: 0.96rem;\n  line-height: 1.6;\n}\n\n#clasco-modalidades ul {\n  padding-left: 18px;\n  margin-bottom: 10px;\n}\n\n\/* === Tip box === *\/\n#clasco-modalidades .tip {\n  background: rgba(45,86,173,0.05);\n  border: 1px dashed var(--blue);\n  border-radius: 12px;\n  padding: 10px 14px;\n  font-size: 0.9rem;\n}\n\n#clasco-modalidades .tip a {\n  color: var(--blue);\n}\n\n\/* === Imagen principal === *\/\n#clasco-modalidades .img-frame {\n  border-radius: 12px;\n  overflow: hidden;\n  text-align: center;\n  background: #f8faff;\n}\n\n#clasco-modalidades .img-frame img {\n  max-width: 100%;\n  height: auto;\n}\n\n\/* === Franjas laterales === *\/\n#clasco-modalidades .side-stripes {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 80px;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n#clasco-modalidades .classic .side-stripes {\n  right: 0;\n  background-image: url(\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/linea_azul.jpg\");\n}\n\n#clasco-modalidades .boost .side-stripes {\n  left: 0;\n  background-image: url(\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/linea_amarilla.jpg\");\n}\n\n\/* === Responsive === *\/\n@media (max-width: 768px) {\n  #clasco-modalidades .card {\n    grid-template-columns: 1fr;\n    text-align: center;\n  }\n  #clasco-modalidades .side-stripes {\n    display: none;\n  }\n}\n<\/style>\n\n<section id=\"clasco-modalidades\">\n  <!-- Modalidad Cl\u00e1sica -->\n  <div class=\"card classic\">\n    <div class=\"content\">\n      <h2>MODALIDAD CL\u00c1SICA<\/h2>\n      <h3>\u00bfC\u00f3mo funciona?<\/h3>\n      <ul>\n        <li>El env\u00edo es gestionado directamente por el vendedor.<\/li>\n        <li>El costo del env\u00edo va a cargo del comprador y puede variar seg\u00fan las condiciones del vendedor.<\/li>\n        <li>Desde Clasco damos seguimiento para asegurar que el env\u00edo se cumpla en tiempo y forma.<\/li>\n      <\/ul>\n      <div class=\"tip\">\n        \ud83d\udca1 <strong>Tip Clasco:<\/strong> Consulta la pol\u00edtica de env\u00edo del vendedor directamente en la p\u00e1gina del producto antes de realizar tu compra.<br>\n        <a href=\"https:\/\/clasco.mx\/terminos-y-condiciones-boost\">https:\/\/clasco.mx\/terminos-y-condiciones-boost<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"img-frame\">\n      <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/modalidad_clasica.webp\" alt=\"Env\u00edo cl\u00e1sico\" title=\"Inicio\">\n    <\/div>\n    <div class=\"side-stripes\"><\/div>\n  <\/div>\n\n  <!-- Modalidad Boost -->\n  <div class=\"card boost\">\n    <div class=\"side-stripes\"><\/div>\n    <div class=\"img-frame\">\n      <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/modalidad_premium.webp\" alt=\"Env\u00edo Boost\" title=\"Inicio\">\n    <\/div>\n    <div class=\"content\">\n      <h2>MODALIDAD PREMIUM (CLASCO BOOST)<\/h2>\n      <h3>\u00bfQu\u00e9 es Boost?<\/h3>\n      <p>Boost es nuestro sistema de env\u00edo r\u00e1pido y gestionado directamente por Clasco. Si el producto se encuentra en nuestra bodega nos encargamos de todo el proceso: desde el embalaje hasta la entrega.<\/p>\n      <h3>Ventajas<\/h3>\n      <ul>\n        <li>Embalaje profesional.<\/li>\n        <li>Entregas r\u00e1pidas, seguras y garantizadas.<\/li>\n        <li>Env\u00edo local o nacional seg\u00fan la ubicaci\u00f3n del comprador.<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce701f3 e-flex e-con-boxed e-con e-parent\" data-id=\"ce701f3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d40c85d elementor-widget elementor-widget-html\" data-id=\"d40c85d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 De la compra a la entrega (3 tarjetas con iconos) -->\n<section id=\"clasco-info\" aria-label=\"De la compra a la entrega\">\n  <style>\n    \/* ===== Scope exclusivo: #clasco-info ===== *\/\n    #clasco-info{\n      --blue: #2d56ad;\n      --text: #314355;\n      --bg-soft: #f4f7fb;\n      --radius: 18px;\n      --border: 3px solid var(--blue);\n      --shadow: 0 12px 32px rgba(0,0,0,.06);\n      --gap: 24px;\n\n      --h2: clamp(28px, 3.6vw, 48px); \/* t\u00edtulo controlado (no gigante) *\/\n      --h3: clamp(16px, 2vw, 22px);\n\n      font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n      color: var(--text);\n      padding: 12px 12px 24px;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    \/* T\u00edtulo *\/\n    #clasco-info .title{\n      font-weight: 900;\n      color: var(--blue);\n      line-height: 1.08;\n      margin: 0 0 18px;\n      font-size: var(--h2);\n      text-transform: uppercase;\n      letter-spacing: .4px;\n    }\n\n    \/* Grid 3\/2\/1 *\/\n    #clasco-info .grid{\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: var(--gap);\n    }\n\n    \/* Tarjeta base *\/\n    #clasco-info .card{\n      background: #fff;\n      border: var(--border);\n      border-radius: var(--radius);\n      box-shadow: var(--shadow);\n      padding: 18px 18px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n      min-height: 280px;   \/* tama\u00f1o equilibrado *\/\n      background-image: radial-gradient(100% 100% at 0% 0%, var(--bg-soft), #fff 58%);\n    }\n\n    \/* Encabezado: icono + t\u00edtulo *\/\n    #clasco-info .head{\n      display: grid;\n      grid-template-columns: 64px 1fr;\n      gap: 14px;\n      align-items: center;\n    }\n    #clasco-info .icon{\n      width: 64px; height: 64px; border-radius: 12px;\n      display:grid; place-items:center;\n      background: #eef3ff; border: 2px solid #dbe7ff; overflow: hidden;\n    }\n    #clasco-info .icon img{\n      max-width: 52px; max-height: 52px; width:auto; height:auto; display:block;\n    }\n    #clasco-info .h3{\n      margin: 0; color: var(--blue); font-size: var(--h3); font-weight: 900; line-height:1.15;\n      text-transform: uppercase;\n    }\n\n    \/* Texto \/ listas *\/\n    #clasco-info p{ margin: 0; font-size: 1rem; line-height: 1.55; }\n    #clasco-info ul{ margin: 0; padding: 0 0 0 20px; }\n    #clasco-info li{ margin: 8px 0; font-size: 1rem; }\n\n    \/* Tarjeta 3: matriz 2 columnas con divisor *\/\n    #clasco-info .matrix{\n      margin-top: 6px;\n      display: grid;\n      grid-template-columns: 1fr 1px 1fr;\n      gap: 14px;\n      align-items: start;\n    }\n    #clasco-info .matrix .col{ display: grid; gap: 10px; }\n    #clasco-info .matrix .label{\n      font-weight: 900; text-transform: uppercase; color: var(--blue); letter-spacing: .4px; font-size: .98rem;\n    }\n    #clasco-info .matrix .vdiv{ background:#cfe0ff; width:1px; min-height:100%; }\n    #clasco-info .matrix .row{ display:grid; gap: 8px; }\n    #clasco-info .muted{ color:#5a6a85; }\n\n    \/* Responsive *\/\n    @media (max-width: 1024px){\n      #clasco-info .grid{ grid-template-columns: repeat(2, 1fr); }\n    }\n    @media (max-width: 640px){\n      #clasco-info{ --gap: 16px; }\n      #clasco-info .grid{ grid-template-columns: 1fr; }\n      #clasco-info .head{ grid-template-columns: 56px 1fr; }\n      #clasco-info .icon{ width:56px; height:56px; }\n      #clasco-info .icon img{ max-width:46px; max-height:46px; }\n    }\n  <\/style>\n\n  <!-- T\u00edtulo principal -->\n  <h2 class=\"title\">De la compra a la entrega:<br>As\u00ed funciona Clasco<\/h2>\n\n  <!-- Tarjetas -->\n  <div class=\"grid\">\n\n    <!-- Card 1 -->\n    <article class=\"card\">\n      <header class=\"head\">\n        <figure class=\"icon\">\n          <!-- Reemplaza con tu icono -->\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/tiempos_entrega.jpg\" alt=\"\u00cdcono tiempos de entrega\" title=\"Inicio\">\n        <\/figure>\n        <h3 class=\"h3\">Tiempos de entrega<\/h3>\n      <\/header>\n\n      <ul>\n        <li>El tiempo de entrega depende del horario en que se realiz\u00f3 la compra.<\/li>\n        <li>El pedido puede tardar entre 24 y 48 horas en ser entregado.<\/li>\n      <\/ul>\n    <\/article>\n\n    <!-- Card 2 -->\n    <article class=\"card\">\n      <header class=\"head\">\n        <figure class=\"icon\">\n          <!-- Reemplaza con tu icono -->\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/seguimiento_pedido.jpg\" alt=\"\u00cdcono seguimiento de pedido\" title=\"Inicio\">\n        <\/figure>\n        <h3 class=\"h3\">Seguimiento de tu pedido<\/h3>\n      <\/header>\n\n      <p>Una vez realizada tu compra, recibir\u00e1s:<\/p>\n      <ul>\n        <li>Un correo de confirmaci\u00f3n.<\/li>\n        <li>Un n\u00famero de gu\u00eda (en compras con Boost) para rastrear tu pedido en tiempo real.<\/li>\n      <\/ul>\n      <p class=\"muted\"><strong>Tip:<\/strong> Tambi\u00e9n puedes consultar el estado de tu pedido desde tu perfil en Clasco.<\/p>\n    <\/article>\n\n    <!-- Card 3 -->\n    <article class=\"card\">\n      <header class=\"head\">\n        <figure class=\"icon\">\n          <!-- Reemplaza con tu icono -->\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/ubicacion.jpg\" alt=\"\u00cdcono ubicaci\u00f3n\" title=\"Inicio\">\n        <\/figure>\n        <h3 class=\"h3\">Tipo de env\u00edo seg\u00fan tu ubicaci\u00f3n<\/h3>\n      <\/header>\n\n      <div class=\"matrix\">\n        <div class=\"col\">\n          <div class=\"label\">Ubicaci\u00f3n del comprador<\/div>\n          <div class=\"row\">\n            <p><strong>Quer\u00e9taro<\/strong><\/p>\n            <p><strong>Resto de M\u00e9xico<\/strong><\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"vdiv\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"col\">\n          <div class=\"label\">M\u00e9todo de env\u00edo<\/div>\n          <div class=\"row\">\n            <p>Paqueter\u00eda propia de Clasco<\/p>\n            <p>Transportista seleccionado por Clasco<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f596042 e-flex e-con-boxed e-con e-parent\" data-id=\"f596042\" data-element_type=\"container\" id=\"como-comprar\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3b86f2 elementor-widget elementor-widget-html\" data-id=\"b3b86f2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 \u00bfC\u00f3mo comprar? con modal de video (click-to-play + cerrar) -->\n<section class=\"c-howto\" aria-label=\"C\u00f3mo comprar en Clasco\">\n<style>\n\/* ===== CSS compacto ===== *\/\n.c-howto{--b:#2d56ad;--t:#314355;--r:18px;--sh:0 12px 32px rgba(0,0,0,.08);font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--t);max-width:1200px;margin:0 auto;padding:24px 12px}\n.c-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:linear-gradient(180deg,#f6f9ff,#f4f7fb);border-radius:var(--r);padding:24px}\n.c-head{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center;margin:0 0 8px}\n.c-icn{width:78px;height:78px;border-radius:14px;display:grid;place-items:center;background:#eaf0ff;border:2px solid #d7e4ff;overflow:hidden}\n.c-icn img{max-width:66px;max-height:66px;display:block}\n.c-ttl{margin:0;color:var(--b);font-weight:900;line-height:1;font-size:clamp(26px,4.2vw,52px);letter-spacing:.3px;text-transform:uppercase}\n.c-copy p{font-size:clamp(15px,1.15vw,19px);line-height:1.6;margin:12px 0}\n.c-btn{display:inline-block;margin-top:6px;font-weight:800;color:#fff;background:var(--b);padding:10px 14px;border-radius:10px;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(45,86,173,.25)}\n.c-btn:hover{filter:brightness(.95)}\n.c-media{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff}\n.c-media img{display:block;width:100%;height:auto}\n\n\/* Modal *\/\n.c-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;padding:20px;z-index:9999}\n.c-modal.is-open{display:grid}\n.c-box{width:min(100%,980px);aspect-ratio:16\/9;background:#000;border-radius:14px;box-shadow:var(--sh);position:relative;overflow:hidden}\n.c-frame{position:absolute;inset:0;width:100%;height:100%;border:0}\n.c-close{position:absolute;top:-42px;right:0;background:#fff;color:#111;padding:8px 12px;border-radius:8px;font-weight:700;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2)}\n.c-close:hover{filter:brightness(.95)}\n@media(max-width:900px){.c-wrap{grid-template-columns:1fr}.c-media{order:2}}\n<\/style>\n\n  <div class=\"c-wrap\">\n    <!-- Izquierda -->\n    <div>\n      <div class=\"c-head\">\n        <figure class=\"c-icn\">\n          <!-- Reemplaza con tu icono -->\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/icono_como_comprar.jpg\" alt=\"\u00cdcono comprar\" title=\"Inicio\">\n        <\/figure>\n        <h2 class=\"c-ttl\">\u00bfC\u00f3mo comprar<br>en Clasco?<\/h2>\n      <\/div>\n\n      <div class=\"c-copy\">\n        <p>Comprar en Clasco es una experiencia sencilla, r\u00e1pida y totalmente segura.<\/p>\n        <p>Desde el primer clic, te guiamos paso a paso para que encuentres lo que necesitas sin complicaciones. Nuestra plataforma est\u00e1 dise\u00f1ada para que puedas hacer tus compras desde cualquier dispositivo \u2014ya sea tu celular, tablet o computadora\u2014 con total comodidad y confianza.<\/p>\n        <p>En Clasco todo est\u00e1 pensado para que disfrutes una compra sin enredos, con m\u00e9todos de pago seguros y un proceso \u00e1gil de principio a fin.<\/p>\n\n        <!-- Bot\u00f3n que abre el video (NO carga el iframe hasta el clic) -->\n        <button class=\"c-btn\" type=\"button\"\n                data-video=\"https:\/\/www.youtube.com\/embed\/Fa8OxOy0Qc0?autoplay=1&rel=0&modestbranding=1\">\n          Ver video tutorial\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Derecha -->\n    <figure class=\"c-media\">\n      <!-- Reemplaza con tu imagen -->\n      <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/computadora-1.webp\" alt=\"Comprando en Clasco desde una laptop\" title=\"Inicio\">\n    <\/figure>\n  <\/div>\n\n  <!-- Modal -->\n  <div class=\"c-modal\" id=\"cModal\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Video tutorial\">\n    <div class=\"c-box\" role=\"document\">\n      <button class=\"c-close\" type=\"button\" aria-label=\"Cerrar\">Cerrar \u2715<\/button>\n      <iframe class=\"c-frame\" id=\"cFrame\" title=\"Video tutorial Clasco\"\n              allow=\"autoplay; encrypted-media; picture-in-picture\" allowfullscreen><\/iframe>\n    <\/div>\n  <\/div>\n\n<script>\n\/* ===== JS peque\u00f1o: abre\/cierra modal, carga\/limpia el iframe ===== *\/\n(function(){\n  const modal = document.getElementById('cModal');\n  const frame = document.getElementById('cFrame');\n  const openers = document.querySelectorAll('.c-btn[data-video]');\n  const closeBtn = modal.querySelector('.c-close');\n\n  function open(videoURL){\n    frame.src = videoURL;                      \/\/ carga el video SOLO al abrir\n    modal.classList.add('is-open');\n    modal.setAttribute('aria-hidden','false');\n    document.body.style.overflow='hidden';     \/\/ bloquea scroll de fondo\n  }\n  function close(){\n    modal.classList.remove('is-open');\n    modal.setAttribute('aria-hidden','true');\n    frame.src = '';                            \/\/ limpia para DETENER el video\n    document.body.style.overflow='';\n  }\n\n  openers.forEach(btn=>{\n    btn.addEventListener('click',()=>open(btn.dataset.video));\n  });\n  closeBtn.addEventListener('click',close);\n  modal.addEventListener('click',e=>{ if(e.target===modal) close(); });\n  document.addEventListener('keydown',e=>{ if(e.key==='Escape') close(); });\n})();\n<\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c41cfb4 e-flex e-con-boxed e-con e-parent\" data-id=\"c41cfb4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0cdd0e1 elementor-widget elementor-widget-text-editor\" data-id=\"0cdd0e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><strong>Art\u00edculos que pueden interesarte: Como vender y Log\u00edstica Boost en Clasco<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-917b90f e-flex e-con-boxed e-con e-parent\" data-id=\"917b90f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5283a0e elementor-widget elementor-widget-html\" data-id=\"5283a0e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CLASCO \u00b7 Carrusel CSS-only con t\u00edtulos (3 desktop \/ 1 m\u00f3vil) -->\n<section id=\"clasco-css-carousel\" aria-label=\"Art\u00edculos destacados\">\n  <style>\n    \/* ===== Scope exclusivo del carrusel ===== *\/\n    #clasco-css-carousel{\n      \/* Ajustes r\u00e1pidos *\/\n      --maxw: 1200px;   \/* ancho m\u00e1ximo del carrusel *\/\n      --gap: 24px;      \/* separaci\u00f3n entre tarjetas *\/\n      --radius: 22px;   \/* radio de borde exterior *\/\n      --shadow: 0 10px 28px rgba(0,0,0,.12);\n\n      \/* Proporci\u00f3n y alturas m\u00e1ximas de imagen *\/\n      --ratio: 16\/9;           \/* 1\/1, 4\/3, 21\/9, etc. *\/\n      --h-desktop: 340px;\n      --h-tablet: 300px;\n      --h-mobile: 220px;\n\n      \/* columnas visibles *\/\n      --cols: 3;               \/* desktop: 3 *\/\n\n      \/* tipograf\u00eda t\u00edtulo *\/\n      --title-size: 1rem;\n      --title-color: #314355;  \/* gris azul del sitio *\/\n      --title-hover: #2d56ad;  \/* azul hover *\/\n\n      max-width: var(--maxw);\n      margin: 0 auto;\n      padding: 8px 12px;\n      font-family: \"Roboto\", system-ui, -apple-system, Segoe UI, Arial, sans-serif;\n    }\n\n    \/* Viewport con scroll horizontal y snapping *\/\n    #clasco-css-carousel .viewport{\n      overflow-x: auto !important;   \/* por si Elementor\/tema fuerza hidden *\/\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scroll-behavior: smooth;\n      border-radius: var(--radius);\n    }\n\n    \/* Pista de slides *\/\n    #clasco-css-carousel .track{\n      display: flex;\n      gap: var(--gap);\n      padding-bottom: 4px; \/* evita barra visible en algunos navegadores *\/\n    }\n\n    \/* Cada slide ocupa 1\/var(--cols) del ancho *\/\n    #clasco-css-carousel .slide{\n      \/* f\u00f3rmula: (100% - espacios)\/columnas *\/\n      flex: 0 0 calc((100% - (var(--gap) * (var(--cols) - 1))) \/ var(--cols));\n      scroll-snap-align: start;\n      scroll-margin-left: 12px;  \/* ancla al borde al usar dots *\/\n      border-radius: var(--radius);\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      background: #ffffff; \/* card blanca para separar imagen y t\u00edtulo *\/\n      display: flex;\n      flex-direction: column;\n    }\n\n    \/* Bloque de imagen (media) *\/\n    #clasco-css-carousel .media{ display:block; }\n    #clasco-css-carousel .media img{\n      display: block; width: 100%; height: auto;\n      aspect-ratio: var(--ratio);\n      object-fit: cover;         \/* recorte est\u00e9tico manteniendo proporci\u00f3n *\/\n      max-height: var(--h-desktop);\n    }\n\n    \/* T\u00edtulo \/ caption *\/\n    #clasco-css-carousel .caption{\n      padding: 12px 14px 14px;\n      background: #ffffff;\n    }\n    #clasco-css-carousel .caption .title{\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;   \/* m\u00e1ximo 2 l\u00edneas *\/\n      overflow: hidden;\n      font-weight: 800;\n      font-size: var(--title-size);\n      line-height: 1.35;\n      color: var(--title-color);\n      text-decoration: none;\n    }\n    #clasco-css-carousel .caption .title:hover,\n    #clasco-css-carousel .caption .title:focus{\n      color: var(--title-hover);\n      text-decoration: underline;\n    }\n\n    \/* Dots (paginadores por ancla) *\/\n    #clasco-css-carousel .dots{\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 12px;\n    }\n    #clasco-css-carousel .dot{\n      width: 10px; height: 10px; border-radius: 999px;\n      background: #c9d4e4; display: inline-block;\n    }\n    #clasco-css-carousel .dot:hover,\n    #clasco-css-carousel .dot:focus{ background:#2d56ad; }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 1024px){\n      #clasco-css-carousel .media img{ max-height: var(--h-tablet); }\n    }\n    @media (max-width: 640px){\n      #clasco-css-carousel{ --gap: 16px; --cols: 1; } \/* 1 tarjeta por vista *\/\n      #clasco-css-carousel .media img{ max-height: var(--h-mobile); }\n    }\n  <\/style>\n\n  <!-- Viewport + pista (duplica figure.slide para m\u00e1s art\u00edculos) -->\n  <div class=\"viewport\">\n    <div class=\"track\">\n\n      <!-- Slide 2 -->\n      <figure class=\"slide\" id=\"art-2\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/vender-con-envio-gratis-en-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/repartidorazul.webp\" alt=\"Como vender con envio gratis en Clasco\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/vender-con-envio-gratis-en-clasco-mx\/\" target=\"_self\" rel=\"noopener\">\n            \u00bfComo vender con env\u00edo gratis en clasco.mx?\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      <!-- Slide 2 -->\n      <figure class=\"slide\" id=\"art-2\">\n        <a class=\"media\" href=\"https:\/\/clasco.mx\/blog\/guia-rapida-para-publicar-y-comenzar-a-vender\/\" rel=\"noopener\">\n          <img decoding=\"async\" src=\"https:\/\/clasco.mx\/blog\/wp-content\/uploads\/2025\/08\/celular.webp\" alt=\"Guia guia-rapida-para-publicar-y-comenzar-a-vender\" title=\"Inicio\">\n        <\/a>\n        <figcaption class=\"caption\">\n          <a class=\"title\" href=\"https:\/\/clasco.mx\/blog\/guia-rapida-para-publicar-y-comenzar-a-vender\/\" target=\"_self\" rel=\"noopener\">\n            Gu\u00eda r\u00e1pida para publicar y comenzar a vender\n          <\/a>\n        <\/figcaption>\n      <\/figure>\n\n      \n\n      <!-- Para agregar m\u00e1s:\n           1) duplica un bloque <figure class=\"slide\" id=\"art-N\">\u2026<\/figure>\n           2) usa id consecutivo (art-5, art-6, \u2026)\n           3) a\u00f1ade su dot abajo con href=\"#art-N\" -->\n    <\/div>\n  <\/div>\n\n  <!-- Dots (agrega uno por cada slide) -->\n  <div class=\"dots\" role=\"tablist\" aria-label=\"Paginaci\u00f3n del carrusel\">\n    <a class=\"dot\" href=\"#art-1\" aria-label=\"Ir al 1\"><\/a>\n    <a class=\"dot\" href=\"#art-2\" aria-label=\"Ir al 2\"><\/a>\n    <a class=\"dot\" href=\"#art-3\" aria-label=\"Ir al 3\"><\/a>\n    <\/a>\n  <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BLOG OFICIAL DE CLASCO M\u00e1s de 20 a\u00f1os conectando a las personas con lo que necesitan En Clasco, llevamos m\u00e1s de dos d\u00e9cadas siendo parte de la vida cotidiana de miles de personas en Quer\u00e9taro. Nacimos como una revista impresa de clasificados, facilitando la compra y venta entre vecinos, negocios y emprendedores locales. Desde el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1448","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/pages\/1448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/comments?post=1448"}],"version-history":[{"count":323,"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/pages\/1448\/revisions"}],"predecessor-version":[{"id":2791,"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/pages\/1448\/revisions\/2791"}],"wp:attachment":[{"href":"https:\/\/clasco.mx\/blog\/wp-json\/wp\/v2\/media?parent=1448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}