/* ==========================================================================
   SIN MOLDE | sistema de diseño v3 "tinta y albero"
   --------------------------------------------------------------------------
   La tesis es el nombre: nada sale de un molde. De ahí las dos decisiones
   que ordenan el sitio:
     1. La textura es la capa de la fabricación aditiva. Solo sobre tinta.
     2. El eje del catálogo son las fechas, no las categorías, porque en
        fabricación bajo pedido lo que decide la compra es el plazo.

   Reglas heredadas que siguen en pie:
     R3. Este archivo es el ÚNICO sitio con CSS a medida. Ni Personalizador
         ni CSS por página.
     R4. Las páginas de tienda las pinta Astra, no Elementor. Aquí se traducen
         los tokens a los selectores reales de Woo.

   Lo que cambia respecto a la v2: había un acento por campaña (ocho colores)
   que derivaba todo con oklch. Se retira. Ahora hay UN acento y el trabajo
   de decir en qué campaña estás lo hace el raíl de temporada, que además
   dice la fecha límite, que es la información que de verdad vende.
   ========================================================================== */

/* --- Tipografía ---------------------------------------------------------
   Cormorant Garamond y Archivo las sirve ASTRA en local (Personalizador →
   Rendimiento → «Cargar las fuentes de Google localmente»), porque el tema
   hijo desencola cualquier hoja de fonts.googleapis.com por RGPD.

   Astra baja DOS pesos por familia: Archivo 400 y 600, Cormorant 400 y 700.
   Todo el sistema se ha ajustado a eso. No pidas 300 ni 500: no existen y
   el navegador los simula, que se ve peor que elegir bien.
   -------------------------------------------------------------------------- */

:root{
  /* ==== Color ============================================================
     Azul de azulejo y ocre de albero. Los dos colores de Sevilla que no son
     el topicazo del blanco y el amarillo. */
  --sm-ink:#16283F;          /* tinta      | 13,3:1 sobre papel */
  --sm-ink-deep:#0B1725;     /* tinta honda| pie de página */
  --sm-bg:#FCFAF6;           /* cal        | fondo por defecto */
  --sm-plate:#EFE6D4;        /* arena      | banda alterna y foto de producto */
  --sm-plate-soft:#F7F1E5;   /* arena suave| raíl y bloques secundarios */
  --sm-muted:#5A6576;        /*             5,2:1 sobre papel */
  --sm-line:#E2D9C7;
  --sm-line-strong:#CBBEA5;
  --sm-paper:#FCFAF6;        /* texto sobre tinta */

  /* Un solo acento, y va cerrado: botón principal y detalles sobre tinta. */
  --sm-acc:#D8A44E;          /* albero */
  --sm-acc-hover:#B9862F;    /* albero honda */
  --sm-acc-text:#B9862F;     /* el ÚNICO ocre válido como texto sobre claro */
  --sm-on-acc:#16283F;       /* el albero lleva tinta. NUNCA blanco. */
  --sm-link:#2C5C86;         /* azulejo | 6,3:1 sobre papel */
  --sm-success:#33604A;

  /* La firma: el estriado de las capas de impresión. */
  --sm-capas:repeating-linear-gradient(to bottom,
              rgba(252,250,246,.05) 0 1px, transparent 1px 4px);

  /* ==== Tipografía ======================================================= */
  --sm-display-font:'Cormorant Garamond',Cormorant,Georgia,'Times New Roman',serif;
  --sm-font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sm-display:clamp(2.6rem,1.1rem + 5.4vw,5rem);
  --sm-h2:clamp(1.75rem,1.1rem + 2.6vw,2.625rem);
  --sm-h3:clamp(1.2rem,1.05rem + 0.6vw,1.375rem);
  --sm-body:1.0625rem;       /* 17px: se lee al sol, en la calle */
  --sm-small:0.875rem;
  --sm-micro:0.75rem;

  /* ==== Retícula y ritmo ================================================= */
  --sm-gut:clamp(1.25rem,0.6rem + 2.6vw,2rem);
  --sm-max:1360px;
  --sm-band:clamp(4rem,2rem + 6.5vw,8rem);
  --sm-radio:3px;            /* controles. La imagen y las bandas van a 0. */

  /* ==== Curvas y tiempos =================================================
     Nada por encima de 300 ms salvo la entrada del hero. */
  --sm-sale:cubic-bezier(.23,1,.32,1);
  --sm-recorrido:cubic-bezier(.77,0,.175,1);

  --z-sticky:100; --z-panel:200; --z-modal:300;

  color-scheme:light dark;
}

/* --- Modo oscuro --------------------------------------------------------
   El modo oscuro de una marca de tinta es la tinta misma: el fondo pasa a
   tinta honda y el texto a cal. No se invierte nada a lo bruto.
   La bandeja de la foto sigue siendo arena: la pieza queda iluminada dentro
   de la página oscura y no hay que volver a fotografiar nada.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root{
    --sm-bg:#0B1725;
    --sm-ink:#FCFAF6;
    --sm-ink-deep:#060E18;
    --sm-muted:#9AA7B8;       /* 7,1:1 sobre #0B1725 */
    --sm-line:#22354E;
    --sm-line-strong:#334A66;
    --sm-plate:#EFE6D4;
    --sm-plate-soft:#152436;
    --sm-paper:#FCFAF6;
    --sm-acc-text:#E6BC72;    /* sobre tinta hace falta subir la claridad */
    --sm-link:#8FB8DC;
    --sm-success:#7FB79A;
  }
}

/* --- Reset y base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sm-bg); color:var(--sm-ink);
  font-family:var(--sm-font); font-size:var(--sm-body); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--sm-link);outline-offset:3px;border-radius:2px}

/* Titulares en garalda, grandes y apretados. Peso 400: es el que existe. */
h1,.sm-display{
  font-family:var(--sm-display-font);
  font-size:var(--sm-display); font-weight:400;
  letter-spacing:-0.025em; line-height:0.98; text-wrap:balance;
}
h2{
  font-family:var(--sm-display-font);
  font-size:var(--sm-h2); font-weight:400;
  letter-spacing:-0.015em; line-height:1.06; text-wrap:balance;
}
h3{
  font-family:var(--sm-display-font);
  font-size:var(--sm-h3); font-weight:400;
  letter-spacing:-0.005em; line-height:1.2;
}
/* h4 a h6 son rótulos de interfaz, no titulares: van en grotesca. */
h4,h5,h6{font-family:var(--sm-font);font-weight:600;letter-spacing:0.01em;line-height:1.3}

p{text-wrap:pretty;max-width:66ch}
.sm-muted{color:var(--sm-muted)}
.sm-small{font-size:var(--sm-small)}
.sm-num{font-variant-numeric:tabular-nums}

/* Rótulo. Solo cuando lleva información: temporada, estado, plazo.
   Nunca de adorno encima de un titular. */
.sm-rotulo{
  font-family:var(--sm-font); font-size:var(--sm-micro); font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; line-height:1;
}

.sm-wrap{max-width:var(--sm-max);margin-inline:auto;padding-inline:var(--sm-gut)}
.sm-band{padding-block:var(--sm-band)}

/* --- Bandas de color ----------------------------------------------------
   La profundidad la dan las bandas, no las sombras. No hay ni una sombra
   en todo el sistema.
   -------------------------------------------------------------------------- */
.sm-arena{background:var(--sm-plate)}
.sm-arena-suave{background:var(--sm-plate-soft)}

.sm-tinta{
  background:var(--sm-ink-deep); color:var(--sm-paper);
  position:relative; isolation:isolate;
}
.sm-tinta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--sm-capas); pointer-events:none;
}
.sm-tinta h1,.sm-tinta h2,.sm-tinta h3{color:var(--sm-paper)}
.sm-tinta .sm-muted{color:rgba(252,250,246,.68)}
.sm-tinta a{color:var(--sm-acc)}
.sm-tinta :focus-visible{outline-color:var(--sm-acc)}

/* --- La marca ------------------------------------------------------------
   Palabra en garalda y bajada en grotesca. Se retira el cuadrado de color
   de la v2: con un solo acento ya no informaba de nada.
   -------------------------------------------------------------------------- */
.sm-logo,
.site-title{
  font-family:var(--sm-display-font); font-weight:400;
  letter-spacing:-0.02em; line-height:1; white-space:nowrap;
  text-decoration:none;
}
.site-description{
  font-family:var(--sm-font); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
}

/* --- Botones ------------------------------------------------------------
   Principal en albero con texto tinta (6,6:1). El albero no admite blanco
   jamás: si algún día alguien lo pone, el contraste cae a 1,9:1.
   -------------------------------------------------------------------------- */
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 2em;border:1px solid transparent;border-radius:var(--sm-radio);
  font-family:var(--sm-font);font-size:var(--sm-small);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  min-height:48px;
  transition:background-color .18s var(--sm-sale),
             border-color .18s var(--sm-sale),
             color .18s var(--sm-sale),
             transform .16s var(--sm-sale);
}
.sm-btn:active{transform:scale(.97)}
.sm-btn--primary{background:var(--sm-acc);color:var(--sm-on-acc);border-color:var(--sm-acc)}
.sm-btn--primary:hover{background:var(--sm-acc-hover);border-color:var(--sm-acc-hover);color:var(--sm-on-acc)}
.sm-btn--ink{background:var(--sm-ink);color:var(--sm-bg);border-color:var(--sm-ink)}
.sm-btn--ink:hover{background:var(--sm-ink-deep);border-color:var(--sm-ink-deep)}
.sm-btn--ghost{background:transparent;color:var(--sm-ink);border-color:var(--sm-line-strong)}
.sm-btn--ghost:hover{border-color:var(--sm-ink)}
.sm-tinta .sm-btn--ghost{color:var(--sm-paper);border-color:rgba(252,250,246,.28)}
.sm-tinta .sm-btn--ghost:hover{border-color:var(--sm-paper);background:rgba(252,250,246,.07)}

/* Enlace de lista: filete que engorda. Sin flecha de adorno. */
.sm-enlace{
  font-family:var(--sm-font);font-size:var(--sm-small);font-weight:600;
  letter-spacing:.03em;color:var(--sm-link);text-decoration:none;
  padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .22s var(--sm-sale);
}
.sm-enlace:hover{background-size:100% 2px}

/* --- La bandeja: cada pieza en el mismo cuadrado ------------------------- */
.sm-plate{aspect-ratio:1;background:var(--sm-plate);overflow:hidden;display:block}
.sm-plate img{width:100%;height:100%;object-fit:cover}

/* --- El raíl de temporada ----------------------------------------------
   El componente con más carga comercial del sitio. Se aplica la clase
   .sm-rail a un contenedor de Elementor de cuatro columnas.
   Contrato: la celda en curso lleva data-estado="curso".
   -------------------------------------------------------------------------- */
.sm-rail{border-block:1px solid var(--sm-line);background:var(--sm-plate-soft)}
.sm-rail__grid{
  display:grid;
  grid-template-columns:repeat(var(--sm-rail-cols,4),minmax(0,1fr));
  max-width:var(--sm-max);margin-inline:auto;
}
.sm-rail__item{
  display:flex;flex-direction:column;
  padding:2rem var(--sm-gut);
  border-left:1px solid var(--sm-line);
  text-decoration:none;
  transition:background-color .2s var(--sm-sale);
}
.sm-rail__item:first-child{border-left:0}
.sm-rail__item:hover{background:var(--sm-plate)}
.sm-rail__item[data-estado="curso"]{background:var(--sm-ink);color:var(--sm-paper)}
.sm-rail__item[data-estado="curso"]:hover{background:var(--sm-ink-deep)}
.sm-rail__nombre{
  font-family:var(--sm-display-font);font-size:1.5rem;font-weight:400;
  line-height:1.05;margin-bottom:.75rem;display:block;
}
.sm-rail__fecha{display:block;font-size:var(--sm-small);color:var(--sm-muted);margin-bottom:1rem}
.sm-rail__item[data-estado="curso"] .sm-rail__fecha{color:rgba(252,250,246,.72)}
.sm-rail__limite{
  display:block;margin-top:auto;padding-top:1.25rem;
  border-top:1px solid rgba(252,250,246,.16);
  font-size:var(--sm-small);color:var(--sm-acc);
}

/* Estado. El punto lleva el color, el texto lleva el contraste.
   El ocre como texto sobre claro daba 2,2:1, así que sobre claro el texto
   va en tinta y el color se queda en el punto. */
.sm-estado{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:var(--sm-micro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;
}
.sm-estado::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.sm-estado[data-e="curso"]{color:var(--sm-ink)}
.sm-estado[data-e="curso"]::before{background:var(--sm-acc-hover)}
.sm-estado[data-e="proxima"]{color:var(--sm-link)}
.sm-estado[data-e="cerrada"]{color:var(--sm-muted)}
.sm-rail__item[data-estado="curso"] .sm-estado[data-e="curso"]{color:var(--sm-acc)}
.sm-rail__item[data-estado="curso"] .sm-estado[data-e="curso"]::before{background:var(--sm-acc)}

@media (max-width:900px){
  .sm-rail__grid{grid-template-columns:1fr 1fr}
  .sm-rail__item:nth-child(-n+2){border-top:0}
  .sm-rail__item:nth-child(odd){border-left:0}
  .sm-rail__item{border-top:1px solid var(--sm-line)}
}
@media (max-width:600px){
  .sm-rail__grid{grid-template-columns:1fr}
  .sm-rail__item{border-left:0;border-top:1px solid var(--sm-line)}
  .sm-rail__item:first-child{border-top:0}
}

/* --- El plazo de fabricación -------------------------------------------
   Lo pinta wp-content/novamira-sandbox/sinmolde-plazo.php. Se ve antes de
   pagar, que es de lo que se trata.
   -------------------------------------------------------------------------- */
.sm-plazo{
  display:flex;gap:.75rem;align-items:flex-start;
  margin:1.5rem 0 0;padding:1rem 1.25rem;max-width:60ch;
  background:var(--sm-plate-soft);
  border-left:2px solid var(--sm-acc);
  font-size:var(--sm-small);color:var(--sm-muted);
}
.sm-plazo strong{color:var(--sm-ink);font-weight:600}
.sm-plazo__icono{
  width:16px;height:16px;flex-shrink:0;margin-top:.28rem;
  border:1.5px solid var(--sm-acc-hover);border-radius:50%;
  position:relative;
}
.sm-plazo__icono::after{
  content:"";position:absolute;left:50%;top:3px;
  width:1.5px;height:5px;background:var(--sm-acc-hover);
}
/* La línea de plazo en la tarjeta.

   Cae entre la foto y el bloque de resumen de Astra, porque Astra cierra su
   `astra-shop-summary-wrap` y meter algo dentro obligaría a reescribir su
   plantilla. En esa posición funciona igual: se lee como nota de entrega,
   justo antes del nombre. Si algún día hace falta bajarla debajo del precio,
   hay que tocar la estructura de la tarjeta en Astra, no este CSS. */
.sm-plazo-linea{
  display:block;
  font-size:var(--sm-micro);
  letter-spacing:.02em;
  color:var(--sm-muted);
  margin:.9rem 0 -.5rem;
}

/* Los productos nuevos aún no tienen foto. Mientras lleguen, el hueco se
   presenta como la bandeja de arena del sistema y no como un icono roto.
   No es un adorno: es un marcador declarado, y se ve que falta la foto. */
.woocommerce ul.products li.product img.woocommerce-placeholder,
.woocommerce div.product div.images img.woocommerce-placeholder{
  background:var(--sm-plate);
  opacity:.16;
  padding:22%;
  object-fit:contain;
}
.woocommerce .sm-plazo-estado{
  font-size:var(--sm-small);color:var(--sm-acc-text);font-weight:600;
}

/* ==========================================================================
   CAPA DE MAPEO A WOOCOMMERCE / ASTRA
   --------------------------------------------------------------------------
   R4: la tienda la pinta Astra. Aquí se traducen los tokens a sus selectores.
   ========================================================================== */

/* La bandeja: la foto de producto siempre 1:1 sobre la arena del sistema */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img{
  aspect-ratio:1; object-fit:cover; background:var(--sm-plate);
}

/* Radio: 0 en imagen, 3px en controles. Y ni una sombra. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img{
  border-radius:0 !important; box-shadow:none !important;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select{
  border-radius:var(--sm-radio) !important; box-shadow:none !important;
}

/* Botones de la tienda. En el catálogo, tinta: hay muchos y el albero
   dejaría de ser acento. En la ficha, el de comprar va en albero, porque
   ahí sí es LA acción de la página. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit{
  background:var(--sm-ink); color:var(--sm-bg);
  border:1px solid transparent; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sm-font); font-size:var(--sm-small); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.85em 1.6em;
  transition:background-color .18s var(--sm-sale),
             color .18s var(--sm-sale),
             transform .16s var(--sm-sale);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--sm-ink-deep); color:var(--sm-bg);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .button:active{transform:scale(.97)}

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button{
  background:var(--sm-acc); color:var(--sm-on-acc);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover{
  background:var(--sm-acc-hover); color:var(--sm-on-acc);
}

/* Precios: cifras tabulares, como el resto de números del sistema */
.woocommerce .price,
.woocommerce ul.products li.product .price{
  font-variant-numeric:tabular-nums; font-weight:600; color:var(--sm-ink);
  font-family:var(--sm-font);
}
.woocommerce .price del{color:var(--sm-muted);font-weight:400}
.woocommerce .price ins{text-decoration:none}

/* Nombre de la pieza: grotesca, no garalda. A 17px la Cormorant se cae. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--sm-font) !important;
  font-size:1rem !important; font-weight:400 !important;
  letter-spacing:0 !important; line-height:1.35 !important;
  color:var(--sm-ink);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}

/* Descripción de categoría: prosa a 66 ch, como en el resto del sistema */
.woocommerce .term-description p,
.woocommerce-products-header p{max-width:66ch}

/* El cruce de foto al pasar el cursor lo hace Astra (shop-hover-style=swap):
   imagen 1, la pieza sobre arena; imagen 2, la pieza en un sitio real.
   Cuenta la marca sin una palabra. Aquí solo se afina el tiempo y se quita
   el zoom de la v2, que peleaba con el cruce. */
.woocommerce ul.products li.product img.show-on-hover{
  transition:opacity .24s ease !important;
}
.woocommerce ul.products li.product:hover a img{transform:none !important}

/* La insignia de oferta: rectángulo de albero con texto tinta, sin píldora. */
.woocommerce span.onsale{
  background:var(--sm-acc) !important; color:var(--sm-on-acc) !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--sm-font); font-size:var(--sm-micro); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  min-height:0; min-width:0; padding:6px 11px; line-height:1;
}

/* Miga de pan: vuelve a la temporada. */
.woocommerce .woocommerce-breadcrumb,
.ast-breadcrumbs-wrapper{
  font-size:var(--sm-small); color:var(--sm-muted);
}
.woocommerce .woocommerce-breadcrumb a{color:var(--sm-link)}

/* Muestras de variación: el color del filamento se elige mirándolo. */
.woocommerce div.product form.cart .variations label{
  font-family:var(--sm-font); font-weight:600; font-size:var(--sm-small);
  letter-spacing:.04em; color:var(--sm-ink);
}
.woocommerce div.product form.cart .variations select{
  min-height:48px; border:1px solid var(--sm-line); background:var(--sm-bg);
  padding:0 1rem;
}

/* Cantidad y campos.
   Astra fija la altura de estos dos con más especificidad, y se quedaban en
   40px. La diana táctil mínima es 44, así que aquí se suben las dos. */
.woocommerce .quantity .qty,
.woocommerce.woocommerce-js .quantity input[type="number"],
.woocommerce div.product form.cart .quantity .qty{
  min-height:48px; height:48px;
  border:1px solid var(--sm-line); background:var(--sm-bg);
  font-variant-numeric:tabular-nums;
}
.woocommerce select.orderby,
.woocommerce-page select.orderby,
.woocommerce .woocommerce-ordering select{
  min-height:48px; height:48px; padding-inline:.9rem;
  border:1px solid var(--sm-line); background:var(--sm-bg);
}

/* --- Atribución del diseño original, al final de la ficha ---------------- */
.sm-atribucion{
  margin-top:2rem; padding-top:1rem;
  border-top:1px solid var(--sm-line);
  color:var(--sm-muted); font-size:var(--sm-small);
}
.sm-atribucion a{color:var(--sm-link)}

/* ==========================================================================
   ELEMENTOR
   --------------------------------------------------------------------------
   El kit de Elementor pinta con dos clases y gana a los selectores del tema.
   Aquí se le devuelve el sistema. Vive en este archivo y no en Elementor
   para que el CSS a medida siga teniendo un único sitio (R3).
   ========================================================================== */

.elementor-widget,
.elementor-widget-container,
.elementor-widget-text-editor,
.elementor-button,
a.elementor-button{font-family:var(--sm-font)}

.elementor-heading-title{font-family:var(--sm-display-font)}
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title{font-family:var(--sm-font);font-weight:600}

.elementor-button,
a.elementor-button{
  border-radius:var(--sm-radio); min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sm-font); font-size:var(--sm-small); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.85em 2em;
  transition:background-color .18s var(--sm-sale),
             color .18s var(--sm-sale),
             transform .16s var(--sm-sale);
}
.elementor-button:active{transform:scale(.97)}

/* --- Hero de la portada ------------------------------------------------
   Un solo momento de carga en todo el sitio, y está aquí. El titular sube
   y la pieza se revela por abajo. Nada más se anima al hacer scroll.
   -------------------------------------------------------------------------- */
.sm-hero h1,
.sm-hero h1.elementor-heading-title{
  font-family:var(--sm-display-font);
  font-size:var(--sm-display); font-weight:400;
  letter-spacing:-0.025em; line-height:0.95; text-wrap:balance;
  max-width:18ch;
}
.sm-hero p,
.sm-hero .elementor-widget-text-editor{max-width:44ch;font-size:1.125rem}

/* Los contenedores de Elementor estiran a sus hijos, y el botón salía de
   borde a borde. Un botón de ancho completo en un hero no es un botón, es
   una banda. Se ancla a la izquierda y se queda con su ancho. */
.sm-hero .elementor-widget-button,
.sm-coleccion .elementor-widget-button,
.sm-modelo .elementor-widget-button,
.sm-recogida .elementor-widget-button,
.sm-credibilidad .elementor-widget-button{align-self:flex-start}
.sm-hero .elementor-button,
.sm-coleccion .elementor-button,
.sm-modelo .elementor-button,
.sm-recogida .elementor-button,
.sm-credibilidad .elementor-button{width:auto}

/* El hero es una división a dos: el argumento a la izquierda, la pieza a la
   derecha. Por debajo de 900px la pieza sube por encima del texto, que es
   lo que declara el sistema. */
/* Elementor encola su hoja DESPUÉS de esta, y su `.e-con` gana el `display`
   a igual especificidad. Se prefija con `.elementor` para subir a 0,2,0 y se
   fija también `--display`, que es la variable por la que Elementor lo lee.
   Se sube la especificidad aquí, no en Elementor, para que el CSS a medida
   siga viviendo en un único sitio (R3). */
/* Los contenedores «boxed» de Elementor meten un `.e-con-inner` por medio,
   así que los widgets son NIETOS del contenedor: la retícula va en el inner,
   no en `.sm-hero`. Se prefija con `.elementor` para ganarle el `display` a
   `.e-con`, que se encola después que esta hoja. */
@media (min-width:901px){
  .elementor .sm-hero > .e-con-inner{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    grid-auto-rows:min-content;
    column-gap:clamp(2rem,5vw,5rem);
    align-content:center;
  }
  .elementor .sm-hero > .e-con-inner > .elementor-widget-image{
    grid-column:2; grid-row:1 / span 20; align-self:center; margin:0;
  }
  .elementor .sm-hero > .e-con-inner > *:not(.elementor-widget-image){grid-column:1}
}
@media (max-width:900px){
  .elementor .sm-hero > .e-con-inner{display:flex;flex-direction:column}
  .elementor .sm-hero > .e-con-inner > .elementor-widget-image{order:-1;margin-bottom:2rem}
}

/* Medida de prosa.

   Elementor 4 escupe el texto del widget suelto, sin <p> ni envoltorio, y
   defiende el widget con
     .elementor.elementor .e-con > .elementor-widget{max-width:100%}
   que es 0,4,0 y se encola después que esta hoja. Así que aquí hay que
   duplicar la clase para llegar a 0,5,0. Es fea, pero es la única que gana
   sin `!important`, y `!important` en una medida de texto se paga caro el
   día que haya que ajustarla en una página concreta.

   En el hero NO se pone: la retícula a dos ya deja la columna en unos 52
   caracteres, que es la medida buena. Se defiende solo. */
.elementor.elementor .sm-credibilidad.sm-credibilidad .elementor-widget-text-editor{max-width:38ch}
.elementor.elementor .sm-coleccion.sm-coleccion .elementor-widget-text-editor,
.elementor.elementor .sm-recogida.sm-recogida .elementor-widget-text-editor,
.elementor.elementor .sm-modelo.sm-modelo .elementor-widget-text-editor{max-width:62ch}
.elementor.elementor .sm-tramos.sm-tramos .elementor-widget-text-editor{max-width:52ch}
.sm-hero .elementor-widget-image img{
  width:100%; aspect-ratio:4 / 3.4; object-fit:cover;
  background:var(--sm-plate); border-radius:0;
}

@keyframes sm-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes sm-revela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* Animación CSS, no clase que espere a un script: si el JS no corre, la
   página se queda en su estado final y legible. */
.sm-sube{animation:sm-sube .62s var(--sm-sale) both}
.sm-sube--1{animation-delay:60ms}
.sm-sube--2{animation-delay:140ms}
.sm-sube--3{animation-delay:220ms}
.sm-revela{animation:sm-revela .82s var(--sm-recorrido) 140ms both}

/* --- Medidas de prosa en las secciones de la portada -------------------- */
.sm-confianza p,
.sm-confianza .elementor-widget-text-editor{margin:0;font-size:var(--sm-small)}
.sm-credibilidad h3,
.sm-credibilidad h3.elementor-heading-title{
  font-family:var(--sm-font);font-size:1rem;font-weight:600;letter-spacing:.01em;
}
.sm-credibilidad p,
.sm-credibilidad .elementor-widget-text-editor{max-width:38ch}
.sm-coleccion .elementor-widget-text-editor,
.sm-recogida .elementor-widget-text-editor,
.sm-modelo .elementor-widget-text-editor{max-width:62ch}
.sm-tramos .elementor-widget-text-editor{max-width:52ch}

/* Los tres tramos de precio: cifras tabulares para que las comas se alineen */
.sm-tabla-tramos{
  font-variant-numeric:tabular-nums; line-height:2;
  border-top:1px solid var(--sm-line); padding-top:1rem; margin-top:.5rem;
}

/* La rejilla de la portada no lleva el margen que Woo pone en la tienda */
.sm-coleccion ul.products{margin-block:1.5rem 0}

/* Los pasos del encargo. Numerados porque SÍ son una secuencia. */
.sm-paso{
  display:grid;grid-template-columns:44px 1fr;gap:1.25rem;
  padding:1.25rem 0;border-top:1px solid rgba(252,250,246,.16);
}
.sm-paso:last-of-type{border-bottom:1px solid rgba(252,250,246,.16)}
.sm-paso__n{
  font-family:var(--sm-display-font);font-size:1.75rem;line-height:1;
  color:var(--sm-acc);
}

/* ==========================================================================
   CONTACTO
   --------------------------------------------------------------------------
   El argumento de esta página no es un formulario: es que no hay horario de
   tienda. Se queda por WhatsApp a la hora que le venga al cliente. Eso va
   escrito, no insinuado.
   ========================================================================== */
.sm-contacto-hero .elementor-widget-text-editor{max-width:60ch}

@media (min-width:901px){
  .elementor .sm-contacto > .e-con-inner{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    column-gap:clamp(2.5rem,5vw,6rem);
    align-items:start;
  }
}
.sm-contacto__canales,
.sm-contacto__taller{display:flex;flex-direction:column;gap:0.75rem}
.sm-contacto__taller{
  background:var(--sm-plate);
  padding:clamp(1.75rem,3vw,2.5rem);
}
.sm-contacto h2{margin-top:1.5rem}
.sm-contacto h2:first-child{margin-top:0}
.sm-contacto h3{margin-top:1.25rem}
.sm-contacto .elementor-widget-button{align-self:flex-start;margin-top:1rem}
.sm-contacto .elementor-button{width:auto}

/* Dato pendiente de confirmar. Se ve que falta, no se disimula. */
.sm-reponer{
  border-bottom:1px dotted var(--sm-acc-text);
  color:var(--sm-acc-text);
}

/* El reset hereda `ul{list-style:none}` para los menús, pero eso también se
   llevaba las viñetas de las listas del contenido. Se devuelven donde hay
   prosa de verdad. */
.elementor-widget-text-editor ul,
.entry-content ul,
.woocommerce-product-details__short-description ul,
.term-description ul{list-style:disc;padding-left:1.35em;margin-block:0.5rem}
.elementor-widget-text-editor ol,
.entry-content ol{list-style:decimal;padding-left:1.5em;margin-block:0.5rem}
.elementor-widget-text-editor li,
.entry-content li{margin-bottom:0.35rem;max-width:62ch}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------------
   La v2 mataba TODA animación con .01ms, incluidos los indicadores de carga
   que sí informan. Aquí se retira el desplazamiento y se conservan opacidad
   y color, que es lo que pide la norma.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.12s !important;scroll-behavior:auto !important}
  .sm-sube,.sm-revela{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}
  .sm-btn:active,.elementor-button:active,
  .woocommerce a.button:active,.woocommerce button.button:active{transform:none !important}
}