i18n(es): update styling.mdx

src/content/docs/es/guides/styling.mdx

@@ -3,11 +3,12 @@ title: Estilos y CSS
 description: Aprende a diseñar componentes en Astro con estilos locales, CSS externo y herramientas Sass y PostCSS
 i18nReady: true
 ---
+
 import Since from '~/components/Since.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 import ReadMore from '~/components/ReadMore.astro'
 import { Steps } from '@astrojs/starlight/components';
-import RecipeLinks from "~/components/RecipeLinks.astro";
+import RecipeLinks from '~/components/RecipeLinks.astro';
 
 Astro fue diseñado para que estilar y escribir CSS sea pan comido. Escribe tu propio CSS directamente dentro de un componente de Astro o importa tu biblioteca de CSS favorita como [Tailwind][tailwind]. También es compatible con lenguajes de estilo avanzados como [Sass][sass] y [Less][less].
 
@@ -39,11 +40,13 @@ Este CSS:
 ```
 
 Se compila en esto:
+
 ```astro
 <style>
   h1[data-astro-cid-hhnqfkh6] {
-     color: red;
+    color: red;
   }
+
   .text[data-astro-cid-hhnqfkh6] {
     color: blue;
   }
@@ -79,7 +82,7 @@ También puedes mezclar reglas de CSS globales y locales en la misma etiqueta `<
     color: blue;
   }
 </style>
-<h1>Titulo</h1>
+<h1>Título</h1>
 <article><slot /></article>
 ```
 
@@ -114,8 +117,8 @@ La etiqueta `<style>` de Astro puede hacer referencia a cualquier variable CSS d
 
 ```astro title="src/components/DefineVars.astro" /define:vars={{.*}}/ /var\\(.*\\)/
 ---
-const foregroundColor = "rgb(221 243 228)";
-const backgroundColor = "rgb(24 121 78)";
+const foregroundColor = 'rgb(221 243 228)';
+const backgroundColor = 'rgb(24 121 78)';
 ---
 <style define:vars={{ foregroundColor, backgroundColor }}>
   h1 {
@@ -147,7 +150,7 @@ const { class: className, ...rest } = Astro.props;
 
 ```astro title="src/pages/index.astro"
 ---
-import MyComponent from "../components/MyComponent.astro"
+import MyComponent from '../components/MyComponent.astro';
 ---
 <style>
   .red {
@@ -231,7 +234,6 @@ Esta es una [configuración específica de Vite](https://vite.dev/config/ssr-opt
 
 Ahora, puedes importar `package-name/normalize`. Esto será incluido y optimizado por Astro como cualquier otra hoja de estilos local.
 
-
 ```astro {3}
 ---
 // src/pages/random-page.astro
@@ -278,6 +280,7 @@ Si una regla es más _específica_ que otra, no importa dónde aparezca la regla
 ```
 
 Si dos reglas tienen la misma especificidad, entonces el _orden de aparición_ es evaluado, y el último valor de la regla tomará prioridad:
+
 ```astro title="src/components/MiComponente.astro"
 <style>
   h1 { color: purple }
@@ -302,15 +305,15 @@ Dependiendo del valor que elijas para [`scopedStyleStrategy`](/es/reference/conf
 
 Sin embargo, los [estilos con alcance](#estilos-locales) siempre aparecerán al final en el orden de aparición. Por lo tanto, estos estilos tendrán prioridad sobre otros estilos con la misma especificidad. Por ejemplo, si importas una hoja de estilos que entra en conflicto con un estilo con alcance, se aplicará el valor del estilo con alcance:
 
-
 ```css title="src/components/hazlo-morado.css"
 h1 {
   color: purple;
 }
 ```
+
 ```astro title="src/components/MiComponente.astro"
 ---
-import "./hazlo-morado.css"
+import './hazlo-morado.css';
 ---
 <style>
   h1 { color: red }
@@ -324,15 +327,15 @@ import "./hazlo-morado.css"
 
 Los estilos con alcance serán sobrescritos si el estilo importado es más específico. El estilo con mayor especificidad tendrá prioridad sobre el estilo con alcance:
 
-
 ```css title="src/components/hazlo-morado.css"
 #intro {
   color: purple;
 }
 ```
+
 ```astro title="src/components/MyComponent.astro"
 ---
-import "./hazlo-morado.css"
+import './hazlo-morado.css';
 ---
 <style>
   h1 { color: red }
@@ -353,15 +356,17 @@ div > h1 {
   color: purple;
 }
 ```
+
 ```css title="src/components/hazlo-verde.css"
 div > h1 {
   color: green;
 }
 ```
+
 ```astro title="src/components/MiComponente.astro"
 ---
-import "./hazlo-verde.css"
-import "./hazlo-morado.css"
+import './hazlo-verde.css';
+import './hazlo-morado.css';
 ---
 <style>
   h1 { color: red }
@@ -377,16 +382,17 @@ Mientras que las etiquetas `<style>` son locales y solo aplican al componente do
 
 ```astro title="src/components/ComponenteMorado.astro"
 ---
-import "./hazlo-morado.css"
+import './hazlo-morado.css';
 ---
 <div>
   <h1>Yo importo CSS morado.</h1>
 </div>
 ```
+
 ```astro title="src/components/MiComponente.astro"
 ---
-import "./hazlo-verde.css"
-import ComponenteMorado from "./ComponenteMorado.astro";
+import './hazlo-verde.css';
+import ComponenteMorado from './ComponenteMorado.astro';
 ---
 <style>
   h1 { color: red }
@@ -408,7 +414,7 @@ Las hojas de estilo cargadas mediante [etiquetas link](#carga-una-hoja-de-estilo
 
 ```astro title="src/pages/index.astro"
 ---
-import "../components/hazlo-morado.css"
+import '../components/hazlo-morado.css';
 ---
 
 <html lang="en">
@@ -468,7 +474,7 @@ Importa este archivo en las páginas donde quieras que se aplique Tailwind. Esto
 
 ```astro title="src/layouts/Layout.astro"
 ---
-import "../styles/global.css";
+import '../styles/global.css';
 ---
 ```
 
@@ -626,16 +632,15 @@ npm install lightningcss
 Actualiza tu configuración de `vite` en `astro.config.mjs`:
 
 ```js title="astro.config.mjs" ins={4-8}
-import { defineConfig } from 'astro/config'
+import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   vite: {
     css: {
-      transformer: "lightningcss",
-    },
-  },
-})
-
+      transformer: 'lightningcss',
+    }
+  }
+});
 ```
 
 ### En componentes de framework
@@ -708,14 +713,15 @@ export default defineConfig({
     build: {
       assetsInlineLimit: 1024,
     }
-  };
+  }
 });
 ```
 
 Si prefieres que todos los estilos del proyecto sigan siendo externos, puedes configurar la opción de compilación `inlineStylesheets`.
 
 ```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
+
 export default defineConfig({
   build: {
     inlineStylesheets: 'never'