i18n(es): Update styling.mdx (withastro#7140)

* update pages

* update page

---------

Co-authored-by: Paul Valladares <[email protected]>

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

@@ -24,7 +24,7 @@ Estilar un componente de Astro es tan fácil como agregar una etiqueta `<style>`
 Las reglas de CSS en Astro `<style>` tienen **un alcance local de forma predeterminada**. Los estilos con alcance local se compilan para que sólo se apliquen al HTML escrito dentro de ese mismo componente. El CSS escrito dentro de un componente de Astro se encapsula automáticamente dentro del mismo.
 
 Este CSS:
-```astro title="index.astro"
+```astro title="src/pages/index.astro"
 <style>
   h1 { 
     color: red; 
@@ -261,7 +261,7 @@ Cuando se aplican reglas conflictivas de CSS a un mismo elemento, los navegadore
 
 Si una regla es más _específica_ que otra, no importa dónde aparezca la regla de CSS, su valor tendrá prioridad:
 
-```astro title="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 <style>
   h1 { color: red }
   div > h1 {
@@ -276,7 +276,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="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 <style>
   h1 { color: purple }
   h1 { color: red }
@@ -298,12 +298,12 @@ Las reglas de CSS de Astro son evaluadas en este orden de aparición:
 
 Usar [estilos locales](#estilos-locales) no incrementa la _especificidad_ de tu CSS, pero siempre vendrán al final en el _orden de aparición_. Por lo tanto, tomarán prioridad sobre otros estilos de la misma especificidad. Por ejemplo, si importas una hoja de estilos que conflictúe con un estilo local, el valor del estilo local será aplicado:
 
-```css title="hazlo-morado.css"
+```css title="src/components/hazlo-morado.css"
 h1 {
   color: purple;
 }
 ```
-```astro title="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 ---
 import "./hazlo-morado.css"
 ---
@@ -319,12 +319,12 @@ import "./hazlo-morado.css"
 
 Si haces el estilo importado _más específico_, éste tendrá una mayor importancia que el estilo local:
 
-```css title="hazlo-morado.css"
+```css title="src/components/hazlo-morado.css"
 div > h1 {
   color: purple;
 }
 ```
-```astro title="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 ---
 import "./hazlo-morado.css"
 ---
@@ -342,17 +342,17 @@ import "./hazlo-morado.css"
 
 Cuando importas múltiples hojas de estilo en un componente de Astro, las reglas de CSS son evaluadas en el orden en que son importadas. Una mayor especificidad siempre determinará qué estilos mostrar, no importa cuándo es evaluado el CSS. Pero, cuando haya estilos conflictivos que tengan la misma especificidad, el _último estilo importado_ gana:
 
-```css title="hazlo-morado.css"
+```css title="src/components/hazlo-morado.css"
 div > h1 {
   color: purple;
 }
 ```
-```css title="hazlo-verde.css"
+```css title="src/components/hazlo-verde.css"
 div > h1 {
   color: green;
 }
 ```
-```astro title="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 ---
 import "./hazlo-verde.css"
 import "./hazlo-morado.css"
@@ -369,15 +369,15 @@ import "./hazlo-morado.css"
 
 Mientras que las etiquetas `<style>` son locales y solo aplican al componente donde se las declara, puede "filtrarse" CSS _importado_ a otros componentes. Al importar un componente se aplica cualquier CSS que este importe, incluso si el componente nunca es usado:
 
-```astro title="ComponenteMorado.astro"
+```astro title="src/components/ComponenteMorado.astro"
 ---
 import "./hazlo-morado.css"
 ---
 <div>
   <h1>Yo importo CSS morado.</h1>
 </div>
 ```
-```astro title="MiComponente.astro"
+```astro title="src/components/MiComponente.astro"
 ---
 import "./hazlo-verde.css"
 import ComponenteMorado from "./ComponenteMorado.astro";
@@ -399,7 +399,7 @@ Un patrón común en Astro es importar CSS global dentro de un [componente Plant
 ### Etiquetas link
 Las hojas de estilo cargadas mediante [etiquetas link](#carga-una-hoja-de-estilos-a-través-de-etiquetas-de-link) son evaluadas en orden, antes que cualquier otro estilo en un archivo de Astro. Por lo tanto, esos estilos tendrán menor importancia que las hojas de estilo importadas y los estilos locales:
 
-```astro title="index.astro"
+```astro title="src/pages/index.astro"
 ---
 import "../components/hazlo-morado.css"
 ---
@@ -562,7 +562,7 @@ Sin embargo, cuando varias páginas comparten estilos, algunos fragmentos compar
 
 Puedes configurar el tamaño en el que las hojas de estilo se vincularán externamente (en bytes) utilizando la opción de compilación `assetsInlineLimit` en Vite. Ten en cuenta que esta opción también afecta la inclusión en línea de scripts e imágenes.
 
-```js
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
@@ -576,7 +576,7 @@ export default defineConfig({
 
 Si prefieres que todos los estilos del proyecto sigan siendo externos, puedes configurar la opción de compilación `inlineStylesheets`.
 
-```js
+```js title="astro.config.mjs"
 import { defineConfig } from 'astro/config';
 export default defineConfig({
   build: {