/* ===========================================================================
   MATERIA · Webs
   ---------------------------------------------------------------------------
   Lo que separa una web "correcta" de una que da ganas de entrar al sitio.

   Aqui vive todo lo que tiene TACTO: grano de papel, veta de madera, poro de
   piedra, brasa que respira, cinta adhesiva, bordes rasgados, sellos, notas
   manuscritas y fotos torcidas como si estuvieran pegadas en un corcho.

   REGLA DE ORO: cero imagenes externas. Todas las texturas son SVG en linea o
   gradientes CSS. Una textura que cuesta 400 KB no es textura, es un problema
   de carga. Todo esto junto pesa menos que una foto pequena.

   Referencias que se estan siguiendo, y no de memoria:
     · pizza-amici.nl (Awwwards HM, jul-2026): collage de polaroids rotadas,
       cartel esmaltado, nota de papel con cinta, manuscrita de acento, barra
       superior con datos, indicador de scroll circular punteado.
     · dishoom.com (Awwwards SOTD): fondo casi negro, imagen con vineta muy
       oscura, serif con mucho espaciado, cita centrada, botones de filo fino.
     · dennissnellenberg.com: titular que entra POR PALABRAS y boton magnetico.
   =========================================================================== */

/* ---------------------------------------------------------- 1. EL GRANO --
   Una sola capa de ruido sobre TODA la pagina. Es el truco mas barato y el
   que mas cambia la sensacion: quita el plano digital y deja algo impreso.
   Va en un pseudo-elemento fijo para que no se mueva con el scroll, como el
   grano de una pelicula. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grano-fuerza, .5);
  background-image: var(--textura-grano);
  background-size: 220px 220px;
  mix-blend-mode: var(--grano-mezcla, multiply);
}

/* Todo lo que tenga que quedar por encima del grano necesita capa propia. */
.cabecera, .barra-movil, .demo-aviso, .aviso-top { z-index: 60; }

/* ------------------------------------------------------ 2. LOS FONDOS --
   Cada superficie tiene su material. No son colores planos: son gradientes
   superpuestos que simulan poro, veta y luz rasante. */

/* Papel: para las secciones claras. Tono desigual, como una hoja de verdad. */
/* CADA SUPERFICIE MANDA SOBRE SU TEXTO.
   Antes el color lo fijaba la seccion (.resenas era clara porque "siempre" iba
   sobre piedra). Al reordenar las secciones, esa suposicion se rompio y quedo
   texto crema sobre papel crema: invisible. Ahora el color depende del FONDO,
   que es lo unico que de verdad lo determina. */
.superficie-papel {
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --texto-tenue: color-mix(in srgb, var(--tinta) 45%, transparent);
  --linea-sup: var(--linea);
  color: var(--texto);
  background-color: var(--fondo-alt);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--marca) 5%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, color-mix(in srgb, var(--acento) 6%, transparent), transparent 55%),
    var(--textura-fibra);
}

/* Piedra: para las secciones oscuras. Poro irregular y luz que entra de un
   lado, que es lo que hace que una pared parezca pared. */
.superficie-piedra {
  --verde-abierto: #8FDC98;
  --rojo-cerrado: #F5A99C;
  --texto: var(--tinta-clara);
  --texto-suave: color-mix(in srgb, var(--tinta-clara) 76%, transparent);
  --texto-tenue: color-mix(in srgb, var(--tinta-clara) 45%, transparent);
  --linea-sup: color-mix(in srgb, var(--tinta-clara) 20%, transparent);
  color: var(--texto);
  background-color: var(--fondo-hondo);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse 50% 50% at 85% 90%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 60%),
    var(--textura-poro);
}

/* Madera: veta fina en diagonal muy suave. Solo para el tema asador y para
   franjas estrechas, porque a pantalla completa cansa. */
.superficie-madera {
  --verde-abierto: #8FDC98;
  --rojo-cerrado: #F5A99C;
  --texto: var(--tinta-clara);
  --texto-suave: color-mix(in srgb, var(--tinta-clara) 78%, transparent);
  --texto-tenue: color-mix(in srgb, var(--tinta-clara) 50%, transparent);
  --linea-sup: color-mix(in srgb, var(--tinta-clara) 22%, transparent);
  color: var(--texto);
  /* Oscurecida sobre el acento: el verde o el roble a secas dan 2,5 de
     contraste con el texto crema, y hacen falta 4,5. */
  background-color: color-mix(in srgb, var(--acento) 58%, #000);
  background-image:
    repeating-linear-gradient(94deg,
      rgba(0,0,0,.13) 0 1px,
      transparent 1px 5px,
      rgba(255,255,255,.045) 5px 6px,
      transparent 6px 13px),
    linear-gradient(180deg, rgba(0,0,0,.22), transparent 40%);
}

/* ------------------------------------------------------ 3. LA BRASA --
   Un resplandor que late despacio detras del hero. Es el latido del sitio:
   sin el, un asador es una foto oscura; con el, hay fuego encendido.
   La amplitud la manda el dial de movimiento, como todo lo que se mueve solo. */

.brasa {
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 100% at 50% 100%,
    color-mix(in srgb, var(--marca-viva) 55%, transparent) 0%,
    color-mix(in srgb, var(--marca) 26%, transparent) 35%,
    transparent 72%);
  filter: blur(28px);
  animation: respirar 7s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: calc(.55 + .12 * var(--motion-gain, 1)); transform: scale(1); }
  50%      { opacity: calc(.55 + .34 * var(--motion-gain, 1));
             transform: scale(calc(1 + .08 * var(--motion-gain, 1))); }
}

/* Con el movimiento apagado no late, pero el fuego sigue ahi: se ve un
   resplandor fijo. Apagar el movimiento no es apagar el diseno. */
html:not(.motion) .brasa { animation: none; opacity: .6; }

/* ------------------------------------------- 4. BORDES RASGADOS --
   El corte entre una seccion clara y una oscura no es una linea recta. Es un
   papel roto. Se dibuja con una mascara SVG, asi que no hay imagen que cargar
   y se adapta a cualquier ancho. */

.rasgado-arriba { position: relative; }
/* `background: inherit` NO sirve aqui: inherit copia el fondo del PADRE, no el
   del propio elemento, asi que el diente salia transparente y no se veia el
   corte. Cada superficie declara su color abajo. */
.rasgado-arriba::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 26px;
  -webkit-mask-image: var(--mascara-rasgado);
  mask-image: var(--mascara-rasgado);
  /* Se ESTIRA a todo el ancho en vez de repetirse. Repitiendo, el final del
     dibujo no encajaba con su principio y aparecia un escalon recto a partir
     de los 1200 px, justo en las pantallas grandes. */
  -webkit-mask-size: 100% 26px;
  mask-size: 100% 26px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateY(-25px);
  pointer-events: none;
}
.superficie-piedra.rasgado-arriba::before { background-color: var(--fondo-hondo); }
.superficie-papel.rasgado-arriba::before  { background-color: var(--fondo-alt); }
.superficie-madera.rasgado-arriba::before { background-color: var(--acento); }

/* ------------------------------------------------------- 5. LA CINTA --
   Trozo de cinta adhesiva translucida. Se pega a lo que se quiera con
   .con-cinta, y sirve para papeles, fotos y notas. */

.con-cinta { position: relative; }
.con-cinta::after {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 108px; height: 30px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(160deg,
    rgba(255,255,255,.42), rgba(232,222,200,.5) 45%, rgba(255,255,255,.3));
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  /* Los bordes de la cinta se rasgan de verdad, no se cortan rectos. */
  -webkit-mask-image: var(--mascara-cinta);
  mask-image: var(--mascara-cinta);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}
.con-cinta--izq::after { left: 22%; transform: translateX(-50%) rotate(-7deg); }
.con-cinta--der::after { left: 78%; transform: translateX(-50%) rotate(5deg); }

/* ------------------------------------------------------ 6. LA POLAROID --
   Foto con marco de papel, torcida y con sombra de objeto apoyado. Es el
   recurso de Pizza Amici y funciona porque parece algo que alguien PUSO ahi,
   no algo que un programa coloco en una rejilla. */

.polaroid {
  background: #FBF7EF;
  padding: 12px 12px 44px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.14),
    0 14px 34px rgba(0,0,0,.24);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.polaroid img { display: block; width: 100%; }
.polaroid figcaption {
  font-family: var(--manuscrita);
  font-size: 1.25rem;
  color: #3B342B;
  text-align: center;
  margin-top: 10px;
  line-height: 1;
}
/* La rotacion es movimiento no solicitado: la gradua el dial. */
.polaroid--izq  { transform: rotate(calc(-3.2deg * var(--motion-gain, 1))); }
.polaroid--der  { transform: rotate(calc(2.6deg * var(--motion-gain, 1))); }

/* OJO: el reveal termina con `transform: none`, y eso ENDEREZABA la foto justo
   al aparecer. La rotacion hay que devolverla despues del reveal, con la misma
   especificidad o mayor, o las polaroids salen rectas y el collage se pierde. */
html.motion [data-reveal].in.polaroid--izq { transform: rotate(calc(-3.2deg * var(--motion-gain, 1))); }
html.motion [data-reveal].in.polaroid--der { transform: rotate(calc(2.6deg * var(--motion-gain, 1))); }

.polaroid:hover,
html.motion [data-reveal].in.polaroid:hover {
  transform: rotate(0) translateY(-8px) scale(1.02);
  box-shadow: 0 24px 50px rgba(0,0,0,.32);
}

/* El marco recorta: sin el, el parallax saca la foto por debajo del papel. */
.polaroid__marco { display: block; overflow: hidden; }

/* Las opiniones tambien van torcidas, y el reveal tambien se las enderezaba.
   Mismo problema que las polaroids, misma solucion. */
html.motion [data-reveal].in.resena--izq { transform: rotate(calc(-1.5deg * var(--motion-gain, 1))); }
html.motion [data-reveal].in.resena--der { transform: rotate(calc(1.7deg * var(--motion-gain, 1))); }
html.motion [data-reveal].in.resena:hover { transform: rotate(0) translateY(-5px); }

/* --------------------------------------------------------- 7. EL SELLO --
   Chapa esmaltada, como el cartel de la fachada de un mesón. Se usa para el
   antetitulo del hero y para marcar un plato como especialidad. */

.sello {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.4rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: var(--cuerpo);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  position: relative;
}
/* Los dos remaches de la chapa. */
.sello::before, .sello::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}

.sello--esquina {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  background: var(--marca); color: var(--sobre-marca); border-color: transparent;
  font-size: .62rem; padding: .3rem .7rem;
  transform: rotate(calc(-4deg * var(--motion-gain, 1)));
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.sello--esquina::before, .sello--esquina::after { display: none; }

/* ---------------------------------------------------- 8. LA MANUSCRITA --
   Una nota escrita a mano. Se usa con cuentagotas: una o dos por pagina. Si
   se abusa, deja de ser un detalle y pasa a ser ruido. */

.manuscrita {
  font-family: var(--manuscrita);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  color: var(--marca-viva);
  transform: rotate(calc(-3deg * var(--motion-gain, 1)));
  display: inline-block;
}

/* Sobre piedra, el color de marca de un tema oscuro (granate, tomate, rojo)
   se hunde en el fondo. La manuscrita pasa al tono claro de la familia. */
.manuscrita { color: var(--marca); }
.superficie-piedra .manuscrita { color: var(--acento-claro); }

/* Encima de una foto, el color de marca no vale: el granate de este tema se
   confunde con la madera y con las servilletas del propio comedor. Sobre
   oscuro va el tono CLARO de la familia, con sombra que lo despega, y con
   aire suficiente para no chocar con la cola del titular. */
.hero__manuscrita {
  color: var(--acento-claro);
  margin-top: 1.1rem;
  text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 10px 26px rgba(0,0,0,.7);
}

/* --------------------------------------------- 9. LA FLECHA DE SCROLL --
   Circulo punteado que gira despacio con una flecha dentro. Dice "sigue
   bajando" sin escribirlo. Tomado de Pizza Amici. */

.bajar {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--tinta-clara);
}
.bajar::before {
  content: "";
  position: absolute; inset: 0;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
  opacity: .55;
  animation: girar 18s linear infinite;
}
.bajar svg { width: 17px; height: 17px; animation: caer 2.4s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes caer {
  0%, 100% { transform: translateY(calc(-3px * var(--motion-gain, 1))); }
  50%      { transform: translateY(calc(4px * var(--motion-gain, 1))); }
}
html:not(.motion) .bajar::before, html:not(.motion) .bajar svg { animation: none; }

/* --- HERO PARTIDO: una linea por la que cae un punto ----------------------
   Ni circulo ni flecha: una linea de 62 px y un punto que la recorre. El
   centro del hero partido ya lo ocupan el texto y la foto, asi que este se va
   al borde y crece hacia arriba en vez de a lo ancho.

   Sin palabra, a proposito: "La carta" en vertical ocupaba 114 px de alto y
   el indicador acababa midiendo 190, en un hero de 92svh. */
[data-hero="partido"] .bajar {
  /* Del lado del TEXTO, no sobre la foto: la mitad derecha es la fachada y
     ahi una linea fina se pierde entre la piedra. */
  bottom: 2.6rem; left: clamp(1.4rem, 4vw, 3.2rem); right: auto;
  transform: none;
  width: 12px; height: 62px;
  display: block;
}
[data-hero="partido"] .bajar::before {
  border: 0; border-radius: 0;
  inset: 0 auto 0 50%;
  width: 1px; height: 62px;
  margin-left: -.5px;
  background: currentColor;
  opacity: .3;
  animation: none;
}
/* El punto que recorre la linea. Se dibuja sobre el ::after para no gastar un
   elemento mas, y se para solo si el visitante pidio menos movimiento. */
[data-hero="partido"] .bajar::after {
  content: "";
  position: absolute; bottom: 0; left: 50%;
  width: 5px; height: 5px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
  animation: caer-linea 2.6s ease-in-out infinite;
}
[data-hero="partido"] .bajar svg { display: none; }
@keyframes caer-linea {
  0%       { transform: translateY(calc(-62px * var(--motion-gain, 1))); opacity: 0; }
  22%, 78% { opacity: 1; }
  100%     { transform: translateY(0); opacity: 0; }
}
html:not(.motion) [data-hero="partido"] .bajar::after { animation: none; bottom: 28px; }

/* EN MOVIL NO HAY INDICADOR, sea cual sea el hero: choca con la barra fija de
   llamar / WhatsApp / como llegar, que ocupa justo esa esquina.

   Y va AQUI, no en base.css ni en cartas.css, aunque el resto de reglas de
   movil vivan alli. Motivo: `[data-hero="partido"] .bajar` pesa 0,2,0 y
   `.bajar` pesa 0,1,0, asi que la variante ganaba aunque la otra estuviera
   dentro de un media query (un media query no suma peso). Y con el mismo peso
   gana la hoja que carga la ultima, que es esta. La variante y su excepcion
   van juntas. */
@media (max-width: 759px) {
  [data-hero] .bajar,
  .bajar { display: none; }
}

/* El hero PANORAMICO no lleva indicador, y esta bien asi: es una banda baja,
   no ocupa la pantalla entera, y la seccion siguiente ya se ve asomando. La
   regla que lo esconde vive en cartas.css. */

/* -------------------------------------- 10. TITULAR POR PALABRAS --
   Cada palabra sube desde debajo de su propia linea, con un retraso en
   cascada. Es la firma de dennissnellenberg.com y es lo que hace que un
   titular "aterrice" en vez de aparecer.

   La mascara (overflow:hidden por palabra) es lo que da el efecto de que el
   texto sale de detras del papel. */

.porpalabras { display: inline-block; }

/* EL PADDING DE ABAJO NO ES DECORACION, ES LO QUE SALVA LA "g".
   La mascara recorta en el borde de la caja, y con line-height .96 esa caja
   es MAS BAJA que la letra: a "Fragua" se le cortaba el rabo de la g por la
   mitad. Se le da aire abajo y se le quita la misma cantidad de margen, asi
   que el recorte baja pero el hueco que ocupa el titular no cambia ni un
   pixel. Lo mismo por arriba, que las tildes de un titular en mayusculas
   (LOGROÑO, MESÓN) se comen igual. */
.porpalabras .pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: .12em .22em;
  margin-block: -.12em -.22em;
}
.porpalabras .pal > span {
  display: inline-block;
  /* El desplazamiento de entrada lleva sumado ese aire: sin sumarlo, la
     palabra asomaba por debajo antes de empezar la animacion. */
  transform: translateY(calc(105% + .22em)) rotate(4deg);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--p, 0) * 85ms);
}
.porpalabras.in .pal > span { transform: none; }
/* Sin JavaScript no hay .pal: el titular se ve entero y ya esta. */

/* ------------------------------------------------- 11. LA VINETA --
   Oscurecer las esquinas de una imagen concentra la mirada en el centro. Es
   lo que hace que el hero de Dishoom parezca cine y no una foto de stock. */

.vineta::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    /* 1. Un velo plano que NO depende de la foto. Es el que salva el peor caso:
          medido sobre la foto del comedor, el brillo maximo detras del titular
          era 251 sobre 255, o sea texto crema sobre pared blanca. La media
          enganaba (90) porque solo miraba el promedio. */
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
    /* 2. Banda extra bajo el titular, que es donde cae el texto grande. */
    linear-gradient(180deg, transparent 12%, rgba(0,0,0,.5) 38%, rgba(0,0,0,.5) 68%, transparent 88%),
    /* 3. La vineta propiamente dicha, que cierra las esquinas. */
    radial-gradient(ellipse 92% 78% at 50% 44%, transparent 30%, rgba(0,0,0,.75) 100%),
    /* 4. Oscurecido de arriba y de abajo, para cabecera y para el pie. */
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 34%, rgba(0,0,0,.88) 100%);
  pointer-events: none;
}

/* ----------------------------------------------- 12. BOTON MAGNETICO --
   El boton se inclina hacia el cursor y vuelve con rebote. Movimiento
   provocado por el usuario, asi que NO lo gradua el dial (regla 3 de la
   politica de la casa): quien lo mueve es su propia mano. */

.magnetico { will-change: transform; }

/* ------------------------------------------------- 13. LINEA DE CARTA --
   Los puntitos entre el nombre del plato y el precio. Es el detalle que hace
   que una lista de platos se lea como una carta y no como una tienda. */

.puntos {
  flex: 1;
  height: 1px;
  margin: 0 .6rem;
  align-self: flex-end;
  margin-bottom: .42rem;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  opacity: .38;
}


/* ==================================================== 14. VALORANOS --
   La seccion que le pide la resena al cliente. Va sobre madera para que
   destaque de las de alrededor, y el QR va con cinta, como una pegatina
   puesta a mano.

   Las estrellas se encienden en cascada al pasar el raton por encima de
   cualquiera de ellas: es una invitacion, no un selector. Todas llevan al
   mismo enlace. */


.valoranos__caja {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  text-align: center;
}
@media (min-width: 860px) {
  /* auto/auto con space-between en vez de fracciones: con 1.5fr la columna de
     texto se estiraba mucho mas de lo que el texto ocupa y quedaba un agujero
     en medio de la seccion. */
  .valoranos__caja {
    grid-template-columns: auto auto;
    justify-content: space-between;
    text-align: left;
  }
  .valoranos__texto { max-width: 34rem; }
}

.valoranos h2 { margin-bottom: .8rem; }
.valoranos__texto p {
  color: var(--texto-suave);
  max-width: 46ch;
  margin-bottom: 1.6rem;
}
@media (max-width: 859px) {
  .valoranos__texto p { margin-inline: auto; }
}

/* --- Las cinco estrellas ------------------------------------------------ */

.estrellas {
  display: flex; gap: .4rem; justify-content: center;
  margin-bottom: 1.8rem;
}
@media (min-width: 860px) { .estrellas { justify-content: flex-start; } }

.estrellas a {
  display: grid; place-items: center;
  width: 48px; height: 48px;          /* objetivo tactil de WCAG 2.5.8 */
}
.estrellas svg {
  width: 36px; height: 36px;
  fill: color-mix(in srgb, var(--texto) 26%, transparent);
  transition: fill .28s var(--curva), transform .35s var(--curva);
}

/* Al entrar el raton en el grupo se encienden TODAS, en cascada de izquierda
   a derecha. El retraso lo pone el propio orden, sin JavaScript. */
.estrellas:hover svg { fill: var(--marca-viva); transform: scale(1.12) rotate(-4deg); }
.estrellas a:nth-child(1) svg { transition-delay: 0ms; }
.estrellas a:nth-child(2) svg { transition-delay: 60ms; }
.estrellas a:nth-child(3) svg { transition-delay: 120ms; }
.estrellas a:nth-child(4) svg { transition-delay: 180ms; }
.estrellas a:nth-child(5) svg { transition-delay: 240ms; }

/* --- El QR --------------------------------------------------------------- */

.qr {
  background: #FBF7EF;
  padding: 14px 14px 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 18px 36px -16px rgba(0,0,0,.55);
  transform: rotate(calc(2deg * var(--motion-gain, 1)));
  justify-self: center;
  max-width: 220px;
}
.qr img { width: 100%; height: auto; display: block; }
.qr figcaption {
  font-family: var(--manuscrita);
  font-size: 1.15rem;
  color: #3B342B;
  text-align: center;
  margin-top: 6px;
  line-height: 1;
}


/* --- Valoranos en movil --------------------------------------------------
   En un movil no hay raton, asi que las estrellas nunca se encenderian: se
   dejan encendidas de salida. Y el QR se encoge, porque desde el propio movil
   no se puede escanear: ahi esta para que el dueno lo vea y lo imprima. */

@media (max-width: 759px) {
  .estrellas a { width: 44px; height: 44px; }
  .estrellas svg { width: 32px; height: 32px; fill: var(--marca-viva); }
  .qr { max-width: 158px; padding: 10px 10px 8px; }
  .qr figcaption { font-size: 1rem; }
}

@media (hover: none) {
  /* Sin puntero fino tampoco hay hover, aunque la pantalla sea grande. */
  .estrellas svg { fill: var(--marca-viva); }
}

/* De donde sale cada opinion. Va dicho en la propia firma porque son de Google,
   no recogidas aqui, y quien lo lee tiene derecho a saberlo. */
.resena__fuente {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: .15rem;
}